Business Outfitted Bob/Phaser.js - add local images to games?

Hello!

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!!
J

1 Like

Hello!

Due to the security features of most browsers, when you open a webpage you’re working on locally, there are a lot more restrictions in what JavaScript is allowed to access. Phaser isn’t able to access the locally stored resources, but this shouldn’t be a problem once you publish your webpage, along with all the assets (image, etc.), to a server because the browser won’t be as strict.

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!

1 Like

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

1 Like