What I used to build my first game as a web dev
We're developers, tinkerers, creatives. We mess around with stuff, break things and somehow piece them all back together. That’s the fun in building things, right?
In early 2023, I had a “What if?” moment. I already knew how to program - mostly web development - but could I use those skills to build a game? If there is one thing you have to know about me, it is that I thought it would be a fun experiment.
So I went window shopping for a game engine with two must-haves:
- No visual coding (drag-and-drop block coding was not my thing)
- JavaScript support (because that’s what I knew)
Eventually, I stumbled upon ct.js, a simple looking 2D Javascript game engine that fit my criteria.
Ct.js - A web dev-friendly game engine
When I started using ct.js, it was at version 3.2. It wasn't too feature-rich and made the perfect choice to step my toes in without being overwhelmed. The documentation and tutorials were excellent and they were built right into the engine, great modules to use (called catnip) and it has CATS!
Ct.js had assets that came with it. All I had to do was to follow the tutorials. The tutorials were extremely beginner-friendly and the best part was that everything was in the engine itself so you never have to leave the engine!
The engine also had these things called “catmods”. These modules were extremely helpful in speeding up development. Some of these modules were more likely to be used, such as the Keyboard catmod to accept keyboard inputs and ct.sound.howler to play sounds. There are probably more that I should've leveraged on like ct.cutscene to play videos, but we'll get to those some other time.
Overall, I had a really great experience using it. There were some annoying things about the UX and I had the freedom to write jank code that caused bugs but overall they were minor issues. Now that ct.js has hit version 5+, I imagine it’s even better than when I started.
Aseprite - Because I needed art (and hiring an artist wasn’t an option)
I'm not an artist, but since this was supposed to be a hobby project with a $0 budget, I had to figure something out. So I drew my own in-game assets instead of hiring artists.
Initially, I drew with Paint 3D. However, I quickly realised that having to draw every frame on a new file was a nightmare waiting to happen. That was when I found Asperite. Aseprite - a pixel art editor - was a cheap yet feature-rich program with all the things I needed, like onion skinning (which helps animate by showing the previous frames as reference)
Luckily, I wasn’t completely new to animation. I spent too many hours in my early teenage years making stickman videos with Pivot and Macromedia Flash. Aseprite, had a similar feel, and was a breeze to use.
Audacity - Sound design was an unexpected challenge for me
Sounds were where it became tricky. Unlike coding and pixel art, I had zero experience in sound design. So, I hired voice actors and searched for royalty-free assets to use.
Editing audio, thanks to Audacity, turned out to be easier than expected. It made trimming sounds and splitting a whole recording into multiple tracks very easy, which was a lifesaver when working with multiple voice lines.
Final Thoughts
Looking back, I didn’t need fancy-schmancy software to build Potato Cop (yes, we are calling it that). But each tool taught me something new, which I will explore more in a future blog!
There are still loads that I do not know. For now, if you are a web dev thinking of trying game dev, just go for it. You might just surprise yourself at how similar it may be!