Skip to content

@shaisrc/tty v0.3.0


@shaisrc/tty v0.3.0

Classes

AnimationManager

Defined in: core/AnimationManager.ts:76

AnimationManager Provides simple animation capabilities for ASCII rendering

Constructors

Constructor

new AnimationManager(): AnimationManager

Returns

AnimationManager

Methods

animate()

animate(options): number

Defined in: core/AnimationManager.ts:108

Create a custom animation

Parameters
options

AnimateOptions = {}

Animation options

Returns

number

Animation ID that can be used to stop the animation

Example
ts
const animId = animations.animate({
  duration: 1000,
  easing: 'easeInOut',
  onUpdate: (progress) => {
    const x = Math.floor(10 + progress * 50);
    renderer.setChar(x, 10, '@', 'cyan');
  },
  onComplete: () => console.log('Animation done!')
});
flash()

flash(x, y, options): number

Defined in: core/AnimationManager.ts:156

Flash a character at a position

Parameters
x

number

X coordinate

y

number

Y coordinate

options

FlashOptions = {}

Flash options

Returns

number

Animation ID that can be used to stop the animation

Example
ts
// Flash '@' at position (10, 5) in red, 3 times
animations.flash(10, 5, {
  char: '@',
  fg: 'red',
  count: 3,
  duration: 500
});
getActiveCount()

getActiveCount(): number

Defined in: core/AnimationManager.ts:338

Get the number of active animations

Returns

number

isActive()

isActive(id): boolean

Defined in: core/AnimationManager.ts:346

Check if an animation is active

Parameters
id

number

Animation ID

Returns

boolean

pulse()

pulse(x, y, options): number

Defined in: core/AnimationManager.ts:221

Create a pulsing animation at a position

Parameters
x

number

X coordinate

y

number

Y coordinate

options

PulseOptions = {}

Pulse options

Returns

number

Animation ID that can be used to stop the animation

Example
ts
// Pulse a character between dim and bright
animations.pulse(20, 10, {
  duration: 1000,
  minIntensity: 0.3,
  maxIntensity: 1.0,
  fg: 'yellow',
  loop: true
});
setRenderer()

setRenderer(renderer): void

Defined in: core/AnimationManager.ts:85

Set the renderer instance for animations that need to modify cells

Parameters
renderer

Renderer

The renderer instance

Returns

void

stop()

stop(id): void

Defined in: core/AnimationManager.ts:270

Stop an animation

Parameters
id

number

Animation ID returned from animate/flash/pulse

Returns

void

stopAll()

stopAll(): void

Defined in: core/AnimationManager.ts:281

Stop all animations

Returns

void

update()

update(currentTime): void

Defined in: core/AnimationManager.ts:298

Update all active animations Should be called each frame, typically from the game loop

Parameters
currentTime

number = ...

Current time in milliseconds (defaults to Date.now())

Returns

void

Example
ts
gameLoop.update((dt) => {
  animations.update();
});

CanvasTarget

Defined in: targets/CanvasTarget.ts:29

Renders to an HTML Canvas element

Implements

Constructors

Constructor

new CanvasTarget(canvas, options): CanvasTarget

Defined in: targets/CanvasTarget.ts:44

Create a new CanvasTarget

Parameters
canvas

HTMLCanvasElement

Canvas element to render to

options

CanvasTargetOptions

Canvas configuration including width, height, and rendering options

Returns

CanvasTarget

Methods

clear()

clear(): void

Defined in: targets/CanvasTarget.ts:139

Clear the entire canvas

Returns

void

Implementation of

RenderTarget.clear

flush()

flush(): void

Defined in: targets/CanvasTarget.ts:146

Flush changes (no-op for canvas as drawing is immediate)

Returns

void

Implementation of

RenderTarget.flush

getCanvas()

getCanvas(): HTMLCanvasElement

Defined in: targets/CanvasTarget.ts:160

Get the canvas element

Returns

HTMLCanvasElement

getSize()

getSize(): object

Defined in: targets/CanvasTarget.ts:153

Get the size of the render target

Returns

object

height

height: number

width

width: number

Implementation of

RenderTarget.getSize

setCell()

setCell(x, y, char, fg, bg): void

Defined in: targets/CanvasTarget.ts:73

Set a character at the specified position

Parameters
x

number

y

number

char

string

fg

Color

bg

Color

Returns

void

Implementation of

RenderTarget.setCell

setCellScaled()

setCellScaled(x, y, scale, char, fg, bg): void

Defined in: targets/CanvasTarget.ts:93

Set a scaled character occupying multiple cells

Parameters
x

number

y

number

scale

number

char

string

fg

Color

bg

Color

Returns

void

Implementation of

RenderTarget.setCellScaled

setOptions()

setOptions(options): void

Defined in: targets/CanvasTarget.ts:167

Update canvas options

Parameters
options

Partial<CanvasTargetOptions>

Returns

void


GameLoop

Defined in: core/GameLoop.ts:15

Constructors

Constructor

new GameLoop(update, render?, options?): GameLoop

Defined in: core/GameLoop.ts:41

Create a new game loop

Parameters
update

UpdateCallback

Update callback (called with delta time in ms)

render?

RenderCallback

Optional render callback

options?

GameLoopOptions = {}

Game loop options

Returns

GameLoop

Methods

getActualFPS()

getActualFPS(): number

Defined in: core/GameLoop.ts:171

Get actual FPS (calculated over last second)

Returns

number

getElapsedTime()

getElapsedTime(): number

Defined in: core/GameLoop.ts:193

Get total elapsed time in milliseconds (excluding paused time)

Returns

number

getFPS()

getFPS(): number

Defined in: core/GameLoop.ts:164

Get target FPS

Returns

number

getTimestep()

getTimestep(): number

Defined in: core/GameLoop.ts:186

Get fixed timestep in milliseconds

Returns

number

isPaused()

isPaused(): boolean

Defined in: core/GameLoop.ts:157

Check if game loop is paused

Returns

boolean

isRunning()

isRunning(): boolean

Defined in: core/GameLoop.ts:150

Check if game loop is running

Returns

boolean

pause()

pause(): void

Defined in: core/GameLoop.ts:131

Pause the game loop (stops update/render but keeps running)

Returns

void

resume()

resume(): void

Defined in: core/GameLoop.ts:139

Resume the game loop

Returns

void

setFPS()

setFPS(fps): void

Defined in: core/GameLoop.ts:178

Set target FPS

Parameters
fps

number

Returns

void

start()

start(): void

Defined in: core/GameLoop.ts:101

Start the game loop

Returns

void

stop()

stop(): void

Defined in: core/GameLoop.ts:114

Stop the game loop

Returns

void


GamepadManager

Defined in: input/GamepadManager.ts:19

Constructors

Constructor

new GamepadManager(options): GamepadManager

Defined in: input/GamepadManager.ts:34

Create a new gamepad manager

Parameters
options

Configuration options

deadzone?

number

Returns

GamepadManager

Methods

destroy()

destroy(): void

Defined in: input/GamepadManager.ts:337

Remove event listeners and cleanup

Returns

void

getAxis()

getAxis(axisIndex, gamepadIndex): number

Defined in: input/GamepadManager.ts:209

Get axis value with deadzone applied

Parameters
axisIndex

number

gamepadIndex

number = 0

Returns

number

getButton()

getButton(buttonIndex, gamepadIndex): GamepadButtonState

Defined in: input/GamepadManager.ts:186

Get button state with all flags

Parameters
buttonIndex

number

gamepadIndex

number = 0

Returns

GamepadButtonState

getConnectedCount()

getConnectedCount(): number

Defined in: input/GamepadManager.ts:154

Get the number of connected gamepads

Returns

number

getDeadzone()

getDeadzone(): number

Defined in: input/GamepadManager.ts:267

Get current deadzone value

Returns

number

getDPad()

getDPad(gamepadIndex): GamepadAxisState

Defined in: input/GamepadManager.ts:245

Get D-pad direction as {x, y} (-1, 0, 1) Uses buttons 12-15 (standard mapping)

Parameters
gamepadIndex

number = 0

Returns

GamepadAxisState

getGamepad()

getGamepad(index): Gamepad | null

Defined in: input/GamepadManager.ts:133

Get a gamepad by index (0-3)

Parameters
index

number = 0

Returns

Gamepad | null

getGamepads()

getGamepads(): Gamepad[]

Defined in: input/GamepadManager.ts:140

Get all connected gamepads

Returns

Gamepad[]

getLeftStick()

getLeftStick(gamepadIndex): GamepadAxisState

Defined in: input/GamepadManager.ts:224

Get left stick as

Parameters
gamepadIndex

number = 0

Returns

GamepadAxisState

getRightStick()

getRightStick(gamepadIndex): GamepadAxisState

Defined in: input/GamepadManager.ts:234

Get right stick as

Parameters
gamepadIndex

number = 0

Returns

GamepadAxisState

isConnected()

isConnected(index): boolean

Defined in: input/GamepadManager.ts:147

Check if a gamepad is connected

Parameters
index

number = 0

Returns

boolean

isPressed()

isPressed(buttonIndex, gamepadIndex): boolean

Defined in: input/GamepadManager.ts:161

Check if a button is currently pressed

Parameters
buttonIndex

number

gamepadIndex

number = 0

Returns

boolean

justPressed()

justPressed(buttonIndex, gamepadIndex): boolean

Defined in: input/GamepadManager.ts:170

Check if a button was just pressed this frame

Parameters
buttonIndex

number

gamepadIndex

number = 0

Returns

boolean

justReleased()

justReleased(buttonIndex, gamepadIndex): boolean

Defined in: input/GamepadManager.ts:178

Check if a button was just released this frame

Parameters
buttonIndex

number

gamepadIndex

number = 0

Returns

boolean

onConnected()

onConnected(callback): void

Defined in: input/GamepadManager.ts:305

Register a callback for gamepad connection

Parameters
callback

GamepadCallback

Returns

void

onDisconnected()

onDisconnected(callback): void

Defined in: input/GamepadManager.ts:312

Register a callback for gamepad disconnection

Parameters
callback

GamepadCallback

Returns

void

removeCallback()

removeCallback(callback, type): void

Defined in: input/GamepadManager.ts:319

Remove a callback

Parameters
callback

GamepadCallback

type

"connected" | "disconnected"

Returns

void

setDeadzone()

setDeadzone(deadzone): void

Defined in: input/GamepadManager.ts:260

Set the deadzone for analog sticks (0-1)

Parameters
deadzone

number

Returns

void

update()

update(): void

Defined in: input/GamepadManager.ts:84

Poll gamepads and update state (call once per frame before checking inputs)

Returns

void

vibrate()

vibrate(duration, weakMagnitude, strongMagnitude, gamepadIndex): Promise<boolean>

Defined in: input/GamepadManager.ts:278

Vibrate/rumble the gamepad

Parameters
duration

number = 200

Duration in milliseconds

weakMagnitude

number = 0.5

Weak motor magnitude (0-1)

strongMagnitude

number = 0.5

Strong motor magnitude (0-1)

gamepadIndex

number = 0

Gamepad index

Returns

Promise<boolean>


HexCanvasTarget

Defined in: targets/HexCanvasTarget.ts:46

Renders to an HTML Canvas using a hexagonal grid layout

Each cell is a hexagon. Coordinates use the axial system (q, r). The grid always starts with (0, 0) at the top-left area.

Example

ts
const target = new HexCanvasTarget(canvas, {
  width: 20,
  height: 15,
  hexSize: 20,
  orientation: 'flat-top',
});

Implements

Constructors

Constructor

new HexCanvasTarget(canvas, options): HexCanvasTarget

Defined in: targets/HexCanvasTarget.ts:64

Create a new HexCanvasTarget

Parameters
canvas

HTMLCanvasElement

Canvas element to render to

options

HexCanvasTargetOptions

Hex grid configuration

Returns

HexCanvasTarget

Methods

clear()

clear(): void

Defined in: targets/HexCanvasTarget.ts:169

Clear the entire canvas

Returns

void

Implementation of

RenderTarget.clear

flush()

flush(): void

Defined in: targets/HexCanvasTarget.ts:176

Flush changes (no-op for canvas as drawing is immediate)

Returns

void

Implementation of

RenderTarget.flush

getCanvas()

getCanvas(): HTMLCanvasElement

Defined in: targets/HexCanvasTarget.ts:191

Get the canvas element

Returns

HTMLCanvasElement

getHexConfig()

getHexConfig(): object

Defined in: targets/HexCanvasTarget.ts:198

Get hex grid configuration

Returns

object

hexSize

hexSize: number

orientation

orientation: HexOrientation

originX

originX: number

originY

originY: number

getSize()

getSize(): object

Defined in: targets/HexCanvasTarget.ts:184

Get the size of the hex grid

Returns

object

Width and height in hex columns/rows

height

height: number

width

width: number

Implementation of

RenderTarget.getSize

setCell()

setCell(q, r, char, fg, bg): void

