Telerin

Terminal/tileset renderer for web based games.

• Configuration: constructor codepage, scale
• State: layer, color, background
• Methods: clear, clearLayer, clip, put, write, box, refresh, screenToGrid

Example

import { Terminal } from "telerin";

let term = new Terminal(20, 20);
term.color = "red";
term.background = "#0000FF";
term.put(0, 0, 0x10);
term.write(10, 10, "Hello world");

// Wait for the tileset to load before rendering
term.tileset.onload = () => term.refresh();

// Make the canvas visible
document.body.append(term.canvas);

constructor

Creates a new terminal instance with a size in rows and columns.

new Terminal(20, 20);

To use a custom font/tileset pass the url and cell width/height.

new Terminal(20, 20, "mytiles.png", 16, 16);

codepage

By default the terminal uses CP437 for character mapping. Use the codepage property to setup an alternative map.

// Map char code 20 to char code 1
terminal.codepage = { 20: 1 };

scale

Resize the canvas to render at a larger scale.

// Render the canvas twice as big
terminal.scale(2);

layer

Set the current layer index.

terminal.layer = 3;

color

Sets the foreground color for subsequent drawing functions to use.

terminal.color = "red";
terminal.color = "#FF0000";
terminal.color = "rgb(255, 0, 0)";
terminal.color = "hsl(0, 50%, 50%)";

// Tiles will be drawn in their original colors
terminal.color = undefined;

background

Sets the background color for subsequent drawing functions to use.

terminal.background = "red";
terminal.background = "#FF0000";
terminal.background = "rgb(255, 0, 0)";
terminal.background = "hsl(0, 50%, 50%)";

// Tiles will be drawn without a background color
terminal.color = undefined;

clear

Clears the contents of all layers.

terminal.clear();

clearLayer

Clears the contents of the current layer.

terminal.clearLayer();

clip

Sets the clipping rectangle for the current layer.

// Clips content outside of a 3x4 rect at 1,2
terminal.clip(1, 2, 3, 4)

// Reset the clip area for the current layer
terminal.clip();

put

Puts a character code into a cell.

terminal.put(0, 0, 40);
terminal.put(0, 0, "@".charCodeAt(0));

Also supports passing an offset in pixels.

terminal.put(0, 0, 40, 3, -3);

write

Write a string of text.

terminal.write(0, 0, "Hello, world!");

Respects linebreaks, but does no wrapping.

box

Draws a box.

// Draws a 3x4 box at 1,2 using the default box drawing characters
terminal.write(1, 2, 3, 4);
// Using a custom set of box drawing characters
terminal.write(1, 2, 3, 4, "┌┐└┘─│");

refresh

Draws the contents of the terminal to the canvas.

terminal.refresh();

screenToGrid

Converts a point on the screen to terminal grid coordinates.

onmousemove = event => {
  let { x, y } = terminal.screenToGrid(event.x, event.y);
  // x, y are rounded grid coordinates
}