Images Not Rendering, Even With Relative Path Provided

Phaser 3
1

2023-10-01-frog
2023-10-01-frog817×494 5.54 KB

I’m new to Phaser (and bundlers like Parcel) and have worked through some of the code examples online. Many great code samples are available on codesandbox.io, though I’ve found that often the samples don’t run well when I download the source and try running locally.

Here is one example: [frog adventure template]. The sandbox specifies the environment as “Parcel”. After downloading the source I’m able to launch on my own machine by running the following commands from the base directory (frog-adventure-template):

npm install
npm run start

The sample launches in my browser, but the images are not rendered as seen in the screenshot above.
The preload() method from Game.js attempts to load the images as follows:

this.load.image("background", "assets/background.png");
this.load.image("platform", "assets/platform.png");
this.load.image("rock", "assets/rock.png");

I’ve tried modifying the path to be a relative path from the base directory (‘./assets/background.png’) and alternatively a relative path from Game.js (./…/…/assets/background.png), though both to no avail. Any thoughts on what the issue may be? :slight_smile:

2

:wave:

See https://github.com/samme/phaser-parcel/blob/master/README.md#game-assets

3

2023-10-03 19-35-30 frog-fixed
2023-10-03 19-35-30 frog-fixed830×504 168 KB

I added the assets as imports, as suggested by the phaser-parcel readme (to the top of Game.js) as indicated below. Note that the this.load.image() statements had to be modified accordingly.

import background from './../../assets/background.png';
import platform from './../../assets/platform.png';
import rock from './../../assets/rock.png';
import spike from './../../assets/Spiked Ball.png';
import saw from './../../assets/Off.png';
import carot from './../../assets/Carot.png';
import smallPlatform from './../../assets/small platform.png';
import player from './../../assets/player.png';

Images are now rendering! It’s a little annoying that this wouldn’t work as-is since it runs fine on codesandbox, but I’m happy its working now and that I know how to fix this issue going forward.Thanks @samme!