HTML5 Parallax Scrolling


Parallax scrolling or more commonly known as parallaxing is the effect usually used in 2D games that gives the impression of 3D depth. Whilst Booty5 does not currently support 3D it does support depth sprites / actors.

Depth Sprites

Depth sprites are sprites that are projected into the 3rd dimension. In real terms that means that sprites that are at a greater depth will move more slowly and be smaller than sprites of the same size but at a lesser depth. Actors have a “depth” property that tells the engine at which depth they should be rendered. Note that Depth does not affect visual ordering and Booty5 does not currently apply depth when rendering depth sprites to the editors canvas. Currently you will only see the affect of depth when you run a test from the editor.

Creating our first depth sprite

We are going to create a scene that looks like the one below:

Booty5 parallax scrolling

Booty5 parallax scrolling

  1. Download the tutorial resources from here and unzip them to a folder somewhere
  2. Lets begin by creating a new project in Booty5 and dragging the supplied resources onto the Booty5 world tree to create the images and brushes that are needed for this tutorial
  3. Drag and drop the building brush onto the canvas to create a building actor
  4. Select the building actor and set its depth to 1.5
  5. Clone the building actor 3 times and arrange them across the main canvas
  6. Drag and drop the tree brush onto the main canvas to create a tree actor
  7. Select the tree actor and set its depth to 1.25
  8. Clone the tree actor 9 times and arrange them across the main canvas
  9. Drag and drop the ground brush onto the main canvas, this will create a ground actor
  10. Select the ground actor and clone it horizontally 3 times (we are creating a long strip of ground)
  11. Drag and drop the crate brush onto the main canvas to create a crate actor
  12. Select the crate actor and set its depth to 0.75
  13. Clone the crate actor 2 times and arrange them across the canvas
  14. Select the scene and change Touch Pan to “Both”
  15. Set Extents to “-1000,-500,2000,1000″ to limit the cameras extents
  16. Hit the Test button

When you hit Test, things will not look exactly as they do within Booty5, objects will not seem to be in their correct places or have the correct sizes. This is normal, because we changed the depth values of various actors they have now been projected into 3D. Pan the camera around and you will see that actors with greater depth values move more slowly the further away they are.

Many games use parallaxing effects  to spruce up their games, now you can too

Visual Ordering

As previously mentioned the Depth of an actor does not determine its visual order. If you take a look at the order in which we created the actors for this project you will notice that we started by creating the objects that were the furthest away (the buildings) and ended with creating the objects that are the closest (the crates). if you are using depth in a scene then you have 2 options to help you sort visual ordering of the objects:

  • Create the objects in back to front order. This basically means what we did above, we create the objects that are the further first and work our way towards the objects that are the closest
  • Create the objects in any order then re-order them manually using the ordering tools in the world tree view

You can view the finished project for this tutorial here

You can download the complete finished project for this tutorial here.

Related topics:

2,818 total views, 1 views today