Overprint is a minimalist toolkit for rendering cell grids and tile maps using the HTML Canvas API.
It’s intended to be useful for visualizing discrete simulations, cellular automata, abstract/fantasy procedural map generation and 2D game development with an old-school flavour.
With NPM CLI:
npm install --save overprint
The following example illustrates the main features of the API.
import { TextGrid, Cell } from "overprint"
// Find or create an HTML canvas element in the DOM
// eg: <canvas id="demo"></canvas>
const canvas = document.querySelector("#demo")
// Create a default text grid from the canvas element
const grid = new TextGrid(canvas)
// Predefine a map of cell objects representing text characters
// with foreground and background colors
const Cells = {
Grass: Cell(".", "#37CC63", "#2F3D33"),
Sapling: Cell("^", "#A09A2C", "#2F3D33"),
Tree: Cell("↑", "#337C22", "#2F3D33")
}
// Fill the entire grid
grid.fill(Cells.Grass)
// Render the filled cells to the canvas
grid.render()
// Overwrite a bunch of cells in random positions
for (let x,y,s=0; s<10; s++) {
x = Math.floor(Math.random() * grid.width) - 1
y = Math.floor(Math.random() * grid.height) - 1
grid.writeCell(x, y, Math.random() > 0.5 ? Cells.Sapling : Cells.Tree)
}
// Re-render the cells that changed since the previous render
grid.render()Overprint is a little library by Mark Rickerby.
Several of the ideas in this codebase were heavily influenced by Malison by Bob Nystrom and rot.js by Ondřej Žára. If you’re at all interested in browser-based roguelike games, you should check out their work—it’s awesome.
Also thanks to Amit Patel at Red Blob Games whose grid geometry resources saved me a whole heap of time that would have otherwise been spent scrabbling and scratching on graph paper and scrolling through verbose Wikipedia pages.
See the LICENSE file packaged with this software distribution.