Backgrounds are essential for any game.

Usually, backgrounds are not a part of the action, nevertheless, they are a crucial element of a game style and aesthetics.

Backgrounds also play an important role in the game loop, since usually they are the first thing we draw each frame. So the background is supposed to clean up the previous frame.

Before DR4

In early versions of Collider.JAM we used to draw backgrounds manually.

The simplest form you can find in the early examples would be whole screen color fill in a draw function:

// lab/background.js

const Z = 0

function draw() {
    fill(.55, .4, .1)
    rect(0, 0, ctx.width, ctx.height)
}

background()

Since backgrounds were so common, manual fill was soon replaced by the background() function:

function draw() {
    background(.75, .4, .1) // HSL values
}

So you don’t have to specify the screen size - in the case of the background, it is obviously the whole screen.

And you can use it in many different ways:

background('#252030')      // CSS-style color
background(15, 10, 30)     // RGB values
background(res.background) // fill with a background image

Since DR4

However, backgrounds are so common, that even one function call seems like overkill. When you drawing a simple sketch, you need a background just to be there. You don’t have to care about puny details.

Therefore, since the Development Release 4 we have a background enabled by default. I choose it to be dark (more precisely - a dark grey ‘#121313’). The dark background seems to work better than a light one for most of the examples. Also, the dark grey is better mixed with most of the colors as opposed to the totally black ‘#000000’.

The default background is set as background property in lab. If you don’t want #121313, you can set it manually:

function setup() {
    lab.background = hsl(.75, .4, .1)
}

Or maybe set an image:

lab.background = res.background // fill with the background image

Complex Backgrounds

You can turn off the background:

lab.background = false

You might want to do that to draw a complex background manually (e.g. when you need parallax scrolling) or to preserve the scene for the next frame in simulations like brownian motion.

To make a complex background node with parallax scrolling or other effects, just include the node in /lab and make sure it has the lowest Z-value, e.g.:

// lab/background.js

const Z = 0

function draw() {
    // some complex drawing
}

Interestingly, it is just the way we used to do backgrounds before DR4 :)

Design

You can see, that in Collider.JAM the default option is the most simple and widespread one. But any level of customization can easily be achieved by simple overrides.

That little feature actually reflects an important tenet in Collider.JAM design:

Provide the most used case as a default option, but give the ability to easily override with custom behavior.

That principle rules over many features of Collider.JAM, not only backgrounds. You can find many reasonable defaults all across the framework. And they are one of the key reasons for code simplicity in Collider.JAM.