raster.js is a retro graphics framework
It lets you create graphics that imitate vintage computers and ancient game hardware, using javascript. It is great for making pixel art, exploring 2d demo effects, and creative coding.
It aims to serve as a tool for prototyping, experimentation, and learning about how old school graphics worked. It provides precise pixel control, and portability across multiple javascript environments and rendering contexts.
- Pixel based, hard edges, no anti-aliasing
- Limited 8-bit palette, default 64 colors, expandable to 256
- Runs in multiple places: in browser using webgl, in node.js using SDL, on raspberry pi using dispmanx
- Easy utilities for saving gifs and pngs
- Colors presets for machines such as the NES, ZX Spectrum, Pico-8, Gameboy, DOS, and more
- Features that imitate ancient hardware such as color attributes and rasterization interrupts
- Ability to recreate classic effects like parallax and palette cycling using programming interfaces similar to what was used back in the day
const ra = require('raster');
ra.setSize(32, 32);
ra.setZoom(8);
ra.setSlowdown(5);
ra.palette.setEntries([0, 1, 2, 3, 4, 5, 27, 43, 38, 54]);
// create 3 fields to use for sprite character data
ra.spritelist.createChar({num: 3, x: 10, y: 10}, (field, i)=>{
field.setColor(6);
field.fillCircle({centerX: 5, centerY: 5, r: i + 3});
field.setColor(7);
field.fillSquare({x: 4 - i, y: 3 - i, size: i + 1});
});
// make a background using a few rectangles
for (let i = 0; i < 6; i++) {
ra.setColor(i);
ra.fillRect({x: 0, y: i*6 - 2, w: 32, h: 8});
}
function draw() {
// move two spheres
for (let i = 0; i < 2; i++) {
// pick which z-layer, and which character graphic to use for the sprite
let z = (ra.theta < 0.5) ? i : 1 - i;
let c = Math.abs((ra.theta % 0.5) - 0.25) >= 0.19 ? 1 : (1 - z) * 2;
// move in a circular motion around each other
let x = 0.5 + ra.oscil({max: 21, phase: i/2});
let y = 7.5 + ra.oscil({max: 6, phase: i/2 + 0.25});
ra.spritelist.set(z, {x: x, y: y, c: c, p: i*2});
}
// cycle the background colors by changing entries 0..6
let bg = [57, 62, 58, 7, 60, 56, 59, 63, 61];
ra.palette.cycle({values: bg, endIndex: 6, tick: ra.tick * 0.45});
}
ra.run(draw);
You can use raster.js either in the browser using canvas, or on the command-line using node.js (graphics will appear in a new SDL window).
Either grab raster.min.js from the latest release, or clone this repo and run:
npm run build
which outputs dist/raster.min.js
You can also create a development build (less efficient, but better for debugging) by running:
npm run dev
See this example for how to build a web app using raster.js with webpack.
Installing raster.js for use with node.js requires setting up an environment that can build native add-ons. This means you need to install Python and a C++ compiler, see the node-gyp instructions for your operating system.
Using SDL requires the installing the SDL2 development libraries. See below for platform specific details. Once you have them properly setup, run
npm install raster
On macos, run brew install sdl2 to get SDL2.
For Windows, it is recommended to use msys2, but Powershell and WSL will probably work too. Grab the latest SDL release and get SDL2-devel-<version>-mingw.zip. Extract this zip to get the SDL2-<version> folder and place it within the directory c:/SDL/, so that it ends up at c:/SDL/SDL2-<version>/. If you use to use a different location instead of c:/SDL/, assign that location to the environment variable SDL_PATH.
On RaspberryPI, raster.js will use the dispmanx API for its display rather than SDL.
Follow the Raspberry Pi build instructions.
When running from a node.js script, you can pass command-line parameters to modify raster.js's behaviour.
--num-frames [num]
The number of frames to display, then quit.
--save [output-filename]
Save an image (png or gif) instead of using the default display.
--display [display]
Change the display. See useDisplay in the docs for supported displays.
--zoom [zoom]
Change the zoom level.
--palette [name]
Use a specific palette by name, such as c64 and nes. See usePalette in the docs for the names of built-in palettes.
See the docs for the full documentation of the methods available in raster.js.
See the upcoming plans of what's coming in the future.