QuillのアニメーションをUnityで再生する

<img src="http://megamin.jp/wp-content/uploads/2018/03/megamin_20180228_1345.png" />

# え？Unityのアニメーションも作れるんですか！？

　ここ最近、Unity で使用するリソースを Quill で作成する。という事をやっています。主に背景素材作成として。 Quill とは、OculusTouch 用 VR お絵かきツールで、手書き感覚で VR 空間に直接絵を描く事ができます。また、FBX にもエクスポートする事が出来、モデリングツールとしても優秀です。また、Quill はアニメーションを作成する事が出来ます。アニメーションもオニオンスキンで前後フレームが確認できるため、割ときめ細かな動きが設定できます。ものすごく魅力的ですね！

で、つい最近まで Quill はそのアニメーションを Unity にエクスポートできないと思ってました。 FBX で出力してもアニメーションの一コマだけ出力されていて落胆していたのですが、よくよく<a href="https://quill.fb.com/developers/how-to-use-quill-animated-abc-in-unity" target="_blank">本家サイト</a>のドキュメントを見ると、エクスポート時に FBX ではなくて、Alembic 形式でエクスポートすれば良いとの事でした。

というわけで、さっそくですがアニメーションさせてみましょう！

# まずは、Quillでアニメーションを作る

　スクリーンショット撮るのが割とアレなので、ここはひとつ、メイキング動画をどぞー

<a href="https://www.youtube.com/watch?v=2Pnw0Qw9gGw">Quill でアニメを作る #001</a>

# 次はインポータパッケージをゲットする

　次は、GitHub に<a href="https://github.com/unity3d-jp/AlembicImporter/releases/download/20180212/AlembicForUnity.unitypackage" target="_blank">インポータパッケージ</a>が用意されているので、それを取得してきます。

<img alt='' class='alignnone size-full wp-image-2301 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a971687f0466.png' />

- ファイルを保存します

<img alt='' class='alignnone size-full wp-image-2302 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a97169115b4f.png' />

- Unity を起動

<img alt='' class='alignnone size-full wp-image-2303 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a97169d8c2d0.png' />

- New

<img alt='' class='alignnone size-full wp-image-2304 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9716acdb74e.png' />

- プロジェクト名を適宜入力して Create project

<img alt='' class='alignnone size-full wp-image-2305 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9716bd9f0e3.png' />

- プロジェクトが作成されたら、先ほどダウンロードした unitypackage を開く

<img alt='' class='alignnone size-full wp-image-2306 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9716c7dd7a3.png' />

- Import

<img alt='' class='alignnone size-full wp-image-2307 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9716d4411df.png' />

- <a href="https://quill.fb.com/assets/QuillShader.shader" target="_blank">Quill のシェーダー</a>をダウンロード（左のリンクを右クリックしてURLのファイルを保存してください）

<img alt='' class='alignnone size-full wp-image-2308 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9716e195288.png' />

- ダウンロードしたシェーダを Project ビューにドロップしてインポートする

<img alt='' class='alignnone size-full wp-image-2309 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9716ed1f3da.png' />

- Project ビューの何もないところを右クリックし、Create → Material をクリック
- マテリアル名を QuillMaterial とする

<img alt='' class='alignnone size-full wp-image-2310 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9716f9ac0b6.png' />

- Project ビューの QuillShader を QuillMaterial にドロップする

<img alt='' class='alignnone size-full wp-image-2311 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9717087e4f4.png' />

- Quill で作成した abc ファイルを Unity の Project ビューにドロップし、インポートする

<img alt='' class='alignnone size-full wp-image-2312 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9717157b9f1.png' />

- 追加すると上記のようなファイルが生成される（ファイル名が若干違うのは実は一度失敗して別のファイル名でやり直したから）

<img alt='' class='alignnone size-full wp-image-2313 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9717259e3c7.png' />

- Project ビューのインポートしたプレハブをクリックし、Inspector ビューの Scale Factor を 10 に設定し、Apply をクリック

<img alt='' class='alignnone size-full wp-image-2314 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a971733ec20a.png' />

- Project ビューのインポートしたプレハブを Hierarchy ビューにドロップする

<img alt='' class='alignnone size-full wp-image-2315 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a97173e0aa8b.png' />

- 真っ白な何かがシーン内に配置されます

<img alt='' class='alignnone size-full wp-image-2316 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9717499a198.png' />

