5 Tips for Getting Started with Kaboom.js

Five quick tips so you can use Kaboom.js to make fun games!

by on 8 minute read updated on


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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<html>
	<head>
		<title>Kaboom Tips</title>
	</head>
	<body>
		<script src="https://kaboomjs.com/lib/0.5.1/kaboom.js"></script>
		<script src="main.js"></script>
	</body>
</html>

Then you can create a kaboom.js file that creates a Kaboom.js context from the global kaboom function:

1
2
3
4
5
6
7
8

export const k = kaboom({
	width: 640,
	height: 480,
	scale: 1,
	clearColor: [0, 0, 0, 1]
})

export default k

The Kaboom.js context is represented by the variable k which we export for other files to use like in main.js:

1
2
3
4
5
6
7

import k from './kaboom'

k.scene('main', () => {
	console.log('hello world')
})

k.start('main')

This helps us separate our game code into 2 files but each Scene can also be its own file like this:

1
2
3
4

// in ./scenes/HelloWorld.js
export function HelloWorld() {
	console.log('hello world')
}

Then in main.js we can import our Scenes and register them:

1
2
3
4
5
6

import k from './kaboom'
import HelloWorld from './scenes/HelloWorld'

k.scene('main', HelloWorld)

k.start('main)

2. Collisions

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 body() and solid() components.

Let's start by making a new Scene called Collision and then add a floor 👇

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import k from '../kaboom'

export default function Collision() {
	// add a floor
	k.add([
		k.pos(0, k.height()),
		k.rect(k.width(), 50),
		k.solid()
	])
}

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import k from '../kaboom'

export default function Collision() {
	const player = k.add([
		k.rect(32, 64),
		k.pos(k.width() * 0.5, 0),
		k.body(),
	])
	
	// add a floor
	k.add([
		k.pos(0, k.height()),
		k.rect(k.width(), 50),
		k.solid()
	])
}

You'll notice that the player is quite similar to the floor in terms of components except it has a body() component instead of solid(). The body() component gives the entity some basic gravity functionality and makes it interact with other entities with a solid() component.

3. Animations

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import k from './kaboom'

// NOTE: we'll make this next
import Animation from './scenes/animation'

k.loadSprite('tiles', './tilemap.png', {
	sliceX: 20,
	sliceY: 20,
	anims: {
		idle: { from: 300, to: 300 },
		run: { from: 301, to: 302 }
	}
})

k.scene('animations', Animations)

k.start('animations')

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 sliceX and sliceY. We can then reference each frame using an index for animations as shown in the anims property.

There's 2 animations named idle and run. The idle animation uses frame 300 and then the run animation uses frames 301 to 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 from and to.

Let's use this in the Animations Scene:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import k from '../kaboom'

export default function Animations() {
	const player = k.add([
		k.sprite('tiles', {
			animSpeed: 0.2,
			frame: 300
		}),
		k.pos(k.width() * 0.5, k.height() * 0.5),
		k.origin('center'),
		k.scale(1)
	])

	// basic key press logic to change animations
	k.keyPress('left', () => {
		player.scale.x = -1
		player.play('run')
	})

	k.keyPress('right', () => {
		player.scale.x = 1
		player.play('run')
	})

	k.keyRelease('left', () => {
		player.play('idle')
	})

	k.keyRelease('right', () => {
		player.play('idle')
	})
}

The sprite() component on line 5 lets us create a sprite using the spritesheet that we loaded and named tiles in main.js. The configuration sets animation speed and the initial frame index to use.

Then to play the idle or 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.

Here's a Level Scene with an example level in the level1 variable 👇

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import k from '../kaboom'

const level1 = [
	'	                                                             ',
	'                                                                ',
	'                                                                ',
	'                                                                ',
	'                                                                ',
	'                                                                ',
	'                                                                ',
	'                                                                ',
	'                                                                ',
	'                                                                ',
	'               ===                                              ',
	'                                                                ',
	'          >                                       <             ',
	'================================================================'
]

export default function Level() {
	k.addLevel(level1, {
		width: 16,
		height: 16,
		// ...
	})
}

For each unique character in our ASCII level we can tell Kaboom.js what entity to create like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

export default function Level() {
	k.addLevel(level1, {
		width: 16,
		height: 16,
		// each unique character is a property
		'=': [
			k.sprite('tiles', {
				frame: 65
			}),
			k.solid()
		],
		'<': [
			k.sprite('tiles', {
				frame: 92
			})
		],
		'>': [
			k.sprite('tiles', {
				frame: 93
			})
	})
}

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 < and > 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 👇

1
2
3
4
5
6

// this is a new file: ./components/big.js
import k from '../kaboom'

export default function big() {
	return {}
}

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 update() and 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

export default function big() {
	let timer = 0
	let isBig = false

	return {
		update() {
			if (isBig) {
				timer -= k.dt()
				if (timer <= 0) {
					this.smallify()
				}
			}
		},
		isBig() {
			return isBig
		},
		smallify() {
			this.scale = k.vec2(1)
			timer = 0
			isBig = false
		},
		biggify(time) {
			this.scale = k.vec2(2)
			timer = time
			isBig = true
		},
	}
}

Any entity that has the big() component will then be able to use the functions isBig(), smallify(), and biggify().

As an example 👇

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import k from '../kaboom'
import big from '../components/big'

export default function GameScene() {
	const player = k.add([
		k.sprite('tiles', {
			animSpeed: 0.1,
			frame: 300
		}),
		k.pos(k.width() * 0.5, k.height() * 0.5),
		k.origin('center'),
		k.scale(1),
		k.body(),
		big()
	])

	k.keyPress('b', () => {
		player.biggify(2)
	})
}

Next Steps

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.

getting started beginner tips kaboom.js

Want tips and techniques more suited for you?

You may also like...

5 Ways GDevelop Makes it Easy to Get Started With GameDev

A Noob's Guide to Loading Tiled Tilemaps in Phaser 3

5 Local Web Server Options to Get Started with Phaser

Video Guides

Memory Match in Phaser 3

Pac-Man Ghost AI

Dungeon Crawler in Phaser 3

Beginner Guides

Getting Started with Phaser and Modern JS

Making a Phaser Game from Scratch - UNCUT

Making Your First Phaser 3 Game in TypeScript

Articles Recommended For You

Didn't find what you were looking for?

comments powered by Disqus