Rive Unityを使ってみる

はじめに

本記事はQualiArts Advent Calendar 2024の9日目の記事になります。
本日はRiveというツールと、Unityで再生するシンプルの実装について紹介します。

Riveの概要

公式ページには様々な実用例が載っていますが、UIやグラフィックのアニメーションとインタラクションを作るソフトウェアになります。

Editor

タイムラインやステートマシンを使える高機能の編集ツール。
画像にメッシュとボーンを付けてアニメーションする事ができます。
Vector Graphicsもあって、解像度に依存しない絵を作る事も可能です。

Format

.rivという独自のファイルフォーマット。
書き出す際、不要の情報を取り除いて必要なアセットをバイナリにパッキングするコンパクトの方式です。

Runtime

様々なRuntimeが開発されています。
Unity Runtimeは2023年11月頃に追加されて、D3D12とVulkan以外は利用可能です。
*D3D12とVulkanは今後対応予定

Community Files

ユーザーが作成したファイルを公開し、他人も簡単にリミックスできます。
他人が作成した物のタイムラインやステートマシンを参考できるので、ツールの上達には役立つ仕組みと思いました。

Unityの導入

現時点はPackageManager経由でgitのリンクを追加するか、ローカルにcloneして追加できます。

今回はBobbehさんが作成したこちらのファイルを使って実演します。

描画の概要

ライブラリーの内部はC++で実装されており、各プラットフォームの描画Apiを使って描画しています。
そのため、Unityに表示するためには事前にRenderTextureを作成してライブラリーに渡す必要があります。

アセットを用意する

まず、.rivファイルをUnityに入れれば自動的に認識されてインポート処理が走ります。
正しくインポートされたら、アセットのインスペクタービューから見た目をプレビューできます。

ファイルをロードする

アセットをロードして、ArtboardとStateMachineを取得します。
Artboardはキャンパスのような概念であり、今回のサンプルファイルには一つしかないのでindex:0として取得します。
StateMachineはこのArtboardの内部状態を管理するストーとマシンです。

using Rive;

public Asset asset;
private Artboard _artboard;
private StateMachine _stateMachine;

void LoadFile()
{
    var file = File.Load(asset); 
    _artboard = file.Artboard(0);
    _stateMachine = _artboard?.StateMachine();
}

描画対象を準備する

公式のサンプルコードはカメラにCommandBufferを追加してそのまま描画しますが、本記事はCanvasのRawImageに描画する事を試しています。
Rive.TextureHelperにあるDescriptorメソッドを使ってRenderTextureを生成します。

public RawImage rawImage;

void PrepareRenderTarget()
{
    var size = rawImage.rectTransform.rect.size;
    _renderTexture = new RenderTexture(TextureHelper.Descriptor((int)size.x, (int)size.y));
    rawImage.texture = _renderTexture;

    // 自前にRenderTextureを使う際はuv反転を行う必要があります
    if (SystemInfo.graphicsUVStartsAtTop)
    {
        rawImage.rectTransform.localScale = new Vector3(1f, -1f, 1f);
    }
}

RiveのRendererを初期化する

作成したRenderTextureを使ってRenderQueueとRendererを作成します。
このRendererは描画関連の命令を内部ライブラリーに転送してくれる存在です。

private RenderQueue _renderQueue;
private Rive.Renderer _riveRenderer;
    
void InitializeRenderer()
{
    _renderQueue = new RenderQueue(_renderTexture, false);
    _riveRenderer = _renderQueue.Renderer();
}

Artboardを設定する

Align()はArtboardのレイアウト周りを設定できます。個別設定の意味はこちらを参考してください。

void SetArtboard()
{
    _riveRenderer.Align(Fit.cover, Alignment.Center, _artboard);
    _riveRenderer.Draw(_artboard);
}

ループ処理

描画は毎フレーム行う必要があって、Renderer.Submit()を実行することで描画のCommandBufferを発行します。
ステートマシンがある場合は、内部の時間を進ませるためにAdvance(Time.deltaTime)を実行します。

void Update()
{   
    _stateMachine?.Advance(Time.deltaTime);
    _riveRenderer.Submit();
}

