Writing A 2D Game Framework in Javascript

theharshsingh

Harsh Singh

Posted on November 28, 2021

Writing A 2D Game Framework in Javascript

I began working on bottlecap.js in the fall of 2020 as a fun little side project for making fun little games for recreation. I am not a game dev by profession and I had no prior experience in game dev. but after watching some Indie game devlogs on Youtube I decided to participate in a game jam. I quickly opened itch.io and began searching for a nice game jam I could participate in. I decided to participate in Mini Jam 68. Mini jam is a 72-hour-long, game development jam for independent game developers that occurs every two weeks. Ok great, now I had to make a game. but I didnt knew from where to begin. What Game Engine or Language I should use? After thinking about it for a while I decided to use Vanilla Javascript for this purpose.

First step was to draw something on the Canvas. I had some prior experience with Canvas 2D API and it helped me a lot. Nice now how do I load assets? because I am from the Web Dev background It wasn't a big proble. I was able to display some animated sprites on the screen within two hours. Controls werent a big issue cause it was going to be controlled with keyboard only. But one thing that took most of my time was to figure out a way to load sound assets and play it. I quickly googled it and found Web Audio API, but after reading through the docs of Web Audio API, I decided to use plain old HTML5 Audio, because Web Audio API looked like a nightmare. After sorting out all these issues, I was able to submit the game 11 hours before the Jam's deadline. My Game was ranked #14 Overall, which I think is a great achievement for a first entry to a Game jam.

But by this time I had realised writting a Game completely In Vanilla Javascript is not the most intelligent thing to do, so I decided to learn a Javascript Game Engine. So I quickly googled "Best Javascript Game Engines". But all of them felt too bloated or overkill for the games I wanted to make. So I decided to What I was always told not to do by my seniors - Reinvent the Wheel. Make my own Game Framework.
Reinventig The Wheel
So I started working on bottlecap.js in the fall of 2020. I decided to implement the basics like - An animation loop, a tiny library for collision detection and loading assets, some math and utility functions required for creating a basic game.

I used the first version of it for creating "Sneaky Tails", that was going to be my first entry to the Major Jam 3: Retro. It had a limitation too - 96x96 screen resolution. So me and a friend of mine whom I met on Major Jam's discord server, began working on the game. He liked bottlecap.js and its minimalist approach, but was afraid to use it because of lack of documentation (which It still lacks to date). Sadly it didnt got as many ratings as the previous game did, but it helped me in improving bottlecap and adding some new features to it and also fixing a lot of bugs.
Sneaky Tails Logo
Now, After an year of sluggish development, bottlecap.js can be used for making basic 2D games and is most suited for creating Hypercasual games. I am saying its most suited for creating Hypercasual games because of the experience I got from the development of Hydrogen - A 2D Hypercasual game which was my entry to the Hypercasual Game Jam.

Hydrogen Hydrogen

bottlecap.js is open-source and is licensed under MIT License. You can download it from its Official Website: https://bottlecap.js.org, or from its Github page. Do Tell me if you decide to make a game using it.
Any improvements to the engine are also welcome and you can build your own Game Engine on top of it because it is highly modular and does not forces you to use all of the modules it offers.

Currently it lacks documentation, So please help me out in documenting it.

Jai Bharat!

💖 💪 🙅 🚩
theharshsingh
Harsh Singh

Posted on November 28, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related