Problem to show images

Phaser 3
21

Well, i started all from the begin…nothing change…put the new project in desktop…and yet the green squares for image.

22

@ReydVires @UltimateProGrammer

Ok, thanks for all the help, by testing solved the problem, but now i have a question, whats the “Dist” directory, whats its purpose ?

Solution: Put my assets folder inside the dist folder.

23

Are you using specific template for Phaser 3?
If youre familiar with bundler like webpack, thats folder holding some compiled script to be single bundle .js
And the index.html you run with maybe refering to that folder, thats maybe the problem you get.

24

Hi,
While in development you usually put all yours files in the src folder

src
  |- assets
  |- scenes
  |- player
  index.js

And with your dev server, all files inside src are served to your browser, usually with the command: npm start
When you want to export your game you can run the command: npm run build
This will create a dist folder containing your game files ready to be uploaded on a production server.

dist
src
  |- assets
  |- scenes
  |- player
  index.js

Look at this template for phaser 3:

2 Likes
25

oh, make sense now, so the dist folder is server side, that explain why i get green square.
When i organized the files i put all in the src folder.

But for the final purpose, when i go upload my game anywhere to others play, if i only build it and share the created final file go be all things ok ?

26

Yes, when i upload my game, after ‘npm run build’ i just upload the content of dist folder.
I really suggest you to use the phaser-template

27

Thanks man.

i go make the changes using the template as example