I’m currently taking the Create Video Games with Phaser.js course. I was curious if there is a way to insert local images into a game. (I attempted it with Business Outfitted Bob as a test and had no luck). Initially, I tried to replace ‘Bob-Front’ with a local PNG file of a red ball. I replaced all instances in
GameScene.js, but it always just shows a black square with a diagonal green line. The file name had a space (Red Ball.png). I added a dash instead of the space and it still wouldn’t work. Going forward, when I design my own games, is there a way to make this work? I see some information about “CORS” causing a problem like this. I think that could have something to do with it, but I don’t really understand what means. Thank you for any advice you can offer!!
An option you have while developing with Phaser locally is using an extension called Live Server in VSCode. Here’s an article about it from Codecademy: Developing Phaser 3 Games Locally
One final note, you may want to avoid spaces in filenames if you can. The proper way of accessing that file would have been
Red%20Ball.png because of URL encoding (20 in hex is 32 in decimal, the character code for space).
I hope you’re enjoying Phaser like I did when I went through that course!
Thank you so much for the response!! The Phaser course is a lot of fun!! I’ll check into the Live Server extension. Thank you!! J