Example Parallax

What's here?

This is a basic version of the parallax system.

In the future an advanced system will be created for more complex demonstrations.

Ok, so ...

We will use three layers to position the (tile)sprites

// Main.ts 

this.addLayer('stage-back');
this.addLayer('cave-back');
this.addLayer('platform-back');
// ...

Tilesprite is basically an image configured to repeat itself in a predetermined space.

- (112x96)

// Main.ts

var sea = this.game.add.tileSprite(0, 510, this.game.width, 96, 'main-sea');

Here we are creating a tilesprite at position x:0 y:510 which will have the width of the screen and height of 96px.

To learn more about tilesprite, click here.

// Main.ts

this.parallax.add(sea, 2); // [object, distance]

object: tileSprite object; distance: Farther, slower;

Of course, add the object to the layer it belongs to:

// Main.ts

this.addToLayer('stage-back', sea);

That's it! Try to use elements with different distances.

Run this model

$ pkframe init -p parallax