My First 2D Javascript Game Engine
Video games were magical black boxes to me, even after programming for fifteen plus years.
Not to say I was completely clueless.
Back when I was a kid I played them, but I knew absolutely nothing. For a few years I even thought game artists and programmers had to draw out every possible frame and save them on the disk (ouch.)
By the time I was a teenager I had a deeper knowledge. In downtime between classes and at home I made some simple games on my Ti-83 calculator and a few others in Visual Basic. I had also poked around inside a few games on a modded Xbox.
After that I didn't find time to pursue game development as a hobby until graduating college.
What I did know was that games had to be fun, and responsive. I knew that they had to render an image for every frame. I even understood the order of magnitude speed differences between RAM, disk access, and network transfers. But I had a hard time grasping how games could do so much. Rendering 3d models, loading textures, talking on the network, playing audio, and more. All at once.
I wanted to develop an intuitive understanding of what was happening and what the thresholds were. I wanted learn what the moving parts were and how they chooch. I wanted to dissect engines and build my own.
Build the engine in Rust?
Around the same time as my budding interest in making an engine was the first stable release of the Rust language. If you haven't heard about Rust, it's an exciting language with some unique safety guarantees and a helpful community. One of my coworkers was building a ray tracer in Rust. Conversations about that, plus some blog posts, inspired me to give the language a try for this. Excitingly, things started to get off the ground. I managed to piece together a game loop and rendering code that could show a title screen and one level with a square that moved around a "house". I loved working on a game engine, and I loved working in Rust. But I didn't love learning to build a game engine in Rust. It might have been concerns about how I was going to distribute the games I might make (probably distributing binaries.) It might have been annoyances with getting fonts and images loaded. Or it might have been too many new concepts at once. Whatever the cause, I decided to see if I could build an engine in a language I knew already. I could save Rust for later.
Could I build it in JavaScript?
I might have never considered trying to make an engine in JavaScript if I hadn't come across the CodeIncomplete blog.
This was a language that I knew well, and this was also a language going through exciting modernization changes.
It took a bit of trial and error, but I got something small working. It didn't do much (a little square walks around a landscape of squares), but it felt great to have something that worked and which I could easily share.
Demo
The source code is available by just viewing the source in the browser on the demo page.
Learnings
I got a taste of my wish: Learning how games worked. In this process I had been introduced to game loops, timing, input handling, and basic rendering. Even more exciting, I now knew that I had more to learn. Quadtrees, rendering only within the viewport, collision detection, physics, finite state machines, loading levels and menus... I'm hooked.