I tried posting my code in a previous attempt at writing a comment and was logged out, deleting the question I’d written up to that point, so forgive me if I do not include all my code here.
Very new to Phaser. Using Phaser 3, Node, http-server on a mac.
The first page from the set up walkthrough worked:
But when I tried other tutorials like this:
In my index.html body I would add:
All I get is a Black window and I’d (sometimes) have to delete the cache and reload to see any changes reflected. Other times, I could just reload the page and the change (such as the size of the black window) would be reflected.
Additional Set-up Questions:
When going through the setup on the Phaser site, is there a reason to clone the entire git file if I just want to use Phaser instead of edit it? When integrating Phaser with the code, I see most tutorials just download the phaser.js file and reference it as the src file in their index.html, which looks a lot more straight forward than what the Phaser getting started page would indicate. Looking for the ‘web root’ doesn’t help at all. And, why is MAMP recommended? I saw that and tried downloading it but found it only added to the confusion, whereas with http-server, I can just npm install it.
I really want Phaser to work properly, but right now it’s being more difficult than helpful.
You can keep the devTools open in Chrome so that you won’t need to delete cache everytime. Chrome don’t use cache when devTools is open.
You don’t need to copy whole repo from git to include Phaser in your project. Just including phase.js will suffice. And for typescript definitions you would need Phaser.d.ts file.
You need the server to serve files that’s it. Whatever you use is fine if it works. I use http-server too.
You don’t have to clone the Phaser repo (most people don’t). You can download the phaser.js script and link it, or install Phaser with npm and link it (./node_modules/dist/phaser.js).
MAMP is probably for people who are less used to node and the terminal. It’s fine to use http-server. You can launch it as
http-server -c-1
to have it mark everything non-cacheable.
Black window usually means an error happened; check the browser’s dev console.
I finally got back around to working on Phaser 3. Thank you for sharing the template and for the suggestions.
When I ran my game, I got a black screen, but there were no errors listed in the console. I am still encountering black screen even when fork cloning template repositories and trying to run them. Perhaps I am not loading them properly?
I have tried running http-server index.html then opening the index.html file in the browser, that leads to black screen. I tried running http-server index.html and opening localhost:8080 in the browser, that just leads to page cannot be found with 404 errors in console. Is there something I’m missing?
Here I tried to simply copy & paste the hello world file here:
I tried opening index.html in the browser both with and without running $ http-server index.html from the terminal but both produce a black screen only.
Below is the console message I got in developer tools when loading index.html.
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
createAudioContext @ phaser-arcade-physics.min.js:1
phaser-arcade-physics.min.js:1 Phaser v3.15.1 (WebGL | Web Audio) https://phaser.io
3phaser-arcade-physics.min.js:1
Looks like images are not loaded because you’re trying to get them from Phaser Labs website. And origin for those image files is http://labs.phaser.io. which is different from origin of all other files that are loaded from localserver and Phaser id loaded from https://cdn.jsdelivr.net.
Change http://labs.phaser.io to https://labs.phaser.io.
See the difference between http and https.
It will most probably work.
And if doesn’t work add this line at the top of preload function. this.load.setCORS('anonymous');
