Why do not the images appear in my first game?

miguelitolaparra · December 15, 2018, 1:47pm

I started in Phaser a few days ago, I have several games created with Cordova and I would like to learn how to use this engine that Phaser.
I followed the guide and the Hello Word Tour and everything went perfect.

I started the following tutorial:
Create a game on Phaser

and I still could not show the elements on the screen.
I explain the configuration I have of Phaser:
The server creates it with node.js. I show you my file server.js

const http = require('http')

const fs = require('fs')

const server = http.createServer((req, res) =&gt; {

fs.readFile("./part1.html", (err, data) =&gt; {

if(err){console.error(err); return;}

res.end(data)

})

})

console.log('escuchando en el puerto 3000')

server.listen(3000)
1 - I have created a folder (phaser) to save all the projects that I am doing.
2. In that folder I create a folder called tuto1, where I have unzipped the files that come in the tutorial: phaser3-tutorial-src.zip, which consists of 10 html files and a folder with images.
3- I started the project with npm init
4 - Install Phaser with: npm install phaser@3.15.1 --save and as it did not work install also with npm install phaser@3.15.1

I followed the steps of the tutorial, but I can not see the elements in the canvas.
Something I’m doing wrong that escapes me and I can not find.
The browser inspector does not give me errors, and I have tested with Mozilla and Chrome.
The result is the one I show in the capture,

What am I doing wrong ?
Do not call images well?
If you give me some idea, I have started with great enthusiasm, but I am not able to create this which is as simple as copying the code, it does not work.
Thanks for the work that the community is doing.
A greeting.

Olf · December 15, 2018, 9:05pm

No error and a green square instead of an image, I would check :
1)the path of this asset
2)the key of this asset (the name you gave it for Phaser)

miguelitolaparra · December 15, 2018, 10:27pm

Hi.
When you say:

I imagine it refers to server.js
It is in the same folder as assets and the uncompressed html files.

Regarding: 2-

I think that may be the error, since I have not called from the server.
I show you the html file.
Where should I call Phaser?
I do not know how to call it in the server.js file

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Making your first Phaser 3 Game - Part 1</title>
  <script src="//cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser.js"></script>
  <style type="text/css">
    body {
      margin: 0;
    }
  </style>
</head>
<body>
  <script type="text/javascript">
    var config = {
      type: Phaser.CANVAS,
      width: 800,
      height: 600,
      scene: {
        preload: preload,
        create: create,
        update: update
      }
    };
    var game = new Phaser.Game(config)
    function preload() {
      this.load.image('sky', 'assets/sky.png')
      this.load.image('ground', 'assets/platform.png')
      this.load.image('star', 'assets/star.png')
      this.load.image('bomb', 'assets/bomb.png')
      this.load.spritesheet('dude', 'assets/dude.png',{ 
        frameWidth: 32, frameHeight: 48 
      });   
    }
    function create() {
      this.add.image(400, 300, 'sky')
    }
    function update() {
    }
  </script>
</body>
</html>

Olf · December 16, 2018, 10:52am

Hi,
I am talking about really simple errors :

→ 'assets/sky.png'
You can move this asset to the root directory and try to load it from there.

→ 'sky'
The same name is used, no problem here.

Don’t worry about Phaser, it’s loaded as you can see in the console “Phaser v3.15.1”.

miguelitolaparra · December 16, 2018, 12:08pm

Thank you for the support and the time you are dedicating me.
I have moved the images to the root directory, but it still does not work, the same image that I already showed.
However, Mozilla gives me a new error but it does not say where the error is:
“InvalidStateError: An attempt was made to use an object that is not, or is not longer, usable”
Mozilla in the inspector, away from RED, shows Phaser with a padlock,
Does that have any meaning?
I show you a capture.

Chrome does not give me errors.
I have also changed the way to call the html file, but the same image still appears in the black box
If I am not capable of running a project of only 60 lines of code, how will I transfer to Phaser all the ones I have already created?
Tank you

PBMCube · December 16, 2018, 1:40pm

I’ve had the same problem when using Brackets. YET, when I used my local XAMPP it worked just fine.

I recommend try the same experiment.

miguelitolaparra · December 16, 2018, 1:58pm

