Forums » Help » Clicking Entity

I read through the forums and pulled out what I could to make my entities clickable and the code worked great. I am at point where I am making it so my entities can spin around, and when the images are spinning I am only able to click inside the original area of the entity and not where the entity image currently is.

	    	if (ig.input.pressed('click') ) {
			var found = false;
			for( var i =0; i < this.entities.length; i++ ) {
				if ( this.entities[i] instanceof EntityShip ) {
					if (this.entities[i].inFocus()) {
						this.setSelected(this.entities[i]);
						found = true;
					}
				}
			}
			if ( found == false ) {
				this.setSelected(null);
			}
    		}

	inFocus: function() {
		return (
	       		(this.pos.x <= (ig.input.mouse.x + ig.game.screen.x)) &&
	       		((ig.input.mouse.x + ig.game.screen.x) <= this.pos.x + this.size.x) &&
	       		(this.pos.y <= (ig.input.mouse.y + ig.game.screen.y)) &&
	       		((ig.input.mouse.y + ig.game.screen.y) <= this.pos.y + this.size.y)
	    	);
	 },

Here is what one of my entities looks like

EntityCarrier = EntityShip.extend({
	
	size: {x:154, y:32},
	offset: {x:0, y:0},
	name: 'Aircraft Carrier',

	animSheet: new ig.AnimationSheet( 'media/ships/ship-aircraftcarrier.png', 154, 32 ),
	
	bounciness: 0,
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );
	},

	update: function() {
		this.currentAnim.angle += .01;
		if ( this.currentAnim.angle > 360 ) {
			this.currentAnim.angle = 0;
		}
		this.parent();
	}
});

I tried implementing Box2D so that I could use the debugger plugin I found in the forums but that does not seem to do anything so I am not sure if I implemented it correctly.

EntityShip = ig.Entity.extend({
	
	size: {x:25, y:122},
	checkAgainst: ig.Entity.TYPE.NONE,
	collides: ig.Entity.COLLIDES.NEVER, // Collision is already handled by Box2D!
	bounciness: 0,
	name: '',
	selected: false,
	angle: 0,
	type: ig.Entity.TYPE.B,

	init: function( x, y, settings ) {
		this.parent( x, y, settings );
		
		this.addAnim( 'idle', 1, [0] );
	},

	inFocus: function() {
		return (
	       		(this.pos.x <= (ig.input.mouse.x + ig.game.screen.x)) &&
	       		((ig.input.mouse.x + ig.game.screen.x) <= this.pos.x + this.size.x) &&
	       		(this.pos.y <= (ig.input.mouse.y + ig.game.screen.y)) &&
	       		((ig.input.mouse.y + ig.game.screen.y) <= this.pos.y + this.size.y)
	    	);
	 },

	createBody: function() {        
	    var bodyDef = new b2.BodyDef();
	    bodyDef.position.Set(
	        (this.pos.x + this.size.x / 2) * b2.SCALE,
	        (this.pos.y + this.size.y / 2) * b2.SCALE
	    );
	        
	    this.body = ig.world.CreateBody(bodyDef);
	
	    // These two lines define the shape
	    // e.g. b2.PolygonDef, b2.CircleDef
	    var shapeDef = new b2.CircleDef();
	    shapeDef.radius = 8 * b2.SCALE;
	        
	    shapeDef.density = 1;
	    this.body.CreateShape(shapeDef);
	    this.body.SetMassFromShapes();    
	}
});

If you're using Box2D for the entity, it won't extend ig.Entity but ig.Box2DEntity instead.

Thanks for catching that. I got the debug working properly. But after countless research, I found that the only way to move an entity with Box2D is with applyforce/applyimpulse. I need to be able to directly state where and when to move an entity so I took Box2D out completely.

Now I am still left with the problem that the Entity itself does not rotate and its defined bounds remain constant while an animation image is rotating and changing. For long rectangular items this is obviously very frustrating as I can not click the image when it is outside of the entities defined bound. I also can not properly drag/drop an item to the edge of a screen when it is rotated.

Has anyone dealt with this issue? Or perhaps someone can tell me how to force Box2D to do a simple drag and drop?

For Box2d drag and drops, the mousejoint is your friend. Plus b2d is a must if you want to do collision detection for rotated shapes easily (not to mention non-rectangular ones).

Back to my original problem, how do I click on a rotated image with Box2D?

After a lot of research combined with trial and error, I figured out how to select an entity from a shape bound area.

	    	if (ig.input.pressed('click') ) {
			var found = false;
			var aabb = new b2.AABB();
			var px = (ig.input.mouse.x+ig.game.screen.x)*b2.SCALE;
			var py = (ig.input.mouse.y+ig.game.screen.y)*b2.SCALE;
 	  	 	aabb.lowerBound.Set( px - 5*b2.SCALE, py - 5*b2.SCALE);
    			aabb.upperBound.Set( px + 5*b2.SCALE, py + 5*b2.SCALE);
    			var myArray = new Array(10);
    			var entitiesInRange = ig.world.Query(aabb, myArray, 1);

                	if(entitiesInRange > 0){               
                    		for(var i = 0; i < entitiesInRange; i++){                        
                        		if(!(myArray[i] === undefined) && !(myArray[i] === null)){
                            			var ship = myArray[i];
						for( var e =0; e < this.entities.length; e++ ) {
							if ( ship.m_body == this.entities[e].body ) {
								//console.log(this.entities[e].name);
								this.setSelected(this.entities[e]);
								found = true;
							}
						}
					}
				}
			}
			if ( found == false ) {
				this.setSelected(null);
			}
    		}

This however only selectes based on the AABB box area and not the shape area. I still have not figured out how to select specifically on the shape.