Hi there! I'm relatively new...ok very new to coding with phaser and I'm having a tough time finding tutorials that can help guide me through a few of the basics for what I'm looking for.
I've been trying to use this tutorial:
How to make a multiplayer online game with Phaser, Socket.io and Node.js
And this one:
How to create a multiplayer game with Phaser, Node, Socket.io and Express.
However, it seems that both tutorials were made using Phaser2 and there are a few fundamental differences that don't function well using the newer code. The biggest part I'm having trouble with is the differences between game states in the old Phaser and how they are different from the scenes the new version uses.
game.state.add('Game',Game);
game.state.start('Game');
These functions specifically seem to break my game every time I try and use them. Is the new phaser designed to be run entirely through the index.html file? Or is there a way to execute most of my game's code in a separate game.js file? Currently I have at least a functioning game where I can move around on a map, but the entire thing is contained inside a single index.html file. You can see my game's code here:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Top Down Multiplayer Test Game</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.1.1/dist/phaser.js"></script>
<script src="/node_modules/socket.io-client/dist/socket.io.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.Auto,
width: 960,
height: 960,
physics: {
default: 'arcade',
arcade: {
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var player;
var blocked;
var game = new Phaser.Game(config);
function preload ()
{
//assets to use in the loading screen
this.load.image('preloadbar', 'assets/images/preloader-bar.png');
//load game assets
this.load.image('level1', 'assets/tilemaps/level1.png');
this.load.image('gameTiles', 'assets/images/Outside_A2.png');
this.load.image('gameTiles', 'assets/images/Outside_B.png');
this.load.image('emptypot', 'assets/images/emptypot.png');
this.load.image('filledbucket', 'assets/images/filledbucket');
this.load.image('player', 'assets/images/player.png');
this.load.image('doorleft', 'assets/images/doorleft.png');
this.load.image('doorright', 'assets/images/doorright.png');
this.load.image('tent', 'assets/images/tent.png');
this.load.image('sign', 'assets/images/sign.png');
this.load.image('campfire', 'assets/images/campfire.png');
this.load.image('woodpile', 'assets/images/woodpile.png');
this.load.image('tree', 'assets/images/tree.png');
this.load.image('rock', 'assets/images/rock.png');
this.load.image('grapes', 'assets/images/grapes.png');
this.load.image('log', 'assets/images/log.png');
this.load.spritesheet('dude', 'assets/spritesheets/dude.png',{frameWidth: 32, frameHeight: 48});
}
function create ()
{
this.add.image(480, 480, 'level1');
blocked = this.physics.add.staticGroup();
blocked.create(456, 216, 'sign');
blocked.create(648, 168, 'woodpile');
blocked.create(648, 216, 'campfire');
blocked.create(744, 168, 'tent');
blocked.create(840, 216, 'filledbucket');
blocked.create(600, 400, 'rock');
blocked.create(648, 448, 'rock');
blocked.create(600, 448, 'grapes');
blocked.create(214, 720, 'tree');
blocked.create(214, 552, 'tree');
blocked.create(214, 384, 'tree');
blocked.create(214, 286, 'log');
blocked.create(214, 192, 'tree');
blocked.create(358, 192, 'tree');
player = this.physics.add.sprite(480, 480, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);
cursors = this.input.keyboard.createCursorKeys();
this.physics.add.collider(player, blocked);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
})
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
}
function update ()
{
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true)
}
else if (cursors.up.isDown)
{
player.setVelocityY(-160);
player.anims.play('right', true)
}
else if (cursors.down.isDown)
{
player.setVelocityY(160);
player.anims.play('left', true)
}
else{
player.setVelocityX(0);
player.setVelocityY(0);
player.anims.play('turn');
}
}
</script>
</body>
</html>
I'm also having a few issues adapting what I see in these tutorials around using a server to keep track of my player's position and report back locations. Some examples start with something as basic as referencing socket.io in my code as a source. In all the tutorials I can find they say to use this line of code in my index.html file:
<script src="/socket.io/socket.io.js"></script>
However this doesn't work, as you can see at the top of my game file above, I had to reference the full file path, going in through the node_modules folder and finding the socket.io.js file. Am I doing something wrong? Or am I supposed to reference the full file path and the tutorial is not accurate?
Finally when trying to implement some of the code in the tutorials into the game file itself to tell the game to ask the server when a new client is connected, I get an error saying the code is invalid. I'm not sure if this is because I am putting the code in the incorrect place, or if it's because the code doesn't work in Phaser3 the way it did in version 2.
Client.askNewPlayer();
The tutorial says to put this "at the end of game.create()" however because I don't have game states, I have nothing I can find as the equivalent. Just for the sake of testing it out, I tried placing this code inside the "function create ()" of my game if only because of the word create, and then also in the "function update ()" of my game because I figured this is where the game is always looping and checking for updates. But both gave me errors saying that "client is not defined"
Again I'm sure you can probably tell this is my first time doing this sort of thing with real code, I've been messing around with RPG maker before this, but I really think I can get the hang of it if I can just get a few pointers or tips to get me going in the right direction! Any help or advice would be greatly appreciated!
Kipfocks changed their profile photo