Artboard

Represents a Rive artboard instance, providing drawing, advancing, interaction handling, and access to named nodes and data.

Fields

frameOrigin

If true, the artboard’s origin is treated as the frame origin.

function init(self: RenderInstance, context: Context): boolean
  local vm = Data.Character.new()

  self.instance = self.character:instance(vm)
  if self.instance then
    self.instance.frameOrigin = true
  end

  return true
end

data

The typed data associated with the artboard.

function init(self: RenderInstance, context: Context): boolean
  local vm = Data.Character.new()

  self.instance = self.character:instance(vm)

  if self.instance then
    self.instance.frameOrigin = true

    local data = self.instance.data
    if data then
      print(data.nickname)
    end
  end

  return true
end

width

The width of the artboard.

self.instance = self.character:instance(vm)
  if self.instance then
    print(self.instance.width)
  end
end

height

The height of the artboard.

self.instance = self.character:instance(vm)
  if self.instance then
    print(self.instance.height)
  end
end

Methods

draw

draw(renderer: Renderer) -> ()

Draws the artboard using the provided renderer.

type RenderInstances = {
  character: Input<Artboard<Data.Character>>,

  instance: Artboard<Data.Character>?,
}

function init(self: RenderInstances, context: Context): boolean
  local vm = Data.Character.new()

  self.instance = self.character:instance(vm)

  return true
end

function draw(self: RenderInstances, renderer: Renderer)
  local instance = self.instance

  if instance then
    renderer:save()
    instance:draw(renderer)
    renderer:restore()
  end
end

return function(): Node<RenderInstances>
  return {
    character = late(),
    instance = nil,
    init = init,
    draw = draw,
  }
end

advance

advance(seconds: number) -> boolean

Advances the artboard by the given time in seconds. Returns true if the artboard should continue receiving advance calls.

type RenderInstances = {
  character: Input<Artboard<Data.Character>>,

  instance: Artboard<Data.Character>?,
}

function init(self: RenderInstances, context: Context): boolean
  local vm = Data.Character.new()

  self.instance = self.character:instance(vm)

  return true
end

function advance(self: RenderInstances, seconds: number): boolean
  if self.instance then
    return self.instance:advance(seconds)
  end
  return true
end

return function(): Node<RenderInstances>
  return {
    character = late(),
    instance = nil,
    init = init,
    advance = advance,
  }
end

instance

instance(viewModel: ViewModel?) -> Artboard<T>

Creates a new instance of the artboard with independent state.

type ViewModelExample = {
  character: Input<Artboard<Data.Character>>,
  instance: Artboard<Data.Character>?,
}

function init(self: ViewModelExample, context: Context): boolean
  local vm = Data.Character.new()
  self.instance = self.character:instance(vm)
  return true
end

return function(): Node<ViewModelExample>
  return {
    character = late(),
    instance = nil,
    init = init,
  }
end

animation

animation(name: string) -> Animation?

Creates an animation instance linked to the artboard instance

bounds

bounds() -> (Vector, Vector)

Returns the bounding box of the artboard as two Vector values: the minimum point and the maximum point.

local minPt, maxPt = self.instance:bounds()
print("Bounds width", maxPt.x - minPt.x)
print("Bounds height", maxPt.y - minPt.y)

node

node(name: string) -> NodeData?

Returns the node with the given name, or nil if no such node exists.

if self.instance then
  local node = self.instance:node('Root')
  if node then
    local m = Mat2D.withTranslation(100, 100)
    node:decompose(m)
  end
end

pointerDown

pointerDown(event: PointerEvent) -> number

Pointer event down handler. Returns a hit-test result (0 = no hit). Only returns a non-zero value if a hit-testable object inside the nested artboard is hit.

function handlePointerDown(self: PointerExample, event: PointerEvent)
  if self.instance then
    local hit = self.instance:pointerDown(event)
    if hit ~= 0 then
      print(event.id)
      print(event.position)
    end
  end
end

pointerUp

pointerUp(event: PointerEvent) -> number

Pointer event up handler. Returns a hit-test result (0 = no hit). Only returns a non-zero value if a hit-testable object inside the nested artboard is hit.

function handlePointerUp(self: PointerExample, event: PointerEvent)
  if self.instance then
    local hit = self.instance:pointerUp(event)
    if hit ~= 0 then
      print(event.id)
      print(event.position)
    end
  end
end

pointerMove

pointerMove(event: PointerEvent) -> number

Pointer event move handler. Returns a hit-test result (0 = no hit). Only returns a non-zero value if a hit-testable object inside the nested artboard is hit.

function handlePointerMove(self: PointerExample, event: PointerEvent)
  if self.instance then
    local hit = self.instance:pointerMove(event)
    if hit ~= 0 then
      print(event.id)
      print(event.position)
    end
  end
end

pointerExit

pointerExit(event: PointerEvent) -> number

Pointer event exit handler. Returns a hit-test result (0 = no hit). Only returns a non-zero value if a hit-testable object inside the nested artboard is hit.

function handlePointerExit(self: PointerExample, event: PointerEvent)
  if self.instance then
    local hit = self.instance:pointerExit(event)
    if hit ~= 0 then
      print(event.id)
      print(event.position)
    end
  end
end

addToPath

addToPath(path: Path, transform: Mat2D?) -> ()

Adds the artboard’s geometry to the given path, optionally transformed by the provided matrix.

For a complete working example, see the Add to Path demo.

function draw(self: AddToPathExample, renderer: Renderer)
  local instance = self.instance
  if not instance then
    return
  end

  -- Draw the artboard normally first.
  renderer:save()
  instance:draw(renderer)
  renderer:restore()

  -- Reset the path each frame, then rebuild it from the artboard's geometry.
  self.outlinePath:reset()

  -- Add the artboard's geometry into the path with an optional transform.
  -- Here we apply a slight offset via Mat2D to show the transform parameter.
  local transform = Mat2D.withTranslation(8, 8)
  instance:addToPath(self.outlinePath, transform)

  -- Draw the extracted path with a custom stroke paint as an outline / shadow effect.
  renderer:drawPath(self.outlinePath, self.outlinePaint)
end