*wait 🙄

Thinking of turning this into a tutorial.

Would you try building a game in Rive without code?
Let me know

✌️⬇️

#Rive #NoCode #gamedev #motiondesign

Result

✅ All transitions work
✅ Score is passed between screens
✅ UI is modular
✅ Game runs entirely inside Rive, no outside JS or frameworks

Is it practical for full games? Maybe not yet (Waiting for that in Rive code panel 😉😉).
But it’s powerful for interactive design & prototypes.

Data Flow

Everything happens through bindings:
Start screen sets a “startGame” boolean

Game screen counts score, sends back “gameOver”, and final score

End screen reads that and offers a “restart” trigger

No code. All within state machines.

Switching Screens

No fancy transitions

I used a step keyframe animation on the Y position and opacity of each screen to show/hide them.

Rive doesn’t expose transform, but you can data bind the position of child artboards. That’s how I switch views.

Designed in @figma.com

I planned and designed the entire UI in Figma, then imported assets into Rive for animation and interaction.

This kept everything consistent and modular from the start, with the design and motion in perfect sync.

Nested Artboards Setup

In MainAppUI, I placed the three main child artboards:

StartScreen
GameScreen
EndScreen

Each one exposes specific values or triggers: startPressed, score, gameOver, etc.

Bindings connect them.

A few Inputs, mostly done using Data Binding

Instead of controlling logic with external inputs or code, I used Rive’s built-in data bindings to communicate between artboards.

Score, state changes, and triggers all happen within Rive’s UI.

The Idea
Create a modular game using nested artboards:
Start Screen

Game Screen

End Screen
Each screen is a separate artboard. The main container (MainAppUI) handles transitions, score, and logic.