読者です 読者をやめる 読者になる 読者になる

エディトリアルデザイナーのアプリ制作日記

Unityで遊ぶ個人開発者のメモ書き

Unityアクションゲーム制作記 その15 オープニングを作る

youtu.be

 さて、ゲーム本体のシステムも作り終えないうちに、どうにも煮詰まってしまって気分転換にオープニング映像を作り始めてしまいました。 とはいえ、映像制作なんて、Live2D Creative Award 2016用に応募用に作ったくらい。どう手をつけようかなーと悩みましたが、まずは「なにをやりたいか」を明確にして、映像のイメージを膨らます作業から始めました。

1)音楽との連動

 目指すはBGMとの完全同期……なんてことは、これっぽっちも思わず、要所要所でカットの切り替えをしたりして「なんとなくそれっぽい」風に見えればいいやー、ということを目標にしました。

2)アングルとカメラワークを可能な限り単調にしない

 使おうとしていたBGMが約80秒で、ちょうどテレビアニメのオープニングくらいのサイズ。個人的にもよくアニメは見るので、記憶にあるいい感じのオープニングを思い出しつつ、アクションゲームらしい見せ方にこだわる方針に。

3)UnityエディタとDOTweenとTypeface Animaterと少々のスクリプトでなんとかする

 こういった映像を作るためには、それ専用のタイムラインエディタを使うのが筋です。しかし、ツールを覚えるのも面倒だし、80秒くらいならTween系でなんとかなるだろうということで、Unity エディタのシーン上にオブジェクトをぽちぽち置き、カメラやオブジェクトの制御はDOTweenとスクリプト、クレジットなどの文字の演出はTypeface Animaterでゴリゴリ作っていきました。

 まぁ、「とりあえずやってみよう! 無理だったらちゃんとツールなり導入する」という、いつも通りの見切り発車スタートってことです。

・まずは絵コンテを作る

 映像制作に慣れているプロならともかく、どう見せたいかもわからない素人がツールも使わずにやるわけですから、それなりに作りたいものをきっちり書き出しておく必要があります。要するに絵コンテというやつですね。その試行錯誤の結果がコレ↓

f:id:hamazakifactory:20170114193658j:plain

 音楽と映像の流れをそれっぽくということで、フリーのサウンド編集ソフトであるAudacityで表示される曲の波形を縦軸(時間)にして、時間ごとにどのようなカットを再生するかをゴリゴリと記入していく超アナログスタイル。前半はプレイキャラのFayeとアクションをじっくり見せ、後半にゲームの魅力となる敵とのアクションをモリモリと入れ込んで行こうという方針にしました。

 ちなみに使用ツールは、illustrator(笑)。仕事で使い慣れているので、手で書くよりはいろいろ楽かなーというだけの理由です。

・Unityエディタに落とし込む

 ここからは力技。絵コンテに書かれたカットごとに見せるオブジェクト、カメラ、ライト、キャンバスを作ってシーン上に配置していきます。再生時には、指定された時間に再生したいカットの親オブジェクトをアクティブにしていくだけ。もちろん、カットごとに使い回せるモデルやカメラ、ライトを置くのは、はっきり言ってメモリの無駄です。しかーし、今回はそういう細かい事(?)は気にせず突っ走ることにしました。

f:id:hamazakifactory:20170114202332j:plainf:id:hamazakifactory:20170114203230j:plain

  ちなみにモデルで使っているシェーダーは、標準のUnityChanシェーダーです。ただ、単色のイメージにするため、テクスチャをグレースケールにしてあります。この状態で、カメラのBackGroundとDirectionLightのカラーを一緒にすると、今回のようなイメージになります。

f:id:hamazakifactory:20170114204940j:plain

 ただ、目だけはオリジナルのモデルの色を残したかったので、目のメッシュだけに当たるように専用のライトを用意して、体に当たる色とは別になるようにしてあります。

f:id:hamazakifactory:20170114205658j:plain

コンポーネント(制御スクリプト

 ここも単純に、移動する、アニメーションを再生するといった、単機能のものを対象のオブジェクトにペタペタ貼り付けていくスタイルでごり押し。例えば、カット再生開始後にwaitTimeだけ待ってからアニメーションさせたい場合は↓のようなスクリプトを対象オブジェクトへ貼り付けます。

f:id:hamazakifactory:20170114210145j:plain

 ちなみに同カット内で連続的にアニメーション再生させたいときには、もう1つくっつけて、開始時間と再生アニメーションの名前を入れていく……。

f:id:hamazakifactory:20170114210544j:plain

  ……バカですねぇ。それでも、前半まではオブジェクトの数も少なく、複雑なカメラワークもなかったので良かったのですが、後半のバトルシーン的なものを作りたくなってからは地獄でした;; とはいえ、半分まで作ってしまったものですから仕方ない。後半も泣きながら突っ走りましたヨ。

・結論 ちゃんとしたツールを使おうぜ!

 クオリティはとにかく、なんとか無理やりにでもやりたい事を詰め込んだオープニングができました(10日くらいかかったのかなぁ)。作ってみてわかったことが一つ。「こういった映像系のものを作る時には、ちゃんとタイムラインエディタを使いましょう」です(当たり前だぁ)。今回の方法は、とにかく編集・調整がしにくいのが問題ででした。何度ぶん投げようかと思ったことか……(80秒って意外と長い)。次にやるときは、ちゃんとやります、きっと……さて、気分転換も済んだし、ゲーム本編を作らなきゃだ。がんばろ。

 

>OPでとてもお世話になったアセット(モデル・エフェクトは除く)

・Fire Music Pack

https://www.assetstore.unity3d.com/jp/#!/content/61607

 ・DOTween

https://www.assetstore.unity3d.com/jp/#!/content/27676

・Typeface Animater

https://www.assetstore.unity3d.com/jp/#!/content/37445