Add a Background

Learn how to make a super cool zombie game

Find an Image for the Background of your game

1. Upload an Image to Repl
  1. Find the downloaded images. Need help?
  2. Open the asset folder in repl, click: code > client > asset
  3. Click and drag your files into this folder. Make sure your files are named something very easy and obvious (it is best to not use spaces or symbols), for example “zombies.png” or “shark.png”. You will resize the images within the code, so don’t worry if it seems to big or small right now.

2. In game.js, Go into the preload() function in game.js and add a new image named after the new character set.
code/client/src/game.js

g.loadImage('grass', 'grass.png');


3. In game.js, Add drawBackground() function in the create() function
code/client/src/game.js

g.drawBackground('grass', 1, 2000, 2000);


4. In room.js, Add setBounds() inside the onInit() function to set the boundaries of the game.
code/server/rooms/room.js

	g.setBounds(2000, 2000);

Make sure that you write it after your setup function or else it will break your game. You can change the numbers to make the bounds whatever size you want.


Download your zip, and upload it to blobbert.io, and you should have a background!


Soccer Game
Setup Camera Follow

Need Help?

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

Click Here for Help