Forums » Help » How to detect entity dragged?

I was wondering how I would be able to detect if an entity is being dragged on a mobile device?

Currently I know I can bind the touch event like this:
ig.input.bind(ig.KEY.MOUSE1,"CanvasTouch")

however, I don't know how to bind that to an entity that I want to follow the mouse around when I drag?

Thanks!

You can't directly do that. The canvas is a paint canvas, it has no concept of what an entity is, other than it's been told to draw a given bunch of pixels on it.

What you can do is check for the mouse being pressed, check if there's an entity under the mouse cursor (go through the list of entities, if you're in the game object, it'll be this.entities, otherwise you can reference it from ig.game.entities), and then set a flag that you're moving that entity.

Then, during that entity's update step later on, update its pos.x and pos.y to refer to the mouse co-ordinates.

Sorry I'm really new to impact, can you tell explain how would I check to see if an entity is under the mouse cursor?

During the update() routine in the main game, check to see if ig.input.state() is true for the mouse button (it's in the docs, including how to get the x and y positions for the mouse)

Then, you can simply do something along the lines of:

for (var i = 0; i < this.entities.length; i++)
{
  var ent = this.entities[i];
  if (ent.pos.x <= ig.input.mouse.x && ent.pos.x + ent.size.x >= ig.input.mouse.x && ent.pos.y <= ig.input.mouse.y && ent.pos.y + ent.size.y >= ig.input.mouse.y)
  {
    // do something here since the mouse position is inside where this entity is
  }
}

Hi Arantor,

Thanks for the replies, however, I think there`s a bug either with appMobi or with impactjs, but for whatever reason, the ig.input.mouse.x is taking the screen`s x coordinates rather than canvas's...

for example, if my entity tile is at pos.x: 40 and pos.y: 45,
when I click on that same corner, ig.input.mouse.x returns (x,y): 217, 230
or something completely out of range.

It's important to note, I"m working in appmobi's emulator

I have no idea how appMobi does it, sorry.

in main.js , init(), define mousePressed: {x:0,y:0}, when you click, assign the down mouse value to the mousePressed;

isDrag:function(){
			var x_up = ig.input.mouse.x,y_up = ig.input.mouse.y;
        	var distance = Math.sqrt(Math.pow((ig.game.mousePressed.x - x_up),2)+Math.pow((ig.game.mousePressed.y - y_up),2));
        	if(distance > 5){//is drag,not click
        		return true;
        	}else{
        		return false;
        	}
		},

Hi congwang,

thanks for the code, but that's not so much the issue I'm having, the issue I"m having is that on my ipad2, I can't get a ig.input.mouse.x or y. The biolab game works fine, but it's using html divs as buttons instead of allowing people to interact with the canvas.