Layout

Control the layout of your Rive animation in Unity

For more information on Rive Layout see the runtime documentation.

Layout

Rive provides a number of ways to control how your animations are laid out in the canvas or view used to display them. Rive lets you control the fit, alignment, and offset of rendered content.

Fit and Alignment

Using a Rive Widget component, you can select from a list of Fit and Alignment options.

The fit and alignment can be controlled on the Rive.Renderer .Align() method:

public Fit fit = Fit.contain;
public Alignment alignment = Alignment.Center;
public RenderTexture renderTexture;
private Rive.Renderer m_riveRenderer;

...

m_renderQueue = new Rive.RenderQueue(renderTexture);
m_riveRenderer = m_renderQueue.Renderer();
...

if (m_artboard != null && renderTexture != null)
{
    m_riveRenderer.Align(fit, alignment, m_artboard);
    m_riveRenderer.Draw(m_artboard);
}

Responsive Layout

The Layout Fit mode lets you display resizable artboards with built-in responsive behavior, configured directly in the graphic. Set a Fit of type Layout at runtime and the artboard will resize automatically. Optionally, provide a Layout Scale Factor to further adjust the scale of the content.

When Fit is set to Layout, the Rive Widget:

• Measures the available space from its RectTransform.

• Calculates a new artboard size based on both the Layout Scaling Mode and a Layout Scale Factor .

• Dynamically resizes the artboard to match the calculated dimensions.

Layout Scaling Modes

You can choose from three layout scaling modes:

Reference Artboard Size (Default)

• Scales the artboard proportionally based on its original (reference) size, preserving the same relative size across different resolutions.

• The artboard always appears “the same size in proportion to the screen,” maintaining consistent, resolution-agnostic visuals.

• Use the Layout Scale Factor to fine-tune or amplify the layout scaling above or below 1×.

Constant Pixel Size

• The artboard maintains its pixel size, regardless of the screen resolution or DPI.

• The Layout Scale Factor is a direct multiplier on the pixel size of the original artboard.

• This mode can cause the artboard to appear larger on lower-resolution screens and smaller on higher-resolution screens.

Constant Physical Size

• Attempts to maintain the artboard’s physical dimensions across different devices by scaling according to DPI.

• A device with a higher DPI will see larger pixel scaling so that, physically, the artboard is the same size from device to device.

• Requires two additional properties in RiveWidget:

Fallback DPI: Used if Screen.dpi is unavailable.
Reference DPI: The baseline DPI for your UI (e.g., 96 if you’re targeting standard desktop size).

Layout Scale Factor

Regardless of which Layout Scaling Mode you select, you can further scale the artboard via the Layout Scale Factor . A value of 1.0 means no additional scaling; values greater than 1.0 enlarge the artboard, and values below 1.0 shrink it.

In practice, you might use this factor to give yourself flexibility in adjusting the artboard size, even after choosing a particular scaling mode. For example, you might find that everything is slightly too large on mobile and set the Layout Scale Factor to 0.9 (90% of the scaled size).

Implementing Layout in Custom Scripts

When implementing Fit.Layout in your custom scripts, consider the following aspects:

Screen Resolution and Scaling
- Monitor screen resolution changes
- Handle DPIs
- Implement proper scaling for different display densities
Input Handling
- Transform input coordinates to match the scaled layout
- Account for different DPIs when processing touch/mouse input
- Consider hit-testing adjustments for scaled elements

This script shows one way you could implement Fit.Layout support while considering the points mentioned above.

Components

Listeners