CODEWITHSUNDEEP
javascripthtmlphaser-framework
Joseph Attia
Joseph Attia

Reputation: 304

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?

Upvotes: 2

Views: 2315

Answers (2)

Cryptox Rain
Cryptox Rain

Reputation: 21

Did the solution above work for you? For me, I've used a Simple HTTP Server with Python. I was referencing my images correctly and had my web server hosted correctly. When using developer tools, there were no error messages.. I was banging my head against the wall for hours. The Phaser API was not able to tell what the local directory (http://192.168.0.2:8080/) was from the webpage from some reason.

I fixed my issue by using the following path for my images:

'http://192.168.0.2:8080/assets/sky.png' where 192.168.0.2 was my local IP address hosting the server & 8080 was the port I was using for communications

Alternative to adding that lengthy file path for each of your images, you can call the this.load.setBaseURL('http://192.168.0.2:8080') function in combination with what you already have.

For example, see the following code:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: {
        
        preload: preload,
        create: create
    }
};
var game = new Phaser.Game(config);

function preload ()
{
    console.log('preload');
    this.load.setBaseURL('http://192.168.0.2:8080');
    this.load.image('bombP','bowmb.png');
    this.load.image('einMary','/bowmb.png');
}

function create ()
{
    console.log('create');
    this.add.image(126, 119, 'bombP');
    this.add.image(222,269,'einMary');
    //var s = game.add.sprite(80,0,'einMary');
    //s.rotation=0.219;
}

Upvotes: 1

Vipul Sinha
Vipul Sinha

Reputation: 840

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 }
    );
}

Upvotes: 1

Related Questions