2019年3月8日
『Blacksad』の分析：ホウエスト大学の学生が UE4 でプレイ可能な 3D コミックを制作
私は DAE に在籍しながら、イラストレーションやディテールにこだわった環境、キャラクターなどさまざまなプロジェクトに取り組んできました。私の作品のほとんどは Artstation のポートフォリオ (https://www.artstation.com/aipapi) に置かれています。
このブログでは、2D グラフィック ノベルを 3D 体験に移行する方法について紹介したいと思います。シェーディング、ジオメトリ、合成、ライティング、ムードなどに関わるテクニックが使われます。コミック ストリップのもつ雰囲気や環境の再現を中心的に取り上げます。概して有効であれば、複数の環境に適用できることが分かりました。
このブログは、Unreal Engine で作成された短くも没入感の高いゲームである、私の卒業プロジェクト『Blacksad』に基づいています。 楽しい読み物になれば嬉しいです！
最初のステップ
最初の一歩は、3D で再現するグラフィック ノベルを選定することでした。私が選んだのは、Juan Diaz Canales 作、Juanjo Guarnido 画の『Blacksad』でした。ストーリーが非常に個性的だからです。このノベルのスタイルは、ライティングから環境に至るまできわめて魅力的です。そのため、この作品に取り組まないわけにはいかなかったのです。ノベルを選択した後は、完全な分析によってそのスタイルとディテールを理解する必要がありました。私の主な課題は以下のようなものでした。- どのような素材が使われているのだろうか？
- 線画はどのように描かれているのだろうか？
- 物 (オブジェクト) やキャラクターはどのように描かれているのだろうか？
- ライティングはどの様になっているのだろうか？
- ムードは全体的にどのようになっているのだろうか？
- 色は全体的にどのようになっているのだろうか？
- シーン内でフォーカスはどこに置かれているのか？
- スケールの違いはどうなっているのか？
全般的な分析
環境 1 の分析
環境 2 の分析
環境 3 の分析
上記の画像をご覧になるとお分かりになるように、ディテールは全般的に以下のものから構成されています。
- 粗い黒の輪郭
- 全体に及ぶ粒子的な効果
- キャンバス地の環境
- 水性絵の具の効果/しみ
- 暖色＋青み
- 同系色のカラーグレーディング
- 加工せずに描かれた影
- スケッチ的な描線
再現するためのシーンを選ぶ際に私は、見通しが良くてストーリーが分かるようなシーンを探しました。完璧なショットを見つけるために、次のようなことを気に留めました。
- 何が起きたのか？
- 見ていて面白いものか？
- 現在表示されているものを発展させることができるか？
- 再現する際にどのような選択肢があるか？
オブジェクト
このプロジェクトを開始するにあたっては、まずオブジェクトに焦点を当てました。オブジェクトはどのシーンの基礎にもなっているので、これから手をつけていくのが妥当でした。私が選択したシーンは、ディテールに豊んでいて、オブジェクトがぎっしり詰まっていました。シーンのほとんどはオブジェクトをコピーペーストしていましたが、それでも各シーンのオブジェクトにはかなりのバリエーションがありました。大体 30~40 個のオブジェクトが置かれていて、その多くは使い回せるものでした。最初に何をすべきで、どのようなモデルが必要になるのか判断することが、最初から何よりも大事でした。各シーンを分析することには時間がかかりますが、一旦シーンを理解してしまえば、速く結果を得ることができるものです。
たとえば、上の画像には作成し直すオブジェクトがきわめて多くあります。頭が混乱してしまうほど多数あります。それでも、このシーンを分けて考え、コピーペーストすべきものについて検討していくと、作業は格段に速くなります。
結局のところ、それぞれのオブジェクトのサイズの違いとスタイルについても分析する必要があります。先のスタイルガイドを見ると、それほどスタイルがあるようには思えないかもしれませんが、輪郭で若干強調されている部分もあるのです。たとえば、イスの脚は本体に比較すると少し短くなっています。また、本来曲線がないオブジェクト (たとえば本棚) にも曲線があったりもします。全体的には、これらのオブジェクトは比較的リアルに表現されていますが、多少のスタイルがともなっていたのです。
最初このプロジェクトを始めたころは、一つの環境だけを作ってみようと考えていました。しかし、予想よりもはるかに迅速に事が進んだため、さらに多くの環境を作るようになり、最終的にはプロジェクトを没入感のある短いゲームにすることができました。環境が多くなればオブジェクトも増えます。すべてのオブジェクトの準備ができた時が、シーンを作成する時となりました。
設定
始めて 2 週間 (合計 6 週間のうち) はすべての形と比率を整え、全体的に整合性をとるようにしていました。最初の環境に着手したとき、The Office (上記画像) は困難をきわめました。新しいシーンの作成を開始するときはいつも大変です。正しい部屋のサイズを計算しなければならないのですから。これを適当にやってしまうと、後々シーン内のあらゆるものがしっくり来なくなります。全体的なスケール調整を終えると、ディテールをすべて投入してシーンの見栄えを整えていくことができます。ただし、このプロセスにおいてもオブジェクトと部屋の比率をエンジンで終始調整する必要があります。
環境 1
これが初めての環境であったので、すべてを構築するためには時間が少し長くかかりました。この構築作業にはブロックアウトの (基本的な構成を組み立ててみる) 工程が含まれています。その工程では、BSP による雛形、基本的なライティング、重要なオブジェクト、適切な設定値の調整、比率の検討などに取り組みます。この環境は、他の環境のための基礎にもなるため、これを適切に調整することがきわめて重要となります。
環境 2 および 3
第二、第三の環境は、最初の環境を土台にしたため、かなり速く作成することができました。実際、多くの構成要素が再利用されました。オブジェクトと部屋のレイアウトを再調整することによって、まったく新たな環境を簡単に作成することができるのです。
連結部
環境が複数できたため、連結部を作って異なる部屋に切り替わるようにする必要が出てきました。最初のシーン (The Office) は、参照資料 (原作) で分かるように、アパートの中にあります。そのため、この部屋を玄関ホールとつなげるというアイデアが浮かびました。この玄関ホールは古いアパートにあるような感じにしようと思いました。物悲しげな感じのシーンに合うからです。シーンを切り替えることによって、アパートの部屋が切り替わるように感じられ、ストーリーがつながるようになりました。
最終的な結果
各部屋からは、その部屋のもつストーリーと雰囲気が伝わってきます。
スタイル (シェーダーとマテリアル)
メインのアウトライン シェーダー
シェーダーは大変でした。私はこのプロジェクトのために、各シーンで使うことができる一般的なものが必要でした。都合がよいことに、このグラフィック ノベルに入っている画像のほとんどは同じような「雰囲気」をもっていました。ただし最終的には、簡単に調整できる適切なグラフィック スタイルを実現するために、さまざまな種類のシェーダーが必要となります。一つの大規模なシェーダーを使うのではなく、実際は複数のシェーダーを使うことになります。絵にたとえると、層ごとに、少しずつ作業を行うことによって、望ましい結果を得るような感じです。最終的には次のような構成になりました。
- メインのアウトライン (輪郭) シェーダー
- 絵の感じを出すための画像の重ね合わせ (これは、スクリーン上でテクスチャどうしを重ね合わせることを指しています。)
- カスタムのリアルタイム シャドウ
シーンのラフなブロックアウトが完了したので、アウトライン シェーダーを調整することによって良い仕上がりとなるようにしていました。最初はスムーズに運んでいたのですが、一つ問題が起きて作業が止まってしまいました。オブジェクトのアウトラインが表示されているものの、それはシルエットだけであり、内部の細かいライン (そのオブジェクトの中にあるディテール) が表示されていなかったのです。つまり、あるオブジェクトを別のオブジェクトの上に置いても、小さい方のオブジェクトのアウトラインが表示されないことになります。たとえば、大きなカーペットがイスの下に敷かれている場合、カーペットのアウトラインしか表示されないことになります。
最初の下絵
アウトラインが BSP の壁にだけ表示されていること、オブジェクトの内部のディテールがすべて無視されていることに注目してください。
二番目の下絵
すべての輪郭線が適切に表示されるようになりました。解決策は下記に記しました。
この問題は、一つの単純な設定を変更するだけで修正できました。
上図がアウトライン シェーダーを作っているメインのポストプロセス マテリアルです。このマテリアルには、カメラにより近いところでアウトラインを作成するために距離のマスク (赤枠の部分) が置かれていますが、そのせいでうまくマテリアルが機能していませんでした。これを削除するこによって、問題はすべて解決できました。
アウトラインを作るには、シーンの深度を検出することによって、シーン内のオブジェクトのアウトラインおよびシルエットからのベクターを表わす必要があります。
このことに関する詳細な情報は、以下の動画で得られます。
UE4 Tutorial – Toon Shader, June 4 – 2018 How to Outline Objects – UE4’, October 22 – 2017
アウトラインがない場合
絵画のような雰囲気に注目してください。
アウトラインがある場合
すべてのものに段々まとまりが感じられるようになりました。
最終的に私はビジュアル的に強力で頼りになるシェーダーを得ることによって、シーンを変換し、そのクオリティを向上できるようになりました。上の画像は、このシェーダーの目的と、プロジェクトにとってそれがいかに重要なものであるかを示しています。
このシェーダーがない場合は、絵画のようになって (ベースとしては良いです)、シーン内のオブジェクトがすべて溶け込んでしまいます。シーンの様子を把握することはその分難しくなります。逆にシェーダーがあると、シーン内にディテールがより多くもたらされて、シーンは把握しやすくなります。
インタラクト可能なオブジェクトのためのアウトライン シェーダー
プロジェクトを小規模なゲームにしたため、私は、プレイヤーをストーリーに引き込むために多くのディテールをプロジェクトに組み込む必要がありました。たとえば、環境内でインタラクト可能な構成要素やオーディオ、VFX、アニメーション、ストーリー要素などです。プレイヤーはシーン内で特定のオブジェクトをクリックすることによって、インタラクトできるようになります。中には、カメラにゆっくりと近づいてくるので、その軸を中心にして回転させることによって綿密に調べることができるオブジェクトもあります。これらのオブジェクトにはアウトラインが付きます。クリックするとカメラに近づくので、再度同じボタンをクリックするまでは回転させることができます。
この仕組みの詳細には踏み込みませんが、すでにあるチュートリアルに基づいています。以下を参照してください。
How to create an outline effect through Post Process:
http://www.michalorzelek.com/blog/tutorial-creating-outline-effect-around-objects/
Unreal Engine 4 – Zoom and Rotate Object
https://answers.unrealengine.com/questions/543371/rotating-an-object-relative-to-the-first-person-ca.html
カスタムのシャドウ
私が使ったカスタムのシャドウ シェーダーは、微妙なものでありながら非常に強力なものです。これがなければ、各シーンは特別な雰囲気を醸し出すことが難しかったはずです。シーンはこのシェーダーによって良いバランスで支えられているのです。基本的には、カスタムのマスクを使ってオブジェクトのシャドウを変更しています。ライトが当たると、粗野なエッジがビジュアル的に魅力的であるシャドウが追加されるのです。また、このシェーダーによって、シーン内の AO がもう少し劇的かつ極端なものになります。その範囲が広がり、オブジェクトの周りに AO ができています。最後に、カスタムのシャドウのおかげで、シーンおよび動くライト/オブジェクトがより生き生きとしたものになりました。これは、ライトやキャラクターの位置などに応じてシャドウのサイズを増減させることによって可能になりました。下図は驚くほど簡単なポストプロセス マテリアルです。
下の GIF のさらに下の画像では、ライトが当たり、ヒビが割れたり不均一なシャドウができています。また、さらにその次の画像では、オブジェクトの周囲に AO がかかっています。シーン内を歩き回ると、それらのシャドウがまるで水のような流れるように見えます。面白いことに、このエフェクトは意図して作ったものではありません。単なる幸運な偶然によってシーンがこのようにユニークなものになったのです。
画像の重ね合わせ
シーンで絵画のエフェクトを出すためには、微妙な画像の重ね合わせを組み合わせることによって、より汚れたエフェクトを出す必要がありました。この手法をマテリアルやポストプロセス、シャドウ、ライティングと一緒に合わせることによって、望ましい出来映えを得ることができました。
上図では、シンプルな汚れの画像が文字通り画面全体に置かれています。ただし、一つの画像を置くだけではいけません。それを微妙な具合に構成する必要があります。そうでなければ、画面上に画像を単純に配置しただけであることがあからさまになってしまいます。この画像は Dirt Mask と相性がよいです。
画像の重ね合わせによって、シーン全体が少し粗い感じになります。次の画像で壁やオブジェクトを見ると、その効果が分かると思います。
先に述べたように、これらはすべて微細で微妙な変化なのですが、それらが一体となって完璧な効果を生み出し、説得力のある出来映えに寄与しています。(デモ動画をご覧ください。)
マテリアル
マテリアルはかなり簡単に処理できました。それぞれのオブジェクトにはマスターマテリアルのインスタンスを使いました。これらのインスタンスは、単色のシンプルな色にすぎず、必要に応じてタイリング可能なテクスチャを使って調整できるものです。このテクニックは、オブジェクトそれぞれのために手描きでテクスチャを作成する代わりに用いられました。手描きでテクスチャを作成すると、時間がいくらあっても足りなくなるからです (オブジェクトがあまりにも多いため、一つずつテクスチャリングすることは無理です)。確かに、手描きすると特色あるものが作れますが、先に挙げたような色とポストプロセスを利用することによって、より効率的に素早く作成することが可能になるのです。メインのマテリアル
マテリアル (色) の有無による違い
ライティングとポストプロセス
正しいライティングを行うことは本当に大変です。基本的なディレクショナル ライトだけではなく些細なディテールに関わるもの (ランプやキャンドルなど) まで扱う必要があり、ライティングをすべて設定することには多大な労力がともないます。先の参照資料をご覧になっていただければ、環境の中心となるトーンが常にミステリアスなものであり、暗く物悲しく、煙で白っぽくなっていて、それらと対照的な強力なライトが際立っていることが分かります。最初の環境は、よりミステリアスでありながらも幾分魅惑的なものにする必要があったため、暖かめで白っぽいトーンにしました。
ライティングは以下のように徐々に組み上げていく必要もあります。
シーンにもっと趣をもたせるために GodRay というマテリアルを作りました。強いオレンジ色をともなうので、シーンにアクセントを付けることができました。 このゴッドレイは、同様に強いオレンジ色が映えるサブのライト (ランプやキャンドルなど) と一体となって、シーンのビジュアルを格段に魅力的なものにしてくれました。
ゴッドレイ自体は、メッシュ (円錐) とその上に貼られたマテリアルからできています。このマテリアルはシーンと調和するものであり、パンします (ある方向に向かって画像が動くように見えます)。また、カスタムのリアルタイム シャドウに対して反応することによって、それらを動かすことができます。
また、各部屋には固有のポストプロセス ボリュームが備わっていて、シーン内の雰囲気を変更することが可能です。たとえば、プレイヤーがある部屋に入ると、ライティングと色が変化するかもしれません。各部屋にはそのための一定の領域があるからです。プレイヤーがこの領域に入ると、その環境が変化することになるのです。
あらゆるものがリアルタイムになっているため、メインのライティングもサブのライトも可動式になっています。
下の画像からは、ライティングとポストプロセスをいくらか設定するだけでもプロジェクトの水準が上昇することが分かります。
没入性
サウンド
オーディオのほとんどは、FreeSounds.org からダウンロードしました。各シーンには固有の「人格」があり、その雰囲気を築くためにはサウンドが大量に必要となりました。その「人格」とは以下のように表現できます。環境 1 (オフィス): 物悲しい、暗い、ミステリアス
環境 2 (Blacksad のアパート内の殺害現場): 明るい、動転、不吉
環境 3 (Ivoc Statoc のオフィス): 惑わし、不安、暗い
私は原作のコミックを独自に解釈してオーディオを選択しました。
雰囲気を醸し出すためには、オーディオ キューを使う必要があります。プレイヤーが部屋に入ってコリジョン ボックスに踏み込むと、それが特定のサウンドのトリガーとなります。一定の距離からしか再生されないサウンドもあります。たとえば、窓に近づくと通りの音が大きく聴こえるようになる例が挙げられます。
黄色いボックスのいくつかはプレイヤーがそこに入ると特定のサウンドをトリガーとなります。他のボックスに入ると、プレイヤーがインタラクトできるようになります。たとえば、ランプのスイッチを入れるなどです。
ご自分で実際に体験するには、フルのデモ動画をご覧になるか、ゲームをプレイしてみてください！ (ゲームは私のポートフォリオで見つけることができます)
Portfolio: https://www.artstation.com/artwork/Bm1yQ8
Video: https://www.youtube.com/watch?v=_VZfcK9Rp1A
ストーリー
ストーリーは、環境を補完するプロジェクトの特別な要素です。グラフィック ノベルのテキスト部分をシーンに組み入れることによって、環境の中で見る者を引き込み、ストーリーに興味を引き起こします。ダイアログ ボックス (コミック本の中で見られるようなものと同様のもの) には特定の部屋に関する特別な情報が表示されます。それによって、プレイヤーは手がかりを探し続け、環境をさらに探索する気になります。各部屋で起きたことについてさらに知りたくなるのです。実装はオーディオ キューと似ています。シーン内に置かれたトリガーボックスによって、コミックストリップのように (下の画像をご覧ください) テキストブロックが画面上に表示されます。
VFX
シーン内の VFX はそれほど徹底的なものではありません。メインの VFX は煙 (タバコ、ミスト、スチームなど) や火、その他のディテールです。この様式化された煙は、GodRay マテリアルが使われている雲のようなメッシュから作られているため、透明でモヤがかかったような状態にできます。この煙は、パーティクル システムの中に置かれます。
ミストに使われる煙も、flipbook の画像 (単一の画像で表現されるアニメーション) を使うパーティクル システムです。遠くからも見えるミストが表現されています (例は、シーンの玄関ホールで見られます) 。
シーン内の火は、マテリアル内で変形する画像にすぎません。火のゆらぎは、特定の画像の上でノイズ テクスチャ (UV Distortion のためのもの) をパンさせることによって実現しています。詳しくは下のブループリントをご覧ください。
最後に
ポストプロセス シェーダーと画像の重ね合わせ、ライティングを利用するだけでも、様式が備わった好みの環境をかなり速く作成することができます。確かに、元の画像を 100% 表現することはできないかもしれません。そのためには、シェーダーにかなりの労力を投入しなければならないからです。完璧に近い結果を求めるならば、グラフィック ノベル アーティストのようにシーンを手描きしていくことになるのでしょう。しかし、それに要する時間は格段に増えてしまいます。ご自分の目標がシェーダーを使って全体的なエフェクトを作るということなら、その作業速度はおよそ 3 倍になります。私の卒業制作で証明されたように、グラフィック ノベルを模した小規模なゲームならば比較的短期間でできます (私の場合は 6 週間でした)。そのようなエフェクトによって、各環境に合わせて調整することが可能な外見を作ることが可能になります。マスクをかけたマテリアルで画像を変更するだけで多数のバリエーションを作成することができるようになるからです。
もう一つアドバイスを差し上げるならば、プロジェクトの分析は時間をかけて徹底的に行うことが大切です。絵画を描くように微妙な層を積み上げていき、互いを補完し合う小さなピース (シェーダー、ライティング、色、VFX、汚れ、ゲームプレイ、インタラクションなど) を作ることのほうが、一つの大きな要素に注力するよりも大事です。参照元で表現されているものを作成する場合 ― この例では、3D グラフィック ノベルを UE4 で作成しています ― ピース毎に行うべきでしょう。
プロジェクトはとても楽しいものでした。このブログがお役に立てれば本当に嬉しいです。
私の作品をもっとご覧になりたい場合や、メッセージを伝えたい場合は、下記から私と連絡を取ることができます。
ArtStation
お読みいただいて、ありがとうございました！