Canvas is render too slow when there are 4 players in game

[weratius]

Hello!

 

I'm creating a game right now

 

I chosed Phaser due to it's effectiveness, ease in use and so on, but I have some problems and here it is:

 

I have a game. There is a client and server with websocket connection.

Everything works fine on localhost, fps = 60, even with mobs and so on

 

but when we try to test our game on the server the fps slow down to the range between 9 - 60 

Why does it happen?

What's the problem can be?

 

(I can't example the whole code, there are about 7 different interfaces in it, but I can show some parts of moving methods if it's necessary)

 

Thank you in advance, I really can't find out what's the problem is

 

Here is the arrow control and coords send method to server if you're moving

arrowControl: function() {        if(!this.iAmOnPlanetNow && !this.movingToPlanet && !movingToGalaxyGate) {            if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {                myShip.body.angularVelocity = -200;                iAmRotatingNow = true;            } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {                myShip.body.angularVelocity = 200;                iAmRotatingNow = true;            } else {                iAmRotatingNow = false;            }             if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {                this.sitAccessSend = false;                var speed = (playerInfoObject.engine.speed != null) ? playerInfoObject.engine.speed : 0;                game.physics.arcade.velocityFromAngle(myShip.angle, speed, myShip.body.velocity);                myShipNickName.x = myShip.x - 30;                myShipNickName.y = myShip.y - 50;                iAmMovingNow = true;            } else {                iAmMovingNow = false;            }        } else {            iAmRotatingNow = false;            iAmMovingNow = false;        }    },    coordChangeCheck: function() {        if(!stopSendingCoords) {            if (iAmMovingNow || iAmRotatingNow || this.movingToGalaxyGate) {                if (iAmMovingNow || this.movingToGalaxyGate) {                    playerInfoObject.x = Math.ceil(myShip.x);                    playerInfoObject.y = Math.ceil(myShip.y);                }                // tmprotation = myShip.rotation;                var event = {                    type: "updateCoords",                    x: myShip.x,                    y: myShip.y,                    rotation: myShip.rotation,                    cookie: getCookie(cookiename)                };                var str = JSON.stringify(event);                ws.send(str);            }        }    }

here is the request from the server when somebody moves (the request is sent to the websocket):

case 'userMove':      otherPlayerInfoObject[obj.login] = obj;      break;

and here is code changing the enemies position:

      for(var playerLogin in otherPlayerInfoObject) {            if(otherPlayerInfoObject[playerLogin].x != null && otherPlayerInfoObject[playerLogin].y != null) {                if(createdPlayers[playerLogin] != null) {                    createdPlayers[playerLogin].nickName.x = otherPlayerInfoObject[playerLogin].x - 30;                    createdPlayers[playerLogin].nickName.y = otherPlayerInfoObject[playerLogin].y - 50;                    createdPlayers[playerLogin].ship.x = otherPlayerInfoObject[playerLogin].x;                    createdPlayers[playerLogin].ship.y = otherPlayerInfoObject[playerLogin].y;                    createdPlayers[playerLogin].ship.rotation = otherPlayerInfoObject[playerLogin].rotation;                    delete otherPlayerInfoObject[playerLogin];                }            }        }

createdPlayers is the main players' object 

 

 

Thank you in advance. Any help, guys will be appreciated)

[megmut]

Are you updating all the players x and y from the ws at once with one object, or are you passing each players details one at a time?

[weratius]

Are you updating all the players x and y from the ws at once with one object, or are you passing each players details one at a time?

I create an object in ws where I pass all coords of all players and then in update method I loop through them setting coords 

[Skeptron]

One thing that greatly impacts performance when doing multiplayer is the number of exchanged sockets per second. If the client sends / receives 7-10 or more sockets per second, this will impact performance a lot. Try to optimize this as much as possible. For example, do not send every user action as soon as they are done : batch them and send an array of action every 250 ms (or so, find your own tuning). And avoid sending user actions if they are useless! (example : do not send "trying to move left / pressing left arrow" if the player is stunned!)

Do not send server updates every frame but rather 4 to 6 times per second (and use client prediction / interpolation).

 

You could also not send updates for players who are not visible (off-screen). There is no little saving here. Every socket you can save is a big win.

 

The websocket protocol is awesome but very costly. This is a huge bottlneck and you have to keep that in mind.

 

Also, you can try various other optimisations : let the players choose his own resolution (canvas size), within suggested range, or choose his desiredFps (so that weaker devices can still play, even though at 30FPS, which is really acceptable).

 

And of course, you should try having 4 players in the scene, offline, and see if performance drops are due to just having 4 animated sprites in the scene (after all, it's maybe not related to networking).

[weratius]

One thing that greatly impacts performance when doing multiplayer is the number of exchanged sockets per second. If the client sends / receives 7-10 or more sockets per second, this will impact performance a lot. Try to optimize this as much as possible. For example, do not send every user action as soon as they are done : batch them and send an array of action every 250 ms (or so, find your own tuning). And avoid sending user actions if they are useless! (example : do not send "trying to move left / pressing left arrow" if the player is stunned!)

Do not send server updates every frame but rather 4 to 6 times per second (and use client prediction / interpolation).

 

You could also not send updates for players who are not visible (off-screen). There is no little saving here. Every socket you can save is a big win.

 

The websocket protocol is awesome but very costly. This is a huge bottlneck and you have to keep that in mind.

 

Also, you can try various other optimisations : let the players choose his own resolution (canvas size), within suggested range, or choose his desiredFps (so that weaker devices can still play, even though at 30FPS, which is really acceptable).

 

And of course, you should try having 4 players in the scene, offline, and see if performance drops are due to just having 4 animated sprites in the scene (after all, it's maybe not related to networking).

Cool, thank you!!

 

I will try)

 

Really great answer!!!

[weratius]

One thing that greatly impacts performance when doing multiplayer is the number of exchanged sockets per second. If the client sends / receives 7-10 or more sockets per second, this will impact performance a lot. Try to optimize this as much as possible. For example, do not send every user action as soon as they are done : batch them and send an array of action every 250 ms (or so, find your own tuning). And avoid sending user actions if they are useless! (example : do not send "trying to move left / pressing left arrow" if the player is stunned!)

Do not send server updates every frame but rather 4 to 6 times per second (and use client prediction / interpolation).

 

You could also not send updates for players who are not visible (off-screen). There is no little saving here. Every socket you can save is a big win.

 

The websocket protocol is awesome but very costly. This is a huge bottlneck and you have to keep that in mind.

 

Also, you can try various other optimisations : let the players choose his own resolution (canvas size), within suggested range, or choose his desiredFps (so that weaker devices can still play, even though at 30FPS, which is really acceptable).

 

And of course, you should try having 4 players in the scene, offline, and see if performance drops are due to just having 4 animated sprites in the scene (after all, it's maybe not related to networking).

I still have problem when all players stand still, but none of packets are sent via webscoket. Maybe there is such a problem because of a json animation of their sprites?

[Skeptron]

If the game is still laggy with absolutely no networking, then it's hard for us to say. There could be thousands of reasons. Be sure to test each player specifically (alone). And try to isolate and test anything that is resource-consuming (particle effects), mobs, tweens, map etc.

[drhayes]

Sorry, is the game engine running on the server getting slow or are the clients getting slow? If it's the server I'd say try hosting it somewhere else; PaaS providers like Heroku throttle processes. If it's the client I'd be suspicious of the JSON serialization you're doing vs. making a custom wire format, especially if you're doing it every frame.

[weratius]

Sorry, is the game engine running on the server getting slow or are the clients getting slow? If it's the server I'd say try hosting it somewhere else; PaaS providers like Heroku throttle processes. If it's the client I'd be suspicious of the JSON serialization you're doing vs. making a custom wire format, especially if you're doing it every frame.

The fps of each client is getting slow when there are 4+ different players on the screen and there is a planet and sun sprites with animation something like this:

//in the boot.js game.load.atlasJSONHash('rc', 'img/animatedObjects/bases/' + playerInfoObject.system.base0.type + '.png', 'img/animatedObjects/bases/' + playerInfoObject.system.base0.type + '.json');//and here is some file play.jsrangerBase.animations.add('run');rangerBase.animations.play('run', 20, true);