Skip to main content

Kaboom editor

Kaboom.js is a game development library that makes it fun and easy to build games!

This doc explains the tools provided by the Kaboom editor on Replit. To learn more about the Kaboom.js library, check out the docs, guides and examples on the Kaboom website.

Scene Manager​

Kaboom "scenes" allow us to group logic and levels together. In Kaboom.js, you write each scene's content inside a scene block:

scene("start", () => {
    add(...);
    action(...);
    keyPress(...);
});

scene("game", () => {
    // ...
});

Sprite Manager & Editor​

There are several ways to add sprites to a Kaboom repl:

  1. Using the upload icon.

Upload icon

  1. Clicking on the files icon and then dragging and dropping the sprites onto the "sprites" folder.

Drag to upload

  1. Choosing a sprite from the Kaboom assets library.

Choose from assets library

  1. Clicking the '+' icon to create a new sprite using the sprite editor.

Create assets

Once you have created a sprite you can load it into your game by opening your main code file, placing your cursor at the point in your file where you want the sprite to be loaded, and then selecting "Insert load code."

Insert load code

This should insert a line of code that looks like this:

loadPedit("Sample", "sprites/Sample.pedit");

Notice the use of loadPedit instead of loadSprite. With this call in place you should be able to use the component sprite("Sample") in your game.

Load created assets

(Right now, the sprite editor is not optimized for big sized sprites.)

Sound Manager​

Sound manager is currently just a place similar to sprite manager that lists your sounds. You can drag your sound files here or import them from the asset library and then load them into the game with loadSound. A built-in sound/music editor is in the works.

Load sounds

Debug​

Pressing F1 in the game turns on Kaboom debugging.

Settings​

To configure the game environment such as the size of the game canvas you initialise the Kaboom context with a configuration object as below:

kaboom({
  background: [0, 0, 0],
  width: 320,
  height: 240,
});

As an example this creates a new Kaboom canvas with a black background and also sets the size of the view to 320x240 pixels.

New Kaboom repls default to the latest version. If a newer version comes out after you created the repl, you need to manually select it, unless if you're on the dev version, in which case you'll always be on the latest version and breaking changes are possible.