Why my Background image is not showing?

Phaser 3
1

Hi there, I’m new to phaser 3 so i just started to create a game, in that i wanna put bg image but it’s not showing. Plzz help…:frowning:
Here’s my code:

const game = new Phaser.Game(800,600,Phaser.AUTO,{
    preload: preload,
    create: create,
    update: update
})

// variables
let bg
let platforms
let ground


function preload() {
    game.load.image('bg','assets/bg.png')
    game.load.image('player','assets/player.jpg')
    game.load.image('bricks','assets/mario bricks.png')
    game.load.image('ground','assets/ground.png')
    
}

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE)
    bg= this.add.image(0, 0, 'bg')
    platforms = game.add.group()
    platforms.enableBody = true`Preformatted text`

    ground = platforms.create(0,game.world.height - 64,'ground')
    ground.scale.seTo(2,2)
    ground.body.immovable = true




}

function update() {}
2

This code works for me. The main difference is the import at the top

import logoImg from "./assets/logo.png";

function preload() {
    this.load.image("logo", logoImg);
}

function create() {
    const logo = this.add.image(400, 150, "logo");
}
3

That code is for Phaser 2. If you’re following a tutorial, find one for Phaser 3 or switch to Phaser 2. There’s also a typo in ground.scale.setTo (you’ve written seTo).

Phaser 2 code can be identified by its reliance on the Game’s instance; in Phaser 3, systems like the Loader, the Game Object Factory, and the physics engines are local to Scenes and don’t exist on the Game class (in the case of your code, the game global variable).

When asking for help in the future, keep mind that it helps to know how you’re running your code (you need a local webserver to run an HTML5 game) and what errors you receive in the browser’s console (accessible from the developer tools).

2 Likes
4

Thanks :slight_smile: