Making of ARiA #2

── 旅人たちは安住の地を見つけたのだろうか?光さえ届かない闇は永遠と立ちはだかり、
繋がれた鎖は心さえも縛ろうとする。──



ここからはちょっと映像寄りな話です。

#1でも少し触れましたが、キャラは立ち絵5枚のみで背景がリアル寄りな3DCGというあまり前例がない上に、さらにそれを5分の映像として見れる物にするには苦労しました。
まず、アニメと違ってキャラが振り向いたりカメラに合わせて向きを変えたりしてくれません。
なのでカメラワークはキャラがカメラ内にいるときは常にキャラに向ける事になります。
と言ってもそれだけでは固定になってしまうのですが、だいたい上下左右10°くらいは動かしても違和感がそんなに出ません。また、パン、ティルト時に画面外からキャラを急角度で入れるとわりと自然にいきます。アウト時もしかりです。
それを考慮した上で、コンテを切っていきます。

 絵コンテ

Cinema4D(以下C4D)でモデルを組んだら、refeiaさんから頂いた絵を板ポリに貼付けて仮置きしてカメラワークを決めていきます。C4Dでは音声ファイルもちゃんと同期再生出来るので、カットごとに簡単なアニマティクスを作れます。だいたいコンテに沿って作るのですが、やりながら結構変えています。

 Cinema4D

たとえば1回目のBメロと2回目のBメロは遠景からキャラに近づいていますが、1回目のBメロはカメラ自体を近づけて、2回目のBメロはズームでキャラのアップになってます。実は1回目のBメロもコンテ時はズームだったのですが、背景のゴッドレイ(空の雲の間から差す光)をもっと見せたかったのでカメラワークを変えました。(ズームのままだと背景がビル群になってしまいます)壮大な感じが出たと思います。

 1Bメロ

 2Bメロ


AfterEffects(以下AE)+C4D+Vue xStreamのコンビネーションは結構前から考えていて、ソフトを揃えてから色々実験してました。
なんといっても三つのアプリでカメラが共有出来るのが利点です。
C4Dでオブジェクトを作ってVueの大気を呼び出してカメラワークをつけ、そのままAEにカメラを持っていってコンポジットとエフェクトを加える。これがARiAの基本システムです。
難点はC4D+Vueが非常に不安定なのとレンダリング時間が長いことでした。C4D上でVueを呼び出すとレンダラーがC4DではなくVueのレンダラーでレンダリングすることになるので、C4Dの高速で安定したレンダラーが使えません。前述した1回目のBメロなどはレンダリングに4日かかってます。
普段、仕事では短納期の物が多いのでこのコンビネーションは使えず、やっとARiAで実現する事が出来ました。

キャラの動きはレイヤー分けされた目パチ口パク、手足、服、頭の飾りなどのオブジェクト、房ごとの髪をそれぞれAEのエクスプレッションとパペットツールを使って動かしています。
また、動かすと画像が切れてしまう部分(頭の飾りや髪など)はPhotoshopで描き足したりしてます。
この辺も絵師さんとの信頼関係が重要ですね。

 AEタイムライン

スクリーンショット撮ったのですがぜんぜん画面に入りきらないですね。
1レイヤーだけキーフレーム見せてます。

少ない枚数の絵をどれだけバリエーション持たせるかはパペットツールに寄る所が大きいです。
例えばこの絵ですが、

 元絵

この顔をパペットツールで上に向かせるとこうなります。

 パペットツール適用後

仕事でこれをやるとたぶん怒られますが、refeiaさんにお願いしてちゃんと確認してもらってます。


レンダリング時間の節約といえばこのカット。

 1サビ

Twitterで背景を公開してますが、カメラはほとんど動いてません。軌道エレベーターだけ動いてます。
いわゆる「付けPAN」という手法ですね。
カメラ揺れと時々上から下に雲を流すのがスピード感を出すコツです。
このあとのビル群の間を抜けるシーンやギターソロ部分もそうですが、カメラ揺れをうまく使うとスピード感をある程度コントロール出来ます。

