Forums » Code » How to use canvas touch for player movement (mobile)

We've been using ImpactJS at appMobi for a while. We wanted to share with you how we use canvas touches to move main characters on mobile games.

First, in the main.js file under the init function add this line

ig.input.bind('-1',"CanvasTouch")

Now go into the Entity that will be responding to the touches and put this code in the update function

if(ig.input.state("CanvasTouch"))
		{
		    nY = ig.input.mouse.y;
            nX = ig.input.mouse.x;

		    this.vel.y=nY;
		    this.vel.x=nX;
        }

From there you can manipulate the code to fit your exact need.

Nice! I assume you&039;ve limited the entity's speed with the #.maxVel.x/y properties? Otherwise the entity would probably just zip over the screen :)

Instead of the '-1' you could refer to name of that key to make it a bit more clear though:

ig.input.bind( ig.KEY.MOUSE1, "CanvasTouch" );

Opps, forgot the .maxVel code in the snippet XD

And thanks for the key name change, I'll update that. We put "-1" initially and just sort of left it there. We also have an example of this technique utilizing the Box2D plugin if anyone is interested. Just post on this thread and we'd be happy to share.

We love ImpactJs at appMobi and we just posted a video of us making a mobile game with the new Box2D plugin. As always, it works beautifully ( Thanks to Dominics hard work!).

The Box2D integration snippet would be much appreciated. I'm working on a physics learning game with a friend, (pulleys levers etc) and a mobile version would be excellent.

http://www.youtube.com/watch?v=Xax4aj6qgSM

Heres a video where we go through and show our code for each entity and main.js using Box2D.

Might be better than a snippet since it's explained a little more and you can see the whole Entity's script.

If you still want me to post a snippet here though, I'll be glad too :)

Forgive me for my novice question, since I have not had any experience with the touch devices...

Is this to say that impact considers touch events to be the same as mouse1 down?

Yes. If you bind MOUSE1 to some action, it will not only be triggered by mouse clicks on desktop PCs, but also by touches on mobile devices.

You can also create some buttons (HTML DIVs) that will specifically react to touch events. See: http://impactjs.com/documentation/class-reference/input#bindtouch

This is good information but Im still missing something.

How do you prevent on the iPhone when you drag on the screen, the entire page moves like if it would scroll to the next page, and in the Biolab game for the iphone the drag thing is disabled. How do you do that?

In a script tag in the header, fire this code.

//*** Prevent Default Scrolling ******
		preventDefaultScroll = function(event) {
			// Prevent scrolling on this element
			event.preventDefault();
			window.scroll(0,0);
			return false;
		};
		
window.document.addEventListener('touchmove', preventDefaultScroll, false);