LoginSignup
3

More than 5 years have passed since last update.

posted at

updated at

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

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

最初に

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

mokoさんが「Technical Art of STREET FIGHTER V」レポートで非常に分かりやすくまとめていただいたので、詳細はリンク先を見てください。

mokoさんのを見て頂ければ私のは見なくていいですw
それでもよければ読んで頂けると幸いです。

togetterもあります。



こなべさん、ありがとうございます! 
関西圏のイベントでは毎回こなべさんがまとめて頂いたtogetterを見させて頂いております!

メモ

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

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

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

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

・ゲーム

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

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

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


全体項目

1.目標

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

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

3.まとめ


1.目標

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

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

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

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

・キャラクター

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

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

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

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

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

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

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

UE4のバージョン:4.7.6

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

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

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

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

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

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

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

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

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

・Tangent Space & Object Space
変換した

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

・ObjectSpace Touch追加

SNAP Art 4を使用

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

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

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

・背景

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

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

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

・Multi Colorgrading
4つのLookUPTabel

明るいと見にくい
LUT

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

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

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

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

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

・背景ライト
Sky Light&Static Light

・キャラライト
Stationary Light

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

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

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

3.まとめ

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

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

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

 感想

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3