はじめに
本記事はQualiArts Advent Calendar 2025の11日目の記事になります。
去年は使用方法を紹介した記事を書きましたが、本日は続編として内部の描画APIを使って自由に描画する方法を紹介します。
Riveの概要
公式ページには様々な実用例が載っていますが、UIやグラフィックのアニメーションとインタラクションを作成するソフトウェアです。
こちらの記事を読めば、最低限の雰囲気がわかるかと思います。
Procedural Rendering
Riveのカスタム描画機能（Procedural Rendering）は、描画スタイルのデータとパスのデータを指示してRive内部のエンジンに描画してくれる機能です。
ウェブの世界だと、CanvasRenderingContext2Dのように2dの描画ができます。
最低限実装
RiveはRenderTextureに描画するため、UGUIや3D空間のメッシュにも使えます。
プロジェクトの描画パイプラインによってカスタマイズはできますが、今回は一番最低限のシンプル実装を紹介します。
3d空間にQuadを生成します
QuadにRivePanelとRiveTextureRendererをアタッチします
Rive Panel
描画するビューポット
Rive Texture Renderer
Rive PanelをRenderTextureに描画するコンポーネント
UnityのRendererがついているGameObjectにアタッチする
描画内容を作成します
Riveは描画内容をWidgetと呼びます。
今回はProcedural Rive Widgetを使うため、以下のようにGameObjectを作成します。
カスタム描画の処理スクリプトはProceduralDrawingというクラスを継承して作成します。
public class DrawingTest1 : ProceduralDrawing
{
public override void Draw(IRenderer renderer, AABB frame, RenderContext renderContext)
{
// ここに描画を登録する
}
}
先ほど作成したGameObjectにアタッチして、Procedural Rive Widgetに紐付けます。
最後は、簡単な図形を描いて確認しましょう。
public class DrawingTest1 : ProceduralDrawing
{
public override void Draw(IRenderer renderer, AABB frame, RenderContext renderContext)
{
// 描画スタイルの指定
var paint = new Paint
{
Color = new Color(0xFFFF0000),
Join = StrokeJoin.Round,
Thickness = 20.0f
};
// パスの指定
var path = new Path();
path.MoveTo(200, 200);
path.LineTo(400, 200);
path.LineTo(400, 400);
path.LineTo(200, 400);
path.Close();
// 確定する
path.Flush();
// 描画コマンドとして登録する
renderer.Draw(path, paint);
}
}
実行結果
これでカスタム描画ができました！
描画のスタイル指定
Paintというクラスは様々な設定をカスタマイズできます。
簡単にいくつか紹介します。
色の指定：
こちらの色指定はUnityEngineのColorクラスではなく、Rive自前のクラスになります。
SerializeFieldに対応していないので、UnityEngine.Color ↔ Rive.Colorの変換Utilityを用意して適切に変換すると良いでしょう。
var paint = new Paint
{
Color = new Color(0xFFFF0000),
};
| 0xFFFF0000 | 0xFF00FF00 | 0xFF0000FF |
|---|---|---|
 |
 |
 |
PaintingStyle
線だけ描画するか、色塗りするかを指定できます。
var paint = new Paint
{
Style = PaintingStyle.Stroke
};
| PaintingStyle.Stroke | PaintingStyle.Fill |
|---|---|
 |
|
Stroke関連
Thickness
線の太さ（幅）
値：float型
StrokeJoin
線を描画する際の接合部（角）の描画方法
値：Miter Round Bevel
StrokeCap
線の端点（始点・終点）の描画方法
値：Butt Round Square
Gradient
線形グラデーションと円形グラデーションがあります
var paint = new Paint()
{
Gradient = new LinearGradient(
new Vector2(200, 200), // 開始位置の座標
new Vector2(400, 400), // 終了位置の座標
new List<Color>() { new Color(0xFFFF0000), new Color(0xFF0000FF) } , // グラデーションカラー
new List<float>() { 0f, 1f } // グラデーションカラーの位置 [0f(始点) ~ 1f(終点)]
)
};
| LinearGradient | RadialGradient |
|---|---|
 |
 |
ちなみにStyle = PaintingStyle.Strokeを指定していれば、線だけにグラデーションを適用することも可能です。
パスの指定
Pathというクラスを使えば、ペンを操作しているようにパスを処理できます。
以下のメソッドはパスの基本操作になります。
MoveTo
(x, y) 座標へ作成済みのサブパスの始点を移動します。
public void MoveTo(float x, float y)
LineTo
現在のサブパスの終点を指定した (x, y) 座標へ直線で接続します。
public void LineTo(float x, float y)
QuadTo
現在のパスに 2 次元のベジェ曲線を追加します。
public void QuadTo(float cx, float cy, float x, float y)
CubicTo
現在のパスに 3 次元のベジェ曲線を追加します。
public void CubicTo(float ox, float oy, float ix, float iy, float x, float y)
Close
ペンの場所を現在のサブパスの最初の位置に戻します。現在の位置から最初の位置まで直線を引くことになります。パスの図形が閉じていたり、まだ 1 点だけだったりする場合は、このメソッドは何も実行しません。
public void Close()
Reset
全ての操作をリセットします。
public void Reset()
Flush
描画処理を確定し、そのあとResetが呼ばれます。
public void Flush()
まとめ
これでRive Unityのカスタム描画ができるようになりました。
ウェブのCanvasRenderingContext2Dと比べてまだ機能はすべて揃っていないですが、現時点でも自由に描画ができると思います。
まだEarly Accessですが、最近はScripting機能が登場し、かつてのFlashを彷彿とさせ、とてもワクワクしています。AIエージェントも使える予定なので、今後は期待できるかもしれないですね。
以上、11日目の記事でした。引き続きカレンダー投稿を宜しくお願いします。
おまけ
有名なGhostscript_Tiger.svgをRiveで描画した時の様子です。
