How to use KAPLAY without dealing with Node.js, Bundlers and NPM
KAPLAY is a JavaScript library for making games. It’s aimed to be simple to use. However, installing it like any modern JS library can become tricky for beginners and it doesn’t have to be.
The modern web development stack has evolved to require the use of Node, bundlers and NPM. While these technologies offer advantages, they can add a lot of complexity which can leave beginners stumped. I’m not only referring to beginners with close to 0 programming experience but also experienced software engineers who aren’t specialized in web development.
This post aims to teach you how to get the simplest dev environment running for making games in JS with KAPLAY. I will also teach you how you can publish your game to a platform like itch.io.
How to Download KAPLAY
Navigate to this link https://unpkg.com/kaplay@3001.0.6/dist/kaplay.mjs.
You’ll see a page filled with code tightly compressed. Right click and click on the option “Save Page As…”
You’ll see your file explorer. Make sure to save this file without changing its name (it should remain named kaplay.mjs) in a folder where you want to write the code for your game project.
As you can see in the URL, we have a specific version called 3001.0.6. If you want to download another version, you can go to this page : https://www.npmjs.com/package/kaplay?activeTab=versions. Now you simply need to change the version number to the one you want. For example, if I want to use 4000.0.0-alpha.15, I’ll want to open the link https://unpkg.com/kaplay@4000.0.0-alpha.15/dist/kaplay.mjs and redownload the file.
We’re ready to move on to the next step.
How to Start a Local Server
We need to start a local server to display our game and develop it. There are many ways you can go about starting a local server. You can navigate to your project folder using a terminal and start a local server using Python (if you have it installed) with the following command
python3 -m http.serverThe simplest approach if you use the code editor VSCode is to download the Live Server extension in the extensions marketplace. Then at the bottom right of your editor you should see a “Go live” button. Once clicked, a local server will start and you can start developing.
This latter approach is what I do in many of my YouTube tutorials and this is what I recommend doing for beginners. Check out my YouTube channel here.
How to Setup KAPLAY
Open the folder where you downloaded KAPLAY in your code editor. Create an index.html file and a main.js file. These are going to be the entry point of your project. You should have the following folder structure.
- kaplay.mjs
- index.html
- main.js In index.html, let’s add this minimal boilerplate.
<html>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>The script tag will link our web page with our game’s JS code. We use the attribute “type” and set it to “module” so we can use within our project’s code the syntax “import x from y”.
In main.js, you we can finally import KAPLAY by doing :
import kaplay from "./kaplay.mjs";
kaplay() // will generate a checkered canvas You’re now ready to develop your game. For more info on how to use KAPLAY with project based tutorials, check out my YouTube channel here.
How to Get Intellisense for KAPLAY in VSCode.
You might want to have intellisense when using KAPLAY functions and methods (Doc snippets that explains what the function you’re using does). Fortunately, there is a way to get that with the setup shown in this post but it’s specific to VSCode.
The first step consists in downloading the doc.d.ts file. You can find it at the following URL : https://unpkg.com/kaplay@4000.0.0-alpha.15/dist/doc.d.ts. (Make sure that the version used here is the same as your KAPLAY download.)
You then need to place that file at the root of your project folder and rename it to "global.d.ts". Once you do this, you'll get intellisense for KAPLAY when using functions, etc... within VSCode.
How to Publish Your Game on Itch.io or GitHub Pages.
You have developed your game and are ready to publish it on the web. Since we used a very simple setup without needing Node.js, a bundler or NPM, deployment is going to be effortless.
For a platform like itch.io, you simply need to zip your project folder and upload it to the platform. That’s it.
For GitHub pages or a static file hosting server like Netlify, you simply need to provide the files within your project folder. GitHub pages or Netlify will detect your index.html file and deploy your project accordingly. You might need to enable a few settings on these platforms but that’s essentially it.
Hope you learned a thing or two. If you already knew how to do this, share this post with beginners.
By the way, I recently published a paid Mario-like asset pack. You can check it out below.
Here are other tutorials to check out!
How to Implement Top-Down Shooter Mechanics in JavaScript With Kaplay
On YouTube, someone asked me how to implement player sprite rotation in a top-down shooter game.
How to Implement Infinite Parallax Scrolling Backgrounds in JavaScript
Infinite parallax scrolling backgrounds are nice to look at because they add depth to a 2D scene. In this tutorial, I’ll teach you how to implement them in JavaScript with the Kaplay library.
I appreciate your posts a lot, they're really helpful since it's not that easy to find content on kaplay. I'm really new to dev stuff, so I was amazed when I came across kaplay, because it's much more intuitive than the other gamedev tools I've found before.
One thing about using the lib this "crudely" I noticed is that I wasn't able to get the auto completion for the kaplay methods and objects as well as the documentation pop-ups on VS Code. As I mentioned before, I'm really new to this stuff, so I'm not sure if that's expected or if it could be fixed through setting some things up.