Local RML scorebug project

The complete authored project ZIP contains rive.yaml, scene.rml, the Barlow Semibold font, and their license.

The 229-line scene.rml contains one scorebar, eight bound text fields, and one visibility layer. It starts hidden on a transparent 1920×1080 artboard. Setting Main.on to true fades and slides the scorebar into view. Setting it to false hides the scorebar.

The project contains no scripts or shaders.

Download the project

Keep one terminal open through this guide and the linked REST tutorial. The commands export absolute paths for every later step.

Terminal

export DOCS_ORIGIN="${DOCS_ORIGIN:-https://docs.ligr.live}"
export TUTORIAL_DIR="${TUTORIAL_DIR:-$HOME/ligr-rive-scorebug}"
mkdir -p "$TUTORIAL_DIR/project"
export TUTORIAL_DIR="$(cd "$TUTORIAL_DIR" && pwd)"
export PROJECT="$TUTORIAL_DIR/project"
export UPLOAD="$TUTORIAL_DIR/continental-scorebug.zip"
export CONFIG="$TUTORIAL_DIR/ligr-configuration.json"

curl --fail-with-body --location \
  "$DOCS_ORIGIN/examples/rive-scorebug/continental-scorebug.zip" \
  --output "$UPLOAD"
curl --fail-with-body --location \
  "$DOCS_ORIGIN/examples/rive-scorebug/ligr-configuration.json" \
  --output "$CONFIG"
unzip -q -o "$UPLOAD" -d "$PROJECT"

PROJECT, UPLOAD, and CONFIG now contain absolute customer workspace paths.

Compile and inspect

LIGR tests this project with Rive CLI 1.2.0. Install that version with the Rive installer on macOS or Linux:

Terminal

curl -fsSL https://releases.rive.app/cli/install.sh | RIVE_VERSION=1.2.0 sh

For Windows and Homebrew, see Rive CLI: Getting started. A Homebrew install is not under ~/.rive. Set RIVE_BIN to its path. Then run the pinned compiler directly against the extracted project.

Terminal

export RIVE_BIN="${RIVE_BIN:-$HOME/.rive/bin/rive}"
test "$("$RIVE_BIN" --version)" = "rive 1.2.0"
(
  cd "$PROJECT"
  "$RIVE_BIN" . --verify --format=json
  "$RIVE_BIN" inspect . --json
  "$RIVE_BIN" . --once --format=json
)

RUNTIME="$PROJECT/build/continental-scorebug.riv"
test "$(shasum -a 256 "$RUNTIME" | awk '{print $1}')" = \
  99ff8f04e54e36863cbbd717ba611f38207120174740f5713027050f339889c8

The build produces build/continental-scorebug.riv with SHA-256 99ff8f04e54e36863cbbd717ba611f38207120174740f5713027050f339889c8.

Inspection must report artboard Main, state machine Broadcast, view model Main, and default instance Default, with no problems. A different Rive CLI version can produce a different SHA-256 from the same project. The pinned browser runtime for the verified tutorial is 2.41.0.

Learn RML and preview without a browser

Rive documents RML and the CLI in the Rive CLI docs. To print the RML properties of one object type, run rive schema <Type>, for example rive schema Text.

Render one frame to a PNG file to check a change without a browser:

Terminal

(
  cd "$PROJECT"
  "$RIVE_BIN" . --screenshot=out.png --data=on=true --data=homeScore=3 --advance=2s
)

--data sets one view-model property by path. Repeat --data for each property. The scorebug starts hidden, so the example sets on to true. --advance runs the state machine for that time before the screenshot. Change the RML, run the command again, and open out.png.

--data cannot set an image property. To preview an image slot, embed a sample image in the project as the placeholder. See Images, preview and evaluate.

Keep LIGR configuration separate

RML defines authored properties and animation behavior. The separate LIGR configuration connects those properties to LIGR data.

hide is bound but never declared in controlVariables. It is reserved: the platform injects it on every show and hide command, so your own list never carries it. Bind the visibility of the artboard to it, or show and hide answer 200 and change nothing.

LIGR configuration

{
  "selection": { "artboardIndex": 0, "stateMachineIndex": 0 },
  "configuration": {
    "renderer": "webgl2",
    "controlVariables": [{ "id": "stage", "name": "stage", "type": "string", "defaultValue": "FINAL" }],
    "bindings": [
      { "id": "Main.on", "expression": "!$v.hide.value" },
      { "id": "Main.homeCode", "expression": "$d.1.abbreviation" },
      { "id": "Main.awayCode", "expression": "$d.2.abbreviation" },
      { "id": "Main.homeScore", "expression": "$d.1.score" },
      { "id": "Main.awayScore", "expression": "$d.2.score" },
      { "id": "Main.clock", "expression": "$d.clock" },
      { "id": "Main.period", "expression": "$d.periodAbbrv" },
      { "id": "Main.competition", "expression": "$d.competitionName" },
      { "id": "Main.stage", "expression": "$v.stage.value" }
    ]
  }
}

Do not put LIGR sporting expressions into RML property definitions. REST validates each configured binding against the selected inspected runtime.

The REST tutorial runs the upload-to-control-room sequence in your selected environment. It creates a dedicated theme and carries returned identifiers through every later request.