公開時にわりと反響のあったカット。ここもパペットツールです。

 なぞのぎじゅつ

「アニメ」「3DCG」とか言われましたが一枚絵です。

 ARiAたん

この絵を左右反転、下半身だけ映すようにカメラを決めてパペットツールで動かします。
スローモーション風にすることで可動範囲を狭めて尺をかせいで、動いてるように見せてます。
実時間でやるとものすごい短いカットになるか、パペットツールで動かしてる違和感が出て使い物にならなくなります。
背景は3DCGで最終的にMagicBulletLooksでカラコレしてます。

 ふわふわり

このシーンは髪の毛がブワーッと広がってる感じにしたかったので、後ろ髪のレイヤーを2回コピーして左右反転、自然な感じになるように配置。こういうのもバリエーションを作る一つの手ですね。

 Fixショット

目パチ用の中間の素材を流用して切なげな感じの表情にしてます。
環境光の不透明度を揺らしてそれっぽく仕上げ。
カラコレ前はこんな感じです。浮きまくってますね。

 カラコレ前

 2サビ

このシーンに限らずですが、背景のモーションブラーはAE上であとからRE:VisionのRSMBをかけてます。
3DCGレンダリング時にかけると重い上に合成時に出来ない事が増えるので、後がけおすすめです。
動画を止めて見ると変な感じにブラーかかって見えますが、動画になると結構普通に見えます。
本来は3DCG側でベクターマップを書き出して、AE上でRSMBのVectorsを使うとキレイに仕上がるのですが、Vueも使ってると色々問題があったので今回は使いませんでした。

 影

影で人物を見せるのもバリエーションをかせぐ手法の一つですね。
背景は3DCGなんですが、Photoshopで描き足したりしてます。
ここ以外も背景が止め絵のシーンは多いのですが、カメラ揺れと微速ズームとか入れるとそれっぽく見えます。

 ラインアニメーション

ラインアニメーションはTrapcode 3Dstroke。先端は1フレームずらしでマスクを作って光らせてます。
そのままだとカメラが引いた時に室内とマッチングしないので、影をあとから加えてます。
アイコンとライン先端にまとわりついてる粒子はTrapcode Formです。最後のウインドウ等は別コンポで配置。

 キーラリー♪

ここもスローモーション風ですね。サビで使ったキャラ絵を横にして流用。
足とかはアンカーを足の付け根に置いて回転とパペットを併用で動かしてます。
このシーンはすべてAEです。HDサイズで見ると涙のリフレクションとか揺れがわかるのですが、ニコニコ動画だとよくわかりませんね…でも細部にこだわるのは重要です!HD版出すまで待ってというのもあれなので原寸。

 涙

背景の宇宙はTinder T_NightSkyとT_Starfeildの2枚重ねと、ガスをSapphire S_cloudで作ってTrapcode Horizonで配置。カメラ連動するエフェクトは結構重宝するのでおすすめです。
レンズフレアはOptical Flaresで位置は目トラッキングで合わせてます。人間の目ってすごいんだぜ。

 オレたちがガンダムだ!

AOっぽいレンダリングの絵になってますが、AEでグローだけです。パーツはOPで使った木緒さんデザインのARiAコンソールを分解して、僕が再構築してます。こういう派手なのは見栄えがよくていいですね。
別コンポで形を作った後にコラップスをonにしてキャラを親レイヤーにしてます。

 
 
といった感じでコンポジットを終えたのが4月末。
リリースの1日前にARiAに関わったほぼ全員が僕の家に集まり、試写をしました。
この時点で全員に見せていたのは尺の半分くらいだったので、完成形を見せるのはこの日が初めて。
実は1カット終わっておらず、そこだけ仮のカットのままの試写でしたが「おほっ」「うわぁ」と驚いてもらえたのを覚えています。試写を終えた後、「大人げないなーすりーぷさん」とか言われました。

その後最後のカットのコンポジットを終え、SEのMixに入りました。

 SE Mix

