Why do not the images appear in my first game?

Phaser 3
21

Thanks, this seems to work.
Now running the command http-server -o -c-1
Mozilla will open automatically and show the first blue background.

Without a doubt the problem was that I did not have installed hhtp-server
First it did not work when running the command of my package.jon: npm start, followed the black screen with the green square in the center.
Change the code of my server.js to the one I show below, and it works perfectly.
I made an incredible mistake that without the help of @samme I would not have noticed.
Now it works in two ways: npm start(which does not reflect the changes and I must run again when I change the code) and also with: http-server -o -c-1 (changes are automatically updated)
Thank you very much for the support that everyone has given me: @Olf , @PBMCube , @Odin_Jensen , @rich , y @Jackolantern (Thank you all)
It will not be the last time you will see my questions, because I often make mistakes in childhood and many of them still do not know how to correct them.
I hope to learn so that I can also help.
Thanks, I will continue with the tutorial to know better Phaser and its operation, before creating anything new.
Thanks again to all for your support, with all the answers given, I learned something new.

So now is my server.js:
const http = require(‘http-server’)

const fs = require('fs')

const server = http.createServer((req, res) => {

fs.readFile("./public/index.html", (err, data) => {

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

res.end(data)

})

})

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

server.listen(3000)
22

Use the chrome webserver plugin. It’s easy b and it works :grinning:

Regards Odin

1 Like
23

I don’t think you should be writing your own Node.js scripts right now. By working with Node.js, you are actually trying to learn two different things at once: Node.js and Phaser. I would suggest to work on Phaser first. Don’t write Node.js server scripts. Run http-server from the console.

  1. Install http-server from npm (I think you have already done this)
  2. Open command line (not sure how to say that so Spanish auto-translator will pick it up right; it is probably being lost in translation. Maybe a bilingual Spanish user can help?)
  3. Change to the directory with your files
  4. Type http-server -o -c-1
  5. The browser should open up with your game

Or follow Odin’s suggestion and just the Chrome webserver plugin. The simplest solution here will be the best.

Best of luck!

1 Like
24

Hi, I know this thread is a little old but I hope someone can help me. I am having pretty much exactly the same issue, except I have a little experience using node.js and I want to use my own node server. Can anyone give me some tips as to what might be wrong with my server configuration if I am having this issue?

Edit: Never mind I got it. for anyone else who’s having this issue, you just need to specify your folder for express to look for your static assets. Add app.use(express.static('/*path to folder containing your images*/')); in your server file

4 Likes
25

@MrStashley,

THANK YOU!! I have been reading blogs for hours and your last recommendation was spot on. Running node.js/ express server/ react/ phaser… could not get the image to render until I read your post. Thank you for following up even if it was months later.

1 Like