Thanks for the idea.
I use Ubuntu and so far all the programs I have created with node.js have worked perfectly.
I have no idea to change now, I will continue looking for how to solve this problem.
Thanks for the input.

Odin_Jensen · December 18, 2018, 1:01pm

I use this script with nodejs for phaser 3 development

var http = require('http');
var fs = require('fs');
var path = require('path');

console.log("Phaser test server v1.0");

http.createServer(function (request, response) {
    console.log('request ', request.url);

    var filePath = '.' + request.url;
    if (filePath == './') {
        filePath = './index.html';
    }

    var extname = String(path.extname(filePath)).toLowerCase();
    var mimeTypes = {
        '.html': 'text/html',
        '.js': 'text/javascript',
        '.css': 'text/css',
        '.json': 'application/json',
        '.png': 'image/png',
        '.jpg': 'image/jpg',a
        '.gif': 'image/gif',
        '.wav': 'audio/wav',
        '.mp4': 'video/mp4',
        '.woff': 'application/font-woff',
        '.ttf': 'application/font-ttf',
        '.eot': 'application/vnd.ms-fontobject',
        '.otf': 'application/font-otf',
        '.svg': 'application/image/svg+xml'
    };

    var contentType = mimeTypes[extname] || 'application/octet-stream';

    fs.readFile(filePath, function(error, content) {
        if (error) {
            if(error.code == 'ENOENT') {
                fs.readFile('./404.html', function(error, content) {
                    response.writeHead(200, { 'Content-Type': contentType });
                    response.end(content, 'utf-8');
                });
            }
            else {
                response.writeHead(500);
                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
                response.end();
            }
        }
        else {
            response.writeHead(200, { 'Content-Type': contentType });
            response.end(content, 'utf-8');
        }
    });

}).listen(8125);
console.log('Server running at http://127.0.0.1:8125/');

miguelitolaparra · December 18, 2018, 6:18pm

Hello
Thanks for your companion code.
I did not thank you before because I was doing tests.

But it still does not work, but I do not get any error from the browser or the console.
Not what else to do, a few days ago I was running microservices for one application, 4 at the same time, and I did not have any errors.
How do I move forward if I am not able to run the first example?
I’ll have to find another engine for creations, but I do not want to give up so soon.
Thank you.

Odin_Jensen · December 18, 2018, 6:44pm

Maybe cross-domain issue with CDN.

Can you try to include phaser locally?

/Odin

miguelitolaparra · December 18, 2018, 7:22pm

I do not understand what you mean by:

I have phaser installed through npm
In one of the tests I did today, the Mozilla inspector wrote me an error: “InvalidStateError: an attempt was made to use an object that is not, or is no longer, usable”.
But it disappeared.
If I remove CDN from the html file, I get these two errors:
1- InvalidStateError: an attempt was made to use an object that is not, or is no longer, usable
2- ReferenceError: Phaser is not defined [Read more]

rich · December 18, 2018, 10:28pm

I would focus on one issue at a time. Don’t worry about trying to display an image, or even load anything, just get Phaser properly included and use this.add.text to get some text rendering on-screen.

Once that works, load a single image. A green box with a cross through it stems from a network error. In short, either the path to the image was incorrect, or the web server wasn’t capable of serving the file (mime type error perhaps, basically the browser has either not received the file, or received something it can’t figure out).

Network errors are easy to check for, because you’ll get 404s or similar in your logs. None of those? It’s usually a server configuration issue.

miguelitolaparra · December 19, 2018, 12:08am

Thank you, tomorrow I will try and tell you. Today it’s too late.

HKoiohwah · January 8, 2019, 12:50pm

I had the same issue as @miguelitolaparra, green square and all.