- Hierarchy ビューのオブジェクトのノードを展開する
- Project ビューの QuillMaterial を Hierarchy ビューのオブジェクトのメッシュにドロップする
- 先ほどの白いオブジェクトに色が付きます

<img alt='' class='alignnone size-full wp-image-2317 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a971756e1285.png' />

- Project ビューの何もないところを右クリックし、Create → Animator Controller をクリック
- 名前を QuillAnimator に設定する

<img alt='' class='alignnone size-full wp-image-2318 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9717637a915.png' />

- Project ビューの QuillAnimator をダブルクリック
- プレハブ内のアニメーションクリップを Animator ビューの中にドロップする

<img alt='' class='alignnone size-full wp-image-2319 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a97176fc674b.png' />

- Hierarchy ビューのオブジェクトをクリック
- Project ビューの QuillAnimator を Inspector の中へドロップし、AnimatorController コンポーネントとしてアタッチする

<img alt='' class='alignnone size-full wp-image-2320 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a97177bd106e.png' />

- Window → Timeline をクリック

<img alt='' class='alignnone size-full wp-image-2321 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a97178630612.png' />

- Hierarchy ビューのオブジェクトをクリックし、Timeline ビューの Create をクリック

<img alt='' class='alignnone size-full wp-image-2322 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a971790f32bd.png' />

- ファイル名を適宜入力して保存

<img alt='' class='alignnone size-full wp-image-2323 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a97179d3d893.png' />

- Timeline ビューで右クリックし、Add From Animation Clip をクリック

<img alt='' class='alignnone size-full wp-image-2324 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9717aaeb674.png' />

- アニメーションクリップをクリックして閉じる

<img alt='' class='alignnone size-full wp-image-2325 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9717b88e585.png' />

- Hierarchy ビューのオブジェクトをクリックし、Inspector ビューの Wrap Mode を Loop に設定する

<img alt='' class='alignnone size-full wp-image-2326 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9717c130e25.png' />

- 実行する

<img alt='' class='alignnone size-full wp-image-2327 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9717ccd4e41.png' />

- うごいた！！！！！！

# 無事アニメーションできました

　Quill で作成したアニメーションがそのまま Unity で無事動きました。ということは、簡単お手軽に作成した手描きアニメが Unity のアニメーション素材として使えるというわけですね、素晴らしい！！！　Quill は VR 空間でお絵かきできるわけですから、 VR アプリの演出素材としてサクサク作るという事もできちゃいますね。また、シューティングゲーム等の爆発エフェクト等、ちょっと一味違った雰囲気のゲームにも使えそうです。

# トラブルシューティング

　今回、Quill でエクスポートした Alembic ファイルがうまく Unity にインポートできず、ランタイムエラーが発生していたのですが、開発元に Facebook のチャットで問題の発生したファイルを送って質問してみたらほんの２、３時間で回答を送ってくれました！！ なんという対応の早さ！！ すいません、ほんとありがとうございます！！！

で、ランタイムエラーが発生するパターンは下記の２つでした。

1. 一番細いラインブラシを使用した場合
1. 空のレイヤーが含まれている場合

まず、一番細いラインブラシですが、これは体積が無いため、正常に読み込めないそうです。つまり、一番細いラインブラシを使用してアニメーションを作ってはいけないという事になります。

２つ目の空のレイヤーについては、次回の Quill のリリースで空のレイヤーをエクスポートしないように修正してくれるそうです。それまでは空のレイヤーは削除するか、非表示にして、Export Curves と Export Hidden のチェックを外す事が必要です。

<img alt='' class='alignnone size-full wp-image-2328 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9717da757eb.png' />

# やっぱ疲れた

　なんだこれ、インポータパッケージを導入してそのままファイルを突っ込むだけじゃないですか、簡単じゃないですか、余裕じゃないですか。　とか思ってたら解決に丸々一日かかってしまいました。しかも、全く違う理由でランタイムエラーが発生したため、これは Quill の問題では？ と思ってレポートをあげたものの、実際はやってはいけない事をしてエラーの発生するデータを作ってしまってたというオチでした。（でもまぁ、エラーのでるパターンのデータをエクスポート時にブロックする処理が必要という意味では無駄でな無い報告だったと思います）

開発元に質問するまでは GitHub から C++ のソースを落としてビルドしてみたりと色々試してみて全くわからなかったわけですが、諦めずに色々試す事で最後は目的を達成できるというのは非常に良い経験だと思います。と、偉そうな事をいいつつ今日はここまで。

ではまた！