0. はじめに
この記事はNTTコノキュー アドベントカレンダー2025の記事です。
こんにちは。NTTコノキューの高木です。今回から2回に別けてUnityの2Dアニメーションの話をします。
Unityで2Dアニメーションと言えばSpriteAnimationがスタンダードですが、SpriteAnimationはUnity専用でありデザイナーが不慣れなことが多く、Unityエンジニアが素材を取り込み用意をし、デザイナーとのすり合わせ・確認が必要になることが多いです。そんな悩みを解決すべく、モバイルアプリやWebの世界で利用されるLottieやRiveをUnityで使ってみましょう！
注意：本記事ではLottieをランタイムで動かすことを目的としており、Lottieファイルの作成は対象外です。LottieはAfter Effectsなどで作成可能です。
Lottieを使えばこんな大量のギフト送信も...!
1. Lottieとは？
Lottieとは、SVGのようなベクターベースの2Dアニメーションファイルで連番画像やgifと比較しファイルサイズが小さく、再生も比較的軽量なのが特徴です。
2017年頃にAirbnb社がオープンソースで公開し、Webやモバイルアプリで急速に普及しました。
ファイルは一般に.jsonで保存されますが、更なるサイズ減少のため圧縮された.lottieファイルも登場しています。
1.1 Lottieのメリット・デメリット
1.1.1 Lottieのメリット
劇的なファイルサイズ削減 : ベクターファイルであるためサイズが画像よりも小さい
解像度非依存：ベクターファイルであるため解像度を変更しても品質が変わらない
クロスプラットフォーム : Web/モバイル/PC等で再生するランタイムが存在する
ランタイム変更 : .jsonファイルであるためスクリプトから絵の編集・操作が容易
AffterEffects対応 : モーショングラフィックデザイナーに優しい
1.1.2 Lottieのデメリット
初期化時のCPU負荷 : .jsonであるため、パース負荷が発生する
レンダリング負荷 : 複雑なシェイプ描画のためには通常の画像以上に描画計算が必要
インタラクティブ性 : アニメーションのブレンドや複雑な状態・分岐を持たせられない
AffterEffectsの機能限定 : 全ての機能がLottieで利用できるわけではない
Unity対応の不足 : Unityはベクターファイル自体サポートが薄く、Lottieもサードパーティのライブラリを利用する
1.2 他との比較
ファイルの作りによって変わってくる部分もあるのであくまで参考程度にお願いします。
| 項目 | Lottie | Sprite Animation | Rive |
|---|---|---|---|
| Unity対応 | 🔺 | ✅ | ✅ |
| 知名度 | ✅ | 🔺 | ❌ |
| ファイルサイズ | ✅ | 🔺 | ✅ |
| インタラクティブ性 | ❌ | 🔺 | ✅ |
| CPU負荷 | 🔺 | ✅ | ✅ |
| GPU負荷 | ✅ | 🔺 | ✅ |
| RAM消費 | ✅ | ❌ | ✅ |
2. Lottieの導入
2.1 環境情報
本記事では、以下の環境で実施しています。
PC: macbook M4 Unity: Unity 6000.0.59f2 実機: Android AQUOS R9
2.2 GitHub上のUnity対応Lottieライブラリの比較
残念ながら、Lottieを再生する仕組みは標準ではないためOSSを利用します。
LottieをUnityで再生可能なライブラリが複数あるので比較表を作成しました。今回はunity-lottie-playerを利用します。
unity-rlottieは永らく更新が止まっていましたが、最近メンテナンスが再開されました。しかし、Apple Siliconでの利用にまだ問題があります。
| 項目 | unity-rlottie | unity-lottie-player | SkiaForUnity |
|---|---|---|---|
| ライセンス | MIT | Unlicense | MIT |
| 描画ライブラリ | rlottie | rlottie | SkiaSharp |
| メンテナンス状況 | ✅ | ✅ | 🔺 |
| 導入容易性 | ✅ | 🔺 (サンプルなし) | ❌ |
| パフォーマンス | 🔺 | ✅ | 🔺 |
2.3 unity-lottie-playerの導入
2.3.1 Package Managerからパッケージをインストールする
[Window] -> [Package Manager] を開きます。
左上の [+] -> [Install package from git URL...] を選択します。
以下を入力し、[Install] を押します。
https://github.com/gilzoide/unity-lottie-player.git
In ProjectにLottie Playerが追加されていればインストール完了です。
2.3.2 Lottieファイルを表示するまで
今回はこちらのLottieファイルを利用してみます。ロード中を示すのに使えるループアニメーションですね。ダウンロードする際は.lottieではなく.jsonをダウンロードしてください。
注意：ダウンロードにはLottieFilesへの会員登録が必要です。
ブラウザ上でのLottie再生サンプルは、以下のリンクから確認できます。
https://lottie.host/embed/9f1001fa-b7e4-4fd3-9812-8f91cabd34d0/uL5KVZjRmK.lottie
2.3.2.1 LottieAnimationAssetの作成
アニメーション(.json)をダウンロードしたらUnityプロジェクトにインポートします。
残念ながら、インポートするとUnityは拡張子が.jsonのためTextAssetとしてインポートします。
UnityにはScripted Importerという拡張子等に応じてインポートファイルをスクリプトで変換や処理を行うための仕組みがあり、unity-lottie-playerでもこの仕組みを利用しているため、Lottie用のImporterを選択します。
これを選択するとScriptableObjectに変換され、アセットとして利用可能になります。
Resource Pathは設定しなくても問題ありません。
Tips: 毎回この選択をするのが面倒な場合は、Scripted Importerを編集or複製して特定のフォルダ以下にインポートしたら自動で適用されるようにしましょう。
2.3.2.2 ImageLottiePlayerを使ってLottieアニメーションを再生する
uGUIの512x512のPanelを用意し、『ImageLottiePlayer』コンポーネントをAddComponentし。Animation Assetに先ほど用意したLottieAnimationAssetをセットします。
Texture Optionsでは内部で生成するTextureの解像度のアスペクト比をLottieに合わせるか、Panelに合わせるかを選択できます。ここから、実際にはベクター画像をラスタライズしてテクスチャ化していることが分かります。
このテクスチャサイズはメモリ消費量とパフォーマンスに影響するので必要以上に大きくしないことを推奨します。
AutoPlayがOnStart, LoopがオンになっているのでUnityをプレイすると無事アニメーションが再生されました。
2.3.2.3 スクリプトでImageLottiePlayerを制御する
スクリプトで制御したい場合はAutoStartをオフにして下記のようにAnimtionAssetを設定、再生が可能です。
imageLottiePlayer.SetAnimationAsset(animationAsset);
imageLottiePlayer.Play();
imageLottiePlayer.Pause();
imageLottiePlayer.Unpause();
3. 投げ銭演出に使ってみよう
VTuberライブ配信アプリの投げ銭演出（ギフト）にLottieを使ってみます。
3.1 サンプルリポジトリの紹介
今回のデモを含むリポジトリを公開しました。この記事はLottieが主であるためそれ以外の部分については深く解説しません。こちらのリポジトリをご参照ください。
https://github.com/STak4/unity-lottie-demo
注：Lottieファイルはリポジトリに含めていないのでご自身で用意いただく必要があります。
3.2 デモ作成の指針
3.2.1 Lottieを使ったギフト表示
2.3.2で、LottieをuGUIのImageのように扱えることが分かっています。
Lottieを1つのギフトとして扱い、贈りたいギフトのサムネイルを押すとギフトが表示されることにします。
今回は画面の下部でギフトを選択し、一定エリア内のランダムな位置にギフトが表示される形にしました。
3.2.2 配信者の表示
ライブ配信アプリの想定なので、やはりライバーは必須です。
とはいえこのデモのために手配するのも大変なので、背景と合わせてGeminiに作ってもらいました。
黒背景で書き出せば後は動画編集ソフトで背景透過させwebm, VP8で書き出してUnityのVideoPlayerで再生できるようにします。
透過動画は技術的な落とし穴が多いので扱いには注意が必要です。端末によってはうまく再生されないことも多々あるので商用プロダクトでの導入には慎重な検討が必要です。Unity上でシェーダーを使い透過させるのも良い手です。
3.2.3 チャットの表示
折角ギフトを大量に投げるならば、配信が盛り上がっていてほしい。「ギフトすごい！」と言われたい。なのでチャット欄も作ってしまいましょう。
ランダムに表示するにしても、文言を考えるのが大変...そこでこちらもGeminiにVTuber配信のチャットをイメージしてCSVに1000個分文言を書き出してもらいました。
後はCSVから取り出して良い感じに表示させれば完成です。アイコンはUnity-UIGradientを使いランダムなグラデーションを表示しています。
Tips: CanvasGroupを使いAlphaをフェードインさせるとそれっぽくなります
3.3 デモ実装
3.3.1 画面構成
以下のようにレイヤーを重ねていきます。
奥 手前
背景<<配信者<<ギフト<<チャット<<ギフト選択
3.3.2 ギフト選択の実装
2.3.2において、ImageLottiePlayerの再生に必要なのはLottieAnimationAssetでした。
厳密にはLottieAnimationがあればよくJSONからもランタイムで作成できるのですが、今回はインターネットからのダウンロードではなくUnityのアセットとしてLottieファイルを管理したいのでScriptableObjectで以下の3つを1組に、事前に保存しておきます。
Name(ID管理用）
Thumbnail(ギフト選択に表示するサムネイル。事前にSpriteを用意する。）
LottieAnimationAsset(インポートしたLottieファイル)
選択画面に表示するサムネイルはボタンとしてランタイムでSelectorがボタンのサムネイルとAssetを与えて生成し、ボタンが押された時にそのAssetをSelectorにコールバックします。
Lottieアニメーションの生成・管理を行うControllerはSelectorの選択イベント時にランダムな位置に生成します。詳細な実装はリポジトリを参照してください。
4. まとめ
モバイルアプリではよく使われるLottieをUnityでも活用することができます。
Jobsystemを利用したLottieの再生は非常に軽量で大量の同時再生にも耐えられ、アニメーションファイルがjsonであるためファイルサイズも小さいです。デザイナがスプライトアニメーションに慣れているかどうかで判断するのが良いでしょう。
今回は紹介しませんでしたが、内部ではTextureへレンダリングしているためQuadなど3D空間上で扱うことも可能です。
一方で、インタラクティブな2Dアニメーションの用途においてはあまりLottieは向いていません。そこで、次回は近年注目されている次世代2Dアニメーションフォーマット、Riveを取り上げたいと思います。
