「Technical Art of STREET FIGHTER V」レポート

『UNREAL FEST OSAKA 2016』に参加してきました！
非常に充実した講演内容でした。

講演の中から、資料等が公開されないっぽい（？）2つのセッションについてメモしたものを記事にしておきたいと思います。
まずはストＶの講演から。

Technical Art of STREET FIGHTER V

講演者：亀井敏征さん
ゲーム業界16年　TA/ArtDirector

◆はじめに

TAとUE4はとても相性が良い
3年から4年いかないくらいの期間、業務で使っている
目標・イメージからゲームを開発する　‥がゲームに落とし込めないことがよくある
仕様が決定していなくてもやもやしていることが沢山ある
目標となるイメージ ⇒ もやもや ⇒ インゲームのイメージ
このもやもやを取り払うことができた

もやもやを取り除くのがTAの役割り
実現手法の提案　こういう技術がある　シェーダーはこう組んだ方が良い
アセットのパイプラインの提案など　具体的に提示

UE4はTAだけで問題解決できたり実現手法の提示ができる　TAと相性が良い

◆アジェンダ　3部構成

TAに興味あるアーティスト向け

1「目標」
　高い視認性
　個性的な絵作り

2「実現手段」
　キャラ
　背景
　カメラ
　ライティング
　ポストエフェクト

3「まとめ」

1「目標」

2つのキーワード

「高い視認性」
ハッキリしたシルエット　筋肉もりもり
大げさな表情　大笑い、すごく痛そう　意図的にやっている

「個性的な画作り」
速いゲームスピードの中でいかに情報を分かりやすくユーザーに与えるか
画面写真を見ただけで「あ、ストVの絵作りや」と思ってもらえるようにする
差別化　独自の絵作り

◆高い視認性

キャラクター ⇒ 状況をフィードバックするため記号として存在する
最速の攻撃　3/60フレームでもわかるシルエット　ちょっとくらい大げさな方が良い
ゲームから状況のフィードバック ⇒ 脳みそで判断してコントローラーで入力 ⇒ ゲームに反映‥の繰り返し
格闘ゲームのビジュアルは数フレームでの攻防の分かりやすさ
高い視認性は格闘ゲームとしてはマスト　必須条件　非常に大事

◆個性的な絵作り

世界中のフォトリアルな絵作りのタイトルとは差別化する　埋もれないためのNPR
そこについて一瞬でチーム内で納得した
NPR選択の理由はもう一つ
タイトルの系譜　歴代のアート（あきまんさん西村キヌさんなど）を大事にする

2「UE4を使っての実現手法」

UE4の使用バージョンは4.7.6

◆キャラクター

キャラアートについて　NPR　油彩＋リッチなライティング
60fpsでも落とし込めるもの

ライトベクトルとポリゴン法線の内積　DotProduct　一般的な手法　‥に一工夫
この一工夫で独自の絵作りになる
境界を分けて二値化する
UE4はディファードなのでライトベクトル使っていない
BP使って疑似的にライトベクトルを割り出してマテリアルで利用する方法
うまくいったが　それぞれのライトからベクトルを出すと嘘だと分かってしまう
ライトプローブの要素も考えると破たんする
これはお蔵入りになった

結論：マテリアルでは複雑なことをしない

（以下は実際にUE4上で中国ステージを表示しながら解説）
switchパラメータで機能を切り替えているだけ
ノーマルもそのまま繋がっているだけ
アルファマスク、スペキュラもそのまま
フェードはキャラの点滅などに使う
いくつかカラーを設定できる　キャラのカラーカスタマイズができるようにしている　4色　色の乗算で設定
カラーマスクテクスチャで領域を分けている
シンプル　何か特別なことはやっていない

NPRについて　絵画やイラストを見直してみて要素を切り出した
1 タッチ
2 エッジ・色境界の協調
3 色・彩度のコントロール

