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

21–30 of 64 posts

Re: How to Animate Multiplayer Cursors

#21

Post by DonHopkins »

I love this article! Great analysis and solutions. It's nice when user interface designers care enough to think through, implement, try out, and refine such important details.

I developed a multi player version of SimCity for X11 that I released in 1993 and demonstrated at the InterCHI '93 Interactive Experience, which showed you other player's cursors moving around and editing the map, but of course it required a fast network to run on and updated all the clients synchronously, due to the limitations of X-Windows, so there were no interpolation issues. (X-Windows clients aren't even capable of performing local computation and feedback the way NeWS clients could and web browser clients now can, so it was a moot point.)

https://www.donhopkins.com/home/catalog/simcity/simcity-anno...

https://www.donhopkins.com/home/catalog/simcity/simcitynet.h...

The multi player demo showing different kinds of voting dialogs, multiple cursors, the tool palette and pie menus, and the voting "yes" shortcut of building the same thing in the same place, starts at 5m45s:

https://www.youtube.com/watch?v=_fVl4dGwUrA&t=5m45s

One interesting thing about the SimCity cursor was that it was color and shape coded to show which tool was selected. The tool palette (and also the pie menus which had the same icons and layout as the tool palette) served as a legend for the cursor by showing the same color coded outline around the icons as the cursor used. So you could tell which tool other users had selected. You could hide the tool palette to make the map bigger, and use the pie menus instead, which were much more efficient.

Multi Player SimCityNet for X11 on Linux: Demo of the latest optimized Linux version of Multi Player SimCity for X11. Ported to Unix, optimized for Linux and demonstrated by Don Hopkins:

https://www.youtube.com/watch?v=_fVl4dGwUrA

Micropolis Online (SimCity) Web Demo: A demo of the open source Micropolis Online game (based on the original SimCity Classic source code from Maxis), running on a web server, written in C++ and Python, and displaying in a web browser, written in OpenLaszlo and JavaScript, running in the Flash player. Developed by Don Hopkins:

https://www.youtube.com/watch?v=8snnqQSI0GE

Source Code:

https://github.com/SimHacker/micropolis

HAR 2009 talk: Constructionist Educational Open Source SimCity:

https://donhopkins.medium.com/har-2009-lightning-talk-transc...

Re: How to Animate Multiplayer Cursors

#22

Post by HWR_14 »

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.

Honestly, I don't see why you'd need to batch it ever 100ms. Sure, you don't want to send a mouse movement every time an event triggers, but surely 30fps looks smooth and won't overload the system.

Re: How to Animate Multiplayer Cursors

#24

Post by layer8 »

HWR_14 wrote: post #22
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.

Honestly, I don't see why you'd need to batch it ever 100ms. Sure, you don't want to send a mouse movement every time an event triggers, but surely 30fps looks smooth and won't overload the system.

Just for comparison, the default USB mouse polling rate is 125 Hz, so 8 ms. If that is too often, 16 or 32 ms would make sense, which is close to 60 or 30 Hz/fps, respectively.

Re: How to Animate Multiplayer Cursors

#25

Post by stevenfabre »

cableshaft wrote: post #14
stevenfabre wrote: post #4

Earlier quoted context omitted.

That would be pretty meta! "how to create how to interactive articles" :)

I'm super interested in this. I have a few interactive articles I'd like to make, but I'm not sure what tech to use for it to make it relatively quickly and without taxing the page too much. Was thinking maybe the Phaser game framework, but that might be too heavy, especially if there needs to be 7 or 8 of them on the same page.

We build our interactive visuals with React and embed those into the mdx file for the blog post.

I made note for us to write a blog post about it. Stay tuned :)

Re: How to Animate Multiplayer Cursors

#26

Post by stevenfabre »

fullstackwife wrote: post #17

It depends on the app, but in some cases you should also include content identifier to the usual X,Y coordinates, as from the user perspective it is more important to see the cursor hovering on top of something instead of being "very close". The meaning is different in such case.

Exactly! With Liveblocks, you can also store anything presence related. You can for instance store a selectedId and use that on the other side to highlight the selected element.

Re: How to Animate Multiplayer Cursors

#27

Post by thomasahle »

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.

What about a mix:

Every 100ms you fit the best Beizer curve to the last batch of mouse positions and send that.

It seems like that would give a more precise reconstruction than fitting a Beizer curve only to one sample every 100ms on the server.

Re: How to Animate Multiplayer Cursors

#28

Post by LeifCarrotson »

HWR_14 wrote: post #22
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.

Honestly, I don't see why you'd need to batch it ever 100ms. Sure, you don't want to send a mouse movement every time an event triggers, but surely 30fps looks smooth and won't overload the system.

You can't reliably send, fail, retry, and confirm receipt of a TCP packet in 33ms over arbitrary Internet connections. 8ms is right out. I can get 200us over a local EtherCAT realtime industrial IO network, but that's with careful management of well-isolated single-machine network conditions and it just doesn't work with a cellular modem for download and oversubscribed residential cable for upload. Assuming latency of 120ms (as used in the defaults in the linked tutorial) is much more realistic.

And you also can't set up your system with a 5 second delay to send data every 5 seconds, because any jitter will result in hiccups.

You could set up your system to send out the new data each time the previous buffer is acknowledged, but that's kind of pointless, if you get lucky with a good connection and can send data to be rendered 4.970 to 5.000 seconds from now, what's the difference for the user between doing that versus reducing the network load by approximately a factor of 3 and waiting until you have data for 4.900 to 5.000 seconds?

I think 100ms is a reasonable minimum batch size.

Re: How to Animate Multiplayer Cursors

#29

Post by capableweb »

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 moving forward, you'll move forward slower and slower until you stop, maybe over 100ms or so)

But mouse movement is highly erratic. It'll be short of impossible to add any sort of prediction, as it'll be incorrect most of the time, instead of being mostly correct but sometimes not.

Post reply on HN