2 Tutorial : Create a scene and sprites

In this article, I will teach you to create a scene with a sprite.



First, you need your game.js :

Then, at the start of the function OnLoad(), add gfx.AddPhysics();, it is very important, without your game don't work. In another article we will learn how use it.

Create a function called : OnAnimate( t, td ) and at the end of the function OnReady add  gfx.Play(); for call OnAnimate 60 times per second.

Two options exist if you want to create a background :

• Use the dedicated function.
• Use the function for create sprite.

Note : you can replace : Img/map.png  by  /Sys/Img/sky.jpg

Dedicated function :

Add, in function OnLoad(), a background with gfx.CreateBackground( img, options );, in my case I have : scene = gfx.CreateBackground( "Img/map.png" );.

If you use the option : "stretch", your image width will be equal at your game view width and your image height will be equal at your game view height :

Next, if you execute your app your background don't appear. It is normal, you need to add in function OnReady() : gfx.AddBackground( scene );.

Function for create sprite :

Add, in function OnLoad(), a sprite with gfx.CreateSprite( img, group, callback );, in our case use only the img argument : scene = gfx.CreateSprite( "Img/map.png" ); :

Next, add in function OnReady() the line : gfx.AddSprite( sprite, posX, posY, width, height ); : gfx.AddSprite( scene, 0, 0, 1, 1 ); It gives :

Now create a sprite called 'droid' :

Add in function OnLoad() : droid = gfx.CreateSprite( "/Sys/Img/Hello.png, "good"); good is the name of the heros' group. It will be for a next tutorial.

And add the sprite to the scene with putting : gfx.AddSprite( droid, 0.5, 0.5, 0.3 ); in OnReady().

And when you execute the app, you see :

In the next post, I will learn you how animate a sprite :-)