Run Bob Run - Spacey Background

Use these instructions to add a Spacey background to your game. The Phaser game engine will take your image and copy it over and over to fill your entire game world.

Background Image
Add this code to the load.js file at the begining of the PRELOAD function. This code will load our data used to create our background image. You can create your own background using the phaser image editor.

    var starsData = [
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDD2DDDDD',
	'DDDDDDDDDDDDDDDD',
	'DD2DDDDDDDDDDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDD2DDD',
	'DDDDDD2DDDDDDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDDDD2D',
	'DDDD2DDDDDDDDDDD',
	'DDDDDDDDDD2DDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDDDDDD'
    ];
    game.bmpStars = game.create.texture('stars', starsData, 1, 1, 0, false);
 
        

Create Background
In the playlevel1.js file's CREATE function, find the line of code that says "game.world.setBounds.....". This code determines and sets how big our game world is based on how big your map is. Add the code below right after this line of code. The code below will take our background image and copy it over and over filling our entire game world.

        
    // Create a spacey background
    game.add.tileSprite(0, 0, game.world.width, game.world.height, game.bmpStars);

        

Run Game and Check for Errors
Press F12 to check console for any problems. Play It! Can you make your own background?

code on plnkr