Defined in: targets/HexCanvasTarget.ts:152

Set a character at the specified hex coordinate

Parameters
q

number

Axial q coordinate (maps to x parameter of RenderTarget)

r

number

Axial r coordinate (maps to y parameter of RenderTarget)

char

string

Character to display

fg

Color

Foreground color

bg

Color

Background color

Returns

void

Implementation of

RenderTarget.setCell


KeyboardManager

Defined in: input/KeyboardManager.ts:21

Constructors

Constructor

new KeyboardManager(element): KeyboardManager

Defined in: input/KeyboardManager.ts:40

Create a new keyboard manager

Parameters
element

Element to attach listeners to (default: window)

HTMLElement | Window

Returns

KeyboardManager

Methods

clear()

clear(): void

Defined in: input/KeyboardManager.ts:220

Clear all key states

Returns

void

destroy()

destroy(): void

Defined in: input/KeyboardManager.ts:383

Remove event listeners and cleanup

Returns

void

getDirection()

getDirection(options): DirectionVector

Defined in: input/KeyboardManager.ts:239

Get direction vector from WASD/Arrow keys

Parameters
options

DirectionOptions = {}

Options for direction calculation

Returns

DirectionVector

Direction vector {x, y} with values -1, 0, or 1 (or normalized)

Example
ts
const dir = keyboard.getDirection()
if (dir.x !== 0 || dir.y !== 0) {
  player.move(dir.x, dir.y)
}
getPressed()

getPressed(): string[]

Defined in: input/KeyboardManager.ts:205

Get array of all currently pressed keys

Returns

string[]

isDown()

isDown(key): boolean

Defined in: input/KeyboardManager.ts:112

Alias for isPressed - check if a key is currently down

Parameters
key

string

Key to check

Returns

boolean

true if the key is currently pressed

Example
ts
if (keyboard.isDown('Space')) {
  player.jump()
}
isPressed()

isPressed(key): boolean

Defined in: input/KeyboardManager.ts:96

Check if a key is currently pressed

Parameters
key

string

Returns

boolean

justPressed()

justPressed(key): boolean

Defined in: input/KeyboardManager.ts:119

Check if a key was just pressed this frame

Parameters
key

string

Returns

boolean

justReleased()

justReleased(key): boolean

Defined in: input/KeyboardManager.ts:126

Check if a key was just released this frame

Parameters
key

string

Returns

boolean

onKeyDown()

onKeyDown(key, callback): void

Defined in: input/KeyboardManager.ts:144

Register a callback for key down events

Parameters
key

Single key or array of keys to bind

string | string[]

callback

KeyCallback

Callback function to execute

Returns

void

Example
ts
// Single key
keyboard.onKeyDown('Enter', () => console.log('Enter pressed'))

// Multiple keys (alternative bindings)
keyboard.onKeyDown(['ArrowUp', 'w', 'W'], () => player.moveUp())
onKeyUp()

onKeyUp(key, callback): void

Defined in: input/KeyboardManager.ts:169

Register a callback for key up events

Parameters
key

Single key or array of keys to bind

string | string[]

callback

KeyCallback

Callback function to execute

Returns

void

Example
ts
// Single key
keyboard.onKeyUp('Space', () => player.stopJumping())

// Multiple keys (alternative bindings)
keyboard.onKeyUp(['ArrowLeft', 'a', 'A'], () => player.stopMovingLeft())
removeCallback()

removeCallback(key, callback, type): void

Defined in: input/KeyboardManager.ts:183

Remove a callback

Parameters
key

string

callback

KeyCallback

type

"keydown" | "keyup"

Returns

void

update()

update(): void

Defined in: input/KeyboardManager.ts:212

Clear just pressed/released states (call once per frame)

Returns

void

waitForKey()

waitForKey(key?, options?): Promise<string>

Defined in: input/KeyboardManager.ts:301

Wait for a specific key press (promise-based)

Parameters
key?

Key or array of keys to wait for (omit for any key)

string | string[]

options?

WaitForKeyOptions = {}

Timeout and abort signal options

Returns

Promise<string>

Promise that resolves with the pressed key

Example
ts
// Wait for Enter
const key = await keyboard.waitForKey('Enter')

// Wait for Y or N with timeout
try {
  const key = await keyboard.waitForKey(['y', 'n'], { timeout: 5000 })
  if (key === 'y') console.log('Yes!')
} catch {
  console.log('Timeout!')
}

MouseManager

Defined in: input/MouseManager.ts:21

Deprecated

Use PointerManager instead. MouseManager is deprecated and will be removed in a future version.

Constructors

Constructor

new MouseManager(element, gridWidth, gridHeight, cellWidth, cellHeight): MouseManager

Defined in: input/MouseManager.ts:57

Create a new mouse manager

Parameters
element

HTMLElement

Element to attach listeners to

gridWidth

number

Grid width in cells

gridHeight

number

Grid height in cells

cellWidth

number

Cell width in pixels

cellHeight

number

Cell height in pixels

Returns

MouseManager

Methods

clear()

clear(): void

Defined in: input/MouseManager.ts:326

Clear all button states

Returns

void

destroy()

destroy(): void

Defined in: input/MouseManager.ts:336

Remove event listeners and cleanup

Returns

void

getDragDelta()

getDragDelta(): MousePosition

Defined in: input/MouseManager.ts:280

Get drag delta from start position

Returns

MousePosition

getGridPosition()

getGridPosition(): MousePosition

Defined in: input/MouseManager.ts:240

Get current mouse position in grid coordinates

Returns

MousePosition

getPosition()

getPosition(): MousePosition

Defined in: input/MouseManager.ts:233

Get current mouse position in pixels

Returns

MousePosition

getWorldPosition()

getWorldPosition(cameraX, cameraY): MousePosition

Defined in: input/MouseManager.ts:247

Get mouse position in world coordinates

Parameters
cameraX

number

cameraY

number

Returns

MousePosition

isDragging()

isDragging(): boolean

Defined in: input/MouseManager.ts:273

Check if currently dragging

Returns

boolean

isHovering()

isHovering(): boolean

Defined in: input/MouseManager.ts:258

Check if mouse is hovering over element

Returns

boolean

isHoveringCell()

isHoveringCell(x, y): boolean

Defined in: input/MouseManager.ts:265

Check if hovering over specific grid cell

Parameters
x

number

y

number

Returns

boolean

isLeftPressed()

isLeftPressed(): boolean

Defined in: input/MouseManager.ts:198

Check if left mouse button is pressed

Returns

boolean

isMiddlePressed()

isMiddlePressed(): boolean

Defined in: input/MouseManager.ts:212

Check if middle mouse button is pressed

Returns

boolean

isPressed()

isPressed(button): boolean

Defined in: input/MouseManager.ts:191

Check if mouse button is currently pressed

Parameters
button

number

Returns

boolean

isRightPressed()

isRightPressed(): boolean

Defined in: input/MouseManager.ts:205

Check if right mouse button is pressed

Returns

boolean

justPressed()

justPressed(button): boolean

Defined in: input/MouseManager.ts:219

Check if button was just pressed this frame

Parameters
button

number

Returns

boolean

justReleased()

justReleased(button): boolean

Defined in: input/MouseManager.ts:226

Check if button was just released this frame

Parameters
button

number

Returns

boolean

onClick()

onClick(callback): void

Defined in: input/MouseManager.ts:290

Register click callback

Parameters
callback

MouseCallback

Returns

void

onDragEnd()

onDragEnd(callback): void

Defined in: input/MouseManager.ts:311

Register drag end callback

Parameters
callback

MouseCallback

Returns

void

onDragStart()

onDragStart(callback): void

Defined in: input/MouseManager.ts:304

Register drag start callback

Parameters
callback

MouseCallback

Returns

void

onHover()

onHover(callback): void

Defined in: input/MouseManager.ts:297

Register hover callback

Parameters
callback

MouseCallback

Returns

void

update()

update(): void

Defined in: input/MouseManager.ts:318

Clear just pressed/released states (call once per frame)

Returns

void


PointerManager

Defined in: input/PointerManager.ts:19

Constructors

Constructor

new PointerManager(element, gridWidth, gridHeight, cellWidth, cellHeight): PointerManager

Defined in: input/PointerManager.ts:57

Create a new pointer manager

Parameters
element

HTMLElement

Element to attach listeners to

gridWidth

number

Grid width in cells

gridHeight

number

Grid height in cells

cellWidth

number

Cell width in pixels

cellHeight

number

Cell height in pixels

Returns

PointerManager

Methods

clear()

clear(): void

Defined in: input/PointerManager.ts:347

Clear all button states

Returns

void

destroy()

destroy(): void

Defined in: input/PointerManager.ts:357

Remove event listeners and cleanup

Returns

void

getDragDelta()

getDragDelta(): PointerPosition

Defined in: input/PointerManager.ts:301

Get drag delta from start position

Returns

PointerPosition

getGridPosition()

getGridPosition(): PointerPosition

Defined in: input/PointerManager.ts:246

Get current pointer position in grid coordinates

Returns

PointerPosition

getPointerType()

getPointerType(): string

Defined in: input/PointerManager.ts:264

Get the type of pointer device (mouse, touch, pen, or empty string)

Returns

string

getPosition()

getPosition(): PointerPosition

Defined in: input/PointerManager.ts:239

Get current pointer position in pixels

Returns

PointerPosition

getPressure()

getPressure(): number

Defined in: input/PointerManager.ts:272

Get the pressure of the pointer (0.0 to 1.0) Useful for pen input with pressure sensitivity

Returns

number

getWorldPosition()

getWorldPosition(cameraX, cameraY): PointerPosition

Defined in: input/PointerManager.ts:253

Get pointer position in world coordinates

Parameters
cameraX

number

cameraY

number

Returns

PointerPosition

isDragging()

isDragging(): boolean

Defined in: input/PointerManager.ts:294

Check if currently dragging

Returns

boolean

isHovering()

isHovering(): boolean

Defined in: input/PointerManager.ts:279

Check if pointer is hovering over element

Returns

boolean

isHoveringCell()

isHoveringCell(x, y): boolean

Defined in: input/PointerManager.ts:286

Check if hovering over specific grid cell

Parameters
x

number

y

number

Returns

boolean

isLeftPressed()

isLeftPressed(): boolean

Defined in: input/PointerManager.ts:204

Check if left pointer button is pressed

Returns

boolean

isMiddlePressed()

isMiddlePressed(): boolean

Defined in: input/PointerManager.ts:218

Check if middle pointer button is pressed

Returns

boolean

isPressed()

isPressed(button): boolean

Defined in: input/PointerManager.ts:197

Check if pointer button is currently pressed

Parameters
button

number

Returns

boolean

isRightPressed()

isRightPressed(): boolean

Defined in: input/PointerManager.ts:211

Check if right pointer button is pressed

Returns

boolean

justPressed()

justPressed(button): boolean

Defined in: input/PointerManager.ts:225

Check if button was just pressed this frame

Parameters
button

number

Returns

boolean

justReleased()

justReleased(button): boolean

Defined in: input/PointerManager.ts:232

Check if button was just released this frame

Parameters
button

number

Returns

boolean

onClick()

onClick(callback): void

Defined in: input/PointerManager.ts:311

Register click callback

Parameters
callback

PointerCallback

Returns

void

onDragEnd()

onDragEnd(callback): void

Defined in: input/PointerManager.ts:332

Register drag end callback

Parameters
callback

PointerCallback

Returns

void

onDragStart()

onDragStart(callback): void

Defined in: input/PointerManager.ts:325

Register drag start callback

Parameters
callback

PointerCallback

Returns

void

onHover()

onHover(callback): void

Defined in: input/PointerManager.ts:318

Register hover callback

Parameters
callback

PointerCallback

Returns

void

update()

update(): void

Defined in: input/PointerManager.ts:339

Clear just pressed/released states (call once per frame)

Returns

void


Renderer

Defined in: core/Renderer.ts:120

Main renderer class providing drawing primitives and higher-level helpers

Constructors

Constructor

new Renderer(target, options): Renderer

Defined in: core/Renderer.ts:144

Create a new Renderer

Parameters
target

RenderTarget

Render target to output to

options

RendererCreateOptions = {}

Renderer options

Returns

Renderer

Properties

debug

readonly debug: object

Defined in: core/Renderer.ts:1790

Debug namespace providing visualization and inspection tools

logCell()

logCell: (x, y) => CellInfo | null

Get detailed information about a cell

Parameters
x

number

X coordinate of the cell

y

number

Y coordinate of the cell

Returns

CellInfo | null

Cell information object, or null if out of bounds

showBounds()

showBounds: (x, y, width, height, options?) => this

Visualize the bounds of a rectangular area

Parameters
x

number

X coordinate of top-left corner

y

number

Y coordinate of top-left corner

width

number

Width of the bounds

height

number

Height of the bounds

options?

ShowBoundsOptions

Bounds display options

Returns

