Building a Mario-like side-scroller with Kaboom.js

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • OPS - Build and Run Open Source Unikernels
  • Scout APM - Less time debugging, more time building
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • GitHub repo kaboom.js

    💥 JavaScript game library

    We can swap out the animation that is played when the enemy is patrolling for this frame. Kaboom has a built in lifespan component that also has a fade out function. This component allows us to slowly fade out the squashed enemy from the scene, and then automatically remove it entirely once the specified lifetime is reached. Kaboom also allows us to dynamically add and remove components from characters using the use and unuse methods. These methods are not yet documented, but you can find them (and more tricks!) by looking at the Kaboom source code. Let's use this knowledge to build a custom component to handle the enemy getting squashed and fading out of the scene:

  • GitHub repo aseprite

    Animated sprite editor & pixel art tool (Windows, macOS, Linux)

    Notice that the mario and enemies sprites are loaded with the function loadAseprite, and have an extra parameter specifying a .json file. This extra file is in a file format made by Aseprite, which is a pixel art and animation app. If you open the Mario.png file, you'll see that it has many different images of Mario in different positions, which are frames of Mario animations. The .json file from Aseprite contains all the information needed to animate Mario in our game. Kaboom knows how to interpret this file, and we can pick which animation we want to run at any time by choosing one from the frameTags list in the .json file and using the .play() method on a sprite. We can also choose a particular frame to show at any time, using the sprite's .frame property, and specifying the frame number to use, starting from 0.

  • OPS

    OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts