3 Tutorial : Animate a sprite

Hi ! In this tutorial I will teach you how animate a sprite.



First, enclose the scene for prevent the sprite glitching.
Add the following line under gfx.AddPhysics with
gfx.Enclose( groupId, options, density, bounce, friction, offset ); : gfx.Enclose( 1, "left,top,right,bottom" );. The scene is now enclosed.
Then, modify gfx.AddPhysics( 0 ); to gfx.AddPhysics( 1 or 2 );
Next, add physics for our droid with : droid.SetPhysics( groupId, type, density, bounce,
friction, linearDamp, angularDamp ); We only, for this
tutorial, use groupId, type and bounce, Set the same groupId that gfx.Enclose : droid.SetPhysics( 1,"dynamic", null, 0.9 );
And add this line under gfx.AddSprite( droid );.

Launch your game and see your beautiful droid fall.


Well, add a button for make your droid jumping.
Go in your main app file, and modify your layout arguments "linear", "VCenter,FillXY" to "absolute" as this : lay = app.CreateLayout( "absolute" );.
Add under lay.AddChild( gv ); a button called "JUMP". It gives that :
jump = app.CreateButton( "JUMP" );
jump.SetPosition( 0.4, 0.3 ); or whatever you want.
jump.SetOnTouch( function() {
// We add somethings here
} );
lay.AddChild( jump );

If you run the game you see :

Well, in the function called when you touch the button, add gv.Execute( "jump();" ); this permit to call jump() function in game.js
Now, go in your game.js and add the function jump :
function jump() {
droid.SetVelocity(0, -0.1 );
}

if x is positive, the velocity will be to the left. If y is positive, the velocity will be to the bottom.

Here is the spk : click

For the next tutorial, we will add a bad droid :).