Tutorial - Parallax Scrolling and Animations

Sprite Basic has a layer system that allow you to draw group of sprites on top of each other, or, if you prefer in the back of the scene
When creating sprite (or body), you specify the layer index as last argument of function call. Layer with lower index are drawn in the back of the scene, higher index in front of the scene
If you don't specify a layer index, default layer 0 will be used
We will now set up a space demo using a parallax scrolling and some animated sprites

Setting the scene : sprite, tiling sprite and animation

The first thing we do is set at the far back a tiling sprite that covers all screen. The beauty will tiling sprites is that they can scroll endlessly : the part of the image that goes of one side of screen gets in from the opposite side
Then we create an animation of an array of textures (string separated by comas enclosed into square brackets). It could also have been a list, as their elements can be accessed same way as one-dimensional array
Finally we draw a ship on the top-front layer. This ship won't move as we just want to show how to make parallax scrolling, user input interaction has been covered in the previous tutorial

//create a tiling sprite : can scroll with never end, back layer -10 sky=renderer.createTilingSprite("sky","tuto-parallax/space_background_2_1280x720.jpg",width/2,height/2,1920,1200,-10) //create a animation of an array of textures novaAnim=renderer.createAnimation(["orbital-anims/supernova1_244x202.png","orbital-anims/supernova2_424x274.png","orbital-anims/supernova3_498x304.png","orbital-anims/supernova4_528x332.png","orbital-anims/supernova5_470x390.png"]) ship=renderer.createSprite("ship","tuto-parallax/Ship_1_469x344.png",width/3,height/2,400,220,10)

Setting the scene : creating the enemies

Now, still in OnInit() method, we will set many enemies (count nenemies has been set as global variables, try changing it) under the main ship, layer 5
First we make a list of textures, corresponding to different enemies drawing. 7 of them exactly. Then in a loop, we put them randomly outside the screen, on its right and give them a x-axis speed random and negative so they move left
You can see that for each enemy texture we pick one randomly from the texture list
The list has 7 textures, going from index 0 to 6 (arrays/list index always start at zero, not one, and goes up to length-1, remember!).
We use rndInt(6) that gives an integer value between 0 and 6. Don't use the float version rnd(), as you would get a floating point index and your textures will never be found in the list!
You can see that we left two parameters empty in the createSprite function (... ,,,5), that because we don't want to specify width and height of sprites as they are optional parameters and we prefer to use textures own dimensions

enemyTextures.push("tuto-parallax/Enemys_0.png") // add textures to a list, so we can pick some randomly enemyTextures.push("tuto-parallax/Enemys_10.png") enemyTextures.push("tuto-parallax/Enemys_12.png") enemyTextures.push("tuto-parallax/Enemys_19.png") enemyTextures.push("tuto-parallax/Enemys_4.png") enemyTextures.push("tuto-parallax/Enemys_7.png") enemyTextures.push("tuto-parallax/Enemys_9.png") for i=1 to nenemys object enemy=renderer.createSprite("enemy",enemyTextures[rndInt(6)],width+rnd(width),rnd(height),,,5) // pick a random texture and make sprite of it on layer 5 enemy.setScale(3) enemy.vx=-(1.25+rnd(1.25)) enemys.push(enemy) next

The OnUpdate() Loop - scroll sky and enemies

By calling a simple function scroll(number difx, number dify), we make moving sky and enemies to the left at different speed.
For enemies we just check that if they are out of screen on the left, they move back to the right to reenter in the screen on next scrolls

sky.scroll(-0.5,0) foreach object enemy in enemys // loop through enemmys, move them accoring to speed x and if off screen by left put them on right of screen enemy.scroll(enemy.vx,0) if (enemy.getPositionX()<-50) enemy.setPosition(width+50,enemy.getPositionY()) endif next

The OnUpdate() loop : Animated Sprites

At some random interval, we create an animated sprite from the animation created in OnInit(). We set the layer at -5 so it renders above the sky but behind the ships
We don't want it to loop, slow motion, we start animate immediately and save it in a list
Then we loop through this same list and if an animation has finished for any of current explosions animations, we remove its sprite from the list and from the screen

if rndInt(300)==50 object nova=renderer.createAnimatedSprite("nova",novaAnim,100+rnd(width-200),80+rnd(height-160),,,-5) // create animated sprite from animmation, pleace it in backgroud layer -5 nova.setAnimationLoop(false) // wont loop nova.setAnimationSpeed(.2) // not too fast nova.playAnimation() // start animmate novas.push(nova) // save in list endif foreach object nov in novas // loop through list if not nov.isAnimationPlaying() // finish playing animation log("removing nova") novas.pop(nov) // remove nova from list and screen renderer.remove(nov) endif next

You can try the code in TUTO-PARALLAX-ANIMATIONS project on the Guest Account
You can find reference of the functions used in the Documentation