Looking to make a game with Kaboom.js?
It's got a playful, functional API and component system built into the core of the library.
Scenes and components are just functions and all kinds of different entities can be created by simply combining components.
Kaboom.js is also a fun games library that's easy to learn and great for creating simple games quickly.
We'll be taking a look a 5 tips to help you make games with Kaboom.js even faster! This post is adapted from our video on YouTube so go check that out if you prefer to watch and listen.
1. Splitting code into multiple files
Most of the examples for Kaboom.js that you'll find tend to have all the code in a single file. That's fine for really small games but if you are making something just a little more complex then splitting your code into multiple files is going to be much easier to deal with.
They key piece for being able to split code into multiple files is a way to reference the created Kaboom.js context. We can do that by creating the context in a separate file and then importing it into a
main.js and any Scenes that we create.
If you are including Kaboom.js with a
<script> tag in your
index.html like this:
Then you can create a
kaboom.js file that creates a Kaboom.js context from the global
The Kaboom.js context is represented by the variable
k which we export for other files to use like in
This helps us separate our game code into 2 files but each Scene can also be its own file like this:
main.js we can import our Scenes and register them:
Games usually need a way to handle collisions between the player and walls or other structures. This can be easily added to entities in Kaboom.js with the built-in
Let's start by making a new Scene called
Collision and then add a floor 👇
We are importing the Kaboom.js context into this Scene file and using it to access built-in components and the larger Kaboom.js API.
Our floor is just 3 components that specify a position with
pos(), a rectangle with
rect(), and then the
solid() component makes it something that other entities can collide with.
A player entity can be added to test if the floor works:
You'll notice that the
player is quite similar to the
floor in terms of components except it has a
body() component instead of
body() component gives the entity some basic gravity functionality and makes it interact with other entities with a
Next, let's look at adding animations because plain rectangles aren't that fun to look at.
We'll need a spritesheet in order to create animations so we'll be using the 1-bit Platformer Pack by Kenney.nl.
The spritesheet will need to be loaded and we can do that in
main.js like this:
The key lines are 6 - 13 where we load the
tilemap.png file and tell Kaboom.js that it is 20 frames wide and 20 frames tall using
sliceY. We can then reference each frame using an index for animations as shown in the
There's 2 animations named
idle animation uses frame
300 and then the
run animation uses frames
302. The assets we are using are fairly simple so there's not many frames but you should be able to see how we can specify any range of frames using
Let's use this in the
sprite() component on line 5 lets us create a sprite using the spritesheet that we loaded and named
main.js. The configuration sets animation speed and the initial frame index to use.
Then to play the
run animation we just need to call
player.play() with the name of the animation as shown on lines 17, 22, 26, and 30.
4. Creating a Level
Kaboom.js provides an old school way to create levels designed in ASCII. You just need to give it an array of strings that represent different entities in your game.
Level Scene with an example level in the
level1 variable 👇
For each unique character in our ASCII level we can tell Kaboom.js what entity to create like this:
In the example above, the
= character represents a floor tile that uses frame index 65 from the spritesheet used in the
Animation Scene and a
solid() component. The
> are signs. The value of each property is an array of components making up the entity.
From here we can add a
player entity similar to what we've done in earlier examples.
5. Custom Components
The last tip and potentially most powerful part of Kaboom.js is the ability to create custom components that can be used alongside the built-in ones.
A component is just a function that returns an object like this 👇
The returned object is where you can add functions with logic that will be merged into the attached entity. You can add any functions you want but there are some reserved ones like
add() that get called on each update frame and when the component gets added.
The example component here will add logic to make the entity twice as big for a limited time. It'll look something like this:
Any entity that has the
big() component will then be able to use the functions
As an example 👇
We hope this helps you make games with Kaboom.js! If you publish something then feel free to show it to us by leaving a link in the comments below.
Check out the Ourcade YouTube Channel for more tutorials on Kaboom.js and game development in general including a video on using more advanced physics by integrating with Matter.js.
We also have a 3 part series for making a Snake game!
Don't miss any future game development content
Subscribers get exclusive tips & techniques not found on the blog!
Join our newsletter. It's free. We don't spam. Spamming is for jerks.