0
\$\begingroup\$

I am starting to use phaser to create games and I found a problem that I can not find for more tests that I did. I can not show the images I am uploading. You only see a small square in the center, (I show it in this capture: when you should see the entire background of the canvas in green, which is the image that first charge. In the example I only charge one, so that more if it does not work. I do not see what error I'm committing, because the navigator inspector does not show errors. The server is created with Node.js.

const http = require('http')
const fs = require('fs')

const server = http.createServer((req, res) => {
    fs.readFile("./part1.html", (err, data) => {
        if(err){console.error(err); return;}
        res.end(data)
    })
})
console.log('escuchando en el puerto 3000')
server.listen(3000)

I show the code for if someone can see the error that I am committing. Thank you.

I EDIT the question:

I add the code that I should add first. The project is in a folder called Game. Here is the file server.js and package.json There is also a folder called public where the html code and images are located. I show you the code.

<!doctype html>
<html lang="es">

<head>
	<meta charset="UTF-8" />
	<title>Primer juego en Phaser</title>
	<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
	<style type="text/css">
		body {
			margin: 0;
		}
	</style>
</head>
<body>
	<script type="text/javascript">

		var config = {
			type: Phaser.AUTO,
			width: 800,
			height: 600,
			scene: {
				preload: preload,
				create: create,
				update: update
			}
		};

		var game = new Phaser.Game(config);

		function preload() {
			this.load.image('sky', 'sky.png')
			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>

enter image description here

Improve this question
\$\endgroup\$
0

1 Answer 1

Reset to default
2
\$\begingroup\$

I tested your Phaser Javascript code and it works fine. So I'm thinking it's a problem with how you've set up your server. Look up Express.js, its an NPM module that makes it really easy to set up Nodejs servers. If you want to continue using the more bare-bones http, then make sure you're using fs and that callback function properly, I don't know enough about it myself.

I will also say you should avoid loading images using the same key, I see you've used the key "sky" two image files.

Improve this answer
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .