Joysticks

8m 09sPublished Sep 18, 2023Partial+1 changes

▶ Watch on YouTube ↗

SummaryVersion Notes (Draft)

Core Educational Objective: Understand the inner mechanics of Rive Joysticks, learning how to map multi-axis independent timelines to the Joystick's X and Y paths to achieve non-linear, multi-dimensional motion blending.
Background Pain Points: When crafting omnidirectional animations like eye-rolling or facial turning, traditional linear timelines struggle to handle diagonal mixing, usually forcing designers to manually plot tons of redundant keyframe paths for every corner.
Final Business Benefit: By using Joysticks, designers only need to keyframe the extreme linear paths (pure horizontal and pure vertical movements). The system adaptively recalculates and interpolates compound movements based on the handle's percentage coordinates, lowering rigging complexity and delivering responsive touch assets for runtimes.

The Joystick Non-Overlap Rule: This is a vital baseline for engineering advanced rigging controllers in Rive. A timeline assigned to the Joystick's X-axis must never contain keyframes regulating Y-axis properties, and vice-versa. Violating this rule introduces matrix locking bugs, forcing the runtime engine to render the targeted properties completely motionless due to lane channel conflicts.
Two-Dimensional Interpolation Formula: The joystick behaves as an adaptive, non-linear interpolation computer. Given active handle coordinates mapped as percentages (p_x, p_y), paired with targeted timeline durations symbolized as T_x and T_y, Rive dynamically solves:

Current_Frame_x = p_x · T_x

Current_Frame_y = p_y · T_y

It then merges the non-conflicting spatial transforms cleanly in runtime matrix space.

Draw in World Space Optimization Benefits: Enabling world-space drawing links the controller's spatial size with its structural parent matrix (such as a Nested Artboard layout). This offers optimization value when building highly responsive multi-resolution UI components or mapping complex micro-rig configurations.
Artboard Controller Caps: Designers can chain a theoretically infinite volume of independent joysticks onto a single Artboard layout. The only hard runtime performance constraint is ensuring that no two joysticks ever fight over the same underlying layer parameter matrices.

Some content differs from current version1 changes

2024.11Joystick fix

Fixed not advancing when sole component.

📌 Key Points

Pan between timelines for control, support inversion and multi-joystick.

📝 Notes

Markdown

0 chars

Step by Step

00:00:12

Activate the Joystick Tool:

Find the Joystick option under the Bone/Tool menu or hit the shortcut J. Click anywhere on the Artboard to deploy a controller node, which will automatically register inside the Hierarchy panel.
00:00:48

Deconstruct Inspector Properties:

Select the joystick to view its properties. The Handle numbers quantify position coordinates via X/Y percentages. The Position property defines the absolute location in world coordinates relative to the Artboard origin; this layout value should never be animated.
00:01:27

Configure Handle Size and Origin:

Use the Size parameters to scale the interactive width (X) and height (Y) bounding bounds of the controller. The Origin property shifts the local layout anchor and should typically be left untouched.
00:02:09

Define World Space Rendering States:

Toggle "Draw in World Space". When checked, the joystick graphic dynamically scales alongside your camera viewport zoom level—ideal when parenting it to specific assets (like an Eye Main group) or handling nesting. When unchecked, it maintains a static pixel visual size regardless of zoom.
00:03:11

Bind the Driving Control Source:

Use the Handle Source picker to target a graphic group on screen. Paired with a Translation Constraint, this allows you to manipulate the joystick handle smoothly by dragging an on-stage custom UI slider element.
00:04:33

Record the X-Axis Extreme Movement Timeline:

Switch over to Animate Mode and generate a clean timeline for the X-axis. Isolate the Position X channel of your main eye group I main, plotting keys that slide the asset linearly from far-left to far-right.
00:05:02

Execute Axis Assignment and Mapping:

Return to the joystick settings block and assign the horizontal animation timeline to the X-axis dropdown menu. Spawn a fresh working timeline and scrub the joystick handle to confirm that horizontal panning smoothly parses the keyframes.
00:05:28

Test Axis Misalignment and Inversion:

Demonstrate the erratic behavior of assigning horizontal keys to the vertical Y-axis dropdown. Revert to standard X-axis mapping and analyze the Invert toggle, which flips the timeline orientation (making far-left correspond to the 100% frame mark).
00:06:07

Record the Y-Axis Extreme Movement Timeline:

Create an independent track named Y timeline. Select the main eye group and plot keyframes that move the container to its absolute peak at frame 1 and down to the base at the final frame.
00:06:42

Debug and Purge Property Channel Conflicts:

Link the vertical animation to the Y-axis dropdown and test diagonal panning. Notice the eyeball fails to respond when moving diagonally. Check Y timeline and realize it accidentally captured a Position X keyframe. Because this rogue key fights with the horizontal channel, you must completely delete the X-axis property track from the Y timeline.
00:07:21

Validate Complex Multi-Element Blending and Wrap-up:

Abide by the core rule that separate timelines must govern non-overlapping channels, and append further multi-axis keys for assets like the Iris. Return to the main control layer to witness the eyeball moving across all quadrants with high-density fluid blending to successfully wrap up the lesson.