Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sanchedev/tiny-engine/llms.txt

Use this file to discover all available pages before exploring further.

Game is the static entry point for initializing and controlling the tiny-engine runtime. Every game starts by calling Game.setup() to create the canvas and configure the engine, then Game.play() to start the loop. All other engine systems — input, scenes, rendering — are accessible through Game after setup completes.

​
Game.setup(options)

Creates the canvas element, appends it to the provided root element, initializes the input system, and prepares the scene manager. Must be called before any other Game method. 
Game.setup({
  width: 320,
  height: 180,
  root: document.querySelector('#root')!,
})
​
options.width
number
required
The logical width of the canvas in pixels. CSS custom property --width is also set on the root element to this value.
​
options.height
number
required
The logical height of the canvas in pixels. CSS custom property --height is also set on the root element.
​
options.root
HTMLElement
required
The DOM element that will become the parent of the generated <canvas>. Typically document.querySelector('#root').
​
options.theme
Theme
An optional Theme instance that sets the default text style (color, size, font family, weight, and alignment) used by text nodes. If omitted, new Theme() is used, which defaults to 16px sans-serif in black.
​
options.testOptions
Partial<TestOptions>
Optional debug overlays. Pass an object with any combination of the following boolean flags:
FlagDefaultDescription
showCollidersfalseDraws collider shapes
showRayCastsfalseDraws ray cast lines
showClickablesfalseHighlights clickable areas
​
options.inputOptions
InputOptions
Configuration for the Input system.
​
options.inputOptions.preventKeyDefaults
boolean
When true (the default), calls preventDefault() on every keydown and keyup event, preventing browser shortcuts from firing during gameplay. Set to false to allow shortcuts like Ctrl+R or Ctrl+T to pass through.
Game.setup() is idempotent — calling it more than once is a no-op. To reinitialize the engine, call Game.destroy() first.

​
Game.play()

Starts the game loop. Internally schedules the first requestAnimationFrame tick, then runs continuously until paused or destroyed. Scenes can be added either before or after this call. 
Game.play()
Game.play() throws an EngineNotSetupError if called before Game.setup(). It also re-starts the loop after a Game.pause() call, making it safe to use as a resume mechanism.

​
Game.pause()

Pauses the game loop. The current frame finishes rendering, then no further updates occur until Game.play() is called again. 
Game.pause()
Pausing also releases any held WakeLock, allowing the device screen to sleep.

​
Game.destroy()

Stops the game loop, removes all event listeners (including the blur/focus listener), destroys the Input instance, and clears the active scene. The engine can be set up again with a fresh Game.setup() call after this. 
Game.destroy()

​
Game.input

The Input instance, created by Game.setup(). Provides keyboard and pointer query methods and events. 
// Read keyboard state
Game.input.isKeyPressed('ArrowRight')
Game.input.isJustKeyPressed(' ')

// Pointer
const pos = Game.input.pointerPosition
See the Input guide for the full Input API.

​
Game.sceneManager

The singleton SceneManager instance. Use it to register and switch scenes. 
await Game.sceneManager.addScene('menu', menuScene, true)
await Game.sceneManager.setScene('gameplay')
See Scene and SceneManager for the full API.

​
Game.blured

An Event that fires whenever the browser window loses focus. The engine automatically calls Game.pause() and cancels the animation frame before emitting this event, so the loop is already stopped by the time your listener runs. 
Game.blured.on(() => {
  showPauseMenu()
})
Auto-pause on blur is built in. You do not need to call Game.pause() manually in response to Game.blured — the engine has already done so. Call Game.play() to resume.

​
Game.loop(delta)

The internal per-frame method. Clears the canvas, calls start() on the active scene’s root node if it hasn’t started yet, then calls update(), runs the collision system, and calls draw().
​
delta
number
Time in seconds elapsed since the previous frame.
Game.loop() is intended for internal use only. Calling it from application code will cause rendering artifacts.

​
Auto-pause on blur

tiny-engine automatically pauses the game when the browser window loses focus. This prevents the game from advancing state while the player cannot see or interact with it. The sequence is:
  1. window fires blur
  2. Game.pause() is called (marks the loop as paused and releases wake lock)
  3. The current animation frame is cancelled
  4. Game.blured event is emitted
To resume, call Game.play() — for example from a “Click to resume” overlay.

​
Bootstrap example

import { Game, Scene } from 'tiny-engine'

// 1. Find the mount point
const root = document.querySelector<HTMLElement>('#root')!

// 2. Set up the engine
Game.setup({
  width: 320,
  height: 180,
  root,
  theme: myTheme,
  inputOptions: { preventKeyDefaults: true },
})

// 3. Register a scene (lazy-loaded) and mark it as active
await Game.sceneManager.addScene(
  'main',
  new Scene(async () => (await import('./scenes/main.js')).default),
  true, // autoLoad — activates immediately
)

// 4. Start the loop
Game.play()

Build docs developers (and LLMs) love

Get started for freeTalk to us