Hi all,
I have tried to set a background to this game made by Emanuele Feronato;
I tried adding:
this.load.image(“background”, “background.jpg”);
but I just can’t get it working.
I am unfamiliar with how Phaser 3 works and would be grateful to any help recieved.
Thanks in advance!
I tried that but still can’t get it working, I just see a white screen…?
Did you add the background in the create function? this.add.sprite(0, 0, “background”);
Yeah, tried that, no luck…
I thought this would be simple to do when I started it 
Open browser console 
It is simple, if I can do it anyone can. Paste your code, someone may find that’s its just a simple typed error. Console will also show you if there is an error.
or on the network tab in the console shows that which path is downloaded for background.png
In console, I see;
Line 48: Uncaught SyntaxError: Unexpected token ‘{’
Here is the full code:
let game;
// global game options
let gameOptions = {
platformStartSpeed: 350,
spawnRange: [100, 350],
platformSizeRange: [50, 250],
playerGravity: 900,
jumpForce: 400,
playerStartPosition: 200,
jumps: 2
}
window.onload = function() {
// object containing configuration options
let gameConfig = {
type: Phaser.AUTO,
width: 1334,
height: 750,
scene: playGame,
// physics settings
physics: {
default: "arcade"
}
}
game = new Phaser.Game(gameConfig);
window.focus();
resize();
window.addEventListener("resize", resize, false);
}
// playGame scene
class playGame extends Phaser.Scene{
constructor(){
super(“PlayGame”);
}
preload(){
this.load.image(‘background’, ‘background.png’);
this.load.image(‘platform’, ‘platform.png’);
this.load.spritesheet(‘player’, ‘player.png’, {
frameWidth: 24,
frameHeight: 48
});
create(){
this.add.sprite(0, 0, 'background');
// group with all active platforms.
this.platformGroup = this.add.group({
// once a platform is removed, it's added to the pool
removeCallback: function(platform){
platform.scene.platformPool.add(platform)
}
});
// pool
this.platformPool = this.add.group({
// once a platform is removed from the pool, it's added to the active platforms group
removeCallback: function(platform){
platform.scene.platformGroup.add(platform)
}
});
// number of consecutive jumps made by the player
this.playerJumps = 0;
// adding a platform to the game, the arguments are platform width and x position
this.addPlatform(game.config.width, game.config.width / 2);
// adding the player;
this.player = this.physics.add.sprite(gameOptions.playerStartPosition, game.config.height / 2, "player");
this.player.setGravityY(gameOptions.playerGravity);
// setting collisions between the player and the platform group
this.physics.add.collider(this.player, this.platformGroup);
// checking for input
this.input.on("pointerdown", this.jump, this);
}
// the core of the script: platform are added from the pool or created on the fly
addPlatform(platformWidth, posX){
let platform;
if(this.platformPool.getLength()){
platform = this.platformPool.getFirst();
platform.x = posX;
platform.active = true;
platform.visible = true;
this.platformPool.remove(platform);
}
else{
platform = this.physics.add.sprite(posX, game.config.height * 0.8, "platform");
platform.setImmovable(true);
platform.setVelocityX(gameOptions.platformStartSpeed * -1);
this.platformGroup.add(platform);
}
platform.displayWidth = platformWidth;
this.nextPlatformDistance = Phaser.Math.Between(gameOptions.spawnRange[0], gameOptions.spawnRange[1]);
}
// the player jumps when on the ground, or once in the air as long as there are jumps left and the first jump was on the ground
jump(){
if(this.player.body.touching.down || (this.playerJumps > 0 && this.playerJumps < gameOptions.jumps)){
if(this.player.body.touching.down){
this.playerJumps = 0;
}
this.player.setVelocityY(gameOptions.jumpForce * -1);
this.playerJumps ++;
}
}
update(){
// game over
if(this.player.y > game.config.height){
this.scene.start("PlayGame");
}
this.player.x = gameOptions.playerStartPosition;
// recycling platforms
let minDistance = game.config.width;
this.platformGroup.getChildren().forEach(function(platform){
let platformDistance = game.config.width - platform.x - platform.displayWidth / 2;
minDistance = Math.min(minDistance, platformDistance);
if(platform.x < - platform.displayWidth / 2){
this.platformGroup.killAndHide(platform);
this.platformGroup.remove(platform);
}
}, this);
// adding new platforms
if(minDistance > this.nextPlatformDistance){
var nextPlatformWidth = Phaser.Math.Between(gameOptions.platformSizeRange[0], gameOptions.platformSizeRange[1]);
this.addPlatform(nextPlatformWidth, game.config.width + nextPlatformWidth / 2);
}
}
};
function resize(){
let canvas = document.querySelector(“canvas”);
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let windowRatio = windowWidth / windowHeight;
let gameRatio = game.config.width / game.config.height;
if(windowRatio < gameRatio){
canvas.style.width = windowWidth + “px”;
canvas.style.height = (windowWidth / gameRatio) + “px”;
}
else{
canvas.style.width = (windowHeight * gameRatio) + “px”;
canvas.style.height = windowHeight + “px”;
}
}
In the preload method, it doesn’t look like there is a closing }. Code should be:
preload() {
this.load.image('background', 'background.png');
this.load.image('platform', 'platform.png');
this.load.spritesheet('player', 'player.png', {
frameWidth: 24,
frameHeight: 48
});
}
Super! Thats it. Can’t believe it was something as simple as that.
Thanks so much!!
The Console is your friend, more often than not it’s something as simple as that. Some code editor software actually highlights the open and closing bracket of a code block, you should find out if yours does that and then you will know if your console says that same error you can check all your brackets and make sure they’re closing properly.
I’d recommend using VS Code, along with the plugins Bracket Pair Colorizer, and Debugger for Chrome. Adding ES/JS lint will catch a lot of things as well.