This was resolved when I renamed the file to index.html and accessed it via the server address (http://127.0.0.1:8000/).

Merely opening the .html file in the browser does not work for me.

Lingering questions:

Does the tutorial game need to be hosted on a server in order to function?
Is this what I was supposed to do? Does the tutorial game need to be renamed from part1, part2, etc. to ‘index.html’?
Why does sky.png still load when I move the assets folder outside of the web root?
Where are we supposed to unzip phaser-3.15.1? The web root, I assume? Moving it in-and-out of the web root also had no effect on the script running and sky.png appearing.

miguelitolaparra · January 8, 2019, 8:07pm

Thanks for the comment. My file was always called index.html I tried to change what you said, but I still have the same problem.

I do not understand what you mean by:

I looked for “Frequently Asked Questions” to find a solution, but nothing similar to what it shows me appears:

If you can tell me some idea to be able to solve this.
I’ve been trying to solve this without success for 25 days.

samme · January 8, 2019, 9:04pm

@HKoiohwah you do need to run the tutorial game on a server. This is covered in Getting Started with Phaser 3. You can view each page at, e.g., http://127.0.0.1:8000/part1.html. You don’t have to rename them.

@miguelitolaparra don’t use your own server.js yet, that’s too confusing at the start. From the project directory, do

npm i -g http-server
http-server -o -c-1

miguelitolaparra · January 8, 2019, 10:13pm

Why should I use this?

This line, if I understand it, is telling me to install http-server globally.
I have doubts about the other line, what function does it have?

Thanks for the support. Reading the tutorials, this seemed easier

samme · January 8, 2019, 10:24pm

If you’re following http://phaser.io/tutorials/getting-started-phaser3/part5 exactly, you actually don’t need to download Phaser at all, because the HTML sample there is linking to Phaser on CDN:

<script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js">

Maybe @rich can note that in the tutorial as it’s a little confusing.

If you download your own Phaser you can put it anywhere in the web root as long as you link to it using the correct path, e.g.,

<script src="./phaser/dist/phaser-arcade-physics.js">

miguelitolaparra · January 8, 2019, 10:48pm

This tutorial works perfectly for me as I show in the image:

Y el codigo es tan simple como le muestro a continuación:
const http = require(‘http’)

//server.js
const fs = require('fs')

const server = http.createServer((req, res) =&gt; {

fs.readFile("./index.html", (err, data) =&gt; {

if(err){console.error(err); return;}

res.end(data)

})

})

console.log('escuchando en el puerto 3000')

server.listen(3000)

///////////////////////////////////////////////////////////////////////////

// file : index.js

var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config)

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io')

        this.load.image('sky', 'assets/skies/space3.png')
        this.load.image('logo', 'assets/sprites/phaser3-logo.png')
        this.load.image('red', 'assets/particles/red.png')
    }

    function create ()
    {
        this.add.image(400, 300, 'sky')

        var particles = this.add.particles('red')

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        })

        var logo = this.physics.add.image(400, 100, 'logo')

        logo.setVelocity(100, 200)
        logo.setBounce(1, 1)
        logo.setCollideWorldBounds(true)

        emitter.startFollow(logo)
    }


///////////////////////////////////////////////////////

// file index.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

    <script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
    </script>

</body>
</html>

This was the first I did when I started with Phaser.
Phaser I do not have it downloaded, I installed it with NPM. But it is also called with CDN as seen in the code.
What I do not understand, is because it does not work when the images I have in the project folder.
What function does it have: http-server -o -c-1?
If you tell me what this means, I will run these commands to see if this works.
Thank you for the interest you are showing in offering me help, I was excited to start creating things in Phaser and I found this problem that discouraged me a little, although I searched for several sites, without success.

Jackolantern · January 9, 2019, 1:45am

-o makes the browser open automatically after you start the server.
-c-1 disables caching, which is good for when you are programming.

I also recommend to use http-server. Node.js is fairly low-level for a web server and a lot of little things can go wrong. Problems that we would really need to see your whole file structure possibly to discover.

But http-server is extremely easy. I prefer it for Phaser development. Once it is installed, open the console, move to the folder where your files are, and then run the http-server command and your server comes up.

Topic		Replies	Views
Making your first Phaser 3 game tutorial - Problem with displaying an image Phaser 3	15	3394	February 23, 2020
Using Cordova with Phaser 3 and using Image Not Appearing in Browser Phaser 3	0	316	July 28, 2021
Problem to show images Phaser 3	26	2373	April 10, 2020
Image not display? Phaser 3	3	654	September 2, 2019
I can't add image neither background images nor sprites Phaser 3	8	457	April 12, 2020

Why do not the images appear in my first game?

Related topics