Layout and cameras

Story layout starts with plain canvas coordinates, then adds anchors, percentages, screen-space overlays, and camera/world transforms only when you need them.

Start with canvas coordinates

The quick-start sample uses a 1280×720 canvas and places sprites directly:

canvas: 1280x720

- create@card:
    rect: null
    width: 280
    height: 180
    x: 220
    y: 470
    align: center

The generated syntax reference defines canvas as the logical size used to resolve positions and percentages.

align changes what x and y mean

The same sample centers text and the card by pairing coordinates with align: center:

- create@title:
    text: "Hello, Rune Story"
    x: 640
    y: 220
    align: center

Other checked-in samples use different anchors. For example, samples/story/sample.story.yaml creates a bar chart with align: bottom, so its x and y refer to the bottom-center of the chart instead of its center.

Use percentages when you want canvas-relative values

samples/story/camera-world-demo.story.yaml resets the view with percentages instead of hard-coded pixels:

- set@reset:
    camera.x: 50%
    camera.y: 50%
    camera.zoom: 1
    world.origin: 50%,50%
    world.scale: 1
    world.rotation: 0

Use pixels when you want an exact location. Use percentages when you want a value to stay meaningful if the canvas size changes.

Screen space stays fixed while the camera moves

The camera demo draws a HUD in screen space:

- create@hud-bg:
    rect: null
    width: 1120
    height: 70
    x: 80
    y: 34
    radius: 20
    fill: "rgba(15,23,42,0.92)"
  space: screen

space: screen means the HUD is composited after camera and world transforms, so it stays pinned to the screen while the world moves underneath it.

Move the camera when you want to reveal more world

The same sample pans, zooms, and rotates the camera without moving the landmarks themselves:

- set@focus-east:
    camera.x: 1640
    camera.y: 470
    camera.zoom: 1.35
    camera.rotation: 8
  with: $camera-move

Use camera properties when you want to change what part of the world the viewer sees.

Use direct world transforms for whole-scene impact

When the whole scene should shake or tilt together, animate world instead:

- set@impact:
    world.x: 22
    world.y: -12
    world.scale: 1.04
    world.rotation: -2.5
  with: $world-shake

- wait: settle

Later in the same file, world.origin: 75%,50% changes the pivot for a direct world tilt.

Preview the camera sample

story preview samples/story/camera-world-demo.story.yaml

For reusable composition patterns on top of this layout model, continue with Composition and reuse.