【UNREAL FEST 2016 OSAKA】　Technical Art of STREET FIGHTER V　メモ

UNREAL FEST 2016 OSAKAに行ってきました。
Technical Art of STREET FIGHTER Vは諸事情により写真撮影ＮＧのため、メモを共有します。

# 最初に

私はただのプログラマーのため、メモに記載した以外のことはわかりません。

mokoさんが[「Technical Art of STREET FIGHTER V」レポート](http://effect.hatenablog.com/entry/2016/05/14/230254)で非常に分かりやすくまとめていただいたので、詳細はリンク先を見てください。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">「Technical Art of STREET FIGHTER V」レポート - ゲームエフェクトデザイナーのブログ (新) <a href="https://t.co/A7EPXIW9nj">https://t.co/A7EPXIW9nj</a> <a href="https://twitter.com/hashtag/UnrealFest2016Osaka?src=hash">#UnrealFest2016Osaka</a></p>&mdash; moko (@moko_03_25) <a href="https://twitter.com/moko_03_25/status/731485135451787265">2016年5月14日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
mokoさんのを見て頂ければ私のは見なくていいですｗ
それでもよければ読んで頂けると幸いです。

[togetter](http://togetter.com/li/975139)もあります。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">まとめを更新しました。幾つかツィートを追加。「<a href="https://twitter.com/hashtag/UnrealFest2016Osaka?src=hash">#UnrealFest2016Osaka</a> UNREAL FEST 2016 OSAKA」 <a href="https://t.co/dDItHd6btf">https://t.co/dDItHd6btf</a></p>&mdash; 栗坂こなべ@ Live2D求道者 (@kurisaka_konabe) <a href="https://twitter.com/kurisaka_konabe/status/731613318889144320">2016年5月14日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
こなべさん、ありがとうございます！　
関西圏のイベントでは毎回こなべさんがまとめて頂いたtogetterを見させて頂いております！

# メモ

Technical Art of Street Fighter V
CS第二開発統括 第二開発部 第一開発室　アートディレクター　亀井敏征様

Technical Artist & Unreal Engine4
テクニカルアーティストにとってUE4はとても相性がいい

##テクニカルアーティストの仕事

ゲームの絵の作り方
目標・イメージ

・ゲーム

ただし、もやもやする　落とし込むのに
具体的な手法が分からない

・目標　イメージ
・インゲーム
・実現手法

Technical Artist＝もやもやを取り払う人

***

##全体項目

１.目標

高い視認性
個性的な絵作り

２.実現手段
キャラクター
背景
カメラ
ライティング
ポストエフェクト

３.まとめ

***

## 1.目標

ストリートファイター５で目指したアート

・高い視認性　格闘ゲームでは必須　アクションもね
個性的な絵作り

あ、これはストリートファイターの絵作りだ！
フォトリアルは溢れているので、その中でもストリートファイター５だとわかるように工夫した

・はっきりしたシルエット
・筋肉モリモリ
・大げさ

・キャラクター

状況をフィードバックするため記号として存在する

3/60フレームでもわかるシルエット
ゲームからのフィードバック
プレイヤーの判断
プレイヤーからのインプット

これをすごいスピードで行っている
格闘ゲームのアート
ゲームの状況を一瞬でプレイヤーにフィードバックするゲーム内の唯一の手段

・個性
埋もれないためのノンフォトリアル

・高い視認性
格闘ゲームとしての必須要件

・個性的な絵作り
世界中のタイトルとの差別化

## 2.UnrealEngine4を使っての実現手法

UE4のバージョン：4.7.6

キャラクター
・目指す絵：NPR
・できた絵：油彩　リッチなライティング

・NPRの実現
ライトベクトルとポリゴン法線の内積に一工夫

・ライトベクトルを使って計算していない
ライトベクトルを使ってBPを組んだが結局お蔵入り

結論：マテリアルでは複雑なことはしていない。スイッチパラメーターを使って切り替えを行っているだけ

・タッチの再現
エッジ・色協会の強調
色・彩度のコントロール

・ノーマルマップへのタッチ追加
筆のタッチの再現
ノーマルマップへ　２Dベースのフィルタリング

ちりめんシワフィルター：なし

・ノーマルマップへのタッチ追加

凸凹情報の隙間が大きくなり、フィルターがかかりづらくなった
470 160の差がある

・Tangent Space & Object Space
変換した

・オリジナルのノーマルマップ
ノーマルマップの変換
ノーマルマップへタッチの追加
ノーマルマップの再変換
UE4で確認

・ObjectSpace Touch追加

SNAP Art 4を使用

豊富なフィルターと、調整項目の多さ
安い：一万円以下

細かい⇔粗い：幾つかのフィルターを作成
合成のルールは絵的に見えることのみ

・情報の粗蜜
顔は密度が高い
顔から離れるごとに密度が低くなる

・背景

キャラクターのヒストグラム
明るい色から暗い色まで使っている

・背景のヒストグラム
狭い
白と黒はそこまで使ってない

キャラクターが手前にいるように見える
しかも背景との対比で色鮮やかに見える

・Multi Colorgrading
４つのLookUPTabel

明るいと見にくい
LUT

・カメラの画角の補正
3Dのカメラの特性上、端に行けば行くほどわかりにくい

FixProjection:カメラの横方向に補正をかける

ポストエフェクト&エッジ

RGBの差が大きい場所に、任意の色を乗せる

・ライティング
間接光の強調
照り返しに色をつける


・背景ライト
Sky Light＆Static Light

・キャラライト
Stationary Light

・間接光
Indirect Lighting Cache Enlighten
調節は全てEnlighten

絵的にかっこいいかを重視！

・Enlightenの導入目的
アーティストが思うままに、意図的な色おw間接光として当てたい。
ただし、その都度ライトビルドすることは、極力避けたい

## 3.まとめ
Unreal Engine4 を利用
思い描いたビジュアルを実現するハードルは下がった

常識はずれなことも実現出来る
実現手法が分からないもやもやが取り除きやすい

当時のBP：マテリアルファンクションでやると重くなる
なのでコードで保管　エンジンをいじくった

#　感想

ここまで教えてくれるとは、と思えるほどすばらしい内容、圧倒的な密度でした。
逆にここまで教えて良いのかと心配になるほどでしたｗ

正直あの場に行ってもう一度聞きたいです。非常に参考になりました。
ありがとうございます！