2Dゲームのリッチなビジュアル
ずいぶん前になりますが、オクトパストラベラーが発売されたとき、「3Dは技術的な手段でビジュアルをリッチに見せる方法がたくさんあるけど、2Dゲームのビジュアルを技術でリッチにしてるのってあんまり無いのでは・・・？ 」と、技術需要が発生しそうな匂いを感じたので研究しはじめました。
調べたらすでに結構そういうゲームはあって無知を知る結果にはなりましたが、じゃあ「その実現方法わかる？」といわれると微妙なところだったので、研究を継続することに。
まずは 市場の絵が綺麗なゲームがなぜ綺麗に見えるのか？ を言語化して、関連してそうな技術を洗い出しました。本記事はそのまとめです。
備考
2Dゲームのビジュアルクオリティを支えるものには２つの要素があると思っています。
- イラスト自体の美麗さ や 手付けのリッチなアニメーション など、デザイナーさんの努力によるもの
- フィルター や ライティング 、フレーム補間 などの技術によるもの
前者も勉強しがいのある領域ではありますが、切り離して考えないとややこしくなるため本研究の対象外としています。
分かりやすいものだと、例えば CUPHEAD はフィルム風のノイズフィルターなどの技術的な手法が使われているものの、基本的には 圧倒的な枚数のアニメーション と こだわりぬいたテイストのイラスト によってそのクオリティが支えられています。とてもリッチで真似したい2Dグラフィックなのですが、こういう手段で築き上げられたクオリティは生半可な技術の及ぶところではないので、本研究では触れてません。
エンジニア的に貢献できそうな後者に注目していろいろ調べました。
絵づくりの技を盗みたいゲーム
具体的にどこが綺麗かを言語化＆それを実現するのに使えそうな技術を書き殴ります。
オクトパストラベラー
今回の研究の発端。
「2Dスプライトのドット絵のキャラを3D空間で動かす」というのはゼノギアスとかペーパーマリオとか色々前例が思いつきますが、オクトパスは ポストエフェクト や ボリュームライト などをふんだんに使って 光と陰影を感じる空間 を実現しています。
【ポイント１】Lightの反映
言うまでもない点ですが、各キャラクターが発生したエフェクトや手に持ったランプなどの光を受けて、
- スプライトの シルエットの影 ができる
- スプライトに 光の色が反映 される
- 光を受けた時、輝度が高いと Bloom によってボケる
というような効果を生んでいます。エフェクトの輝度やBloomの強さはかなり大げさになっていて、ちょっとした変化でも一目に光の影響が出ていることがわかります。（いい意味でわざとらしい）
【ポイント２】焦点距離によるボカし
Depth Of Field によって焦点範囲外のオブジェクトに強くピンボケをかけていて、奥行きを感じやすいです。
焦点範囲を狭めにしているようで、ちょっと奥にオブジェクトが離れるだけでボケが入り、画面に映る範囲が狭くても空間感を感じます。
【ポイント３】ボリュームライトによる空間表現
ボリュームライトとは、本来見えない光の形が、霧やホコリによって見えることです。（参照）
上図では、崖の隙間から指す光が見えることで、奥行きを感じられるようになっています。この表現があることで影やオブジェクトの色味とは別に光を感じることができ、リッチな印象を与えています。
Unityでのボリュームライト表現は Aura – Volumetric Lighting が素晴らしいという噂。
The Last Night
クオリティが変態すぎる。 今回の研究で目指す方向の極地。
オクトパストラベラーでやっている技術は軒並み使われていそうなので、それ以外のものをピックアップします。
【ポイント１】ドット絵の陰影に光を反映
上の図では家屋から漏れるオレンジ色の光を受けて、背中や頭のフチがドット絵でリムライト（逆光によるフチの着色）っぽいデザインになっていますが、雷？が光ったときにそのリムライト部分の色が変わるだけでなく、ドットの領域が ドット単位で 広がっています。
形状を持たない2Dの絵にこういう表現をするのはかなり特殊なことをしないといけないはず で、かなり特徴的です。
こういうことをやっているんでしょうか？調査＆検証中…
▲めっちゃカッコいい
【ポイント２】画面手前へのボリュームライト＋リッチマテリアルの地面
地面のマテリアルの ノーマル（凸凹） や スペキュラー（照り返し） が繊細。
ボリュームライトで画面手前を照らす絵が多く、その際の地面の照らされ方が全体のドットデザインとは逆にリアル指向のビジュアルで、それが結果的に 画面の奥行きを生んでいる ように見えます。
その他注目ゲーム
-
Hollow Knight
- Unityに公式に紹介されるクオリティ
- 何層にも分けたレイヤーによる多重スクロール で奥行きを感じます
- Bloomで全体的にボヤっとした雰囲気
-
幻想郷萃夜祭
- クリエイティブのクオリティに由来するところもあるけど、エフェクトが綺麗。
- Bloomが良い感じに反映 されていて、東方原作の弾幕の華やかなイメージが落とし込まれています（色使いがカラフルなのに雑多に感じなくて凄いなぁ）
-
Legend of Dungeon
- 3Dのキューブ？で床と壁を置き、そのうえで動くキャラクターの影や配置された光による陰影を反映している
-
Ori and the Blind Forest
- 背景がほとんど2Dスプライト…？の割には光がすごく凹凸を感じる反映のされ方をしている。要調査
検証する技術リスト
ここまでの調査をもとに、関連してそうな以下の技術を組み合わせて今後いろいろ試してみたいです。ひとまず今回はここまで。
1. スプライトに光の影響を与える
- Sprite RendererでLightを使う - (:3[kanのメモ帳]
- PostProcessing でBloomかけるとどうなるかな？
2. PixelPerfectでドット絵感出す
- ピクセルパーフェクトなスプライト表現する - テラシュールブログ
- アニメーションと組み合わせるといい感じ：https://twitter.com/notargs/status/1132561608759103489?s=20
3. SpriteにLightで陰影をつける
4. ボリュームライトで空間感を出す
5. スプライトのいろんな特殊効果当てる
2019/08/27 続編記事 出しました
ドット絵のキャラクターを自然に3D空間に馴染ませるテクニック https://t.co/juxESYa1sE #Qiita pic.twitter.com/WnlyWOtoRn
— 徳川バガ寅 (@flankids) August 26, 2019