この時点、プレイモードに入ればアニメーションが動いてあるのを確認できました。

クリック処理

今回のサンプルファイルはクリックする処理が入っているため、クリック処理も実装してみましょう。
Rive空間はUnityと違って(0, 0)の初期位置が左上にあるため、y位置の反転が必要になります。
下の例はPointerMove、PointerDown、PointerUp、3種類の処理をステートマシンに転送するイメージです。

private bool _wasMouseDown;
private Vector3 _lastMousePoint;

void Update()
{
    ProcessPointer(); // ここに追加
    
    _stateMachine?.Advance(Time.deltaTime);
    _riveRenderer.Submit();
}
    
void ProcessPointer()
{
    var camera = Camera.main;
    var mousePoint = camera.ScreenToViewportPoint(Input.mousePosition);
    var riveScreenPoint = new Vector2(
        mousePoint.x * camera.pixelWidth,
        (1 - mousePoint.y) * camera.pixelHeight
    );

    if (_lastMousePoint != mousePoint)
    {
        _stateMachine?.PointerMove(GetRiveLocalPoint(riveScreenPoint, camera.pixelWidth, camera.pixelHeight));
        _lastMousePoint = mousePoint;
    }
    
    if (Input.GetMouseButtonDown(0))
    {
        _stateMachine?.PointerDown(GetRiveLocalPoint(riveScreenPoint, camera.pixelWidth, camera.pixelHeight));
        _wasMouseDown = true;
    }
    else if (_wasMouseDown)
    {
        _wasMouseDown = false;
        _stateMachine?.PointerUp(GetRiveLocalPoint(riveScreenPoint, camera.pixelWidth, camera.pixelHeight));
    }
}

Vector2 GetRiveLocalPoint(Vector2 riveScreenPoint, int width, int height)
{
    return _artboard.LocalCoordinate(
        riveScreenPoint,
        new Rect(0, 0, width, height),
        Fit.cover,
        Alignment.Center
    );
}

これでクリックしたら内部のアンメーションが切り替わる事を確認できました。

音声の再生

Riveは画像以外に音声も使えますので、音声の再生もチャレンジしてみます。
次はpedroalperaさんのピアノを使って実演します。

まず、適切の音声設定からAudioEngineを作成します。
その後、対象Artboardに設定します。

void BindAudio()
{
    var channelCount = 1;
    switch (AudioSettings.speakerMode)
    {
        case AudioSpeakerMode.Mono:
            channelCount = 1;
            break;
        case AudioSpeakerMode.Stereo:
            channelCount = 2;
            break;
        case AudioSpeakerMode.Quad:
            channelCount = 4;
            break;
        case AudioSpeakerMode.Surround:
            channelCount = 5;
            break;
        case AudioSpeakerMode.Mode5point1:
            channelCount = 6;
            break;
        case AudioSpeakerMode.Mode7point1:
            channelCount = 8;
            break;
        case AudioSpeakerMode.Prologic:
            channelCount = 2;
            break;
    }

    _audioEngine = AudioEngine.Make(channelCount, AudioSettings.outputSampleRate);
    _artboard.SetAudioEngine(_audioEngine);
}

他の方法もありますが、今回はMonoBehaviourのOnAudioFilterReadを通して、UnityのAudioSourceに音声の波形データを流して鳴かします。

void OnAudioFilterRead(float[] data, int channels)
{
    if (_audioEngine == null) return;
    _audioEngine.Sum(data, channels);
}

実際キーをクリックして音声を再生する事が確認できました。

まとめ

これでRiveファイルをUnityで再生するシンプルの実装ができました。
Riveにはまだ他の機能がいっぱいありますので、これをきっかけに少しでもRiveに興味を持ってもらえれば幸いです。

ちなみに公式のサンプルコードには他の機能もありますので、ぜひ参考してみてください。ライブラリー側の描画Apiも公開していますので、UnityのVector Graphicsの代わりに使えるかもしれません。

以上、9日目の記事でした。引き続き今後のカレンダー投稿を宜しくお願いします。

※本記事のソースコード
https://gist.github.com/thammin/086b4990a786aabe08d0629f3a6202dc