File Path:
project/
-/assets/
–/images/
—/sky.png
-/src/
–/js/
—/scenes/
-----/ExampleScene.js
From ExampleScene.js:
preload(){
this.load.image('sky', 'assets/images/sky.png');
}
create() {
this.add.image(400, 300, 'sky');
}
The above doesn’t work, however replacing the filepath with a direct link to an img on the web works. So I know it’s loading and adding correctly, I just can’t figure out why the path isn’t working.
*this is with create-react-app.
Is your html file inside the project folder?
I’m guessing your HTML file is in the src folder? The path needs to be relative to your HTML file, not the .js file. Try using ‘…/assets/images/sky.png’
Thanks. I checked that out before posting, unfortunately didn’t help out!
On the right track but it’s actually in my Public folder. I’m attempting to use Phaser 3 with create-react-app.
I did try using that pathway and still getting an unmatched key.
If it is a create-react-app project, you have to move the assets folder inside the public folder and set the path to “public/assets/images/sky.png” or “assets/images/sky.png”
please how I can do the same thing IN VS code using JS. (after searching,It’s caused by the fact that “JS” doesn’t authorized to access local files). some idea plz.
Do you also use create-react-app?
Or do you just need something like live-server?
yeah just a live server; I found a way to use facebook server directly.Thanks @yannick
https://developers.facebook.com/docs/games/instant-games/test-publish-share/
I also have the same problem.
this.load.image(‘tile’, ‘tile.png’); //in preload section
this.add.image(100, 100, ‘tile’); //in create
doesn’t load this resource without any error messages in console. It shows black crossed square instead of the tile.
Also I was not able to load sound with
this.load.audio(‘beam’, ‘beam.wav’); //in preload
menu.circleClickSound = this.sound.add(‘beam’); //in create
but with error in console: “Error: There is no audio asset with key “beam” in the audio cache”
I work in VS Code and Live server, but also checked in OpenServer. All in Windows 10.
I do not use React or any other library/framework.
Both resources are loaded and show/play with IMG and AUDIO tag in index.html
For Phaser to work I use phaser.min.js (Phaser v3.22.0 (WebGL | Web Audio)). Other methods like this.add.text work.
Checked in latest Chrome and Firefox with only difference that Chrome shows black “phaser window” when can’t load audio.
UPDATE: Ok, I started from scratch with some guide and it’s working now. I might’ve broke something else while trying to fix it ;^)