Authoritative Server Questions/Errors

Hi there Phaser Communtiy!

I don’t want to waste your time so I’ll get straight to the point. I’ve been working on my “real time multiplayer game” using socket.io and express to create an authoritative server. I’ve run into some issues like being unable to add animations to each individual player, add a camera that follows each individual player, etc. I’ve been using this tutorial https://phasertutorials.com/creating-a-simple-multiplayer-game-in-phaser-3-with-an-authoritative-server-part-1/ to build off of and I feel like I’m missing some logic as to where I need to put stuff like this.anims.play(“key”, true) and this.cameras.main.startFollow(???). I uploaded the project to codesandbox here:

https://codesandbox.io/s/authoritative-server-test-dex3c

As you can see it runs fine until you hit the right arrow key (which is linked to the “run-forward” animation in the src/authoritative_server/js/game.js) causing the server to crash and pop out “Error: Uncaught [TypeError: Cannot read property ‘play’ of undefined].” I’ve tried so many things to try and solve this. Any extra pair of eyes to help me see what I’m doing wrong would be greatly appreciated! :slight_smile: :eyes:

Hi, looks interesting…
Here just having a quick look, guessing…

authoritative_server/js/game.js line 98

player.anims.play("run-forward", true);

Looks like player has no anims? or are this.anims? or related?

1 Like

Hey, @Darko I appreciate the reply. If there’s anything I can do for you let me know.
I created the anims in the create function.
`authoritative_server/js/game.js line 80-88

this.anims.create({

key: "run-forward",

frames: this.anims.generateFrameNumbers("player", {

  start: 0,

  end: 3,

}),

frameRate: 10,

repeat: -1,

});

then I thought I was able to reference it in the update function
`
function update() {
this.players.getChildren().forEach((player) => {
const input = players[player.playerId].input;
if (input.left) {
player.setVelocityX(-160);
} else if (input.right) {
player.setVelocityX(160);
player.anims.play(“run-forward”, true);**
} else {
player.setVelocityX(0);
}

if (input.up) {
  player.setVelocityY(-330);
} else if (input.down) {
  player.setVelocityY(300);
}

players[player.playerId].x = player.x;
players[player.playerId].y = player.y;

});

io.emit(“playerUpdates”, players);
}` I was following the same logic that made all the players able to move.

Hi, following your player in your authoritative_server I have seen in the addPlayer is an image, try to use a sprite instead for the animations

Anyway not sure how this should work or if the animations are necessary in the server as they are mostly visual… I will read the tutorial when I have time.

1 Like

I’ll give that a shot! I’ll let you know how it goes! I’m going to end up making a very in depth video on this. I feel like there’s not enough information out there on this particular subject.

So replacing the image with a sprite removed the error and “freezing” of the game. So that’s one good step in the right direction. :slight_smile: However, the animation is still not playing. Now I think it might have something to do with the client side not being able to “see” the animation. So additionally I tried adding the anims to the create function in src/public/js/game.js in hopes that would do something but still nothing happens. I know this must be possible, I just need to keep cranking away at it until something happens.

Hi, I think you are right using the animations in the client probably, but think about this:
Your server is updating too fast the position, and each time you are redrawing the player, so my guess is there is no time to see the animation. Try to separate this concepts but I don’t know how to deal with it or what is the best approach in this kind of games.

I hope this helps…

You definitely do not want to play animations on the server. It is a waste of server power, plus if you are running your server in node you won’t have the technologies to even run them. What you typically want to do is try to separate your game’s core logic from its drawing routines. That way both the core logic and the drawing routines can live on the client and only the core logic plus some additional logic to manage the larger gamestate will live on the server.

The only time you would even be doing anything like animation on the server is when the hitbox of your entities changes with the animation. But even then, you won’t run the animation itself (no one is watching the game running on the server, so why run it?). Instead you will simply change the hitbox sizes as they would change in the animation. But this is usually only needed for games where the hitboxes vary a lot, such as in fighting games.

The more you can separate the core logic and the drawing and other graphical routines, the more you can share your code between client and server. You could implement an entity system and program the entities to know if they are running on the server or client and skip their draw() method if it is on the server. Or separate the entities from the drawing routines completely and only have the entities know HOW to draw themselves but not actually do it. Then your client could have an adapter that looks over the whole gamestate and draws what it needs to.

There are a lot of different ways to do it, from the fairly intermediate up to the incredibly advanced.

1 Like