AfterEffectsで書き出した連番ファイルをUnityで読み込んでアニメーションにする

このようなライブの背景アニメーションを作りたくてやり方を模索していたのですが、これがいちばんよさげなので忘れないようにメモしておきました。

具体的な方法はこちらのリンクの通りなのですが、Mac版のUnity2019.xでは動かなかったり一部省略されているところもあるので、順を追ってプロセスを記載しました。

unity3d-jp/StreamingImageSequence

unity3d-jp/StreamingImageSequence

StreamingImageSequenceを使うようです。連番ファイルは実際に読み込むとかなり重くなりますが、StreamingAssetsを使って高速で読み込んでいます。ただMac・Win版双方で使えるアプリにする場合はパスで工夫が必要なようです(AssetBundleがいちばんいいんでしょうが…)。

AfterEffectsで書き出し

1.AfterEffectsを開き、書き出すコンポジションを選択

2.「コンポジション」メニュー→「レンダーキューに追加」を選択

3.「出力先」に書き出したい先のフォルダを選択し、「出力モジュール」の横の「ロスレス圧縮」をクリックして「形式」を「PNG」にする

4.「レンダリング」をクリックして書き出す

タイムラインを設定する

1.Unityを立ち上げ、「Window」メニュー→「Package Manager」の「Advanced▼」をクリックし、「Show preview packages」を選択する

2.検索窓のところに「Timeline」と入力し、「1.4.5」のバージョンを選んで「Up to date」をクリックしてアップデートする

3.同じく検索窓のところに「Streaming Image Sequence」と入力し、インストールボタンを押す

4.「Assets」フォルダを右クリックし、「Create」→「Folder」を選んで「Assets」フォルダの直下に「StreamingAssets」フォルダを作成する

5.「StreamingAssets」フォルダの中に連番ファイルが入ったフォルダをドラッグ&ドロップして読み込む

6.空の GameObject を作成して、Inspectorの「Add Component」から「Playable Director」を選択する

7.「Assets」を右クリックして「Create」→「Timeline」をクリックしてTimelineを作成する

8.作成したTimelineをHirerarchyにドラッグ&ドロップする

9.Timeline ウィンドウの「+」をクリックし、 「Animation Track」を選択する。「None」と書かれているところに6.で作成した空のオブジェクトをドラッグ&ドロップする

10.Timeline ウィンドウの「+」をクリックし、 「Unity.StreamingImageSequence」→「StreamingImageSequenceTrack」を選択する

11.StreamingImageSequenceTrack に連番ファイルが入ったフォルダごとドラッグアンドドロップする

12.「GameObject」メニュー「UI」→「Image」を選択し Image オブジェクトを作成する

13.作成した Image オブジェクトを、「StreamingImageSequenceTrack」 の「None」と書かれているところにドラッグ&ドロップする

14.「Create StreamingImageSequenceRenderer on Image」をクリックする

15.このように連番ファイルが見れればOK。Macだと表示されない&動かないので注意

16.Timelineで再生する