Sardines! - Optimizing Web Games - Part II

So I had a rough prototype of the game set up, but there were a few problems: the game was pretty laggy, the whole thing happened in DOM, and opening the game on multiple PC's would desync the fish's location. Additionally, it was difficult to tell which fish was which.

First things first, telling which fish was which. Using the mask that I had created, I used CSS's kind of supported "mask-image" ability to create a gradient and then mask it to the body. I then used the joystick's angle to rotate the fish in the way that it was facing. Here's roughly what the game looked like now:

The next problem was that everything was happening in DOM. The solution for this was to transfer it all over to canvas. Drawing rotated images is slightly more resource intensive (and I'm still working on making this easier), and the gradients are considerably harder. However as a whole, it ends up feeling like a much more finished product, and it's a lot easier to diagnose problems and reduce lag. Plus, it provides me with another framework that I can sink my teeth into!

The final problem was that opening the game on multiple PC's would desync fish locations. This is where I had to rethink the design. I had the PC's being the servers, but obviously they then desync. Instead, the server code would keep track of all of the session ID's, and pair them to a fish. Currently, whenever it gets the data from a joystick it pushes the updated array. The PC currently pulls that data in when necessary, and constantly is redrawing the screen with the updated positions. One problem with this is the amount of data being sent. In the future to reduce lag, I'll only send data for new fish that need to be updated, and I won't clear the whole screen in the canvas redraw events: only the necessary chunks.

For now, however, this is roughly what it looks like in action.