Background Layers in a Phaser Platformer

I'm still playing around with my 8-bit style platformer that I'm building with Phaser. In my sandbox level I'm trying to get the feel of the game. One of the things I wanted was to have trees (or some other scenery) in the background that would scroll at a reduced rate. This creates the illusion of depth. Fortunately, Phaser provides me with a simple solution.

First, I used Tiled to add a background layer to my map. In the "Layers" pane, there's an icon for adding a new layer on the lower left. I called my background layer simply bg. The order is important - the lower the layer is in the last, the further back it is in the display. After creating the new layer I had to drop it down with the down-arrow icon (right next to the new layer icon).

Adding a background layer in Tiled

With the bg layer selected, I added some trees to my map and saved it. At that point I could modify the game code to make use of the new layer.

First of all, adding a background layer and then doing nothing resulted in failure. The frog was no longer colliding with the map tiles. I believe this was caused by the fact that map.setCollisionBetween works on the current layer, and when I had a second layer the current one was not what I expected. I had to call map.setLayer explicitly before turning on collisions.

To get the slower-scrolling effect on the background layer, I simply set the scrollFactorX property of the background layer to 0.5. With that, the horizontal scroll with be half that of the main layer. You can play around with that number to get faster or slower scroll. A value of 1.0 is the default scroll speed. Setting the value over 1 will make the layer scroll faster, and values under 1 make it scroll slower.

Here is my updated create function.

function create() {

    game.physics.startSystem(Phaser.Physics.ARCADE);

    game.physics.arcade.gravity.y = 1500;
     
    game.stage.backgroundColor = "#D3EEFF";
  
    var map = game.add.tilemap("stage1");
    map.addTilesetImage("ground", "tiles");

    // create the background layer
    var bglayer = map.createLayer("bg");
    bglayer.scrollFactorX = 0.5;

    layer = map.createLayer("layer1");
    layer.resizeWorld();

    // setup tile collisions with main layer
    map.setLayer(layer);
    map.setCollisionBetween(0, 6569);

    group = game.add.group();

    frog = createFrog(group, 50, 50, "frog", 200, "left");

    game.camera.follow(frog);

    cursors = game.input.keyboard.createCursorKeys();
    spacebar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

}

This short video clip shows the scrolling effect in action.

Next I'm going to work on fine-tuning some of the tile collisions and then maybe fix the frog spritesheet (I'm still using the one from Frog Soccer - not quite right for this game). At some point I need to add an enemy as well and try to work out some sort of attack capability. Check back Monday! In the mean time, enjoy today's comic.

Amphibian.com comic for 6 November 2015