Parallax background

Parallax scrolling is a nice way to add depth and immersion to a game. The best way to achieve this effect in MightyEditor, which utilizes the Phaser game framework, is by using tiled sprites. Tiled sprites, basically, are sprites that can be scrolled and scaled, and they will wrap around and repeat themselves automatically.

First, we upload the assets and set up the game map:

Notice that only the character has been placed on the map – the rest of the objects will be added through the Source Editor (to help with character placement coordinates, you can first put the background objects on the map and see, where you should put other stuff, also – to check the coordinates for when adding tile sprites.

To move around with the character, we should enable physics while disabling gravity, since the character is in mid-air and would fall otherwise.

The code:

"use strict";
window.Parallax.state.menu = {
    create: function() {
        //here we add two tile sprites with parameters(locationX, locationY, width, height, key)
        this.wall = this.game.add.tileSprite(0, 0, 1026, 418, '/bg_wall.png');
        this.character = mt.create("character");
        this.grass = this.game.add.tileSprite(0, 390, 1026, 215, '/grass_tile.png');

        this.cursors = this.game.input.keyboard.createCursorKeys();

        this.character.animations.add('stand', [0, 1, 2, 3], 10, true);
        this.character.animations.add('run', [6, 7, 8, 9, 10, 11], 10, true);
        this.character.animations.play('stand');
    },

    update: function() {
        if (this.cursors.left.isDown) {
            this.character.body.velocity.x = -30;
            this.character.animations.play('run');
            this.character.scale.x = -1;
            //scroll the tile sprites by an amount of pixels on the X axis
            this.wall.tilePosition.x += 5;
            this.grass.tilePosition.x += 15;
        } else if (this.cursors.right.isDown) {
            this.character.body.velocity.x = 30;
            this.character.animations.play('run');
            this.character.scale.x = 1;
            //scroll the tile sprites by an amount of pixels on the X axis
            this.wall.tilePosition.x -= 5;
            this.grass.tilePosition.x -= 15;
        } else {
            this.character.body.velocity.x = 0;
            this.character.animations.play('stand');
        }


    }
};

Full sample available here.