Phaser 3 : Why are there no images showing?

Ok so I am a complete newbie in this field but I'm trying to make a background pic show up in my Phaser Game

FYI I'M RUNNING ON A LIVE SERVER

var config = {
    width:800,
    height:600,
    backgroundColor: 0x000000
}

var game = new Phaser.Game(config);

function preload()
{
    this.load.image('sky', 'bg.png');
}

function create() 
{
    this.add.image(400, 300, 'sky');
}

function update()
{

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.22.0/phaser.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Io Game</title>
    <script src="phaser.min.js"></script>
    <script src="game.js"></script>

</head>
<body>

</body>
</html>

It is just showing a blank black screen. There are no errors in the console Any tips/problems?

I already worked before on this project. There is a problem with function preload() in your case. There is an error in the file path. Place your files accordingly.

correct code:

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

Phaser 3 : Why are there no images showing?

Related

Recent Posts