筆のタッチ
ノーマルマップへのタッチ追加
ライトの当たっているところ、当たっていないところにタッチが出にくい
でこぼこしているところにタッチが出やすい
実はスト4でもやっていた
ノーマルマップに対してPhotoshopのちりめんじわをかけていた
すると陰影にタッチが乗る
実は問題が1つある
スト4 ⇒ 5でテクスチャサイズが大きくなったことでフィルタが乗らなくなり解決が必要に
ノーマルマップをTangent SpaceからObject Spaceに一旦変換
するとグラデーションが出るのでフィルタがかかりやすくなる
その後さらにTangentに戻してUE4で確認
油彩や水彩フィルタはサードパーティ製「SnapArt4」を導入

豊富なフィルタと自由度　キャンペーン中だと安い　1万円以下
細かいものから粗いものまでいくつかのパターンを用意
それを体の部位によって使い分けている
　一番細かいのは顔だけ
　ちょっと粗いのは体
　さらに粗いのは服
　一番粗いのはアクセサリ系

合成ルールは絵的に見えるのを重視　イラスト　顔は密度が高く繊細
顔から離れるほど粗く描くことが多い　視線誘導している
リュウの顔や腕　見せたい場所が細かい
ノーマルもそうした　顔に視線誘導させるのも狙っている

◆背景（ステージ）

ドット絵時代の絵作りを参考にしている
一番分かりやすいのはストゼロの背景　奥行きがあるように見せるために色の管理をしていた
キャラはすごく明るい　彩度高い　背景は色を落として雰囲気重視　キャラが分かりやすい
（キャラと背景のヒストグラムを表示して解説）
背景は色のレンジが狭い　背景は真っ黒真っ白は全く使っていない
ドット時代は厳密にルール化されていた
副産物としてキャラの周りの彩度が落ちることで、対比でさらにキャラの彩度が上がって見える
ヒストグラム調整のためUE4のカラーグレーディングを改良
Multi Color Grading ON
OFFだとライティング的には正しいが数フレームを争う格闘ゲームでは視認性が低い
Lookup Table（LUT）
ステージの前後左右で4つのLUTを使い分けが可能
ステージ左右での屋内、屋外の違いにも対応可能
UE4でもその様子を紹介
マテリアルの紹介　近景用のLUTブレンドを3つまでブレンド
遠景用も3つまでブレンド　それをさらにLerpでブレンド
実はSwitchでLUT3つ使うかどうか切り替えられる
ただしフルで使うと若干処理負荷が上がる
0.2msなどだが60fpsには大きいので背景ごとに使うか選べる

◆カメラ（画角）

キャラクターが画面端に立つと画角の影響で歪んで見える
そうすると見た目とコリジョンが一致せず分かりにくくなり、遊びで言えば迷い易くなる
画角に合わせてキャラの頂点を疑似的に画角と逆に補正を入れている
Fix Projection　最大限までかけると画角の影響が消える　0～1の範囲で指定
0は補正無し　1だと立体感が無くなる
立体感が完全に無くなると3Dのゲームでは勿体ない
結果、製品版では0.5でいこうとなった
立体感とコリジョンの分かりやすさの両立ができた
Fix Projectionマテリアルを設定したキャラだけに影響がある
キャラを真上から見ると四角が台形になるイメージ　並行投影みたいに見える
当初マテリアルファンクションでアーティストが模索
台形補正のみのマテリアルファンクション
当たりが見やすくなるというのが試してすぐ分かったのでプログラマに渡して実装してもらった

◆エッジの強調