this

The renderer instance for chaining

showFPS()

showFPS: (fps, options?) => this

Display FPS (frames per second) counter

Parameters
fps

number

Current FPS value

options?

ShowFPSOptions

FPS display options

Returns

this

The renderer instance for chaining

showGrid()

showGrid: (options?) => this

Draw a grid overlay for alignment and positioning

Parameters
options?

ShowGridOptions

Grid display options

Returns

this

The renderer instance for chaining

showPointerCoords()

showPointerCoords: (pointerX, pointerY, options?) => this

Display pointer/mouse coordinates

Parameters
pointerX

number

Pointer X grid coordinate

pointerY

number

Pointer Y grid coordinate

options?

ShowPointerCoordsOptions

Display options

Returns

this

The renderer instance for chaining

height

readonly height: number

Defined in: core/Renderer.ts:137

Height in characters

width

readonly width: number

Defined in: core/Renderer.ts:134

Width in characters

Accessors

validate
Get Signature

get validate(): object

Defined in: core/Renderer.ts:2050

Validation helpers for bounds checking

Provides methods to check if drawing operations would be within bounds before attempting to draw. Useful for conditional rendering logic.

Returns
box()

box: (x, y, width, height) => boolean

Check if a box would fit within bounds

Parameters
x

number

Starting X coordinate

y

number

Starting Y coordinate

width

number

Box width

height

number

Box height

Returns

boolean

True if box fits entirely within bounds, false otherwise

Example
ts
if (renderer.validate.box(x, y, 20, 10)) {
  renderer.box(x, y, 20, 10)
} else {
  console.warn('Box out of bounds')
}
cell()

cell: (x, y) => boolean

Check if a cell position is within bounds

Parameters
x

number

X coordinate

y

number

Y coordinate

Returns

boolean

True if position is valid, false otherwise

Example
ts
if (renderer.validate.cell(x, y)) {
  renderer.setChar(x, y, '@')
}
line()

line: (x1, y1, x2, y2) => boolean

Check if a line would fit within bounds

Parameters
x1

number

Starting X coordinate

y1

number

Starting Y coordinate

x2

number

Ending X coordinate

y2

number

Ending Y coordinate

Returns

boolean

True if both endpoints are within bounds, false otherwise

Example
ts
if (renderer.validate.line(x1, y1, x2, y2)) {
  renderer.drawLine(x1, y1, x2, y2, '-')
}
text()

text: (x, y, text) => boolean

Check if text would fit within bounds

Parameters
x

number

Starting X coordinate

y

number

Y coordinate

text

string

Text string to check

Returns

boolean

True if text fits entirely within bounds, false otherwise

Example
ts
if (renderer.validate.text(x, y, message)) {
  renderer.drawText(x, y, message)
} else {
  // Truncate or wrap text
  renderer.drawText(x, y, message.substring(0, 10))
}

Methods

alignBox()

alignBox(anchor, width, height, offsetX, offsetY): object

Defined in: core/Renderer.ts:946

Calculate aligned box position

Returns the (x, y) position for a box aligned to a specific anchor point within the viewport. Useful for positioning dialogs, menus, and UI elements.

Parameters
anchor

BoxAnchor

Alignment anchor (center, top, bottom, left, right, or combinations)

width

number

Box width

height

number

Box height

offsetX

number = 0

X offset from anchor position (default: 0)

offsetY

number = 0

Y offset from anchor position (default: 0)

Returns

object

Object with x and y coordinates

x

x: number

y

y: number

Example
ts
// Center a 30x10 dialog
const pos = renderer.alignBox('center', 30, 10)
renderer.box(pos.x, pos.y, 30, 10, { style: 'double' })

// Top-right notification with offset
const notifPos = renderer.alignBox('top-right', 20, 5, -2, 1)
renderer.box(notifPos.x, notifPos.y, 20, 5)
alignText()

alignText(y, text, options, startX, width?): this

Defined in: core/Renderer.ts:1124

Draw aligned text using options.align property

Generic text alignment that uses the align property from TextOptions. Delegates to centerText, rightAlign, or leftAlign based on the setting.

Parameters
y

number

Y coordinate for the text

text

string

Text to draw

options

TextOptions = {}

Text styling options (including align property)

startX

number = 0

Starting X coordinate of alignment area (default: 0)

width?

number

Width of alignment area (default: screen width)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .alignText(5, 'Title', { align: 'center', fg: 'yellow' })
  .alignText(10, 'Score', { align: 'right', fg: 'green' })
  .render()
animate()

animate(options?): number

Defined in: core/Renderer.ts:1750

Parameters
options?

AnimateOptions

Returns

number

applyBoxPreset()

applyBoxPreset(x, y, width, height, presetName, overrides?): this

Defined in: core/Renderer.ts:1962

Apply a box preset

Parameters
x

number

X coordinate

y

number

Y coordinate

width

number

Box width

height

number

Box height

presetName

string

Name of the box preset

overrides?

BoxOptions

Optional overrides for preset options

Returns

this

The renderer instance for chaining

Example
ts
definePreset('panel', { type: 'box', style: 'double', fill: true })
renderer.applyBoxPreset(0, 0, 80, 24, 'panel')
applyMenuPreset()

applyMenuPreset(x, y, items, presetName, overrides?): this

Defined in: core/Renderer.ts:1998

Apply a menu preset

Parameters
x

number

X coordinate

y

number

Y coordinate

items

string[]

Menu items

presetName

string

Name of the menu preset

overrides?

MenuOptions

Optional overrides for preset options

Returns

this

The renderer instance for chaining

Example
ts
definePreset('mainMenu', {
  type: 'menu',
  selectedFg: 'black',
  selectedBg: 'cyan',
  border: true
})
renderer.applyMenuPreset(10, 5, ['Start', 'Quit'], 'mainMenu', {
  selected: 0
})
applyProgressBarPreset()

applyProgressBarPreset(x, y, width, progress, presetName, overrides?): this

Defined in: core/Renderer.ts:2031

Apply a progress bar preset

Parameters
x

number

X coordinate

y

number

Y coordinate

width

number

Bar width

progress

number

Progress value (0.0 to 1.0)

presetName

string

Name of the progress bar preset

overrides?

ProgressBarOptions

Optional overrides for preset options

Returns

this

The renderer instance for chaining

Example
ts
definePreset('health', {
  type: 'progressBar',
  fillFg: 'red',
  emptyFg: 'gray'
})
renderer.applyProgressBarPreset(5, 5, 20, 0.75, 'health')
applyTextPreset()

applyTextPreset(x, y, text, presetName, overrides?): this

Defined in: core/Renderer.ts:1933

Apply a text preset

Parameters
x

number

X coordinate

y

number

Y coordinate

text

string

Text to draw

presetName

string

Name of the text preset

overrides?

TextOptions

Optional overrides for preset options

Returns

this

The renderer instance for chaining

Example
ts
// Define preset first
definePreset('warning', { type: 'text', fg: 'yellow', bg: 'red' })

// Use preset
renderer.applyTextPreset(10, 5, 'Warning!', 'warning')
border()

border(x, y, w, h, options): this

Defined in: core/Renderer.ts:840

Draw a border without filling the interior

Similar to box() but only draws the border, leaving the interior transparent. Useful for creating frames around existing content.

Parameters
x

number

Top-left X coordinate

y

number

Top-left Y coordinate

w

number

Width in characters (including borders)

h

number

Height in characters (including borders)

options

BoxOptions = {}

Border styling options

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .drawText(12, 7, 'Important!')
  .border(10, 5, 20, 5, { style: 'double', fg: 'red' })
  .render()
box()

box(x, y, w, h, options): this

Defined in: core/Renderer.ts:808

Draw a box with borders and optional fill

Creates a bordered box using various drawing styles. Can optionally fill the interior with a character.

Parameters
x

number

Top-left X coordinate

y

number

Top-left Y coordinate

w

number

Width in characters (including borders)

h

number

Height in characters (including borders)

options

BoxOptions = {}

Box styling options (style, fg, bg, fill, shadow, padding)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .box(10, 5, 30, 10, { style: 'double', fg: 'cyan' })
  .box(15, 8, 20, 5, { style: 'rounded', fill: true, bg: 'blue' })
  .render()
centerBox()

centerBox(width, height, options, offsetX, offsetY): this

Defined in: core/Renderer.ts:985

Draw a centered box

Convenience method that combines alignBox('center') and box(). Centers a box in the viewport and draws it in one call.

Parameters
width

number

Box width

height

number

Box height

options

BoxOptions = {}

Box styling options

offsetX

number = 0

X offset from center (default: 0)

offsetY

number = 0

Y offset from center (default: 0)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .centerBox(40, 15, { style: 'double', fill: true, fg: 'cyan' })
  .centerText(10, 'GAME OVER', { fg: 'red' })
  .render()
centerText()

centerText(y, text, options, startX, width?): this

Defined in: core/Renderer.ts:1017

Draw centered text

Centers text horizontally within a specified width or the entire screen. Useful for titles, menus, and dialog boxes.

Parameters
y

number

Y coordinate for the text

text

string

Text to draw

options

TextOptions = {}

Text styling options

startX

number = 0

Starting X coordinate of centering area (default: 0)

width?

number

Width of centering area (default: screen width)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .centerText(5, 'GAME TITLE', { fg: 'yellow' })
  .centerText(10, 'Centered in box', {}, 10, 30) // Center within x=10 to x=40
  .render()
clear()

clear(): this

Defined in: core/Renderer.ts:688

Clear the current layer's buffer

Removes all drawn content from the current layer. Does not affect other layers or the render target. Call render() to flush changes to the screen.

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .clear() // Clear everything
  .drawText(0, 0, 'Fresh start')
  .render()
clearCameraBounds()

clearCameraBounds(): this

Defined in: core/Renderer.ts:1514

Clear camera bounds

Removes any camera movement restrictions, allowing unlimited scrolling.

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .clearCameraBounds()
  .setCamera(1000, 1000) // No longer restricted
  .render()
clearHexCameraBounds()

clearHexCameraBounds(): this

Defined in: core/Renderer.ts:1695

Clear hex camera bounds

Returns

this

The renderer instance for chaining

clearLayer()

clearLayer(name): this

Defined in: core/Renderer.ts:1246

Clear a specific layer

Removes all content from the specified layer. The layer itself remains and stays visible.

Parameters
name

string

Name of the layer to clear

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .clearLayer('effects')
  .render()
drawLine()

drawLine(x1, y1, x2, y2, char, options): this

Defined in: core/Renderer.ts:910

Draw a line between two points

Draws a line from (x1, y1) to (x2, y2) using Bresenham's line algorithm. Useful for creating borders, connections, diagrams, and ASCII art.

Parameters
x1

number

Starting X coordinate

y1

number

Starting Y coordinate

x2

number

Ending X coordinate

y2

number

Ending Y coordinate

char

string

Character to draw the line with

options

TextOptions = {}

Line styling options (fg, bg)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .drawLine(0, 0, 10, 10, '/', { fg: 'cyan' })
  .drawLine(10, 0, 0, 10, '\\', { fg: 'cyan' })
  .drawLine(5, 0, 5, 10, '|', { fg: 'yellow' })
  .render()
drawText()

drawText(x, y, text, options): this

Defined in: core/Renderer.ts:617

Draw a text string

Draws text horizontally starting at the specified position. Each character is drawn sequentially to the right.

Parameters
x

number

Starting X coordinate

y

number

Y coordinate

text

string

Text string to draw

options

TextOptions = {}

Text styling options (fg, bg, wrap, align)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .drawText(5, 10, 'Hello, World!', { fg: 'cyan' })
  .drawText(5, 11, 'Press any key', { fg: 'gray' })
  .render()
exportAsANSI()

exportAsANSI(): string

Defined in: core/Renderer.ts:1887

Export buffer as ANSI-colored text

Returns

string

ANSI-colored text string

Example
ts
const ansi = renderer.exportAsANSI()
console.log(ansi) // Displays with colors in terminal
exportAsDataURL()

exportAsDataURL(format?, options?): Promise<string>

Defined in: core/Renderer.ts:1905

Export buffer as image data URL

Parameters
format?

ImageFormat

Image format ('png' or 'jpeg')

options?

ExportImageOptions

Image export options

Returns

Promise<string>

Promise resolving to data URL string

Example
ts
const dataURL = await renderer.exportAsDataURL('png')
const img = document.createElement('img')
img.src = dataURL
exportAsString()

exportAsString(): string

Defined in: core/Renderer.ts:1872

Export buffer as plain text string

Returns

string

Plain text representation of the buffer

Example
ts
const text = renderer.exportAsString()
console.log(text)
fill()

fill(x, y, w, h, char, fg?, bg?): this

Defined in: core/Renderer.ts:654

Fill a rectangular area

Fills a rectangular region with the specified character and colors. Useful for creating solid backgrounds or clearable areas.

Parameters
x

number

Starting X coordinate

y

number

