Moving players smoothly between two points from networked data? AKA How to handle player movement from online data

Phaser 3
1

I’m working on a simple multiplayer game using Colyseus (I know about Geckos, but Colyseus is a better fit for what I’m doing), and basically 20 times a second a new state is sent that includes player position data - x and y. Players can move at 4 units (x/y) every 50ms, aka 80 pixels/second (I’m still trying to tweak the speed).

All that works fine, however I’m having a hard time getting players to move without just plain updating their x/y locations manually (Would cause teleportation on some connections), so I want to use velocity or tweening to move the players since they all extend Phaser.Physics.Arcade.Sprite.

What I’ve tried so far:

		const newVector = currentVector.lerp(targetVector, dt);
		this.setVelocity(newVector.x, newVector.y);

^ That one causes the player to teleport around randomly on large maps, for some reason. It works perfectly with a small game world though.

this.body.setVelocity(vx, vy); // vx and vy are just +/- speed depending on direction

^ This one just… Doesn’t work right. It’s too slow even with speed fairly high, and it’s laggy.

this.body.velocity.normalize().scale(400);

^ This one, however, is really nice on small maps but impossibly laggy on bigger ones

I’ve searched and searched, I’ve looked at example projects, I’ve experimented - but I’m still not able to get something that works well. Can someone please help me, or at least point me in the right direction?

edit: I’m calling all this in the preUpdate function, after super.preUpdate();

2

What u are looking for is called client side prediction.
Your client knows “i am on position XY, i am moving with v into direction z”.
You send the direction to the server. Server is holding all x,y,v,z data for each player and updates the direction on request.
Your client than starts moving forware (in hope, he is allowed to by server) and with the next server response you should get the “corrected xyvz” values for each player.
Now you have to check “is my player at correct position on client” and move him (as you said) smoothly to the corrected position…

here is a nice example for some sort of implementation:
https://www.gabrielgambetta.com/client-side-prediction-live-demo.html

In my code im doing something like this:
i move my player as he hold key. if the client-side position is not “to far away” from server-side position, all is ok. both have calculated position corret. if not, reset players position to fit server data. This could result in a “teleport” behavior. but i also tried some “smoothing” with tweens. but that was no solution for my game :frowning:
i’m using server side matter physics and there are some forces that gets applied to each player on collisions / bullet hits and so on… But until now i dont feel its to “hopping”. I also send each 50ms updates from server to client. im using Socket.IO for communication.

dont know if this helps you at all… :frowning:

            this.setRotation( this.serverData.rotation );
            let sX = Math.floor(this.serverData.x);
            let sY = Math.floor(this.serverData.y);
            let updatePos = false;
            (Math.abs(Math.floor(this.x) - sX) > 1)&&(updatePos=true);
            (Math.abs(Math.floor(this.y) - sY) > 1)&&(updatePos=true);
            if( updatePos){

               // update pos by velocity
               this.setPosition( this.serverData.x, this.serverData.y);
               this.setVelocity( this.serverData.velocity.x, this.serverData.velocity.y );
            }
1 Like