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.
1 decade ago
by dominic
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?
1 decade ago
by dominic
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);
Page 1 of 1
« first
« previous
next ›
last »