Hey guys im trying to do my first game on Phaser 3, but i stopped now in the image dont load.
The thing is, i put the way to file and in the screen it show only a green square with a line.
Search for some solutions but none work.
main.js (169 Bytes)
LoadScene.js (1.4 KB) MenuScene.js (507 Bytes)
index.html (245 Bytes)
I uploaded the files since i dont know how to show it as code block here (pls tell me how to do this).
Other thing i try put a random image in the root and load it from there and yet get the same green square.
A green square with a line means:
a) the asset was never loaded
b) the asset was loaded but you used the wrong key
or c) the asset was never loaded because its path was wrong.
Code blocks are done with three `s. You can get that by clicking the key with the tilda on it. Please post your code.
MenuScene
export class MenuScene extends Phaser.Scene {
constructor() {
super({
key: CST.SCENES.MENU
})
}
init(data) {
console.log(data);
console.log("I got it")
}
preload() {
}
create() {//Cria a tela de menu
this.add.image(this.game.renderer.width / 2, this.game.renderer.height * 0.20, "logo");
this.add.image(0, 0, "title_bg").setOrigin(0);
}
}
LoadScene
export class LoadScene extends Phaser.Scene {
constructor() {
super({
key: CST.SCENES.LOAD
})
}
init() {
}
preload() {
// Carrega Imagens, sons, sprites, etc
this.load.image("title_bg", "assets/image/title_bg.jpg");
this.load.image("options_button", "./assets/image/options_button.png");
this.load.image("play_button", "./assets/image/play_button.png");
this.load.image("logo", "./assets/image/logo.png");
this.load.spritesheet("cat", "./assets/sprite/cat.png", {
frameHeight: 32,
frameWidth: 32
});
//Cria barra de load
let loadingBar = this.add.graphics({
fillStyle: {
color: 0xffffff //white
}
})
/* Load Evento
Complete - Quando terminar de carregar tudo
Progresso - Carrega o progresso usando nĂşmero decimal
*/
this.load.on("progress", (percent) => {
loadingBar.fillRect(0, this.game.renderer.height / 2, this.game.renderer.width * percent, 50)
console.log(percent)
})
this.load.on("complete", () => {
})
}
create() {
this.scene.start(CST.SCENES.MENU, "Hello World");
}
}
Main
´´´import {LoadScene} from “./Cenas/LoadScene”;
import {MenuScene} from “./Cenas/MenuScene”;
let game = new Phaser.Game({
width: 800,
height: 600,
scene: [
LoadScene, MenuScene
]
});
Index
<html lang="pt-br" dir="ltr">
<head>
<meta charset="utf-8">
<title>Shooter</title>
</head>
<body>
<script src="scripts/phaser.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
Do you see “I got it!” in your console?
yes all the msg is ok
and i put an “add.text”, and it show in the screen too
Try moving this.scene.start(CST.SCENES.MENU, "Hello World"); to the this.load.on("complete", () => { function.
dont work.
The console msg come out too but the green square remain.
Im using node.js as server, maybe something with it ?
Are there any errors on the console?
nothing
only this chrome extension
but i test in edge and firefox and get the same things, no errors
anyway, im following this tutorial
maybe if i start it from the beggin again, but dont look have errors.
was the url correctly defined?
this.load.image("title_bg", "assets/image/title_bg.jpg");
or
this.load.image("title_bg", "./assets/image/title_bg.jpg");
1 Like
@ReydVires yes, i try some alternatives, tried put it in the root too, but nothing 
I read somewhere a guy talking about problem with the parsel on node.js
Hmm… It’s all the image didn’t load or in just the specific background?
its all, i try a random image and nothing too
i go try save again the file in png format maybe ?
That’s probably not going to help.
@NowakSotto Are you 100% sure that the file path is correct?
Yes, but i go try again.
The folder “assets” is inside the root folder “Jogo”.
And folder image inside assets folder
so if im not wrong " ./assets/image/image.jpg" or " /assets/image/image.jpg"
correct ?
i go try put the image direct inside assets folder
