CODEWITHSUNDEEP
phaser-frameworkparceljs
ZPaul2Fresh8
ZPaul2Fresh8

Reputation: 1

Phaser 3 - Images not showing

After searching for a bit and finding others having somewhat of the same problem, but no solution for me, I figured it was my turn to seek help.

I have npm along with parceljs setup for webserving (I'm new to these but I'm quite confident it's working as you can see some output in the image I've posted)

I have the typical problem of images not displaying. Code and Dev stats

Status code of the image is returning 304 OK, and is it normal to not see the the image listed in the directory under the 'Sources' tab in Developer tools?...

Image not listed in treeview

Upvotes: 0

Views: 790

Answers (2)

Andrew Stegmaier
Andrew Stegmaier

Reputation: 3787

The issue is with the way you are loading the image urls as hard-coded strings, for example, you wrote this:

this.load.image('sz','./src/assets/gfx/sz0001.png`)

The way this is written, parcel doesn't know that this string is actually a reference to an image file, so it doesn't know to copy over the image into your output folder and ensure that the path ends up matching the actual output location.

The way parcel works, if you want to include an asset (like an image) into your bundle and reference it by URL in some other javascript context (like the this.load.image function), you should use an import statement or a URL constructor (see docs).

So you would instead write:

import myImageUrl from './src/assets/gfx/sz0001.png`;
// 'myImageUrl' will be a string that points to the location of the image
// This will also tell parcel that sz0001.png is a dependency of this project
// so that it can take care of copying it over to the dist output.
this.load.image('sz',myImageUrl)

Another tip is that the template you referenced uses parcel-bundler which the old, unmaintained 1.x version of parcel. I'd recommend upgrading your project to parcel 2, which on npm is simply parcel (see migration guide).

Upvotes: 1

winner_joiner
winner_joiner

Reputation: 14880

The green box, is shown if the asset is not found, or some other error.

Since I'm not 100% sure how parcel works and I don't know your parcel configuration and which parcel plugins you are using (I'm assuming parcel can be configured).

You could solve the problem by: manually copying the assets folder from src/ to dist/, than it should work. (atleast this work for me, when using this parcel template, to test the issue)

Maybe a parcel - plugin like parcel-plugin-static-files-copy, could also solve the problem, and/or be useful to keep the static files up-to-date.

Upvotes: 1

Related Questions