Hello Phaser Community,
I’m trying to build a game on Phaser v3.55.2 and bundling it with Parcel.
The problem is that even though I preload my image and add it on create() I still get the green wireframe square indicating that the image is not loading.
To serve the files im using parcel serve index.html
these are my files
game.js
const Phaser = require("phaser");
class MainScene extends Phaser.Scene {
constructor(){
super({key: 'main-scene', active: true})
}
preload() {
this.load.image('background', './assets/grassBackground.png')
}
create() {
let background = this.add.image(800/2, 600/2, 'background');
console.log(background.scale);
}
}
let game = new Phaser.Game({
type: Phaser.AUTO,
width: 800,
height: 600,
scene: [MainScene],
scale: {
parent: 'main',
autoCenter: Phaser.Scale.CENTER_BOTH
}
})
console.log(game)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main"></div>
<script type="module" src="game.js"></script>
</body>
</html>
Edit here is a screenshot of my game screen