Starting Y coordinate

w

number

Width in characters

h

number

Height in characters

char

string

Character to fill with

fg?

Color

Foreground color (optional)

bg?

Color

Background color (optional)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .fill(10, 5, 20, 10, ' ', null, 'blue') // Blue background box
  .fill(15, 7, 5, 3, '░', 'gray') // Textured area
  .render()
flash()

flash(x, y, options?): number

Defined in: core/Renderer.ts:1754

Parameters
x

number

y

number

options?

FlashOptions

Returns

number

follow()

follow(targetX, targetY): this

Defined in: core/Renderer.ts:1561

Center camera on target position

Moves the camera to center on a specific world position. Useful for following a player character or focusing on important events.

Parameters
targetX

number

World X coordinate to center on

targetY

number

World Y coordinate to center on

Returns

this

The renderer instance for chaining

Example
ts
const player = { x: 150, y: 75 }
renderer
  .follow(player.x, player.y) // Camera centers on player
  .setChar(player.x, player.y, '@', 'yellow')
  .render()
followHex()

followHex(targetQ, targetR): this

Defined in: core/Renderer.ts:1715

Center hex camera on a target hex coordinate

Parameters
targetQ

number

Target q coordinate

targetR

number

Target r coordinate

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .followHex(player.q, player.r)
  .setChar(player.q, player.r, '@', 'yellow')
  .render()
getActiveAnimationCount()

getActiveAnimationCount(): number

Defined in: core/Renderer.ts:1777

Returns

number

getCamera()

getCamera(): object

Defined in: core/Renderer.ts:1463

Get current camera position

Returns the camera's current position in world coordinates.

Returns

object

Object with x and y camera coordinates

x

x: number

y

y: number

Example
ts
const { x, y } = renderer.getCamera()
console.log(`Camera at (${x}, ${y})`)
getCell()

getCell(x, y): Cell | undefined

Defined in: core/Renderer.ts:783

Get cell at position from current layer

Retrieves the cell data at the specified screen coordinates. Returns undefined if nothing is drawn at that position.

Parameters
x

number

X coordinate

y

number

Y coordinate

Returns

Cell | undefined

The cell data or undefined

Example
ts
const cell = renderer.getCell(10, 5)
if (cell) {
  console.log(cell.char, cell.fg, cell.bg)
}
getHexCamera()

getHexCamera(): HexCoord

Defined in: core/Renderer.ts:1648

Get current hex camera position

Returns

HexCoord

Object with q and r hex camera coordinates

grid()

grid(x, y, options): this

Defined in: core/Renderer.ts:1372

Draw a grid with configurable cell sizes, borders, and optional content

Creates a structured grid with outer borders, optional inner dividers, configurable spacing (gap between cells, padding inside cells), and optional cell content with alignment support.

Parameters
x

number

Top-left X coordinate

y

number

Top-left Y coordinate

options

GridOptions

Grid configuration (cols, rows, cellWidth, cellHeight, style, etc.)

Returns

this

The renderer instance for chaining

Example
ts
// Simple 3x2 grid with double borders
renderer
  .grid(5, 2, {
    cols: 3,
    rows: 2,
    cellWidth: 8,
    cellHeight: 3,
    style: 'double',
    fg: 'cyan',
  })
  .render()

// Grid with data and center-aligned content
renderer
  .grid(0, 0, {
    cols: 3,
    rows: 2,
    cellWidth: 10,
    cellHeight: 3,
    data: [['Name', 'HP', 'MP'], ['Hero', '100', '50']],
    dataAlign: 'center',
    paddingX: 1,
  })
  .render()
hexScreenToWorld()

hexScreenToWorld(screenQ, screenR): HexCoord

Defined in: core/Renderer.ts:1744

Convert hex screen coordinates to world coordinates

Parameters
screenQ

number

Screen q coordinate

screenR

number

Screen r coordinate

Returns

HexCoord

World hex coordinates

hexWorldToScreen()

hexWorldToScreen(worldQ, worldR): HexCoord

Defined in: core/Renderer.ts:1733

Convert hex world coordinates to screen coordinates

Parameters
worldQ

number

World q coordinate

worldR

number

World r coordinate

Returns

HexCoord

Screen hex coordinates

hideLayer()

hideLayer(name): this

Defined in: core/Renderer.ts:1205

Hide a layer

Makes a layer invisible without deleting its contents. Hidden layers are not included in rendering.

Parameters
name

string

Name of the layer to hide

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .hideLayer('debug')
  .render() // Debug layer won't be visible
isAnimationActive()

isAnimationActive(animationId): boolean

Defined in: core/Renderer.ts:1781

Parameters
animationId

number

Returns

boolean

layer()

layer(name): this

Defined in: core/Renderer.ts:1163

Select or create a layer

Switches the current drawing context to the specified layer. Layers are created automatically if they don't exist. All subsequent drawing operations affect the current layer.

Parameters
name

string

Name of the layer to select/create

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .layer('background').fill(0, 0, 80, 24, ' ', null, 'blue')
  .layer('ui').box(10, 5, 20, 10, { style: 'double' })
  .layerOrder(['background', 'ui'])
  .render()
layerOrder()

layerOrder(order): this

Defined in: core/Renderer.ts:1184

Set layer rendering order

Defines the order in which layers are composited. Layers listed first are rendered at the bottom, last ones on top.

Parameters
order

string[]

Array of layer names in rendering order (bottom to top)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .layerOrder(['background', 'entities', 'ui', 'effects'])
  .render()
leftAlign()

leftAlign(y, text, options, offsetX): this

Defined in: core/Renderer.ts:1093

Draw left-aligned text

Draws text starting at a specified X offset. Primarily for consistency with centerText and rightAlign.

Parameters
y

number

Y coordinate for the text

text

string

Text to draw

options

TextOptions = {}

Text styling options

offsetX

number = 0

X offset from left edge (default: 0)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .leftAlign(5, 'Menu Item 1', { fg: 'white' })
  .leftAlign(6, 'Menu Item 2', { fg: 'white' }, 2) // Indent by 2
  .render()

menu(x, y, items, options): this

Defined in: core/Renderer.ts:1403

Draw a menu with selectable items

Renders a list of menu items with visual indication of the selected item. Supports borders, titles, and customizable selection indicators.

Parameters
x

number

Top-left X coordinate

y

number

Top-left Y coordinate

items

string[]

Array of menu item strings

options

MenuOptions = {}

Menu styling options (selected, colors, indicator, border, title, etc.)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .menu(20, 10, ['New Game', 'Load Game', 'Options', 'Quit'], {
    selected: 0,
    indicator: '>',
    border: true,
    title: 'Main Menu',
    selectedFg: 'black',
    selectedBg: 'yellow'
  })
  .render()
moveCamera()

moveCamera(dx, dy): this

Defined in: core/Renderer.ts:1537

Move camera by delta

Moves the camera relative to its current position. Positive values move the camera right/down in world space.

Parameters
dx

number

Change in X position

dy

number

Change in Y position

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .moveCamera(5, 0) // Pan camera 5 units right
  .moveCamera(0, -3) // Pan camera 3 units up
  .render()
moveHexCamera()

moveHexCamera(dq, dr): this

Defined in: core/Renderer.ts:1666

Move hex camera by delta in axial coordinates

Parameters
dq

number

Delta q

dr

number

Delta r

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .moveHexCamera(1, 0) // Pan one hex column
  .render()
panel()

panel(x, y, width, height, options): this

Defined in: core/Renderer.ts:1321

Draw a panel with border, title, and content

Creates a bordered box with optional title, footer, and auto-formatted content. Content can be scrolled using the scrollOffset option.

Parameters
x

number

Top-left X coordinate

y

number

Top-left Y coordinate

width

number

Width in characters (including border)

height

number

Height in characters (including border)

options

PanelOptions = {}

Panel styling options (title, footer, content, style, colors, padding, etc.)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .panel(10, 5, 40, 15, {
    title: 'Inventory',
    content: ['Sword', 'Shield', 'Potion x3'],
    style: 'double',
    fg: 'cyan',
    padding: 1
  })
  .render()
progressBar()

progressBar(x, y, length, progress, options): this

Defined in: core/Renderer.ts:1277

Draw a progress bar

Renders a horizontal or vertical progress bar with customizable appearance. Progress value should be between 0.0 and 1.0.

Parameters
x

number

Top-left X coordinate

y

number

Top-left Y coordinate

length

number

Length in characters (width if horizontal, height if vertical)

progress

number

Progress value from 0.0 to 1.0

options

ProgressBarOptions = {}

Progress bar styling options (fillChar, emptyChar, colors, border, label, etc.)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .progressBar(10, 5, 30, 0.75, {
    style: 'blocks',
    fillFg: 'green',
    emptyFg: 'gray',
    showPercent: true
  })
  .progressBar(50, 10, 10, 0.5, { vertical: true })
  .render()
pulse()

pulse(x, y, options?): number

Defined in: core/Renderer.ts:1758

Parameters
x

number

y

number

options?

PulseOptions

Returns

number

rect()

rect(x, y, w, h, fillChar, fg?, bg?): this

Defined in: core/Renderer.ts:874

Draw a filled rectangle without borders

Creates a solid rectangular area filled with the specified character. No borders are drawn.

Parameters
x

number

Top-left X coordinate

y

number

Top-left Y coordinate

w

number

Width in characters

h

number

Height in characters

fillChar

string = " "

Character to fill with (default: space)

fg?

Color

Foreground color (optional)

bg?

Color

Background color (optional)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .rect(10, 5, 20, 10, ' ', null, 'blue') // Solid blue rectangle
  .rect(15, 8, 10, 5, '█', 'red') // Solid block pattern
  .render()
render()

render(): this

Defined in: core/Renderer.ts:710

Render all layers to the target

Composites all visible layers in order and flushes the result to the render target. This is when drawing actually becomes visible.

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .clear()
  .box(10, 5, 20, 10)
  .drawText(12, 7, 'Game Over')
  .render() // Now visible on screen
resetCamera()

resetCamera(): this

Defined in: core/Renderer.ts:1445

Reset camera to origin (0, 0)

Moves the camera back to the world origin.

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .resetCamera()
  .render()
resetHexCamera()

resetHexCamera(): this

Defined in: core/Renderer.ts:1638

Reset hex camera to origin (0, 0)

Returns

this

The renderer instance for chaining

rightAlign()

rightAlign(y, text, options, startX, width?): this

Defined in: core/Renderer.ts:1055

Draw right-aligned text

Aligns text to the right edge of a specified area.

Parameters
y

number

Y coordinate for the text

text

string

Text to draw

options

TextOptions = {}

Text styling options

startX

number = 0

Starting X coordinate of alignment area (default: 0)

width?

number

Width of alignment area (default: screen width)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .rightAlign(5, 'Score: 1000', { fg: 'green' })
  .rightAlign(10, 'HP: 75/100', {}, 50, 30) // Right-align within x=50 to x=80
  .render()
scaledText()

scaledText(x, y, scale, text, fg?, bg?): this

Defined in: core/Renderer.ts:581

Draw scaled text string

Draws text where each character is scaled to occupy scale×scale cells. Characters are placed horizontally with each scaled character occupying its scaled width before the next character.

Parameters
x

number

Starting X coordinate in world space

y

number

Starting Y coordinate in world space

scale

number

Scale factor for each character (2-5)

text

string

Text string to draw scaled

fg?

Color

