HOME DEMOS TUTORIAL DEVKIT GITHUB

Palettes

As mentioned in an earlier section, raster.js does not operate in RGB. Rather, it uses 8-bit color values, and those values get converted to RGB using the palette. This component represents the set of available colors that can be displayed in a scene. Many retro computers had a limited ability to produce colors, and palettes immitate this restriction.

The exact list of RBG values can be assigned to the palette by passing an rgbmap to the ra.usePalette call.

const ra = require('raster');

ra.setSize(26, 26);
ra.setZoom(3);
ra.usePalette({rgbmap:[0x404040, 0xff4020, 0x802010, 0x308040, 0x60ff80]});

ra.fillColor(0);
ra.setColor(1);
ra.fillRect(2, 5, 14, 8);
ra.setColor(4);
ra.fillCircle(10, 9, 7);

ra.run();

Alternatively, raster.js has a few built-in palettes that immitate vintage computers and video game systems, such as 'nes' and 'zx-spectrum'. The full list of names can be found in the docs.

const ra = require('raster');

ra.setSize(26, 26);
ra.setZoom(3);
ra.usePalette('c64');

ra.fillColor(0);
ra.setColor(1);
ra.fillRect(2, 5, 14, 8);
ra.setColor(4);
ra.fillCircle(10, 9, 7);

ra.run();

Loading images before calling usePalette will also implictly create a palette using the colors from that image. The colors in the palette will match the colors that appear in the image, in the order that they show up.

const ra = require('raster');
ra.setZoom(20);

let _unused = ra.loadImage('img/small-fruit.png');
ra.then(() => {
  ra.setSize(ra.palette.length, 1);
  ra.fillFrame((x,y) => x);
  ra.run();
});

Palettes are also a useful tool for changing the colors in a scene over time, by modifying the palette entries.

The entries of a palette may be used to reassigned how 8-bit values from the field get converted into RGB. This facility makes it easy to perform color cycling effects like glowing an object, or fading out a scene.

Modifying a palette entry by calling setColor will recolor the rendered scene:

const ra = require('raster');
ra.setZoom(10);

let img = ra.loadImage('img/small-fruit.png');
ra.then(() => {
  ra.paste(img);
  let palette = ra.palette;
  function draw() {
    // Rotate the background color, index 0 for the
    // first color that appears in the image.
    palette.entry(0).setColor(ra.tick / 20);
  }
  ra.run(draw);
});

It's easy to cycle multiple entries at once. Load the image that will be drawn, along with the colors that will be changed, and what they are going to change to. By using an image's look (the set of colors in use) the palette.cycle method can be called like this:

const ra = require('raster');
ra.setZoom(10);

let img = ra.loadImage('img/small-fruit.png');
let upon = ra.loadImage('img/fruit-upon.png');
let replace = ra.loadImage('img/fruit-colors.png');
ra.then(() => {
  ra.paste(img);
  let palette = ra.palette;
  function draw() {
    palette.cycle(replace.look, {upon: upon.look, slow: 8});
  }
  ra.run(draw);
});

To get the entry for a particular point in the field, you can use ra.eyedrop. That entry may call setColor to change the color it is using:

const ra = require('raster');
ra.setZoom(10);

let img = ra.loadImage('img/small-fruit.png');
ra.then(() => {
  ra.paste(img);
  // get a palette entry for the color at (x=2, y=3)
  let drip = ra.eyedrop(2, 3);
  drip.setColor(1);
  ra.run();
});

Previous: Sprites

Table of Contents

Next: Tileset