僕が作っていた基本SEととくさんが作ってくれたSEを取り込み、映像に合わせて調整していきました。
途中までは僕がやっていたのですが、とくさんがオペレートを変わってくれてから劇的にスピードアップ。
さすが現役プロは半端無かったです。最初からお任せすればよかった…
最後にFinal Cut Proで歌詞などを合わせて最終出力、ニコニコ動画用にエンコードしてリリースとなりました。

今回のプロジェクトは色々な偶然と、関わった人たちの遊び心が集まって完成しました。
本当に、本当に楽しかった。
この場を借りて、この機会を与えて下さった超監督とくさんと、ARiAをご覧になった皆様に感謝の意を表したいと思います。

ARiAの全容はまだ明かされてませんが、色々想像して楽しんでみて下さい。
ヒントはいっぱい埋め込んでありますので。

2010年5月17日 sleepwalker

Comments

13 Responses to “Making of ARiA #2”

  1. mirage-k on 2010年 5月 21日 9:49 AM

    もう・・何もかもがすごすぎですw(^ω^)
    アリアたん可愛いですしw(^ω^)
    ニコ動で発見して・・AEかな?どうやって創ってるのかなぁ??と・・
    謎だったところが解明できました☆人´Д`*)ありがとぉ☆

    キャラの変形どうやっているのかなぁ???と謎だったのですが・・
     パペットツールなんて便利な機能があるのですね!☆☆

    髪の毛ふわふわは・・やはりレイヤ分け有りなのですねぇ・・・

    最後に・・はいてない謎がのこりませうw

  2. sleepwalker on 2010年 5月 21日 11:59 AM

    どもですー!
    ありあたんかわいいですよね!

  3. Maki_pa on 2010年 5月 23日 1:33 PM

    背景の3Dとアリアたんのとけ込みが違和感無くて
    通してみても調和があってすごかったです><

    こうして解説して頂けて
    そのあとに再び拝見させて頂いたのですが
    また違った見方ができて面白いですね^^

    はいてないはジャスティス!1

  4. sleepwalker on 2010年 5月 23日 2:40 PM

    ありがとうございます!
    ARiAはいろいろ実験出来たのでたのしかったです。
    楽しんでいただけたのなら幸いです!

    はいてないは正義!

  5. 徒 on 2010年 6月 1日 7:31 PM

    流石にプロの現場で働いてる方々は生半端じゃない・・・
    ということを改めて認識させてもらった動画です。

    いつかここまでのレベルで動画を作りたい!
    と改めて決意もさせていただきました!

    感謝しますw


    どういうエフェクトをどのように使うとか、コツとか、それなりに細かく書いてくださっていて
    読むだけでとても勉強になりました。

    ありがとうございます!

    自分もいつかはいてないキャラ使った動画を作りますねー!

  6. sleepwalker on 2010年 6月 1日 11:54 PM

    ご視聴ありがとうございます!
    はいてない動画期待!

  7. Deep on 2010年 6月 2日 8:41 PM

    Hello~~Love Aria very much~~~

    The scene of the city is 3D,is it made by you?~

    And may i reproduce this blog??I want to share it with others for learning~~~

    Thank you very much~~~~

  8. sleepwalker on 2010年 6月 3日 3:17 AM

    Thank you for watching an animation!

  9. EatApple on 2010年 6月 24日 5:28 PM

    Awesome, thanks for making this.

  10. sleepwalker on 2010年 6月 25日 5:52 AM

    You are welcome!

  11. Edward on 2010年 10月 3日 12:29 AM

    素晴らしい曲とビデオ!HD(720p)のダウンロードが存在するか?ありがとうございました。

  12. ためになりました on 2010年 11月 24日 9:30 AM

    デスクトップ改造用品としてこんなカンジのアイコンとかウィンドウとか作りたいですね・・・。
    デスクトップを擬似XeironOSっぽくしてみたい。

  13. sleepwalker on 2010年 11月 30日 2:06 AM

    あ、いいですねえ。
    デザインは木緒なちさん謹製です。プロい。

Leave a Reply