CODEWITHSUNDEEP
javascripthtmlhtml5-canvasphaser-framework
Stanley
Stanley

Reputation: 161

Phaser 3, image displayes as green square

I have 2 scenes: Loading and Menu, in loading scene i laod images and then I want to display them in menu.

Loading scene code:

import { CTS } from './../CTS.js';
import { MenuScene } from './MenuScene';

export class LoadScene extends Phaser.Scene
{
    constructor(){
        super({
            key: CTS.SCENES.LOAD
        })
    }

    preload() {
        this.load.image('logo', './../assets/logo.png');
        this.load.image('bg', './../assets/title_bg.jpg');
    }
    create() {
        this.scene.start(CTS.SCENES.MENU, 'Hello from loadScene');
    }
}

Here's menu script:

import { CTS } from './../CTS.js';

export class MenuScene extends Phaser.Scene
{
    constructor(){
        super({
            key: CTS.SCENES.MENU
        })
    }

    init(data){
        console.log(data);
        console.log('I got it!');
    }
    preload(){

    }
    create() {
        this.add.image(0,0,'bg').setOrigin(0, 0);
        this.add.image(0,0,'logo').setOrigin(0, 0);
    }
}

I checked paths and keys, they are right, chrome doesnt give any errors when running, but in sources tab doesnt show assets folder. I also tried to open and save images with ps to solve eventual format issues.

Heres my main.js file : 

/** @type {import('./../../PHAZER/phaser-3.18.1/types/phaser')} */

import { LoadScene } from "./scenes/LoadScene.js";
import { MenuScene } from "./scenes/MenuScene.js";

let game = new Phaser.Game({
    width: 800,
    height: 600,
    scene: [
       LoadScene, MenuScene
    ]
});

And Heres sc of directories so you can see that paths are set the right way

EDIT: I corrected all 'laod' to 'load' but it still doesnt work

Upvotes: 2

Views: 1540

Answers (1)

PhotonStorm
PhotonStorm

Reputation: 3375

A green square with a line through it means that the texture file failed to load. If there is an error with the URL you'll see it as a 404 in Chrome Dev Tools network panel (which I pretty much guarantee you'll see if you look).

If the URL is correct, but the server isn't configured correctly and is returning invalid image data, then you won't get a 404, but you also won't see the image in the Dev Tools sources panel when you select it.

Another common cause is that instead of serving the files (from the likes of WAMP or http-server) are you trying to open the html file directly? So you get a file:// protocol error instead, leading to the same thing.

Upvotes: 2

Related Questions