Add More Characters

Learn how to create an awesome online soccer game!

1. Upload all of our character images (Need Help?).
  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.
  4. Repeat steps 1-3 until all of your characters are uplaoded into the Assets folder.

2. Go into the loadImage function in game.js and change the name of your character.
code/client/src/game.js

g.loadImage('players', 'circle1.png');


3. Add the rest of your character images in the loadImage function in game.js
code/client/src/game.js

	g.loadImage('blobbert', 'circle1.png');
	g.loadImage('grunch', 'circle2.png');
	g.loadImage('neon', 'circle3.png');
	g.loadImage('nimbo', 'circle4.png');
	g.loadImage('tangles', 'circle5.png');

You can change the names of the characters to whatever you want, they don’t have to be named blobbert, grunch, etc


4. Add a player select Screen in game.js after the useLoginScreen() function.
code/client/src/game.js

	g.usePlayerSelectScreen({
		blobbert: 'circle1.png',
		grunch: 'circle2.png',
		neon: 'circle3.png',
		nimbo: 'circle4.png',
		tangles: 'circle5.png',
	});


5. In game.js change the Login Screen code and replace it with the following code.
code/client/src/game.js

	g.useLoginScreen((name, spriteName) => g.connect({ name, spriteName }));


Download your zip, and upload it to blobbert.io, and you should be able to choose your character!


Add a Background
Add Goals

Need Help?

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

Click Here for Help