RGBの差が大きいところに色を載せる「Edge Filter」
全く同じ絵で左右に任意のピクセルをズラしたものを二枚
Aは n pixelズラしてBは -n pixelズラしたもの
Bは-1乗算して反転　AとBを加算すると差分が取れる　つまり輪郭検出ができる
左右にズラしたものだけでなく上下にズラしたものも用意　これをさらに加算する
出来上がった絵に対して任意のカラーを乗算（ここでは赤くした）
結果にOneMinusをかけて反転（緑になる）
それを元の絵（シーン）に対して減算することで赤いエッジが載る
「SS Subtract」
エッジ専用のマテリアル（実際にマテリアルの中を見せながら解説）
かなりシンプル　最後のDotProductは線をはっきりさせるためにかけている
最後にシーンバッファに対してsubtractで載せる
ぼかしを入れられるようにもなっている
色のにじみやかすれも表現できる
単に輪郭を取得したいだけでなくノーマルのタッチと合わせてさらに絵的な表現を目指す意味合いがある

◆ライティング

間接光　色彩豊かな絵的な表現になる　イラストを例に
・背景ライト（Sky Light / Stati Light）
・キャラライト（Stationary Light）
　キャラの立体感を出す
　メインとフィル　胥吏が許せばバウンスとリムを入れる　基本的には2、3灯
・間接ライト（Indirect Lighting Cachr/Enlighten）
　自動で生成をそのまま利用　調整はすべてEnlightenで行っている

ライティングは非常に重要な要素になっている
絵的にかっこ良い、色鮮やかになるようライトを配置
ステージの場所場所でどうするかライティングアーティストとかなり密に連携して行った
リアルタイムGIのミドルウェア「Enlighten」の導入は成功
アーティストが思うままに意図的な色を関節光として当てたい‥
ただしその都度ライトビルドすることは極力さけたい
Enlightenでは「プリコンピュート」という機能を行っておけばある程度触り放題になる
Enlighten Onlyのチェックを入れることで確認できる
中国ステージはEnlighten Onlyで2灯使っている（実際に表示しながら解説）
間接光をその場で自由に変えつつチェックできる　Enlightenの強み
プローブの表示も実演しつつ解説

3「まとめ」

UE4では思い描くビジュアルを実現するハードルは下がった
常識外れな使い方で「考えてなかったわ」とプログラマから言われるも実現できた
アーティストが無茶苦茶しても受け入れてもらえる　アーティストにとっては良いこと
ウェブに情報が沢山あるのも良い　自社エンジンはぐぐっても何も出てこない
もやもやを取り払うのにとても良かった
UE4に改善して欲しいところも山のようにある　このあたりはEpicさんに聞いてもらいたいと思う

◆質疑応答

Q：Fix Projectionは頂点の位置をズラすとコリジョンともズレると思うがそこはプログラマが良い感じに？
A：格闘ゲームは特殊でそもそもコリジョンとキャラモデルは結びついてない
　格闘ゲームのアタリは2Dで持つのでズレは問題にならない

Q：カラーグレーディングはどのレンダリングのタイミングで行われる？
A：マテリアルの設定はBefore Translucency
　LDRの時にやってしまうので調整が難しい
　そこはPhotoshopのアクションを組むことで最終結果に近くなるものを用意
　実機で確認してダメだったらPhotoshopで調整する

Q：BPかコードかの判断は？
A：FixProjectionはコードで実装
　判断理由としてはUE4がまだ若いバージョンの頃だったため
　マテリアルファンクションでやるとなぜか処理が重くなった
　そこでプログラマがコードで試しに組んでもらって採用に

Q：UE4を使ってネックになった部分は？
A：いっぱいあるが一つに絞れない
　言うなれば物理が弱い　その辺はかなり試行錯誤した印象はある
　物理はスト４の方が綺麗
　骨のリミットが決められるがUE4はぶっとばす　コリジョン置いているのにめり込む
　ディンプスさんの自社エンジンでは軽くて性能の良い物理エンジンだった

Q：エフェクトの液体表現はどんな工夫が？
A：流体計算したメッシュをMaya上で骨に入れて、Nullアニメーションに追従させている

ストVのエフェクトについては「CGWORLD 2016年 6月号」で特集されてます！必見です！