Black Screen only

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.

If you know node and npm, the easiest way to get started is using a starter template.

Maybe try mine:
For TypeScript
For ES6 (ESNext)

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 should check out this Phaser 3 FAQ.

This tutorial on Phaser site is good source to understand the basics.

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.

Thank you for the replies.

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?

By default Canvas will show black screen only. Are you loading and displaying any graphics or sprite? Can you share your code?

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

Uncaught DOMException: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image element contains cross-origin data, and may not be loaded.
at initialize.createTexture2D (https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js:1:443793)
at initialize.createTextureFromSource (https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js:1:443234)
at initialize.init (https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js:1:334245)
at new initialize (https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js:1:333936)
at new initialize (https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js:1:160536)
at initialize.create (https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js:1:338880)
at initialize.addImage (https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js:1:336580)
at t.addToCache (https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js:1:42103)
at initialize.fileProcessComplete (https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js:1:513518)
at t.onProcessComplete (https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js:1:18689)
2phaser-arcade-physics.min.js:1 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
onFocus @ phaser-arcade-physics.min.js:1

45%20PM

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');

You have to run http-server in the directory you want to serve and then open http://localhost:8080 (or whatever port) in your browser. You can do

http-server -o

In your web browser, the page URL shouldn’t start with file://. That won’t work.

Okay I think running http-server -o did the trick.

I think running http-server index.html was my mistake, simply leaving out the index.js allowed it to run better.

Anyway, thank you greatly for the help! Look forward to digging into Phaser 3.

Hi, I’m completely new to phaser and have the same problem as @Placeholder

Here is my small project in replit: ‘https://replit.com/@jaimeggb/2D-breakout-game-using-Phaser

Do you know why the screen is black? According to this tutorial, it shouldn’t be, it should be showing a grey background and a blue ball: Load the assets and print them on screen - Game development | MDN

You need to use Phaser 2 with that tutorial.

But you may want to find a new tutorial for Phaser 3 instead.