Foreground color (defaults to renderer's defaultFg)

bg?

Color

Background color (defaults to renderer's defaultBg)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .scaledText(10, 5, 2, 'BIG', 'yellow')      // Each char is 2×2
  .scaledText(10, 10, 3, 'HUGE', 'red')       // Each char is 3×3
  .render()
screenToWorld()

screenToWorld(screenX, screenY): object

Defined in: core/Renderer.ts:1604

Convert screen coordinates to world coordinates

Transforms a screen position to its corresponding world position based on the current camera position. Useful for mouse input handling.

Parameters
screenX

number

X coordinate in screen space

screenY

number

Y coordinate in screen space

Returns

object

Object with world x and y coordinates

x

x: number

y

y: number

Example
ts
mouseManager.onClick((pos) => {
  const world = renderer.screenToWorld(pos.x, pos.y)
  console.log(`Clicked world position (${world.x}, ${world.y})`)
})
setCamera()

setCamera(x, y): this

Defined in: core/Renderer.ts:1426

Set camera position (top-left of viewport in world coordinates)

Positions the camera at specific world coordinates. All subsequent drawing uses world coordinates, which are transformed by the camera.

Parameters
x

number

Camera X position in world space

y

number

Camera Y position in world space

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .setCamera(100, 50) // View world at (100, 50)
  .setChar(105, 55, '@') // Draw at world position (105, 55)
  .render() // Character appears at screen position (5, 5)
setCameraBounds()

setCameraBounds(minX, minY, maxX, maxY): this

Defined in: core/Renderer.ts:1489

Set camera bounds to limit scrolling area

Prevents the camera from scrolling outside the specified boundaries. All camera movements (setCamera, moveCamera, follow) will be clamped to stay within these bounds.

Parameters
minX

number

Minimum X coordinate

minY

number

Minimum Y coordinate

maxX

number

Maximum X coordinate

maxY

number

Maximum Y coordinate

Returns

this

The renderer instance for chaining

Example
ts
// Limit camera to a 100x50 world map
renderer
  .setCameraBounds(0, 0, 100, 50)
  .follow(player.x, player.y) // Auto-clamped to bounds
  .render()
setChar()

setChar(x, y, char, fg?, bg?): this

Defined in: core/Renderer.ts:387

Set a character at position (world coordinates)

The fundamental drawing primitive. Positions are in world coordinates, which are transformed by the camera before rendering.

Parameters
x

number

X coordinate in world space

y

number

Y coordinate in world space

char

string

Character to display

fg?

Color

Foreground color (defaults to renderer's defaultFg)

bg?

Color

Background color (defaults to renderer's defaultBg)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .setChar(10, 5, '@', 'yellow', 'black')
  .setChar(11, 5, '#', 'green')
  .render()
setCharScaled()

setCharScaled(x, y, scale, char, fg?, bg?): this

Defined in: core/Renderer.ts:424

Set a scaled character occupying multiple cells

Creates a unified cell where one character is rendered across scale×scale cells. For example, scale=2 creates a 2×2 character, scale=3 creates a 3×3 character. Maximum scale is 5.

Parameters
x

number

Top-left X coordinate in world space

y

number

Top-left Y coordinate in world space

scale

number

Scale factor (2-5, renders scale×scale cells)

char

string

Character to display scaled

fg?

Color

Foreground color (defaults to renderer's defaultFg)

bg?

Color

Background color (defaults to renderer's defaultBg)

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .setCharScaled(10, 10, 2, '♥', 'red')    // 2×2 red heart
  .setCharScaled(15, 10, 3, '@', 'yellow') // 3×3 yellow player
  .render()
setClipMode()

setClipMode(enabled): this

Defined in: core/Renderer.ts:343

Enable or disable clip mode

When enabled, clips drawing operations to stay within bounds. Useful for preventing visual artifacts when drawing near edges.

Parameters
enabled

boolean

True to enable clip mode, false to disable

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .setClipMode(true)
  .drawText(75, 10, 'This text will be clipped at screen edge')
setHexCamera()

setHexCamera(q, r): this

Defined in: core/Renderer.ts:1628

Set hex camera position in axial coordinates

Positions the hex camera at specific axial coordinates. Only relevant when using a hex render target.

Parameters
q

number

Camera q offset

r

number

Camera r offset

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .setHexCamera(5, 3)
  .setChar(5, 3, '@', 'yellow') // Appears at screen hex (0, 0)
  .render()
setHexCameraBounds()

setHexCameraBounds(minQ, minR, maxQ, maxR): this

Defined in: core/Renderer.ts:1680

Set hex camera bounds to limit scrolling

Parameters
minQ

number

Minimum q coordinate

minR

number

Minimum r coordinate

maxQ

number

Maximum q coordinate

maxR

number

Maximum r coordinate

Returns

this

The renderer instance for chaining

setSafeMode()

setSafeMode(enabled): this

Defined in: core/Renderer.ts:322

Enable or disable safe mode

When enabled, throws errors for out-of-bounds operations. When disabled, silently ignores out-of-bounds operations.

Parameters
enabled

boolean

True to enable safe mode, false to disable

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .setSafeMode(true)
  .setChar(100, 100, 'X') // Will throw if out of bounds
showLayer()

showLayer(name): this

Defined in: core/Renderer.ts:1225

Show a layer

Makes a previously hidden layer visible again.

Parameters
name

string

Name of the layer to show

Returns

this

The renderer instance for chaining

Example
ts
renderer
  .showLayer('debug')
  .render() // Debug layer is now visible
stopAllAnimations()

stopAllAnimations(): this

Defined in: core/Renderer.ts:1767

Returns

this

stopAnimation()

stopAnimation(animationId): this

Defined in: core/Renderer.ts:1762

Parameters
animationId

number

Returns

this

updateAnimations()

updateAnimations(currentTime?): this

Defined in: core/Renderer.ts:1772

Parameters
currentTime?

number

Returns

this

worldToScreen()

worldToScreen(worldX, worldY): object

Defined in: core/Renderer.ts:1582

Convert world coordinates to screen coordinates

Transforms a world position to its corresponding screen position based on the current camera position.

Parameters
worldX

number

X coordinate in world space

worldY

number

Y coordinate in world space

Returns

object

Object with screen x and y coordinates

x

x: number

y

y: number

Example
ts
const screen = renderer.worldToScreen(100, 50)
console.log(`World (100, 50) is at screen (${screen.x}, ${screen.y})`)
forCanvas()

static forCanvas(canvas, options): Renderer

Defined in: core/Renderer.ts:208

Create a Renderer for Canvas with improved, semantic API

Modern factory method with better parameter grouping for improved DX. Recommended over fromCanvas() for new code.

Parameters
canvas

HTMLCanvasElement

HTML Canvas element to render to

options

CanvasRendererOptions

Grouped configuration options

Returns

Renderer

A new Renderer instance configured for the canvas

Example
ts
const renderer = Renderer.forCanvas(canvas, {
  grid: { width: 80, height: 24 },
  cell: { width: 12, height: 20 },
  font: { family: 'monospace', size: 16 },
  colors: { fg: 'white', bg: 'black' }
})
forHexCanvas()

static forHexCanvas(canvas, options): Renderer

Defined in: core/Renderer.ts:258

Create a Renderer for a hexagonal Canvas grid

Factory method for hex-based tile map rendering. Coordinates use the axial system (q, r). All standard drawing methods still work — use layers to overlay rectangular UI on top of hex maps.

Parameters
canvas

HTMLCanvasElement

HTML Canvas element to render to

options

HexCanvasRendererOptions

Hex grid configuration options

Returns

Renderer

A new Renderer instance configured for hex rendering

Example
ts
const renderer = Renderer.forHexCanvas(canvas, {
  grid: { width: 20, height: 15 },
  hex: { orientation: 'flat-top', size: 24 },
  font: { family: 'monospace', size: 14 },
  colors: { fg: 'white', bg: 'black' },
});

renderer
  .setChar(0, 0, '~', 'blue')   // water tile at hex (0,0)
  .setChar(1, 0, '^', 'green')  // mountain at hex (1,0)
  .render();
fromCanvas()

static fromCanvas(canvas, canvasOptions, rendererOptions?): Renderer

Defined in: core/Renderer.ts:179

Create a Renderer from an HTML Canvas element

Convenience factory method that creates a CanvasTarget and Renderer in one step. Simplifies the common pattern of creating a canvas-based renderer.

Parameters
canvas

HTMLCanvasElement

HTML Canvas element to render to

canvasOptions

CanvasTargetOptions

Canvas target configuration (width, height, charWidth, etc.)

rendererOptions?

RendererCreateOptions

Optional renderer configuration (colors, autoClear)

Returns

Renderer

A new Renderer instance configured for the canvas

Example
ts
// Instead of:
const target = new CanvasTarget(canvas, { width: 80, height: 24 })
const renderer = new Renderer(target)

// Use:
const renderer = Renderer.fromCanvas(canvas, { width: 80, height: 24 })

Interfaces

AnimateOptions

Defined in: types/types.ts:316

Options for animate()

Properties

delay?

optional delay: number

Defined in: types/types.ts:328

Delay before starting in milliseconds

duration?

optional duration: number

Defined in: types/types.ts:318

Animation duration in milliseconds

easing?

optional easing: EasingFunction

Defined in: types/types.ts:320

Easing function

loop?

optional loop: boolean

Defined in: types/types.ts:326

Whether to loop the animation

onComplete?

optional onComplete: AnimationCompleteCallback

Defined in: types/types.ts:324

Callback called when animation completes

onUpdate?

optional onUpdate: AnimationCallback

Defined in: types/types.ts:322

Callback called on each frame with progress (0.0 to 1.0)


BorderChars

Defined in: types/types.ts:78

Custom border characters

Extended by

Properties

bottomLeft

bottomLeft: string

Defined in: types/types.ts:81

bottomRight

bottomRight: string

Defined in: types/types.ts:82

horizontal

horizontal: string

Defined in: types/types.ts:83

topLeft

topLeft: string

Defined in: types/types.ts:79

topRight

topRight: string

Defined in: types/types.ts:80

vertical

vertical: string

Defined in: types/types.ts:84


BoxOptions

Defined in: types/types.ts:90

Options for drawing a box

Properties

bg?

optional bg: Color

Defined in: types/types.ts:96

Background color

fg?

optional fg: Color

Defined in: types/types.ts:94

Foreground color

fill?

optional fill: boolean

Defined in: types/types.ts:98

Fill the box interior

fillChar?

optional fillChar: string

Defined in: types/types.ts:100

Character to fill with when fill is true

padding?

optional padding: number

Defined in: types/types.ts:104

Inner padding

shadow?

optional shadow: boolean

Defined in: types/types.ts:102

Add shadow effect

style?

optional style: BoxStyle | BorderChars

Defined in: types/types.ts:92

Border style to use

title?

optional title: string

Defined in: types/types.ts:106

Optional title to display in the top border

titleAlign?

optional titleAlign: TextAlign

Defined in: types/types.ts:110

Alignment of the title in the top border

titleFg?

optional titleFg: Color

Defined in: types/types.ts:108

Foreground color for the title


BoxPreset

Defined in: helpers/presetHelpers.ts:37

Box preset definition

Extends

  • BasePreset

Properties

options

options: BoxOptions

Defined in: helpers/presetHelpers.ts:39

Overrides

BasePreset.options

type

type: "box"

Defined in: helpers/presetHelpers.ts:38

Overrides

BasePreset.type


CanvasRendererOptions

Defined in: core/Renderer.ts:58

Options for forCanvas factory method with semantic grouping

Properties

autoClear?

optional autoClear: boolean

Defined in: core/Renderer.ts:80

Auto-clear behavior

cell?

optional cell: object

Defined in: core/Renderer.ts:65

Cell/character sizing

height?

optional height: number

width?

optional width: number

clearColor?

optional clearColor: Color

Defined in: core/Renderer.ts:82

Clear color when autoClear is enabled

colors?

optional colors: object

Defined in: core/Renderer.ts:75

Color defaults

bg?

optional bg: Color

fg?

optional fg: Color

font?

optional font: object

Defined in: core/Renderer.ts:70

Font configuration

family?

optional family: string

size?

optional size: number

grid

grid: object

Defined in: core/Renderer.ts:60

Grid dimensions

height

height: number

width

width: number


CanvasTargetOptions

Defined in: targets/CanvasTarget.ts:11

Options for CanvasTarget initialization

Properties

charHeight?

optional charHeight: number

Defined in: targets/CanvasTarget.ts:19

Character height in pixels

charWidth?

optional charWidth: number

Defined in: targets/CanvasTarget.ts:17

Character width in pixels

fontFamily?

optional fontFamily: string

Defined in: targets/CanvasTarget.ts:21

Font family

fontSize?

optional fontSize: number

Defined in: targets/CanvasTarget.ts:23

Font size in pixels

height

height: number

Defined in: targets/CanvasTarget.ts:15

Height in characters

width

width: number

Defined in: targets/CanvasTarget.ts:13

Width in characters


Cell

Defined in: types/types.ts:59

A single cell in the render buffer

Properties

bg

bg: Color

Defined in: types/types.ts:65

Background color

char

char: string

Defined in: types/types.ts:61

The character to display

fg

fg: Color

Defined in: types/types.ts:63

Foreground color

unified?

optional unified: UnifiedCell

Defined in: types/types.ts:67

Unified cell metadata for scaled characters


CellInfo

Defined in: helpers/debugHelpers.ts:65

Cell information returned by logCell

Properties

bg

bg: Color

Defined in: helpers/debugHelpers.ts:70

char

char: string

Defined in: helpers/debugHelpers.ts:68

fg

fg: Color

Defined in: helpers/debugHelpers.ts:69

x

x: number

Defined in: helpers/debugHelpers.ts:66

y

y: number

Defined in: helpers/debugHelpers.ts:67


CubeCoord

Defined in: types/types.ts:463

Cube hex coordinate (x, y, z) where x + y + z = 0

Used internally for hex math operations that are simpler in cube coordinates (distance, rounding, line drawing).

Properties

x

x: number

Defined in: types/types.ts:464

y

y: number

Defined in: types/types.ts:465

z

z: number

Defined in: types/types.ts:466


DirectionOptions

Defined in: input/KeyboardManager.ts:12

Properties

normalize?

optional normalize: boolean

Defined in: input/KeyboardManager.ts:13


DirectionVector

Defined in: input/KeyboardManager.ts:7

Properties

x

x: number

Defined in: input/KeyboardManager.ts:8

y

y: number

Defined in: input/KeyboardManager.ts:9


ExportImageOptions

Defined in: helpers/exportHelpers.ts:13

Export options for data URL/image export

Properties

backgroundColor?

optional backgroundColor: Color

Defined in: helpers/exportHelpers.ts:23

Background color for transparent areas

charHeight?

optional charHeight: number

Defined in: helpers/exportHelpers.ts:17

Character height in pixels (default: 16)

charWidth?

optional charWidth: number

Defined in: helpers/exportHelpers.ts:15

Character width in pixels (default: 10)

fontFamily?

optional fontFamily: string

Defined in: helpers/exportHelpers.ts:19

Font family (default: 'monospace')

fontSize?

optional fontSize: number

Defined in: helpers/exportHelpers.ts:21

Font size in pixels (default: 14)


FlashOptions

Defined in: types/types.ts:334

Options for flash()

Properties

bg?

optional bg: Color

Defined in: types/types.ts:344

Background color

char?

optional char: string

Defined in: types/types.ts:340

Character to flash

count?

optional count: number

Defined in: types/types.ts:338

Number of times to flash

duration?

optional duration: number

Defined in: types/types.ts:336

Flash duration in milliseconds

fg?

optional fg: Color

Defined in: types/types.ts:342

Foreground color

onComplete?

optional onComplete: AnimationCompleteCallback

Defined in: types/types.ts:346

Callback when flash completes


GameLoopOptions

Defined in: core/GameLoop.ts:5

Game loop utility with fixed timestep and delta time support

Properties

fps?

optional fps: number

Defined in: core/GameLoop.ts:7

Target frames per second (default: 60)

maxFrameSkip?

optional maxFrameSkip: number

Defined in: core/GameLoop.ts:9

Maximum number of update calls per frame (prevents spiral of death)


GamepadAxisState

Defined in: input/GamepadManager.ts:14

Properties

x

x: number

Defined in: input/GamepadManager.ts:15

y

y: number

Defined in: input/GamepadManager.ts:16


GamepadButtonState

Defined in: input/GamepadManager.ts:7

Properties

justPressed

justPressed: boolean

Defined in: input/GamepadManager.ts:9

justReleased

justReleased: boolean

Defined in: input/GamepadManager.ts:10

pressed

pressed: boolean

Defined in: input/GamepadManager.ts:8

value

value: number

Defined in: input/GamepadManager.ts:11


GridBorderChars

Defined in: types/types.ts:498

Border characters for grid rendering (extends BorderChars with intersection characters)

Adds T-junction and cross characters needed for drawing grid dividers in addition to the standard corner and edge characters.

Example

┌───┬───┐   topLeft, tTop, topRight
│   │   │
├───┼───┤   tLeft, cross, tRight
│   │   │
└───┴───┘   bottomLeft, tBottom, bottomRight

Extends

Properties

bottomLeft

bottomLeft: string

Defined in: types/types.ts:81

Inherited from

BorderChars.bottomLeft

bottomRight

bottomRight: string

Defined in: types/types.ts:82

Inherited from

BorderChars.bottomRight

cross

cross: string

Defined in: types/types.ts:508

Cross at inner intersections (e.g., ┼)

horizontal

horizontal: string

Defined in: types/types.ts:83

Inherited from

BorderChars.horizontal

tBottom

tBottom: string

Defined in: types/types.ts:502

T-junction at the bottom edge (e.g., ┴)

tLeft

tLeft: string

Defined in: types/types.ts:504

T-junction at the left edge (e.g., ├)

topLeft

topLeft: string

Defined in: types/types.ts:79

Inherited from

BorderChars.topLeft

topRight

topRight: string

Defined in: types/types.ts:80

Inherited from

BorderChars.topRight

tRight

tRight: string

Defined in: types/types.ts:506

T-junction at the right edge (e.g., ┤)

tTop

tTop: string

Defined in: types/types.ts:500

T-junction at the top edge (e.g., ┬)

vertical

vertical: string

Defined in: types/types.ts:84

Inherited from

BorderChars.vertical


GridOptions

Defined in: types/types.ts:530

Options for drawing a grid

Example

ts
renderer
  .grid(5, 2, {
    cols: 3,
    rows: 2,
    cellWidth: 8,
    cellHeight: 3,
    style: 'double',
    fg: 'cyan',
    data: [['A1', 'B1', 'C1'], ['A2', 'B2', 'C2']],
    dataAlign: 'center',
  })
  .render()

Properties

bg?

optional bg: Color

Defined in: types/types.ts:544

Background color for borders

cellHeight

cellHeight: number

Defined in: types/types.ts:538

Height of each cell in characters (interior, excluding borders)

cellWidth

cellWidth: number

Defined in: types/types.ts:536

Width of each cell in characters (interior, excluding borders)

cols

cols: number

Defined in: types/types.ts:532

Number of columns

data?

optional data: string[][]

Defined in: types/types.ts:562

Optional cell content (row-major: data[row][col])

dataAlign?

optional dataAlign: TextAlign

Defined in: types/types.ts:564

Text alignment for cell content

dataBg?

optional dataBg: Color

Defined in: types/types.ts:568

Background color for cell content

dataFg?

optional dataFg: Color

Defined in: types/types.ts:566

Foreground color for cell content

fg?

optional fg: Color

Defined in: types/types.ts:542

Foreground color for borders

fill?

optional fill: boolean

Defined in: types/types.ts:546

Fill cell interiors

fillChar?

optional fillChar: string

Defined in: types/types.ts:548

Character to fill with when fill is true

gapX?

optional gapX: number

Defined in: types/types.ts:550

Horizontal gap between cells (empty columns between cell borders)

gapY?

optional gapY: number

Defined in: types/types.ts:552

Vertical gap between cells (empty rows between cell borders)

paddingX?

optional paddingX: number

Defined in: types/types.ts:554

Horizontal padding inside each cell

paddingY?

optional paddingY: number

Defined in: types/types.ts:556

Vertical padding inside each cell

rows

rows: number

Defined in: types/types.ts:534

Number of rows

showInnerHorizontal?

optional showInnerHorizontal: boolean

Defined in: types/types.ts:558

Show inner horizontal dividers between rows

showInnerVertical?

optional showInnerVertical: boolean

Defined in: types/types.ts:560

Show inner vertical dividers between columns

style?

optional style: BoxStyle | GridBorderChars

Defined in: types/types.ts:540

Border style to use


HexCameraBounds

Defined in: helpers/hexCameraHelpers.ts:26

Bounds for hex camera movement

Properties

maxQ

maxQ: number

Defined in: helpers/hexCameraHelpers.ts:29

maxR

maxR: number

Defined in: helpers/hexCameraHelpers.ts:30

minQ

minQ: number

Defined in: helpers/hexCameraHelpers.ts:27

minR

minR: number

Defined in: helpers/hexCameraHelpers.ts:28


HexCameraState

Defined in: helpers/hexCameraHelpers.ts:14

Hex camera state in axial coordinates

Properties

bounds?

optional bounds: HexCameraBounds

Defined in: helpers/hexCameraHelpers.ts:20

Optional movement bounds

q

q: number

Defined in: helpers/hexCameraHelpers.ts:16

Camera offset in axial q

r

r: number

Defined in: helpers/hexCameraHelpers.ts:18

Camera offset in axial r


HexCanvasRendererOptions

Defined in: core/Renderer.ts:88

Options for forHexCanvas factory method

Properties

autoClear?

optional autoClear: boolean

Defined in: core/Renderer.ts:112

Auto-clear behavior

clearColor?

optional clearColor: Color

Defined in: core/Renderer.ts:114

Clear color when autoClear is enabled

colors?

optional colors: object

Defined in: core/Renderer.ts:107

Color defaults

bg?

optional bg: Color

fg?

optional fg: Color

font?

optional font: object

Defined in: core/Renderer.ts:102

Font configuration

family?

optional family: string

size?

optional size: number

grid

grid: object

Defined in: core/Renderer.ts:90

Grid dimensions in hex columns/rows

height

height: number

width

width: number

hex?

optional hex: object

Defined in: core/Renderer.ts:95

Hex grid configuration

orientation?

optional orientation: HexOrientation

Hex orientation (default: 'flat-top')

size?

optional size: number

Hex size in pixels, center to vertex (default: 20)


HexCanvasTargetOptions

Defined in: targets/HexCanvasTarget.ts:15

Options for HexCanvasTarget initialization

Properties

fontFamily?

optional fontFamily: string

Defined in: targets/HexCanvasTarget.ts:25

Font family

fontSize?

optional fontSize: number

Defined in: targets/HexCanvasTarget.ts:27

Font size in pixels

height

height: number

Defined in: targets/HexCanvasTarget.ts:19

Grid height in hex rows

hexSize?

optional hexSize: number

Defined in: targets/HexCanvasTarget.ts:21

Hex size in pixels (center to vertex distance)

orientation?

optional orientation: HexOrientation

Defined in: targets/HexCanvasTarget.ts:23

Hex orientation

width

width: number

Defined in: targets/HexCanvasTarget.ts:17

Grid width in hex columns


HexCoord

Defined in: types/types.ts:450

Axial hex coordinate (q, r)

Uses the axial coordinate system which is the standard for hex math. The third cube coordinate (s) is implicit: s = -q - r.

Example

ts
const tile: HexCoord = { q: 3, r: -1 };
const neighbors = hexNeighbors(tile.q, tile.r);

Properties

q

q: number

Defined in: types/types.ts:452

Column coordinate (axial q)

r

r: number

Defined in: types/types.ts:454

Row coordinate (axial r)


HexGridOptions

Defined in: types/types.ts:472

Configuration options for hex grid rendering

Properties

hexSize

hexSize: number

Defined in: types/types.ts:476

Hex size in pixels (distance from center to vertex)

orientation

orientation: HexOrientation

Defined in: types/types.ts:474

Hex orientation


Defined in: types/types.ts:199

Options for menu rendering

Properties

bg?

optional bg: Color

Defined in: types/types.ts:205

Background color for unselected items

border?

optional border: boolean

Defined in: types/types.ts:213

Draw a border around the menu

fg?

optional fg: Color

Defined in: types/types.ts:203

Foreground color for unselected items

indicator?

optional indicator: string

Defined in: types/types.ts:211

Selection indicator character (e.g., '>' or '•')

padding?

optional padding: number

Defined in: types/types.ts:221

Padding inside the menu

selected?

optional selected: number

Defined in: types/types.ts:201

Index of selected item (0-based)

selectedBg?

optional selectedBg: Color

Defined in: types/types.ts:209

Background color for selected item

selectedFg?

optional selectedFg: Color

Defined in: types/types.ts:207

Foreground color for selected item

style?

optional style: BoxStyle

Defined in: types/types.ts:215

Box style for border

title?

optional title: string

Defined in: types/types.ts:217

Menu title (displayed in top border if border is true)

width?

optional width: number

Defined in: types/types.ts:219

Fixed width (auto-calculated if not specified)


Defined in: helpers/presetHelpers.ts:45

Menu preset definition

Extends

  • BasePreset

Properties

options

options: MenuOptions

Defined in: helpers/presetHelpers.ts:47

Overrides

BasePreset.options

type

type: "menu"

Defined in: helpers/presetHelpers.ts:46

Overrides

BasePreset.type


MouseEvent

Defined in: input/MouseManager.ts:13

Properties

event

event: MouseEvent

Defined in: input/MouseManager.ts:16

grid

grid: MousePosition

Defined in: input/MouseManager.ts:15

pixel

pixel: MousePosition

Defined in: input/MouseManager.ts:14


MousePosition

Defined in: input/MouseManager.ts:8

Mouse input manager for handling mouse events and state

Deprecated

Use PointerManager instead for unified mouse/touch/pen support

See

PointerManager

Properties

x

x: number

Defined in: input/MouseManager.ts:9

y

y: number

Defined in: input/MouseManager.ts:10


PanelOptions

Defined in: types/types.ts:264

Options for panel rendering

Properties

bg?

optional bg: Color

Defined in: types/types.ts:276

Background color

content?

optional content: string[]

Defined in: types/types.ts:278

Content lines to display

contentAlign?

optional contentAlign: TextAlign

Defined in: types/types.ts:280

Content alignment

fg?

optional fg: Color

Defined in: types/types.ts:274

Foreground color

fill?

optional fill: boolean

Defined in: types/types.ts:284

Fill panel background

fillChar?

optional fillChar: string

Defined in: types/types.ts:286

Fill character when fill is true

optional footer: string

Defined in: types/types.ts:270

Panel footer (displayed in bottom border)

padding?

optional padding: number

Defined in: types/types.ts:288

Inner padding

scrollOffset?

optional scrollOffset: number

Defined in: types/types.ts:282

Scroll offset for content (0-based line index)

style?

optional style: BoxStyle

Defined in: types/types.ts:272

Box style for border

title?

optional title: string

Defined in: types/types.ts:266

Panel title (displayed in top border)

titleAlign?

optional titleAlign: TextAlign

Defined in: types/types.ts:268

Title alignment


Point

Defined in: types/types.ts:384

A 2D point or position

Example

ts
const playerPos: Point = { x: 10, y: 5 };
renderer.setChar(playerPos.x, playerPos.y, '@');

Properties

x

x: number

Defined in: types/types.ts:386

X coordinate

y

y: number

Defined in: types/types.ts:388

Y coordinate


PointerEvent

Defined in: input/PointerManager.ts:11

Properties

event

event: PointerEvent

Defined in: input/PointerManager.ts:14

grid

grid: PointerPosition

Defined in: input/PointerManager.ts:13

pixel

pixel: PointerPosition

Defined in: input/PointerManager.ts:12


PointerPosition

Defined in: input/PointerManager.ts:6

Pointer input manager for handling mouse, touch, and pen events Uses the Pointer Events API for unified input handling across devices

Properties

x

x: number

Defined in: input/PointerManager.ts:7

y

y: number

Defined in: input/PointerManager.ts:8


ProgressBarOptions

Defined in: types/types.ts:232

Options for progress bar rendering

Properties

border?

optional border: boolean

Defined in: types/types.ts:246

Draw border around progress bar

borderChars?

optional borderChars: [string, string]

Defined in: types/types.ts:248

Border characters (defaults to [ and ])

emptyBg?

optional emptyBg: Color

Defined in: types/types.ts:244

Background color for empty portion

emptyChar?

optional emptyChar: string

Defined in: types/types.ts:236

Character for empty portion

emptyFg?

optional emptyFg: Color

Defined in: types/types.ts:242

Foreground color for empty portion

fillBg?

optional fillBg: Color

Defined in: types/types.ts:240

Background color for filled portion

fillChar?

optional fillChar: string

Defined in: types/types.ts:234

Character for filled portion

fillFg?

optional fillFg: Color

Defined in: types/types.ts:238

Foreground color for filled portion

label?

optional label: string

Defined in: types/types.ts:252

Custom label to display

labelPosition?

optional labelPosition: "left" | "center" | "right"

Defined in: types/types.ts:254

Label position

showPercent?

optional showPercent: boolean

Defined in: types/types.ts:250

Show percentage label

style?

optional style: ProgressBarStyle

Defined in: types/types.ts:258

Style preset

vertical?

optional vertical: boolean

Defined in: types/types.ts:256

Render vertically instead of horizontally


ProgressBarPreset

Defined in: helpers/presetHelpers.ts:53

Progress bar preset definition

Extends

  • BasePreset

Properties

options

options: ProgressBarOptions

Defined in: helpers/presetHelpers.ts:55

Overrides

BasePreset.options

type

type: "progressBar"

Defined in: helpers/presetHelpers.ts:54

Overrides

BasePreset.type


PulseOptions

Defined in: types/types.ts:352

Options for pulse()

Properties

bg?

optional bg: Color

Defined in: types/types.ts:366

Background color

duration?

optional duration: number

Defined in: types/types.ts:354

Pulse duration in milliseconds

easing?

optional easing: EasingFunction

Defined in: types/types.ts:360

Easing function

fg?

optional fg: Color

Defined in: types/types.ts:364

Foreground color

loop?

optional loop: boolean

Defined in: types/types.ts:362

Whether to loop the pulse

maxIntensity?

optional maxIntensity: number

Defined in: types/types.ts:358

Maximum opacity/intensity (0.0 to 1.0)

minIntensity?

optional minIntensity: number

Defined in: types/types.ts:356

Minimum opacity/intensity (0.0 to 1.0)

onComplete?

optional onComplete: AnimationCompleteCallback

Defined in: types/types.ts:368

Callback when pulse completes (only called if not looping)


Rect

Defined in: types/types.ts:400

A rectangle defined by position and dimensions

Example

ts
const bounds: Rect = { x: 5, y: 5, width: 20, height: 10 };
renderer.box(bounds.x, bounds.y, bounds.width, bounds.height);

Properties

height

height: number

Defined in: types/types.ts:408

Height in characters

width

width: number

Defined in: types/types.ts:406

Width in characters

x

x: number

Defined in: types/types.ts:402

X coordinate of top-left corner

y

y: number

Defined in: types/types.ts:404

Y coordinate of top-left corner


RendererCreateOptions

Defined in: core/Renderer.ts:44

Renderer initialization options

Properties

autoClear?

optional autoClear: boolean

Defined in: core/Renderer.ts:50

Auto-clear the render target each frame

clearColor?

optional clearColor: Color

Defined in: core/Renderer.ts:52

Optional clear color when autoClear is enabled

defaultBg?

optional defaultBg: Color

Defined in: core/Renderer.ts:48

Default background color

defaultFg?

optional defaultFg: Color

Defined in: core/Renderer.ts:46

Default foreground color


RendererOptions

Defined in: types/types.ts:135

Renderer configuration options

Properties

defaultBg?

optional defaultBg: Color

Defined in: types/types.ts:143

Default background color

defaultFg?

optional defaultFg: Color

Defined in: types/types.ts:141

Default foreground color

height

height: number

Defined in: types/types.ts:139

Height in characters

width

width: number

Defined in: types/types.ts:137

Width in characters


RenderTarget

Defined in: types/types.ts:150

Abstract interface for render targets Allows rendering to different outputs (Canvas, DOM, Terminal, etc.)

Methods

clear()

clear(): void

Defined in: types/types.ts:182

Clear the entire render target

Returns

void

flush()

flush(): void

Defined in: types/types.ts:187

Flush all pending changes to the actual output

Returns

void

getSize()

getSize(): object

Defined in: types/types.ts:193

Get the size of the render target

Returns

object

Width and height in characters

height

height: number

width

width: number

setCell()

setCell(x, y, char, fg, bg): void

Defined in: types/types.ts:159

Set a character at the specified position

Parameters
x

number

X coordinate (0-indexed)

y

number

Y coordinate (0-indexed)

char

string

Character to display

fg

Color

Foreground color

bg

Color

Background color

Returns

void

setCellScaled()?

optional setCellScaled(x, y, scale, char, fg, bg): void

Defined in: types/types.ts:170

Set a scaled character occupying multiple cells

Parameters
x

number

X coordinate (0-indexed)

y

number

Y coordinate (0-indexed)

scale

number

Scale factor (2 = 2×2, 3 = 3×3, etc.)

char

string

Character to display scaled

fg

Color

Foreground color

bg

Color

Background color

Returns

void


RGBColor

Defined in: types/types.ts:35

RGB color object

Properties

b

b: number

Defined in: types/types.ts:38

g

g: number

Defined in: types/types.ts:37

r

r: number

Defined in: types/types.ts:36


ShowBoundsOptions

Defined in: helpers/debugHelpers.ts:25

Options for showing bounds

Properties

fg?

optional fg: Color

Defined in: helpers/debugHelpers.ts:27

Foreground color

fill?

optional fill: boolean

Defined in: helpers/debugHelpers.ts:31

Fill the bounds with a transparent pattern

label?

optional label: string

Defined in: helpers/debugHelpers.ts:29

Label to display (positioned at top-left corner)


ShowFPSOptions

Defined in: helpers/debugHelpers.ts:37

Options for showing FPS counter

Properties

bg?

optional bg: Color

Defined in: helpers/debugHelpers.ts:45

Background color

fg?

optional fg: Color

Defined in: helpers/debugHelpers.ts:43

Foreground color

x?

optional x: number

Defined in: helpers/debugHelpers.ts:39

X position (default: 0)

y?

optional y: number

Defined in: helpers/debugHelpers.ts:41

Y position (default: 0)


ShowGridOptions

Defined in: helpers/debugHelpers.ts:13

Options for showing a grid overlay

Properties

char?

optional char: string

Defined in: helpers/debugHelpers.ts:19

Character to use for grid lines (default: '·' for dots, '┼' for intersections)

fg?

optional fg: Color

Defined in: helpers/debugHelpers.ts:17

Grid line color

spacing?

optional spacing: number

Defined in: helpers/debugHelpers.ts:15

Grid line spacing (default: 10)


ShowPointerCoordsOptions

Defined in: helpers/debugHelpers.ts:51

Options for showing pointer coordinates

Properties

bg?

optional bg: Color

Defined in: helpers/debugHelpers.ts:59

Background color

fg?

optional fg: Color

Defined in: helpers/debugHelpers.ts:57

Foreground color

x?

optional x: number

Defined in: helpers/debugHelpers.ts:53

X position for the display (default: 0)

y?

optional y: number

Defined in: helpers/debugHelpers.ts:55

Y position for the display (default: 0)


Size

Defined in: types/types.ts:419

Dimensions (width and height)

Example

ts
const gridSize: Size = { width: 80, height: 24 };

Properties

height

height: number

Defined in: types/types.ts:423

Height in characters

width

width: number

Defined in: types/types.ts:421

Width in characters


TextOptions

Defined in: types/types.ts:121

Options for drawing text

Properties

align?

optional align: TextAlign

Defined in: types/types.ts:129

Text alignment

bg?

optional bg: Color

Defined in: types/types.ts:125

Background color

fg?

optional fg: Color

Defined in: types/types.ts:123

Foreground color

wrap?

optional wrap: boolean

Defined in: types/types.ts:127

Enable word wrapping


TextPreset

Defined in: helpers/presetHelpers.ts:29

Text preset definition

Extends

  • BasePreset

Properties

options

options: TextOptions

Defined in: helpers/presetHelpers.ts:31

Overrides

BasePreset.options

type

type: "text"

Defined in: helpers/presetHelpers.ts:30

Overrides

BasePreset.type


WaitForKeyOptions

Defined in: input/KeyboardManager.ts:16

Properties

signal?

optional signal: AbortSignal

Defined in: input/KeyboardManager.ts:18

timeout?

optional timeout: number

Defined in: input/KeyboardManager.ts:17

Type Aliases

AnimationCallback()

AnimationCallback = (progress) => void

Defined in: types/types.ts:306

Animation callback function

Parameters

progress

number

Animation progress (0.0 to 1.0)

Returns

void


AnimationCompleteCallback()

AnimationCompleteCallback = () => void

Defined in: types/types.ts:311

Animation completion callback

Returns

void


BoxStyle

BoxStyle = "single" | "double" | "rounded" | "heavy" | "ascii"

Defined in: types/types.ts:73

Box border styles


Color

Color = NamedColor | HexColor | RGBColor | null

Defined in: types/types.ts:44

All supported color formats


EasingFunction

EasingFunction = "linear" | "easeIn" | "easeOut" | "easeInOut" | "bounce" | "elastic"

Defined in: types/types.ts:294

Easing functions for animations


GamepadCallback()

GamepadCallback = (gamepad) => void

Defined in: input/GamepadManager.ts:5

Gamepad/Controller input manager using the native Gamepad API

Parameters

gamepad

Gamepad

Returns

void


HexColor

HexColor = `#${string}`

Defined in: types/types.ts:30

Hex color string (e.g., "#ff0000")


HexOrientation

HexOrientation = "flat-top" | "pointy-top"

Defined in: types/types.ts:436

Hex grid orientation

  • 'flat-top' — hexagons have a flat edge on top
  • 'pointy-top' — hexagons have a pointed vertex on top

ImageFormat

ImageFormat = "png" | "jpeg"

Defined in: helpers/exportHelpers.ts:29

Image format for export


KeyCallback()

KeyCallback = (event) => void

Defined in: input/KeyboardManager.ts:5

Keyboard input manager for handling key events and state

Parameters

event

KeyboardEvent

Returns

void


MouseCallback()

MouseCallback = (event) => void

Defined in: input/MouseManager.ts:19

Parameters

event

MouseEvent

Returns

void


NamedColor

NamedColor = "black" | "red" | "green" | "yellow" | "blue" | "magenta" | "cyan" | "white" | "gray" | "grey" | "brightRed" | "brightGreen" | "brightYellow" | "brightBlue" | "brightMagenta" | "brightCyan" | "brightWhite"

Defined in: types/types.ts:8

Named ANSI colors


PointerCallback()

PointerCallback = (event) => void

Defined in: input/PointerManager.ts:17

Parameters

event

PointerEvent

Returns

void


Preset

Preset = TextPreset | BoxPreset | MenuPreset | ProgressBarPreset

Defined in: helpers/presetHelpers.ts:61

Union type of all preset types


PresetDefinition

PresetDefinition = object & TextOptions | object & BoxOptions | object & MenuOptions | object & ProgressBarOptions

Defined in: helpers/presetHelpers.ts:66

Preset definition for definePreset function


PresetType

PresetType = "text" | "box" | "menu" | "progressBar"

Defined in: helpers/presetHelpers.ts:16

Preset type discriminators


ProgressBarStyle

ProgressBarStyle = "blocks" | "dots" | "arrows" | "custom"

Defined in: types/types.ts:227

Progress bar style presets


RenderCallback()

RenderCallback = () => void

Defined in: core/GameLoop.ts:13

Returns

void


TextAlign

TextAlign = "left" | "center" | "right"

Defined in: types/types.ts:116

Text alignment options


UpdateCallback()

UpdateCallback = (delta) => void

Defined in: core/GameLoop.ts:12

Parameters

delta

number

Returns

void

Functions

axialToCube()

axialToCube(q, r): CubeCoord

Defined in: helpers/hexHelpers.ts:50

Convert axial (q, r) to cube (x, y, z) coordinates

Parameters

q

number

Axial q coordinate

r

number

Axial r coordinate

Returns

CubeCoord

Cube coordinate where x + y + z = 0


brighten()

brighten(color, amount): RGBColor

Defined in: drawing/colors.ts:138

Brighten a color by a given amount

Parameters

color

Color

Color to brighten

amount

number

Amount to brighten (0-1)

Returns

RGBColor

Brightened RGB color


calculateGridDimensions()

calculateGridDimensions(opts): object

Defined in: helpers/gridHelpers.ts:97

Calculate the total width and height of the grid in characters

Layout for a row of cells (horizontal): [left border] [cell0] [div] [gap...] [cell1] [div] [gap...] [cell2] [right border]

totalWidth = 1 + cols * cellWidth + innerDividers + (cols - 1) * gapX + 1 totalHeight = 1 + rows * cellHeight + innerDividers + (rows - 1) * gapY + 1

Parameters

opts

ResolvedGridOptions

Returns

object

totalHeight

totalHeight: number

totalWidth

totalWidth: number


clearAllPresets()

clearAllPresets(): void

Defined in: helpers/presetHelpers.ts:174

Clear all defined presets

Removes all presets from the registry. Useful for testing or resetting the preset system.

Returns

void

Example

ts
clearAllPresets()
console.log(listPresets()) // []

clearHexCameraBounds()

clearHexCameraBounds(camera): void

Defined in: helpers/hexCameraHelpers.ts:69

Clear hex camera bounds

Parameters

camera

HexCameraState

Hex camera state to modify

Returns

void


cubeRound()

cubeRound(x, y, z): CubeCoord

Defined in: helpers/hexHelpers.ts:79

Round fractional cube coordinates to the nearest hex

Needed when converting pixel coordinates back to hex (the result is fractional and must be snapped to a valid hex center).

Parameters

x

number

Fractional cube x

y

number

Fractional cube y

z

number

Fractional cube z

Returns

CubeCoord

Rounded cube coordinate


cubeToAxial()

cubeToAxial(x, y, z): HexCoord

Defined in: helpers/hexHelpers.ts:62

Convert cube (x, y, z) to axial (q, r) coordinates

Parameters

x

number

Cube x coordinate

y

number

Cube y coordinate

z

number

Cube z coordinate

Returns

HexCoord

Axial coordinate


darken()

darken(color, amount): RGBColor

Defined in: drawing/colors.ts:155

Darken a color by a given amount

Parameters

color

Color

Color to darken

amount

number

Amount to darken (0-1)

Returns

RGBColor

Darkened RGB color


definePreset()

definePreset(name, definition): void

Defined in: helpers/presetHelpers.ts:118

Define a reusable style preset

Presets allow you to define commonly used styles once and reuse them throughout your application. Supports text, box, menu, and progress bar styles.

Parameters

name

string

Unique name for the preset

definition

PresetDefinition

Preset definition with type and options

Returns

void

Example

ts
// Define text presets
definePreset('title', {
  type: 'text',
  fg: 'yellow',
  bg: 'blue',
  align: 'center'
})

// Define box preset
definePreset('panel', {
  type: 'box',
  style: 'double',
  fg: 'cyan',
  fill: true
})

// Define menu preset
definePreset('mainMenu', {
  type: 'menu',
  selectedFg: 'black',
  selectedBg: 'white',
  border: true,
  style: 'rounded'
})

// Use presets
renderer.applyTextPreset(10, 5, 'Game Title', 'title')
renderer.applyBoxPreset(0, 0, 80, 24, 'panel')

getCellInteriorX()

getCellInteriorX(gridX, col, opts): number

Defined in: helpers/gridHelpers.ts:123

Calculate the X offset of the first interior character of a given column

Parameters

gridX

number

col

number

opts

ResolvedGridOptions

Returns

number


getCellInteriorY()

getCellInteriorY(gridY, row, opts): number

Defined in: helpers/gridHelpers.ts:136

Calculate the Y offset of the first interior character of a given row

Parameters

gridY

number

row

number

opts

ResolvedGridOptions

Returns

number


getGridBorderChars()

getGridBorderChars(style): GridBorderChars

Defined in: helpers/boxHelpers.ts:79

Get grid border characters (corners, edges, and intersection characters) for a given style

Returns all characters needed to draw a grid, including T-junctions and crosses at internal divider intersections.

Parameters

style

Box style name or custom GridBorderChars

BoxStyle | GridBorderChars

Returns

GridBorderChars

Complete set of grid border characters

Example

ts
const chars = getGridBorderChars('single');
// chars.cross === '┼'
// chars.tTop === '┬'

getPreset()

getPreset(name): Preset | undefined

Defined in: helpers/presetHelpers.ts:143

Get a preset by name

Parameters

name

string

Preset name

Returns

Preset | undefined

Preset definition, or undefined if not found

Example

ts
const preset = getPreset('title')
if (preset && preset.type === 'text') {
  console.log(preset.options.fg) // 'yellow'
}

hexDistance()

hexDistance(a, b): number

Defined in: helpers/hexHelpers.ts:212

Calculate the distance between two hex coordinates

Uses the cube-distance formula: max(|dx|, |dy|, |dz|)

Parameters

a

HexCoord

First hex coordinate

b

HexCoord

Second hex coordinate

Returns

number

Distance in hex steps

Example

ts
const dist = hexDistance({ q: 0, r: 0 }, { q: 3, r: -1 });
// dist === 3

hexFollowTarget()

hexFollowTarget(camera, targetQ, targetR, viewportWidth, viewportHeight): void

Defined in: helpers/hexCameraHelpers.ts:127

Center hex camera on a target hex coordinate

Parameters

camera

HexCameraState

Hex camera state to modify

targetQ

number

Target q coordinate to center on

targetR

number

Target r coordinate to center on

viewportWidth

number

Viewport width in hex columns

viewportHeight

number

Viewport height in hex rows

Returns

void


hexLineDraw()

hexLineDraw(a, b): HexCoord[]

Defined in: helpers/hexHelpers.ts:279

Draw a line between two hex coordinates using linear interpolation

Parameters

a

HexCoord

Start hex coordinate

b

HexCoord

End hex coordinate

Returns

HexCoord[]

Array of hex coordinates forming the line (includes both endpoints)

Example

ts
const line = hexLineDraw({ q: 0, r: 0 }, { q: 3, r: -3 });
// Returns hexes along the shortest path

hexNeighbors()

hexNeighbors(q, r): HexCoord[]

Defined in: helpers/hexHelpers.ts:193

Get the 6 neighboring hex coordinates

Parameters

q

number

Axial q coordinate

r

number

Axial r coordinate

Returns

HexCoord[]

Array of 6 adjacent hex coordinates

Example

ts
const neighbors = hexNeighbors(0, 0);
// [{q:1,r:0}, {q:1,r:-1}, {q:0,r:-1}, {q:-1,r:0}, {q:-1,r:1}, {q:0,r:1}]

hexRing()

hexRing(center, radius): HexCoord[]

Defined in: helpers/hexHelpers.ts:245

Get all hex coordinates at exactly radius steps from center

Returns an empty array for radius 0 — use the center coord directly. For radius > 0, returns 6 × radius hexes forming a ring.

Parameters

center

HexCoord

Center hex coordinate

radius

number

Ring radius (must be >= 0)

Returns

HexCoord[]

Array of hex coordinates forming the ring

Example

ts
const ring1 = hexRing({ q: 0, r: 0 }, 1);
// ring1.length === 6  (the 6 neighbors)

const ring2 = hexRing({ q: 0, r: 0 }, 2);
// ring2.length === 12

hexScreenToWorld()

hexScreenToWorld(camera, screenQ, screenR): HexCoord

Defined in: helpers/hexCameraHelpers.ts:166

Convert hex screen coordinates to world coordinates

Parameters

camera

HexCameraState

Hex camera state

screenQ

number

Screen q coordinate

screenR

number

Screen r coordinate

Returns

HexCoord

World coordinates in hex space


hexToPixel()

hexToPixel(q, r, size, orientation): Point

Defined in: helpers/hexHelpers.ts:118

Convert axial hex coordinate to pixel center position

Parameters

q

number

Axial q coordinate

r

number

Axial r coordinate

size

number

Hex size (center to vertex distance in pixels)

orientation

HexOrientation

Hex orientation ('flat-top' or 'pointy-top')

Returns

Point

Pixel position of the hex center

Example

ts
const pixel = hexToPixel(3, -1, 20, 'flat-top');
// pixel.x and pixel.y give the center of hex (3, -1)

hexVertices()

hexVertices(cx, cy, size, orientation): Point[]

Defined in: helpers/hexHelpers.ts:311

Get the 6 vertex pixel positions of a hexagon

Useful for drawing hex outlines or filled polygons.

Parameters

cx

number

Pixel X of hex center

cy

number

Pixel Y of hex center

size

number

Hex size (center to vertex)

orientation

HexOrientation

Hex orientation

Returns

Point[]

Array of 6 vertex points


hexWorldToScreen()

hexWorldToScreen(camera, worldQ, worldR): HexCoord

Defined in: helpers/hexCameraHelpers.ts:147

Convert hex world coordinates to screen coordinates

Parameters

camera

HexCameraState

Hex camera state

worldQ

number

World q coordinate

worldR

number

World r coordinate

Returns

HexCoord

Screen coordinates in hex space


lerp()

lerp(color1, color2, t): RGBColor

Defined in: drawing/colors.ts:120

Interpolate between two colors

Parameters

color1

Color

First color

color2

Color

Second color

t

number

Interpolation factor (0-1)

Returns

RGBColor

Interpolated RGB color


listPresets()

listPresets(): string[]

Defined in: helpers/presetHelpers.ts:158

List all defined preset names

Returns

string[]

Array of preset names

Example

ts
const presets = listPresets()
console.log(presets) // ['title', 'panel', 'mainMenu']

moveHexCamera()

moveHexCamera(camera, dq, dr): void

Defined in: helpers/hexCameraHelpers.ts:108

Move hex camera by delta in axial coordinates

Parameters

camera

HexCameraState

Hex camera state to modify

dq

number

Delta q

dr

number

Delta r

Returns

void


parseColor()

parseColor(color): RGBColor | null

Defined in: drawing/colors.ts:62

Parse any color format to RGB

Parameters

color

Color

Color in any supported format

Returns

RGBColor | null

RGB color object or null


pixelToHex()

pixelToHex(px, py, size, orientation): HexCoord

Defined in: helpers/hexHelpers.ts:152

Convert pixel position to the nearest axial hex coordinate

Parameters

px

number

Pixel X position

py

number

Pixel Y position

size

number

Hex size (center to vertex distance in pixels)

orientation

HexOrientation

Hex orientation ('flat-top' or 'pointy-top')

Returns

HexCoord

The axial coordinate of the hex containing the pixel

Example

ts
const hex = pixelToHex(mouseX, mouseY, 20, 'flat-top');
// hex.q and hex.r identify the hex under the mouse

resetHexCamera()

resetHexCamera(camera): void

Defined in: helpers/hexCameraHelpers.ts:95

Reset hex camera to origin (0, 0)

Parameters

camera

HexCameraState

Hex camera state to modify

Returns

void


rgbToHex()

rgbToHex(color): `#${string}`

Defined in: drawing/colors.ts:91

Convert RGB color to hex string

Parameters

color

RGBColor

RGB color

Returns

`#${string}`

Hex color string


setHexCamera()

setHexCamera(camera, q, r): void

Defined in: helpers/hexCameraHelpers.ts:80

Set hex camera position

Parameters

camera

HexCameraState

Hex camera state to modify

q

number

New q offset

r

number

New r offset

Returns

void


setHexCameraBounds()

setHexCameraBounds(camera, minQ, minR, maxQ, maxR): void

Defined in: helpers/hexCameraHelpers.ts:53

Set hex camera bounds

Parameters

camera

HexCameraState

Hex camera state to modify

minQ

number

Minimum q coordinate

minR

number

Minimum r coordinate

maxQ

number

Maximum q coordinate

maxR

number

Maximum r coordinate

Returns

void


toCSSColor()

toCSSColor(color): string

Defined in: drawing/colors.ts:105

Convert color to CSS-compatible string

Parameters

color

Color

Color in any format

Returns

string

CSS color string

Released under the MIT License.