[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
 2017年8月30日,神奈川県・パシフィコ横浜で日本最大のゲーム開発者会議「CEDEC 2017」が開催された。ユニティ・テクノロジーズ・ジャパンはCEDEC 2017のプラチナスポンサーであり,開催初日にはUnity関連のスポンサーセッションが多く行われていた。ここではそのうちの一つである「〜アーティストだけでやったらこうなった!〜Unityを使ったリアルタイムなアニメ映像表現」の模様をお届けしたい。

 このセッションはユニティ・テクノロジーズ・ジャパンが制作したアニメ「The Phantom Knowledge」の開発秘話を紹介するものである。登壇したのはユニティちゃんのデザインでお馴染み,ntnyこと同社コミュニティサポートデザイナー京野光平氏と,同コミュニティエバンジェリストの小林信行氏だ。制作の指揮を執ったのが京野氏で,小林氏はシェーダを担当しているとのこと。
 そもそもの発端は1年以上前に遡る。京野氏が「UnityにTimeline Editorが実装されるってよ」という話を大前広樹氏から聞いたところから始まったという。
 京野氏は前職でゲームのムービー制作などを多く手がけていたそうで,「アトリエ」「シェルノサージュ」といったタイトル名が聞こえていた。そんな氏にとってタイムラインといえばAfterEffectsだったらしく,同ツールについては「なんでもできる」「幸せな時間」といった言葉で形容するほどの入れ込みようだ。それがUnity上にやってくるということで,妄想をたくましくして描き上げたのがThe Phantom Knowledgeのストーリーボードだった。
 会場では,そのストーリーボードをベースに動きを付けたムービーが公開されていたが,The Phantom Knowledgeの雰囲気ほぼそのままだ。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた [CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた

 そしてストーリーボードを見た大前氏が「作ったらいいんじゃない?」と軽く促し,プロジェクトはスタートしたのだという。Timeline Editorに一度も触ることなく……。

 とりあえず,以下が完成したムービーである。


気づかない人もいるかもしれないが,いずれもユニティちゃんだ
[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた [CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた [CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた

 ちょっとシリアスモードのユニティちゃんに「誰?」と思った人も少なくないはずだ。見たところ,ユニティちゃんの本体は触覚部分だったらしい。新キャラクターも登場して,いきなり緊迫したシーンが連続する(ストーリーはよく分からない)。
 これまでの路線とは毛色がかなり変わっているが,従来路線と並行して,今後はこちらでも展開していくようだ。なんでも大前氏が設定に凝りだし,「建築の勉強をする」とか地方都市に一人でロケハンに出かけたりしているという。ユニティちゃんはどうなっていくのだろうか。


ユニティちゃんの使命


 さて,このプロジェクトが始まった背景にはもう一つ理由があった。「最近のユニティちゃんは,役割をまっとうできていたか?」という問いに対して,「No」だったと京野氏は自答していた。
 ユニティちゃんには二つの役割が想定されていたという。そのうち一つは公式キャラクターとしてファンを増やすこと,もう一つは最新機能の案内人となることだった。MECANIMに合わせて投入された「Candy Rock Star」以来,2番めの役割がおろそかになっているという思いがあったようだ。そこでUnity 2017.1の最新機能であるTimelineをフル活用したコンテンツをユニティちゃんで制作しようということになったという。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた [CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
 しかし,京野氏のスキルセットは3ds MaxとAfterEffects,使用するのは使ったことのないMayaと未完成のTimeline。慣れないツールとコロコロ変わる新機能を前にして,動画の制作は苦難をきわめたようだ。
 企画自体のスタートは早かったのだが,実際にTimelineに触れるようになったのがその半年後。ツール自体が安定してちゃんと作業できるようになったのはさらに3か月後であり,実質3か月の作業時間しか取れず,さらにいえばハードディスクごとデータが飛ぶトラブルもあったという。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた [CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた

 できたばかり(というか未完成)のTimelineが,定番ツールとして長年君臨しているAfterEffectsとまったく同じ使い方ができるわけもなく,京野氏はまず,タイムラインエディタとして共通する部分,同じように使える部分を検証していったようだ。
 そこでやりたいことを書き出して,UnityのTimelineでどうすれば再現できるのかの検証を行ったという。以下,Unityでアニメ映像を作っていく際のTipsが紹介されていった。


●フレアとパラ
[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
 まずは,とくに多用するというフレア処理の再現だ。明るい部分がふわっとぼけて輝くような処理だが,ポストエフェクトとはちょっと違うのだという。これが加わると映像が一気にアニメっぽくなり,画面の色数が増えるので見栄えがぐっと上がると京野氏。

 AfterEffectsでやっていた「シェイプを置いて……」といった手法をUnityでどう実装すればよいかと思いつくままにやってみると,かなりよい効果が得られたそうだ。「シーン内に板ポリを置いただけ」とのことだが,ソフトパーティクルが使えるので,非常に使い勝手がよいと評価していた。むしろAfterEffectsでは,境界をぼかすのに細かくマスクを切り分けるのが大変だったそうだ。

 さらに高橋啓治郎氏が制作したPost Processing Stackを使ってブルーム処理を行うなど,やりたい効果をはっきりさせていけば意外と簡単に実装法を思いつくと京野氏は語っていた。

 続いてかなり大変だったという,扉から漏れた光がユニティちゃんを照らすシーンについての解説が行われた。青っぽいライティングの部屋から扉を開けて,漏れ出た赤っぽい光がユニティちゃんを照らしているという場面だ。左側がレンダリングされた画面,右側がそのシーン設定を斜め前から見たところとなる。この色の違う光が顔を照らしているという部分はスポットライトなどでやるとなかなかうまくいかないのだという。

 ではどうやっているかを見ると,ユニティちゃんの前に赤い柱が立っており,その手前に緑の塊が浮いていることが分かる。どちらもUnityの標準パーティクルテクスチャだそうだが,これらで色味を加えて光の色を変えているようだ。顔に当たっている光自体は扉の向こうに置かれた並行光源であり,アニメ撮影でいう「置きパラ」の処理を行っているのだという。アニメ撮影では,カメラの前に色を付けたパラフィン紙を置いて,影や部分的な色をつける手法(有名どころでは出埼アニメなどのアレ)が取られることがあるが,それをUnity上で行う場合にこういった感じになるわけだ。背景の肩から下あたりが緑っぽいのは,手前に置かれた緑のパラによるものだそうだ。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた [CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた


●リファレンスは神
[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
 一方で,京野氏はゲームエンジンだからできたこととして,モデルの再調整などの手軽さを挙げていた。AfterEffectsでは全部やり直しになるようなことも,ゲームエンジン(というかMaya)でならば手軽に行える。
 氏はMayaについてはリファレンス機能を「神」と呼んでいた。これは,元データを参照して部分的に変更ができ,元データを変更すると,参照しているデータにも自動的に反映されるといった仕組みである。シーンごとの細かい変更にも柔軟に対応でき,元データを直したときも全データを修正する必要がない。
 ちなみに,3ds Maxにも同様な機能はあるが,いろいろと動作が怪しいらしい。Max使いの氏もあらゆる場面で安定して動くMayaを見て「頼もしい」と評価していた。

 「同じようなことがUnityでもできればいいのに」と考えた京野氏は,プレファブを使えば似た機能が実現できることに気づいたという。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた [CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた

 マスターのデータを使用する場面でコピーして個別に手を加えていくのだ。やろうと思えばシーンごとに全部別のテクスチャを使うといったこともできる。それでいて,元データをMayaで変更して更新すれば,各シーンでちゃんとそれが反映される。リファレンスとプレファブを駆使することで,かなり保守性のよい作業環境が構築されたようだ。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた [CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた


●シーンごとの背景管理
 通常のカットシーンとは異なり,The Phantom Knowledgeでは複数のシーンが頻繁に入れ替わって登場する。アセットとしては同じキャラクターを使い回すのはよいとして,カットごとにシーン設定をしていると無駄が大きい。この作品では5種類の背景が使われているが,カットごとにそれぞれ背景を設定していると,背景を変更したいといった場合に,すべてのカットを変更する必要が出てくる。そこで同じ設定でいけるシーンはまとめて管理する方法に切り替えたという。
 つまり,背景とその他のアセット(ショット)を分離し,その組み合わせでカットを構成していくのだ。時系列などにこだわらず,同じ状況(場所)をまとめて設定しておく手法である。これは実写に近い手法だと小林氏は語っていた。映画などで,時系列によらず,同じ場所のシーンはまとめ撮りしておくのと似た感覚だという。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた


●できるだけUnity上でやる
[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
 続いて語られたのが,作業をできる限りUnity上で完結させるという方針だ。映像を作っていくうえで,MayaなどのDCCツールに差し戻して処理を行うのは効率がよくない。大元のデータの更新は,先ほどのリファレンスの話で出てきたように一括でできるというメリットもあるが,参照先すべてで影響が出かねないというデメリットも秘めている。Mayaまで戻って修正すればやり直しになる部分も出てくるだろう。それはなるべくなくそうという方針だ。
 例で挙げられたのは壊れた橋のシーンだ。普通に使うと「雲がイイ感じで入ってくれない」というケースもある。そこでUnity上でそのカット専用に背景を移動させるなどの処理を行っているという。スライドからは,そのカメラから見たところ以外は無視して,その場その場で調整している様子が分かる。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた


●手描きエフェクトを加える
 最近の欧州産のゲームのPVでは手描きエフェクトが多用されているので,どうしても入れたかったと京野氏は熱く語った。
 手描きエフェクトを入れるにはレンダリング順序に注意が必要だという。ポストエフェクトの後(ポストエフェクトをまとめて行う前述のPost Effect Stackの実行後)にやらないと手描き部分の色味などまで影響を受けるので,今回は「最後にレンダリングされるマテリアル」であるCanvasを使うことで解決している。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
 手描きのエフェクトは,AfterEffects上で通常のレンダリング映像とタイミングを合わせて,連番の静止画として出力され,Unityでその連番画像を読み込んで合成されている。連番画像読み込み機能はこのために新設されたという。
 最初からAfterEffectsでやればこんな手間はいらないというのは,京野氏もよく理解しているものの,この機能で実現される「最終的に絵を描けばなんとかなる」という安心感はなにものにも変えがたいのだそうだ。

 こうして作業を進め,Unity上で広範囲に細かな作業ができるようになる一方で,「マスターデータの不在」が一抹の不安として浮かび上がったという。従来の映像制作であれば,MayaなりDCCツール上なりにマスターデータがあり,それを順に加工していくので,基準となる部分に揺るぎはなかった。しかし,Unity上で多くの処理を行うと,マスターデータはもはやUnity上にしか存在しないという状況になってくるのだ。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
 小林氏は,開発手法にたとえて,従来型が絵コンテを絶対の仕様書とするウォーターフォール型だったのに対し,UnityとTimelineでのやり方は細かなイテレーションを繰り返すアジャイル開発的な位置づけのものだとする考えを示した。そのような環境では「パワープレイをよしとする心」が重要だと京野氏は語っていた。従来は絵コンテを変更できるのは監督だけだったが,Unityでならば誰でも細かな変更を簡単に行える。制作過程でよりよいものにできるのは,よりアーティストらしい作業ができるということだとしていた。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた [CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた


●映像制作以外でもTimelineは使える
[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
 最後に,映像制作以外に3Dイラストや2Dのパブリッシュ素材を作成するうえでもTimelineは有用だと京野氏は語った。ポーズ間でスライダーを動かせば,キャラクターが動き,カメラアングルはもちろん,光源や背景なども自在に設定できる。とくに,Timelineの管理単位をフレームから秒に変換すると,ヌルっと動いておすすめだそうだ。実際にTimelineを使って作られたパブリッシュ素材なども紹介されていた。

[CEDEC 2017]UnityのTimelineでアニメを作る! ユニティちゃん新映像はこうして作られた
 ほかにも細かい話は山のようにあったのだが,Timelineでアニメ的な映像を制作するためのノウハウはかなりしっかり公開されていたように思う。今回のThe Phantom Knowledgeのデータなど一式は,9月末の公開が予定されている。これまで公開されていなかったユニティちゃんのMayaの生データや3ds Maxのデータ,このプロジェクトで使われたツール類などをすべて含んだものとなるという。Mayaデータは「マヤ道」でCEDEC AWARDSで著述賞を受賞したEske Yoshinob氏がリグを担当しており,バージョン履歴なども入ったものになっているとのこと。
 The Phantom Knowledgeはまだ続いていくとのことなので,今後の展開にも期待しよう。