Hi world. I'm Dyn, the creator of Raider Legend. In this devlog I'm talking about how I improved my game's performance from about 48 ms delay (~20fps) to almost 0 delay (~60fps). Let's go.

Raider Legend is written in JavaScript. Performance-wise not as good as C++, but it is not that bad and I can use the very convenient Canvas API which saves a lot of time and trouble. When I first made the game (in the mid-late of March), it is terrible to be honest, whether it is the speed of rendering, time of computation, and even the game itself. And after two weeks of working, I couldn't hold it anymore - I'll do the thing: optimization. At this point, my lovely new project was running at a whopping 25 or sometimes even 20 fps, so I got to work.

The first thing I could think of that was burning the game is collision checks. Previously, I used an extremely naive approach of calculating whether objects are colliding by comparing the coords of the subjects and objects, which is painfully slow and inefficient. But I got an idea - every object in the game has a 12 by 12 hitbox, then why didn't I save their coords as a formatted string and use the Array.prototype.includes and indexOf functions to do the trick? I immediately experimented with this idea and sure enough, the delay between each frame halved. At this point the game is at least playable on my shitty laptop, but the problem came back when the character dashed into an area that required lotta rendering.

I was hopeless, staring at my screen thinking about a solution. Suddenly, I got an idea from the plain and boring Wall Block. If all Wall Blocks don't change their apperance at all, why didn't I cache them somehow? After a bit of trial and error, I found the solution - all blocks (or objects) that don't look different in their lifetime can be drawn on an invisible canvas, where at gameplay the clock just use the cache canvas to represent all blocks in that type. The best thing about this is that as the number of instances goes up, it doesn't affect performance at rendering since they are cached already. This fixed the last half of the delay, meaning my game is now running butterly-smooth at a stable 60 fps.

Fast foward 4 months, it is almost at the end of July, and things were looking good. I gave the game consistent updates. But the ol' problem came back like a phantom. It wasn't so big of a deal as performance drop was only seen in a terribly huge level. But I was determined to kill this 'ghost' once and for all. I focused at rendering, the almost certain reason why the drop existed. This time it was much simpler - I implemented the so called 'lazy rendering' system to most blocks in the game as I observed that most blocks have an unified animation among all instances of the same type. The advanced 'lazy rendering' system now supports unified animation, like the blinking of Stars. It now requires an array of functions of every frames of the animation, plays it back in a loop or according to a certain condition.

... And that's how I greatly improved my game Raider Legend's performance! If you found this article interesting or inspired you, give it a like! I will be very happy :)

If you have any comment, please let me know. I would very appreciate that too :D

PLEASE CHECK OUT MY GAME - dyn-p.itch.io/raider-legend. Thank you!

- Dyn <3