Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

8 years ago by TylerAppmobi

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.

8 years ago by dominic

Nice! I assume you'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" );

8 years ago by TylerAppmobi

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!).

8 years ago by MyShuitings

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.

8 years ago by TylerAppmobi

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 :)

8 years ago by devhyfes

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?

8 years 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

8 years ago by Hazneliel

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?

8 years ago by TylerAppmobi

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 »