Intro to Kaboom: A JavaScript Library for Game Development
I recently decided to take a breather from LeetCode challenges and react application development. I still wanted to stay in the JavaScript role, but I wanted to add some variety and fun into my coding routine.
For a while, I’ve been bookmarking some cool tutorials from FreeCodeCamp that teach you how to develop games. I felt like I needed some more experience with my stack, before I shifted gears into creating games. Thankfully, I found that tutorials and the Kaboom.JS library to be extremely accessible, easy to use, and fun when it came to building my first game: a clone of Super Mario Bros. It was a great experience that allowed me to delve more deeply into the incredible diversity and functionality of JavaScript.
What is Kaboom?
Kaboom for the uninitiated is a Javascript library that helps you build games fast and smooth. The best benefit of using kaboom if you’re starting out is that it’s low barrier of entry makes it ideal for those who want to dabble and start designing games right away. The documentation for Kaboom is straightforward and simple to use, and the library essentially uses “shortcuts” (build in methods, actions, etc.) to make the game development process easier.
Getting Started with Kaboom
To start up your kaboom app, you will need to call Kaboom to initialize the kaboom context like so:
P.S. If the building environment for your application is your code editor, make sure to import the Kaboom.JS library as well as your JS file into your html file.
Create your Scene
In Kaboom, everything belongs to a scene. We can think of the scene as essentially what the game is going to look like, behave, and involve.
In the example above, we’ve call the scene method for our “main” scene and will pass in the other components of the game inside of the function. Lastly, we will need to call the scene using start at the end.
Load your Sprites and Create Player
Now, we’ll want to start “drawing” our sprites onto our game UI. In computer graphics, a sprite is a two-dimensional bitmap that is integrated into a larger scene, most often in a 2D video game. For this tutorial, I used a yeti sprite I pulled from Imgur.
In order to load our sprites and create our players, we’ll want to call the load sprite method, pass in our sprite image info, and in the scene create the player.
If all your code is correct, you should successfully see the yeti sprite on your screen. Right-click on your index.html file, copy the path, and open the path in a new browser page.
We’ll want to start adding basic behavior to our sprite by adding the body component to your initialized sprite. This method essentially makes your sprite adhere to the “rules of gravity”. Once this method is called, your sprite will start falling of the screen, so we’ll want to create a temporary platform as well.
Kaboom Key Events
The body method gives your sprite access to methods like <jump> and <move>. We can call these methods in combination with key events to add more interesting behavior to our sprite. Let’s give our Yeti the ability to move left and right and jump. Add the following lines of code within your main scene function.
Add A Background Image
To wrap up this quick intro tutorial to kaboom, let’s add a background image to our UI and scale it to size.
As an FYI, i removed the loadRoot method, since I am using two sprites from two different websites. As a result, I coded the full web address in the loadSprite method.
Voila, your game should look as so:
Now that you know the basics, go ahead and feel free to play around with creating your first game! I recommend following along with the FreeCodeCamp tutorial and afterwards trying to build a simple game on your own!
Resources:
- https://www.freecodecamp.org/news/how-to-build-mario-zelda-and-space-invaders-with-kaboom-js/
- https://kaboomjs.com/
Credit for Sprite images:
