2 Ways to Setup Kaboom.js
2 Ways to Setup Kaboom.js
A guide exploring 2 ways you can install Kaboom.js
Kaboom.js is a JavaScript library for making games. I make tutorials on YouTube that teaches how to make games with it. You can check them out here.
If you’re new to the way JavaScript tooling works, installing Kaboom might not be straightforward. This post aims to teach you 2 ways you can setup Kaboom in your project. I will also mention the various tradeoffs that comes with each.
Method 1 : With a Script Tag
By far the simplest method and the most beginner friendly. What you need is only a code editor (for example VSCode) + a way to start a local server.
If you’re using VSCode you can install the live server extension (from the extensions marketplace) which will take care of creating a live server for your current project. Click on the live server button at the bottom right of the editor after having installed the extension. You’ll then have a live version of your project in your browser. When you save, the project will also reload allowing for a fast feedback loop.
The way to setup Kaboom using this method is to simply create a folder with an empty main.js file and an index.html file with the following content :
<html>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>Here we add a script tag to our html which will load a JavaScript file. We specify the attribute type to be “module” so that we can use native imports. This means we can import other JavaScript files within main.js using the syntax “import x from y”. Here main.js acts as the entry point of our codebase.
In main.js, we can now import and use Kaboom like this :
import kaboom from "https://unpkg.com/kaboom@3000.1.17/dist/kaboom.mjs";
kaboom()The url points towards a CDN (Content Delivery Network) which will serve us a specific version of Kaboom (ver 3000.1.17). Instead of relying on CDNs, I always prefer having a local copy of the kaboom library within my project.
To get a local copy, you need to open the CDN url shown above in a browser. Then right-click and click “save as”.
With this approach even if the CDN goes down (which can happen) my game will still continue to work. Assuming that you’ve created a new folder called lib and put the kaboom copy there, your main.js should now look like this :
import kaboom from "./lib/kaboom.mjs"
kaboom()It’s funny that as I was writing this post, the UNPKG CDN went down for a few hours.
Side note : .mjs extension means that the file contains a javascript module that can be imported using the “import x from y” syntax.
Pros
Easy for beginners.
No reliance on Node.js.
The JavaScript code you write can run directly in the browser.
Cons
No intellisense for Kaboom. You have to check the docs website a lot more.
Your code is not compressed and minified resulting in slower loading for the user.
Integration with frontend libraires/frameworks like React.js, Vue, Svelte, etc… is harder if not impossible in some cases.
Method 2 : Using Node, NPM and Vite
This method involves using Node which is a runtime environment that let’s you run JavaScript code outside the browser. This is what enabled JavaScript to become used on both the backend and frontend.
When using Node, you have access to the NPM package repository. If you go to https://npmjs.org, you can search and browse various libraries. Packages (A.K.A libraries) can be easily installed using the “npm install <name-of-the-lib>” command. However, this is where there is a catch!
If you want to install libraries that do not deal with the browser, for example Express.js for making a REST API or Youtube-dl static for downloading YouTube videos, you can run the npm install command and immediately start using them.
This is not the case for Kaboom or React.js. Because these libraries are intended to run in the browser, a bundler is needed to compile Node.js JavaScript to JavaScript that can run in the browser.
This might sound weird at first until you realize that for example, when using React.js you usually write html code within your components. Having HTML written directly in a JavaScript file (More precisely .jsx) is not something that browser based JavaScript supports. Therefore, compiling .jsx files to browser based JavaScript is needed.
A bundler is also used to output a minified + very compact version of your codebase that can be put in one .js file. This is useful since a server needs to send files to the client and sending the least amount will result in faster loading times for users.
The easiest bundler to use at the moment is called Vite. To start a project with Vite you simply need to run the command “create vite@latest .” (Adding the . if you’re already within the folder you want to use).
Then run “npm install kaboom” and you’re good to go. For more detailed steps check the setup portion of my tutorial here.
Pros
You can have intellisense for Kaboom. Meaning that you can see doc snippets directly from within your code editor.
The output is compact and minified. (Your game should load faster in users’ browsers)
Can easily integrate other libraries of the NPM ecosystem like React.js for building the UI of your game.
Cons
More complicated to setup and host than simply using a script tag.
Conclusion
To summarize, if you’re a beginner and you don’t need to use other libraries like React, I recommend sticking with the first method until you get comfortable. For more advanced users, the second option is recommended.
If you want to learn more about JavaScript game development consider subscribing. For more project based tutorials, you can check out my youtube channel.
So glad to see a specific version being referenced here! Some tutorial demos use the "latest" version and break as soon as an update is released. Especially in the early days when Kaboom improvements were released frequently.
By the way, when linking in Kaboom from Unpkg I have sometimes found the need to use .js instead of .mjs at the end.
This is so useful. I am looking forward to giving Kaboom a try using some of your tutorials soon.