Making your first Phaser 3 game tutorial - Problem with displaying an image

Hi everyone,

First day with Phaser, first forum topic for me, so please be patient.

So I’m following the tutorial in order to make my first Phaser 3 game. While at Part 2 - Loading Assets and Display an Image. The problem is when I open the html file with a browser it doesn’t display the image. All I get is a blank screen. Any ideas about where might be the problem?

Thanks for any response.

Are you just opening the HTML file or do you set up a server which can access your files?
Currently it’s unclear from your question, but if you have no server, Phaser won’t run and you’ll just get the canvas displayed on your screen

1 Like

Hi JomsViking,

You will need to use a local web server. Here is the getting started section with Phaser that shows how to install a local web server.

Hope this helps :slight_smile:

1 Like

Thank you @ThePandaJam and @retroVX for your replies.

I did go through the Getting Started with Phaser 3: Part 2 - Installing a web server. I chose WAMP and it installed successfully because I was able to see the nice Phaser animation the tutorial was talking about, on my screen.

The WAMPSERVER icon on my tray exists and it is green. When I hover on it, it says “All services running”. When I type localhost on my browser, I get the WAMPSERVER Homepage.

Still not sure why I don’t see anything displayed when I open the html files of the tutorial (after I edit them with VS Code. I’ll go through the tutorial from the start to check whether I missed something.

Thanks again!!

Could you try opening your developer console on the browser you’re using and see if it displays any error messages?

In chrome and firefox (windows) you can use f12 and then make sure you’re on the console tab
Here is an image for chromes developer console

1 Like

Thank you for being persistent about this @retroVX
Here is a screenshot of the error messages I receive.

No problem at all :slight_smile:

I haven’t used wamp before but from my basic understanding, you need to make sure your folder is in the www sub directory. ( which from the image suggests you have ) Then instead of clicking the html file inside the folder, go to http://localhost/your-folder-name and hopefully it should load :slight_smile:

2 Likes

instead of WAMP just use node and http-server

1 Like

@retroVX
This is what I got:

Is this how it is supposed to be? When I click one of those (part3 for example) it finally loads the image. So I guess this is solved.

@skar thank you for the suggestion. I’m a bit familiar with node but I thought I’d give my first option a try to see how far I can go, and thankfully I received a lot of help with it, here. I’ll keep that in mind though.

You could probably configure WAMP so you don’t have to click the file each time but I’m not to sure on how to do that. Other than that though it’s now working which is great news! :slight_smile:

Have fun with Phaser :slight_smile:

1 Like

I personally set up my server using python/anconda, because for me it’s the easiest to understand.

First you’ll need a virtual environment. Use this recipe to set it up. It takes only a couple commands:
https://uoa-eresearch.github.io/eresearch-cookbook/recipe/2014/11/26/python-virtual-env/

If you have anaconda installed, you can activate your virtual environment and then type python -m http.server in the command prompt in the directory where your files are and a server will start.

You can access that by typing localhost/8000 into your browser.

1 Like

Thank you @ThePandaJam for pointing out this path to me. My primary programming language is JS so in order to keep things simple for me I try to stick with just that.

Question: Is it possible to set up the virtual environment using Python and then program your game with JS and Phaser? Probably a super newbie question but that’s my current status anyway. :slight_smile:

Well, that’s what I’m doing and it works, so I guess it should be possible :smile:
The server itself can be written in whatever language you want and it’s separate. Just make sure to start the server in the directory where your index.html file is, along with other assets

1 Like

Thanks so much @ThePandaJam @retroVX AND skar for your replies. Further to your actual help, you’ve made me feel very welcome (as this is my first question) and showed there is a nice community around Phaser, which is well, very awesome of you guys. Thanks again!! :metal:

image

3 Likes

I also had this issue–typing "https://localhost/my-folder-name solved it for me as well (although I did have to click the specific html file still (as JomsViking did). Thanks for the comments/solution everyone!

1 Like