There are 4 essential elements in alchemy - earth, water, air, and fire. You need to understand them all to do the magic.

Collider.JAM framework has its own majik. To master it, you need to know 4 essential folders.

These folders are:

  • /res
  • /dna
  • /lab
  • /trap

You can find them at the root of almost any Collider.JAM project. Place files into proper folders to leverage the power of Collider.JAM.

The names may look cryptic at first. You have to get used to it.

After using Collider.JAM for a while, you might appreciate the design decision to use short lowercase names for widely used concepts.

This is one of the cases, where UNIX philosophy had a major impact on Collider.JAM design.


All assets go here.

In /res you can find a bunch of *.png, *.svg, *.ttf, *.wav, *.txt, *.csv and *.json files among other things. These are the resources used by the game code.

Since most of games contain many similar resources, they can be grouped in subfolders, e.g.:

/res/tiles - for tilesets
/res/fnt - for fonts
/res/sfx - for sound effects
/res/backgrounds - for various background images

Resources, like everything else, are loaded automatically. So there is no need to load() them explicitly.

Do you need to draw a Moon sprite? Just place moon.png in /res. Now you can render it in any draw() function:

function draw() {
    image(res.moon, 100, 100, 75, 75)


It is the place for factories and prototypes.

Say, your main hero is implemented as class Hero. Place the source into /dna/Hero.js. Now you can spawn the hero in lab during the game setup:

// setup.js

function setup() {
    lab.spawn('Hero', {
        name: 'hero',
        health: 100,
        x: 100,
        y: 100,

The logic is simple - you need DNA to create a lifeform. And DNA determines the lifeform view and behavior - with functions draw() and evo(dt).


All lifeforms are spawned in /lab.

When you need something in the game to be visible and moving, you place it in /lab.

Sometimes, we spawn lifeforms from /dna. And sometimes we just place them directly in /lab like this:

// lab/redCircle.js

function draw() {
    fill(.01, .5, .5) // color in HSL
    circle( rx(.5), ry(.5), 75 )

This will create a node named “redCircle” that renders… a red circle in the middle of the screen.

Note, that the color is in HSL. But it can also be represented as RGB values like fill(255, 0, 0) or even as a css-styled string like fill('#ff0000').

Functions rx() and ry() can be read as “screen-relative” x and y.


All events are “trapped” in /trap.

These can be system events - mouse clicks, keypresses, etc… Or they can be user-defined events like “gameOver” or “levelComplete”.

Traps are just functions placed in /trap.

To trap the Space key down event, define:

// trap/spaceDown.js
function spaceDown() {
    // TODO handle space key down

User-defined events can be trapped by the trap() function:

trap('startLevel', 1)

To handle the startLevel event, create startLevel() function in startLevel.js like so:

// trap/startLevel.js
function startLevel(nextLevel) {
    // TODO start the level specified in the nextLevel parameter

4 the Game

These 4 folders represent all essential elements of any game. Sprites, tiles, sound effects, and music are stored in /res. Entities you can spawn are placed in /dna. /lab keeps everything that lives. And /trap traps all controls.

Given a simple arcade game, you hardly gonna need anything else.

Other Folders

There are other top-level folders in Collider.JAM. Some more important than others. Like /env that is used to store configuration and global environment (e.g. things like game score). Or /lib that’s dedicated to utility functions. Or /cue with timed triggers…

But the 4 highlighted folders are the most used ones. So it is crucial to know and understand them. This is the way Collider.JAM game development works.