Add a Background

(Step 1/9) Learn how to add a background to your game!

Find an Image for the Background of your game

1. Upload an Image to the Assets Folder

First, make sure that you have the image that you want for your background added to your asset folder (Need Help?).

2. In game.js, Add loadImage into the preload() function


code/client/src/game.js
g.loadImage('background',  'background.png');

3. In game.js, Add drawBackground function in the create function


code/client/src/game.js
g.drawBackground( 'background',  3,  500,  2000 );

4. In game.js, Delete cameraBounds method

In game.js, delete the cameraBounds() method.


code/client/src/game.js
g.cameraBounds()

5. In room.js, Change the game width in the top of the file from 2000 to 600.


code/client/src/game.js
const GAME_WIDTH = 600;

6. In room.js, Change the numbers in our createACharacter function in our onJoin function in the room.js file and add a couple new variables.


code/server/rooms/room.js
g.createACharacter('players', client.sessionId,  { x:  270, y:  1990, safe:  false, speed:  5, spriteName:  "players"  });

Download your zip, and upload it to blobbert.io, and your game board should be set up!


Choose What Game To Build
Create Enemies

Need Help?

Proofread your code, check with your team and classmates, and if you’re still stuck!

Click Here for Help