Field
Palette
rgb map
Tileset
Colorspace
Screen Splits
Dip Switches
Info
Grid:
Pixel (x,y):
Tile (x,y):
TileID:
Field Value:
Cell (x,y):
Cspace Piece:
Palette Index:
Color:
Scroll X:
Scroll Y:
Split Number:
Pixel (x,y):
Tile (x,y):
TileID:
Field Value:
Cell (x,y):
Cspace Piece:
Palette Index:
Color:
Scroll X:
Scroll Y:
Split Number:
Pixel art by Stephen Challener (Redshrike), used in accordance with Creative-Commons. See attribution here
Typical retro systems did not work using RGB colorspace. Rather, they would create images using an indexed palettes. Such images would contain 8-bit values (just like raster.js does) and those values would correspond to positions in that palette. By changing the colors within the palette, colors can be cycled easily and efficiently.
const ra = require('raster');
ra.setZoom(4);
ra.usePalette({rgbmap:[]});
// set a background color and loda the image
ra.fillTrueColor(0x444444);
ra.loadImage('/img/color-map.png');
// draw the picture, which sets the display size
let boss = ra.loadImage('/img/first-form.png');
ra.then(function() {
ra.paste(boss);
let palette = ra.usePalette(boss.look);
// get the palette, cycle colors every so often
ra.run(function() {
let t = Math.floor(ra.tick / 3);
if (t % 64 < 40) {
palette.reset();
return;
}
palette.cycle({startIndex: 2,
values: ra.nge({start: palette.length, length: 10}),
tick: t});
});
});