Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to Animate Multiplayer Cursors

liveblocks.io

Post reply on HN
Print view View original

51–60 of 64 posts

Re: How to Animate Multiplayer Cursors

#51

Post by neandrake »

somehnacct3757 wrote: post #20

This is analogous to player position in any multiplayer game. One additional parameter to keep in mind is how real-time does your simulation of remote players need to be? If you don't need real-time positioning there's a whole other dimension of shortcuts you can take by introducing what amounts to a 'streaming delay'. In a lot of these apps the cursors can't interact with each other so you have no need for real-time…

Here's a series of articles about client-server game architecture which I found tremendously interesting, and it's a bit more involved than what's explained in this article on cursor positions though I agree the basics are similar. It starts out explaining a naive approach, identifying the issues with that, and moving to more advanced solutions which involve prediction. The article also has a good explanation that goes a bit more in-depth to how the latency causes issues with the gameplay.

https://www.gabrielgambetta.com/client-server-game-architect...

Re: How to Animate Multiplayer Cursors

#52

Post by keyle »

jewel wrote: post #6

There's another approach that might work better. Instead of sampling the mouse position every 100ms, you'd save off all the mouse positions, and then send the latest batch every 100ms. The other side would then replay the exact positions, just delayed by 100ms. It'll end up with the same latency as these motion smoothing approaches, while only using slightly more bandwidth.

You've added a crap ton of data though. The point is to show someone's movement, not every pixel the hovered.

Sampling X amount per second is enough, and send every clicking position in between as those are valuable information. The rest is noise.

Re: How to Animate Multiplayer Cursors

#53

Post by Sohcahtoa82 »

paulryanrogers wrote: post #43
Sohcahtoa82 wrote: post #40

Earlier quoted context omitted.

Not only is this is needless pedantry, it's also incorrect, making it a very typical HN comment. It is not uncommon to refer to pointers as "mouse cursors" or shorten it to just "cursor". In fact, Wikipedia considers pointers to be a subset of cursors. https://en.wikipedia.org/wiki/Cursor_(user_interface)#Pointe... "In computer user interfaces, a cursor is an indicator used to show the current position for user inter…

Is it so needless? Perhaps I'm misremembering but the distinction was at least useful in the past as GUIs evolved out of TUIs. If they had said pointers there would be no confusion.

Since its wrong, I'd think it's basically needless by definition.

Re: How to Animate Multiplayer Cursors

#54

Post by ec109685 »

Aeolun wrote: post #46
Sohcahtoa82 wrote: post #39

Earlier quoted context omitted.

Yeah but stop and think about how little bandwidth it still is. X and Y can easily be 2 bytes each, 4 bytes total. 100 samples per second is a mere 400 bytes per second. You could do it from a dialup modem from the early 90s!

You could, but I think for most web applications the authors wouldn’t think about binary encoding. So you’d end up with something like: {“x”:50,”y”:56} Encoded as a UTF8 string, which is 15 bytes, x100 is 1.5kb/second/participant. Ok, I guess that’s still not that much.

That’ll get compressed a bit too.

Re: How to Animate Multiplayer Cursors

#55

Post by acomms »

AnotherGoodName wrote: post #16
acomms wrote: post #11

Earlier quoted context omitted.

I like this solution but would latency create issues? You'd only be sending 100ms worth of motion every ~120ms. Would you just drift 200ms behind with every passing second (20ms behind after each 100ms batch)? I think I may be missing something though.

You actually intentionally start with more playback delay with this method and sync playback with the other user intentionally 300ms behind (assuming a 100ms latency) So the remote user packets up 100ms of mouse movement with timestamps, sends it with ~100ms latency. Your side now has a buffer of ~100ms to start playing the positions back. This also removes all jitter in the playback from varying latency (up to the p…

Thanks, that makes sense!

Re: How to Animate Multiplayer Cursors

#57

Post by slingnow »

capableweb wrote: post #29
somehnacct3757 wrote: post #20

This is analogous to player position in any multiplayer game. One additional parameter to keep in mind is how real-time does your simulation of remote players need to be? If you don't need real-time positioning there's a whole other dimension of shortcuts you can take by introducing what amounts to a 'streaming delay'. In a lot of these apps the cursors can't interact with each other so you have no need for real-time…

> This is analogous to player position in any multiplayer game. Not sure. Multiplayer games are easier to predict player movement. Once someone starts moving forward, you can predict that they'll move forward for a little while, start turning, continue forward and so on. Add in physics (like the motions/movements of a car, or the running of a human) and there will be constraints the player can't break (when you stop…

Have you ever played a multiplayer game? Have you seen how people move in FPS games? Highly erratic, especially during gun fights. Instantaneous starting and stopping.

Your example is only relevant if the player just loves to hold down the "move forward" key for long periods of time.

Re: How to Animate Multiplayer Cursors

#58

Post by zaptrem »

cousin_it wrote: post #9
jewel wrote: post #6

There's another approach that might work better. Instead of sampling the mouse position every 100ms, you'd save off all the mouse positions, and then send the latest batch every 100ms. The other side would then replay the exact positions, just delayed by 100ms. It'll end up with the same latency as these motion smoothing approaches, while only using slightly more bandwidth.

Yeah, wanted to say the same thing. If latency is the only problem, just batch up the updates and replay on the other end. If bandwidth also becomes a problem, only then start compressing the data. But to be honest, if we can stream video over the internet, we surely have enough bandwidth to stream cursor positions.

Could also have a positive impact on battery life as it would let the WiFi/cellular radio sleep longer.

Re: How to Animate Multiplayer Cursors

#59

Post by JayStavis »

sghosh2 wrote: post #3

The animations on the blog itself are incredible. Would love to read something in the future about how you guys put this together (i.e. what frameworks, components, tooling is used to generate these blogs).

This may interest you

https://www.joshwcomeau.com/blog/how-i-built-my-blog/

Re: How to Animate Multiplayer Cursors

#60

Post by Etherlord87 »

gernb wrote: post #37
jewel wrote: post #6

There's another approach that might work better. Instead of sampling the mouse position every 100ms, you'd save off all the mouse positions, and then send the latest batch every 100ms. The other side would then replay the exact positions, just delayed by 100ms. It'll end up with the same latency as these motion smoothing approaches, while only using slightly more bandwidth.

Am I missing how that would work? That's an exponential increase in bandwidth needed to send all the mouse positions. 1 position per 100ms per player vs 10-30 per 100 ms per player. Those positions all have to be propagated to other players. so in the first case, 10 players = 10 positions per 100ms. In the 2nd case is 100-300 positions per 100ms.

60 FPS = 60 F/s = 6 F/100 ms - so where did you get 10-30? That would mean 90-270 FPS, you don't need that much for a cursor.
Post reply on HN