@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
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
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
// 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
// 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
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
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
Canvas configuration including width, height, and rendering options
Returns
Methods
clear()
clear():
void
Defined in: targets/CanvasTarget.ts:139
Clear the entire canvas
Returns
void
Implementation of
flush()
flush():
void
Defined in: targets/CanvasTarget.ts:146
Flush changes (no-op for canvas as drawing is immediate)
Returns
void
Implementation of
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
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
bg
Returns
void
Implementation of
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
bg
Returns
void
Implementation of
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
Update callback (called with delta time in ms)
render?
Optional render callback
options?
GameLoopOptions = {}
Game loop options
Returns
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
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
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
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
getRightStick()
getRightStick(
gamepadIndex):GamepadAxisState
Defined in: input/GamepadManager.ts:234
Get right stick as
Parameters
gamepadIndex
number = 0
Returns
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
Returns
void
onDisconnected()
onDisconnected(
callback):void
Defined in: input/GamepadManager.ts:312
Register a callback for gamepad disconnection
Parameters
callback
Returns
void
removeCallback()
removeCallback(
callback,type):void
Defined in: input/GamepadManager.ts:319
Remove a callback
Parameters
callback
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
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
Hex grid configuration
Returns
Methods
clear()
clear():
void
Defined in: targets/HexCanvasTarget.ts:169
Clear the entire canvas
Returns
void
Implementation of
flush()
flush():
void
Defined in: targets/HexCanvasTarget.ts:176
Flush changes (no-op for canvas as drawing is immediate)
Returns
void
Implementation of
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
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
Foreground color
bg
Background color
Returns
void
Implementation of
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
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
Direction vector {x, y} with values -1, 0, or 1 (or normalized)
Example
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
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
Callback function to execute
Returns
void
Example
// 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
Callback function to execute
Returns
void
Example
// 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
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
// 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
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
getGridPosition()
getGridPosition():
MousePosition
Defined in: input/MouseManager.ts:240
Get current mouse position in grid coordinates
Returns
getPosition()
getPosition():
MousePosition
Defined in: input/MouseManager.ts:233
Get current mouse position in pixels
Returns
getWorldPosition()
getWorldPosition(
cameraX,cameraY):MousePosition
Defined in: input/MouseManager.ts:247
Get mouse position in world coordinates
Parameters
cameraX
number
cameraY
number
Returns
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
Returns
void
onDragEnd()
onDragEnd(
callback):void
Defined in: input/MouseManager.ts:311
Register drag end callback
Parameters
callback
Returns
void
onDragStart()
onDragStart(
callback):void
Defined in: input/MouseManager.ts:304
Register drag start callback
Parameters
callback
Returns
void
onHover()
onHover(
callback):void
Defined in: input/MouseManager.ts:297
Register hover callback
Parameters
callback
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
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
getGridPosition()
getGridPosition():
PointerPosition
Defined in: input/PointerManager.ts:246
Get current pointer position in grid coordinates
Returns
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
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
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
Returns
void
onDragEnd()
onDragEnd(
callback):void
Defined in: input/PointerManager.ts:332
Register drag end callback
Parameters
callback
Returns
void
onDragStart()
onDragStart(
callback):void
Defined in: input/PointerManager.ts:325
Register drag start callback
Parameters
callback
Returns
void
onHover()
onHover(
callback):void
Defined in: input/PointerManager.ts:318
Register hover callback
Parameters
callback
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
Render target to output to
options
Renderer options
Returns
Properties
debug
readonlydebug: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?
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?
FPS display options
Returns
this
The renderer instance for chaining
showGrid()
showGrid: (
options?) =>this
Draw a grid overlay for alignment and positioning
Parameters
options?
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?
Display options
Returns
this
The renderer instance for chaining
height
readonlyheight:number
Defined in: core/Renderer.ts:137
Height in characters
width
readonlywidth: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
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
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
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
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
// 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
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?
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?
Optional overrides for preset options
Returns
this
The renderer instance for chaining
Example
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?
Optional overrides for preset options
Returns
this
The renderer instance for chaining
Example
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?
Optional overrides for preset options
Returns
this
The renderer instance for chaining
Example
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?
Optional overrides for preset options
Returns
this
The renderer instance for chaining
Example
// 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
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
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
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
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
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
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
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
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
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
const ansi = renderer.exportAsANSI()
console.log(ansi) // Displays with colors in terminalexportAsDataURL()
exportAsDataURL(
format?,options?):Promise<string>
Defined in: core/Renderer.ts:1905
Export buffer as image data URL
Parameters
format?
Image format ('png' or 'jpeg')
options?
Image export options
Returns
Promise<string>
Promise resolving to data URL string
Example
const dataURL = await renderer.exportAsDataURL('png')
const img = document.createElement('img')
img.src = dataURLexportAsString()
exportAsString():
string
Defined in: core/Renderer.ts:1872
Export buffer as plain text string
Returns
string
Plain text representation of the buffer
Example
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?
Foreground color (optional)
bg?
Background color (optional)
Returns
this
The renderer instance for chaining
Example
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?
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
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
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
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
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
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
Grid configuration (cols, rows, cellWidth, cellHeight, style, etc.)
Returns
this
The renderer instance for chaining
Example
// 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
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
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
renderer
.hideLayer('debug')
.render() // Debug layer won't be visibleisAnimationActive()
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
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
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
renderer
.leftAlign(5, 'Menu Item 1', { fg: 'white' })
.leftAlign(6, 'Menu Item 2', { fg: 'white' }, 2) // Indent by 2
.render()menu()
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
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
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
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
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
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?
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?
Foreground color (optional)
bg?
Background color (optional)
Returns
this
The renderer instance for chaining
Example
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
renderer
.clear()
.box(10, 5, 20, 10)
.drawText(12, 7, 'Game Over')
.render() // Now visible on screenresetCamera()
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
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
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?
Foreground color (defaults to renderer's defaultFg)
bg?
Background color (defaults to renderer's defaultBg)
Returns
this
The renderer instance for chaining
Example
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
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
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
// 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?
Foreground color (defaults to renderer's defaultFg)
bg?
Background color (defaults to renderer's defaultBg)
Returns
this
The renderer instance for chaining
Example
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?
Foreground color (defaults to renderer's defaultFg)
bg?
Background color (defaults to renderer's defaultBg)
Returns
this
The renderer instance for chaining
Example
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
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
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
renderer
.setSafeMode(true)
.setChar(100, 100, 'X') // Will throw if out of boundsshowLayer()
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
renderer
.showLayer('debug')
.render() // Debug layer is now visiblestopAllAnimations()
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
const screen = renderer.worldToScreen(100, 50)
console.log(`World (100, 50) is at screen (${screen.x}, ${screen.y})`)forCanvas()
staticforCanvas(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
Grouped configuration options
Returns
A new Renderer instance configured for the canvas
Example
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()
staticforHexCanvas(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
Hex grid configuration options
Returns
A new Renderer instance configured for hex rendering
Example
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()
staticfromCanvas(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
Canvas target configuration (width, height, charWidth, etc.)
rendererOptions?
Optional renderer configuration (colors, autoClear)
Returns
A new Renderer instance configured for the canvas
Example
// 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?
optionaldelay:number
Defined in: types/types.ts:328
Delay before starting in milliseconds
duration?
optionalduration:number
Defined in: types/types.ts:318
Animation duration in milliseconds
easing?
optionaleasing:EasingFunction
Defined in: types/types.ts:320
Easing function
loop?
optionalloop:boolean
Defined in: types/types.ts:326
Whether to loop the animation
onComplete?
optionalonComplete:AnimationCompleteCallback
Defined in: types/types.ts:324
Callback called when animation completes
onUpdate?
optionalonUpdate: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?
optionalbg:Color
Defined in: types/types.ts:96
Background color
fg?
optionalfg:Color
Defined in: types/types.ts:94
Foreground color
fill?
optionalfill:boolean
Defined in: types/types.ts:98
Fill the box interior
fillChar?
optionalfillChar:string
Defined in: types/types.ts:100
Character to fill with when fill is true
padding?
optionalpadding:number
Defined in: types/types.ts:104
Inner padding
shadow?
optionalshadow:boolean
Defined in: types/types.ts:102
Add shadow effect
style?
optionalstyle:BoxStyle|BorderChars
Defined in: types/types.ts:92
Border style to use
title?
optionaltitle:string
Defined in: types/types.ts:106
Optional title to display in the top border
titleAlign?
optionaltitleAlign:TextAlign
Defined in: types/types.ts:110
Alignment of the title in the top border
titleFg?
optionaltitleFg: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?
optionalautoClear:boolean
Defined in: core/Renderer.ts:80
Auto-clear behavior
cell?
optionalcell:object
Defined in: core/Renderer.ts:65
Cell/character sizing
height?
optionalheight:number
width?
optionalwidth:number
clearColor?
optionalclearColor:Color
Defined in: core/Renderer.ts:82
Clear color when autoClear is enabled
colors?
optionalcolors:object
Defined in: core/Renderer.ts:75
Color defaults
bg?
optionalbg:Color
fg?
optionalfg:Color
font?
optionalfont:object
Defined in: core/Renderer.ts:70
Font configuration
family?
optionalfamily:string
size?
optionalsize: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?
optionalcharHeight:number
Defined in: targets/CanvasTarget.ts:19
Character height in pixels
charWidth?
optionalcharWidth:number
Defined in: targets/CanvasTarget.ts:17
Character width in pixels
fontFamily?
optionalfontFamily:string
Defined in: targets/CanvasTarget.ts:21
Font family
fontSize?
optionalfontSize: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?
optionalunified: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?
optionalnormalize: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?
optionalbackgroundColor:Color
Defined in: helpers/exportHelpers.ts:23
Background color for transparent areas
charHeight?
optionalcharHeight:number
Defined in: helpers/exportHelpers.ts:17
Character height in pixels (default: 16)
charWidth?
optionalcharWidth:number
Defined in: helpers/exportHelpers.ts:15
Character width in pixels (default: 10)
fontFamily?
optionalfontFamily:string
Defined in: helpers/exportHelpers.ts:19
Font family (default: 'monospace')
fontSize?
optionalfontSize: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?
optionalbg:Color
Defined in: types/types.ts:344
Background color
char?
optionalchar:string
Defined in: types/types.ts:340
Character to flash
count?
optionalcount:number
Defined in: types/types.ts:338
Number of times to flash
duration?
optionalduration:number
Defined in: types/types.ts:336
Flash duration in milliseconds
fg?
optionalfg:Color
Defined in: types/types.ts:342
Foreground color
onComplete?
optionalonComplete: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?
optionalfps:number
Defined in: core/GameLoop.ts:7
Target frames per second (default: 60)
maxFrameSkip?
optionalmaxFrameSkip: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, bottomRightExtends
Properties
bottomLeft
bottomLeft:
string
Defined in: types/types.ts:81
Inherited from
bottomRight
bottomRight:
string
Defined in: types/types.ts:82
Inherited from
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
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
topRight
topRight:
string
Defined in: types/types.ts:80
Inherited from
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
GridOptions
Defined in: types/types.ts:530
Options for drawing a grid
Example
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?
optionalbg: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?
optionaldata:string[][]
Defined in: types/types.ts:562
Optional cell content (row-major: data[row][col])
dataAlign?
optionaldataAlign:TextAlign
Defined in: types/types.ts:564
Text alignment for cell content
dataBg?
optionaldataBg:Color
Defined in: types/types.ts:568
Background color for cell content
dataFg?
optionaldataFg:Color
Defined in: types/types.ts:566
Foreground color for cell content
fg?
optionalfg:Color
Defined in: types/types.ts:542
Foreground color for borders
fill?
optionalfill:boolean
Defined in: types/types.ts:546
Fill cell interiors
fillChar?
optionalfillChar:string
Defined in: types/types.ts:548
Character to fill with when fill is true
gapX?
optionalgapX:number
Defined in: types/types.ts:550
Horizontal gap between cells (empty columns between cell borders)
gapY?
optionalgapY:number
Defined in: types/types.ts:552
Vertical gap between cells (empty rows between cell borders)
paddingX?
optionalpaddingX:number
Defined in: types/types.ts:554
Horizontal padding inside each cell
paddingY?
optionalpaddingY: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?
optionalshowInnerHorizontal:boolean
Defined in: types/types.ts:558
Show inner horizontal dividers between rows
showInnerVertical?
optionalshowInnerVertical:boolean
Defined in: types/types.ts:560
Show inner vertical dividers between columns
style?
optionalstyle: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?
optionalbounds: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?
optionalautoClear:boolean
Defined in: core/Renderer.ts:112
Auto-clear behavior
clearColor?
optionalclearColor:Color
Defined in: core/Renderer.ts:114
Clear color when autoClear is enabled
colors?
optionalcolors:object
Defined in: core/Renderer.ts:107
Color defaults
bg?
optionalbg:Color
fg?
optionalfg:Color
font?
optionalfont:object
Defined in: core/Renderer.ts:102
Font configuration
family?
optionalfamily:string
size?
optionalsize:number
grid
grid:
object
Defined in: core/Renderer.ts:90
Grid dimensions in hex columns/rows
height
height:
number
width
width:
number
hex?
optionalhex:object
Defined in: core/Renderer.ts:95
Hex grid configuration
orientation?
optionalorientation:HexOrientation
Hex orientation (default: 'flat-top')
size?
optionalsize:number
Hex size in pixels, center to vertex (default: 20)
HexCanvasTargetOptions
Defined in: targets/HexCanvasTarget.ts:15
Options for HexCanvasTarget initialization
Properties
fontFamily?
optionalfontFamily:string
Defined in: targets/HexCanvasTarget.ts:25
Font family
fontSize?
optionalfontSize: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?
optionalhexSize:number
Defined in: targets/HexCanvasTarget.ts:21
Hex size in pixels (center to vertex distance)
orientation?
optionalorientation: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
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
MenuOptions
Defined in: types/types.ts:199
Options for menu rendering
Properties
bg?
optionalbg:Color
Defined in: types/types.ts:205
Background color for unselected items
border?
optionalborder:boolean
Defined in: types/types.ts:213
Draw a border around the menu
fg?
optionalfg:Color
Defined in: types/types.ts:203
Foreground color for unselected items
indicator?
optionalindicator:string
Defined in: types/types.ts:211
Selection indicator character (e.g., '>' or '•')
padding?
optionalpadding:number
Defined in: types/types.ts:221
Padding inside the menu
selected?
optionalselected:number
Defined in: types/types.ts:201
Index of selected item (0-based)
selectedBg?
optionalselectedBg:Color
Defined in: types/types.ts:209
Background color for selected item
selectedFg?
optionalselectedFg:Color
Defined in: types/types.ts:207
Foreground color for selected item
style?
optionalstyle:BoxStyle
Defined in: types/types.ts:215
Box style for border
title?
optionaltitle:string
Defined in: types/types.ts:217
Menu title (displayed in top border if border is true)
width?
optionalwidth:number
Defined in: types/types.ts:219
Fixed width (auto-calculated if not specified)
MenuPreset
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
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?
optionalbg:Color
Defined in: types/types.ts:276
Background color
content?
optionalcontent:string[]
Defined in: types/types.ts:278
Content lines to display
contentAlign?
optionalcontentAlign:TextAlign
Defined in: types/types.ts:280
Content alignment
fg?
optionalfg:Color
Defined in: types/types.ts:274
Foreground color
fill?
optionalfill:boolean
Defined in: types/types.ts:284
Fill panel background
fillChar?
optionalfillChar:string
Defined in: types/types.ts:286
Fill character when fill is true
footer?
optionalfooter:string
Defined in: types/types.ts:270
Panel footer (displayed in bottom border)
padding?
optionalpadding:number
Defined in: types/types.ts:288
Inner padding
scrollOffset?
optionalscrollOffset:number
Defined in: types/types.ts:282
Scroll offset for content (0-based line index)
style?
optionalstyle:BoxStyle
Defined in: types/types.ts:272
Box style for border
title?
optionaltitle:string
Defined in: types/types.ts:266
Panel title (displayed in top border)
titleAlign?
optionaltitleAlign:TextAlign
Defined in: types/types.ts:268
Title alignment
Point
Defined in: types/types.ts:384
A 2D point or position
Example
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?
optionalborder:boolean
Defined in: types/types.ts:246
Draw border around progress bar
borderChars?
optionalborderChars: [string,string]
Defined in: types/types.ts:248
Border characters (defaults to [ and ])
emptyBg?
optionalemptyBg:Color
Defined in: types/types.ts:244
Background color for empty portion
emptyChar?
optionalemptyChar:string
Defined in: types/types.ts:236
Character for empty portion
emptyFg?
optionalemptyFg:Color
Defined in: types/types.ts:242
Foreground color for empty portion
fillBg?
optionalfillBg:Color
Defined in: types/types.ts:240
Background color for filled portion
fillChar?
optionalfillChar:string
Defined in: types/types.ts:234
Character for filled portion
fillFg?
optionalfillFg:Color
Defined in: types/types.ts:238
Foreground color for filled portion
label?
optionallabel:string
Defined in: types/types.ts:252
Custom label to display
labelPosition?
optionallabelPosition:"left"|"center"|"right"
Defined in: types/types.ts:254
Label position
showPercent?
optionalshowPercent:boolean
Defined in: types/types.ts:250
Show percentage label
style?
optionalstyle:ProgressBarStyle
Defined in: types/types.ts:258
Style preset
vertical?
optionalvertical: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?
optionalbg:Color
Defined in: types/types.ts:366
Background color
duration?
optionalduration:number
Defined in: types/types.ts:354
Pulse duration in milliseconds
easing?
optionaleasing:EasingFunction
Defined in: types/types.ts:360
Easing function
fg?
optionalfg:Color
Defined in: types/types.ts:364
Foreground color
loop?
optionalloop:boolean
Defined in: types/types.ts:362
Whether to loop the pulse
maxIntensity?
optionalmaxIntensity:number
Defined in: types/types.ts:358
Maximum opacity/intensity (0.0 to 1.0)
minIntensity?
optionalminIntensity:number
Defined in: types/types.ts:356
Minimum opacity/intensity (0.0 to 1.0)
onComplete?
optionalonComplete: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
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?
optionalautoClear:boolean
Defined in: core/Renderer.ts:50
Auto-clear the render target each frame
clearColor?
optionalclearColor:Color
Defined in: core/Renderer.ts:52
Optional clear color when autoClear is enabled
defaultBg?
optionaldefaultBg:Color
Defined in: core/Renderer.ts:48
Default background color
defaultFg?
optionaldefaultFg:Color
Defined in: core/Renderer.ts:46
Default foreground color
RendererOptions
Defined in: types/types.ts:135
Renderer configuration options
Properties
defaultBg?
optionaldefaultBg:Color
Defined in: types/types.ts:143
Default background color
defaultFg?
optionaldefaultFg: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
Foreground color
bg
Background color
Returns
void
setCellScaled()?
optionalsetCellScaled(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
Foreground color
bg
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?
optionalfg:Color
Defined in: helpers/debugHelpers.ts:27
Foreground color
fill?
optionalfill:boolean
Defined in: helpers/debugHelpers.ts:31
Fill the bounds with a transparent pattern
label?
optionallabel: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?
optionalbg:Color
Defined in: helpers/debugHelpers.ts:45
Background color
fg?
optionalfg:Color
Defined in: helpers/debugHelpers.ts:43
Foreground color
x?
optionalx:number
Defined in: helpers/debugHelpers.ts:39
X position (default: 0)
y?
optionaly: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?
optionalchar:string
Defined in: helpers/debugHelpers.ts:19
Character to use for grid lines (default: '·' for dots, '┼' for intersections)
fg?
optionalfg:Color
Defined in: helpers/debugHelpers.ts:17
Grid line color
spacing?
optionalspacing: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?
optionalbg:Color
Defined in: helpers/debugHelpers.ts:59
Background color
fg?
optionalfg:Color
Defined in: helpers/debugHelpers.ts:57
Foreground color
x?
optionalx:number
Defined in: helpers/debugHelpers.ts:53
X position for the display (default: 0)
y?
optionaly: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
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?
optionalalign:TextAlign
Defined in: types/types.ts:129
Text alignment
bg?
optionalbg:Color
Defined in: types/types.ts:125
Background color
fg?
optionalfg:Color
Defined in: types/types.ts:123
Foreground color
wrap?
optionalwrap: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?
optionalsignal:AbortSignal
Defined in: input/KeyboardManager.ts:18
timeout?
optionaltimeout: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
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
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
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 to brighten
amount
number
Amount to brighten (0-1)
Returns
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
clearAllPresets()
console.log(listPresets()) // []clearHexCameraBounds()
clearHexCameraBounds(
camera):void
Defined in: helpers/hexCameraHelpers.ts:69
Clear hex camera bounds
Parameters
camera
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
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
Axial coordinate
darken()
darken(
color,amount):RGBColor
Defined in: drawing/colors.ts:155
Darken a color by a given amount
Parameters
color
Color to darken
amount
number
Amount to darken (0-1)
Returns
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
Preset definition with type and options
Returns
void
Example
// 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
Returns
Complete set of grid border characters
Example
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
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
First hex coordinate
b
Second hex coordinate
Returns
number
Distance in hex steps
Example
const dist = hexDistance({ q: 0, r: 0 }, { q: 3, r: -1 });
// dist === 3hexFollowTarget()
hexFollowTarget(
camera,targetQ,targetR,viewportWidth,viewportHeight):void
Defined in: helpers/hexCameraHelpers.ts:127
Center hex camera on a target hex coordinate
Parameters
camera
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
Start hex coordinate
b
End hex coordinate
Returns
HexCoord[]
Array of hex coordinates forming the line (includes both endpoints)
Example
const line = hexLineDraw({ q: 0, r: 0 }, { q: 3, r: -3 });
// Returns hexes along the shortest pathhexNeighbors()
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
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
Center hex coordinate
radius
number
Ring radius (must be >= 0)
Returns
HexCoord[]
Array of hex coordinates forming the ring
Example
const ring1 = hexRing({ q: 0, r: 0 }, 1);
// ring1.length === 6 (the 6 neighbors)
const ring2 = hexRing({ q: 0, r: 0 }, 2);
// ring2.length === 12hexScreenToWorld()
hexScreenToWorld(
camera,screenQ,screenR):HexCoord
Defined in: helpers/hexCameraHelpers.ts:166
Convert hex screen coordinates to world coordinates
Parameters
camera
Hex camera state
screenQ
number
Screen q coordinate
screenR
number
Screen r coordinate
Returns
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
Hex orientation ('flat-top' or 'pointy-top')
Returns
Pixel position of the hex center
Example
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
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
Hex camera state
worldQ
number
World q coordinate
worldR
number
World r coordinate
Returns
Screen coordinates in hex space
lerp()
lerp(
color1,color2,t):RGBColor
Defined in: drawing/colors.ts:120
Interpolate between two colors
Parameters
color1
First color
color2
Second color
t
number
Interpolation factor (0-1)
Returns
Interpolated RGB color
listPresets()
listPresets():
string[]
Defined in: helpers/presetHelpers.ts:158
List all defined preset names
Returns
string[]
Array of preset names
Example
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
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 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
Hex orientation ('flat-top' or 'pointy-top')
Returns
The axial coordinate of the hex containing the pixel
Example
const hex = pixelToHex(mouseX, mouseY, 20, 'flat-top');
// hex.q and hex.r identify the hex under the mouseresetHexCamera()
resetHexCamera(
camera):void
Defined in: helpers/hexCameraHelpers.ts:95
Reset hex camera to origin (0, 0)
Parameters
camera
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
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
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
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 in any format
Returns
string
CSS color string
