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.

Every game object in tiny-engine is a node. Nodes form a tree — the scene graph — where parent nodes position and own their children. The engine walks this tree every frame to call update and draw on each node in zIndex order. When a parent is destroyed every descendant is destroyed with it, making ownership and cleanup predictable.

​
Built-in Nodes

tiny-engine ships a set of built-in node types. Each type maps directly to a JSX intrinsic element you can use in your component markup.
NodeJSX TagDescription
Transform<transform>Positioning container — translates its children to a world position
Sprite<sprite>Renders a texture with optional visual filters (brightness, grayscale, modulate…)
AnimationPlayer<animation-player>Plays frame-based sprite-sheet animations; supports reactive currentAnim
Collider<collider>Detects overlaps with other colliders using shapes and group filters
RayCast<ray-cast>Projects a ray in a direction and reports which colliders it intersects
Clickable<clickable>Detects pointer click, enter, and exit events over a rectangular hit area
Timer<timer>Counts elapsed time and fires a timeout event after a configurable duration
Rectangle<rectangle>Renders a filled or stroked rectangle directly onto the canvas

​
The PrimaryNode Enum

PrimaryNode is an enum whose values are the string identifiers for every built-in node type. Import it whenever you need a type-safe way to refer to a node kind — most commonly when calling useRefNode or useChild. 
import { PrimaryNode } from 'tiny-engine'

// PrimaryNode.Transform  → 'transform'
// PrimaryNode.Sprite     → 'sprite'
// PrimaryNode.Collider   → 'collider'
// PrimaryNode.RayCast    → 'ray-cast'
// PrimaryNode.Clickable  → 'clickable'
// PrimaryNode.Timer      → 'timer'
// PrimaryNode.AnimationPlayer → 'animation-player'
// PrimaryNode.Rectangle  → 'rectangle'

​
Node Lifecycle Events

Each node emits the following events at key points in its lifetime. Subscribe with .on(callback).
EventFires when…
startedThe node’s start() lifecycle has completed (first frame it is active)
updatedEach frame during the node’s update cycle; receives delta in seconds
drawedEach frame after the node has drawn; receives delta in seconds
destroyedThe node and all its children have been torn down
import { useRefNode } from 'tiny-engine/hooks'
import { PrimaryNode } from 'tiny-engine'

const transform = useRefNode(PrimaryNode.Transform)

// Access the underlying node after mount via the ref
transform.node.started.on(() => {
  console.log('Node is live!')
})

transform.node.destroyed.on(() => {
  console.log('Node was removed from the scene')
})

​
Nesting Nodes

Nodes are nested by placing them as JSX children. The parent <transform> positions every child relative to itself. 
import { PrimaryNode } from 'tiny-engine'
import { useRefNode } from 'tiny-engine/hooks'

function Player() {
  const sprite = useRefNode(PrimaryNode.Sprite)
  const collider = useRefNode(PrimaryNode.Collider)

  return (
    <transform position={[100, 50]}>
      <sprite
        ref={sprite}
        textureId={PLAYER_TEXTURE}
        displaySize={[32, 32]}
      />
      <collider
        ref={collider}
        shape={shapes.rectangle(32, 32)}
        group={['player']}
        collidesWith={['enemy']}
      />
    </transform>
  )
}
Children are sorted by their zIndex property so draw order is deterministic regardless of declaration order.

​
The ref Prop and useRefNode

Pass a NodeReference created by useRefNode to any intrinsic element’s ref prop. Once the node mounts, ref.node is populated with the fully initialised node instance, typed to the exact PrimaryNode variant you specified. 
import { useRefNode } from 'tiny-engine/hooks'
import { PrimaryNode } from 'tiny-engine'

function HUD() {
  // sprite is a NodeReference<PrimaryNode.Sprite>
  const sprite = useRefNode(PrimaryNode.Sprite)

  return (
    <transform>
      <sprite ref={sprite} textureId={HUD_TEXTURE} />
    </transform>
  )
}
After the node starts, access it via sprite.node: 
sprite.node.started.on(() => {
  console.log(sprite.node.type) // 'sprite'
})

​
Node API Reference

Transform

Position, z-index, delta scaling, and child management

Sprite

Texture rendering, display size, and visual filters

Collider

Collision shapes, groups, and overlap events

Build docs developers (and LLMs) love

Get started for freeTalk to us