講演者の亀井敏征氏（カプコン第二開発部 第一開発室）は，前作「STREET FIGHTER IV」（以下，SFIV）の開発にも携わった人物だ。SFIVではゲーム本体の開発を担当したディンプスに所属していたが，現在はカプコンに移籍している

　格闘ゲームの老舗ブランド，「STREET FIGHTER」シリーズの最新作「STEERT FIGHTER V」（以下，SFV） は今年2016年2月に発売され，今やe-Sportsの格闘ゲーム部門では定番のタイトルとして人気を博している。CEDEC 2016では，そんなSFVのグラフィックス関連の開発秘話をまとめたアートディレクションに関するセッションが行われたのでレポートしよう。セッションタイトル名は「Street Fighter V Art Direction〜 格闘ゲームのアートの役割 〜」で，講演者はカプコン第二開発部 第一開発室の亀井敏征氏だ。

見やすさ・分かりやすさのためのアートディレクション

　亀井氏がまず語ったのは，SFVのビジュアルコンセプトにまつわる部分だ。
　STREET FIGHTER（以下SF）シリーズの歴史は，1987年代にデビューした初代SFに始まり，1991年に登場した「STREET FIGHTER II」（以下，SFII）で社会現象になるほどの大ヒットを記録し，格闘ゲームの一大ブームを築き上げてきた。
　以降，「II」シリーズ，「ZERO」シリーズ，「III」シリーズ，「IV」シリーズと作数を重ね，現在の最新作SFVに至るわけだが，SFシリーズには，こだわりの共通ビジュアルコンセプトがあるという。
　それは「筋肉ムキムキ」と「誇張された表現」の二つのキーワードに代表される，と亀井氏は語る。

　これは，格闘ゲームがきわめて高いリアルタイム性を持って展開するゲームであるため，プレイヤー達に即座に現在の状況を認知・把握してもらうための必要要件だと説明された。
　「ゲームキャラクター」とは，一般に「ゲームに登場する人物」と説明されることが多いが，SFシリーズにおいては，その意味に加えて「記号」「符号」の意味も強いというのだ。

「キャラクター」にはゲームに登場する人物という意味もあるが，SFシリーズにおいては「記号」という意味合いも強い

　SFVも，SFシリーズの伝統に則り，前述したようなキーワードを体現するようなグラフィックス設計が行われた。ただし，SFIV同様に，新作SFVも3Dグラフィックスベースで制作されることは決定事項である。
　制作にあたり，まず，気を配ったのは，プレイヤーが見る画面で相対するメインキャラクターの二人が見やすいかどうかだ。

プレイヤーが格闘ゲームとして遊びやすいことが重要

　「見やすい」というのは後述する配色のような話題にも関係してくるのだが，ここでは，「キャラクターのシルエット」が「理解しやすいポーズか」という意味を指している。
　具体的には，正拳突きのような拳をひねり出しているポーズにおいて，「上腕や前腕，手（拳）はどうねじれているか」というような情報だ。

ドット画時代のキャラクターシルエット。今作SFVでも，この分かりやすいシルエットを継承することとした

わずか10ドット足らずの幅で上腕，前腕の向きや回転を表現していた，ドット画時代のSFキャラクターグラフィックス

　カプコンには，ドット画黄金期の先人アーティスト達によって，人体ポーズからドット画を起こすレシピを社内でまとめたドキュメントが制作されており，これが，今回のSFVの3Dモデリングにおいても役に立ったと軽石は振り返る。

カプコン社内に存在する「人体表現をドット絵にするためのノウハウ」をまとめた冊子

　例えば，この社内極秘レシピ・ドキュメントにおいて上腕，前腕のシルエットは，各腕パーツの向きにおいて，下図のような法則が書かれている。

SFVでもドット画レシピに従ってモデリングされた

　具体的には「気を付け」の姿勢をしたときに，上腕の側面は太く，正面は細くデザインされる。一方の前腕は逆だ。
　実際の人間はここまで極端ではないかもしれないが，確かに腕の部位の回転具合が見る者に伝わりやすいのは確かだ。

現実世界の人間の腕とSFシリーズ世界のキャラクターの腕の比較

　亀井氏によれば，プロトタイプ検討段階では，SFVは，「超リアル志向なビジュアル路線で行く案」もあったそうなのだが，SFシリーズのゲームプレイにはうまく適合しないと判断され，現在のスタイルに方針を改めたそうである。

SFVの開発最初期の検討段階ではリアル志向デザインも検討された。まるでバーチャファイターや鉄拳の世界にいそうな「リュウ」

　また，SFV内に登場させたキャラクター達の身長は，公式設定のスケールとはかなり違うものになっていることも報告された。これも，ドット画時代のレシピを継承した要素である。
　これはどういうことか，リュウとベガの身長で見てみよう。
　リュウの公式設定の身長は175cm，同様にベガは182cmだという。
　しかし，実際の3Dモデルの大きさ（身長）は，意外にも同じ高さでモデリングされているのだ。

SFIIのリュウとベガ。公式身長はここに記載されているとおり

SFVにおける3Dモデルは両キャラクターも実は同身長だった！

　これでは，公式設定と違う……ということになるのだが，ゲーム中の待機モーションの姿勢など，見た目の印象ので設定スケールに合わせているのである。

3Dスケールでは同一身長でも，ゲーム中の姿勢の印象でベガのほうが高身長に見える

もし，SF2のドット画のベガが素立ちになると，こんな感じで2mくらいの身長に。SF2ではベガのほうが大きく描かれていたということだ

SFVにおけるアニメーション（動き）の極意！

　こうしたデフォルメの考え方は，動きにおいても実践されている。
　SFVでは，動きに関しては，「性能：ゲームメカニクス視点から要求されたワザとしての性能を満たす」「格闘技：武術スタイルが分かりやすい見た目」「重心・リズム：かっこいいこと」などの情報を盛り込むことに配慮してデザインされたという。

SFVのキャラクターのモーション設計にこだわった三つの要素

　例えば，ザンギエフの歩行モーションを，ゲーム中の横からの視点ではなく，あえてキャラクターの正面から見ると，下図・左のように，顔も身体も微妙に横向き（カメラ側向き）にねじられているのが分かる。
　では，あえて，普通の3Dゲームにおける姿勢のように「ねじりなし」としたらどうなるか。

左がSFV完成版の歩行モーションを正面から見た様子。右はこれを普通の3Dゲームのような歩行モーションに修正した様子

　下図は，「ゲームで採用されたオリジナル歩行モーション」と，その「ねじりなし」版とを比較したのが下図になる。

ザンギエフの分厚い肉体の感じは左のほうがうまく表現できている

3Dグラフィックス版のSFシリーズにおけるキャラクター姿勢の秘伝レシピは「5°回す」

　見て分かるように，ザンギエフの巨体感は左のゲーム採用バージョンのほうが伝わりやすい。右の正体ポーズでの歩行シルエットは，ゲーム採用版と比較すれば細身に見える。
　このテクニックはSFIVから採用されているそうで，亀井氏は，この3DグラフィックスになってからのSFシリーズのキャラクターグラフィックスの姿勢の与え方のコツとして「5°回す」というレシピが誕生したことを報告した。

　亀井氏はいくつかのキャラクターにおける待機姿勢や技途中の姿勢を示してくれたが，顔だけでなく身体全体をややカメラ側に向けているのが面白い。なかには完全にカメラ目線のキャラクターもいる。
　「5°回す」は，「3Dグラフィックスを採用しているものの，ゲームメカニクスは2D格闘ゲーム」……というSFシリーズならではのユニークなレシピだといえよう。

各キャラクターのモーションをゲームプレイ中のカメラアングルと正面アングルで比較したもの

一言で表現できると，感動を他人に伝えやすい

　そして，必殺技などの，技デザイン，モーションデザインについては，「一言で表現できる」ことに配慮して制作された亀井氏は語る。
　どういうことかというと，各キャラクターのバックグラウンド（生い立ちや出身地，格闘スタイルなどの設定）を活かしつつ，分かりやすく，なおかつ他人に伝えやすいものになるよう心がけたということだ。

　例えば，下図は，SFシリーズではお馴染みのあのキャラクター達の必殺技を言葉で形容したものだ。

これはどのキャラクターのどんなワザを説明している？

　SFシリーズをプレイしたことがあればどのキャラクターのどんなワザを言葉で表現しているかが瞬間的に連想できるはずだ。こういうことに気を使ってワザをデザインすることが，ゲームの面白さを人に伝えやすくすると同時に，一種独特なSFシリーズの世界感を形成することにもつながっているのだろう。

SFVのレインボー・ミカのクリティカルアーツ（超必殺技）のひとコマ。アナタならなんて言葉で表現する？　亀井氏は「尻サンド？」という例を挙げていた

背景デザインに隠された「色」の秘密

　2D時代のSFシリーズの特徴を受け継いだも要素はほかにもある。それは背景グラフィックスだ。
　下図は，「STREET FIGHTER ZERO」（以下，SFZ）シリーズにおけるバトルシーンの画面ショットだが，ヒストグラムをとってみると，面白いことが見えてくる。

SFZのひとコマ。背景グラフィックスに注目

　キャラクターグラフィックスはRGBの3原色が0〜255のレンジでフルに使われているのに対して，背景グラフィックスは，暗部階調の色を中心に用いられている。全体的に背景グラフィックスが暗いのはそうした理由からなのだが，にもかかわらず背景グラフィックスには漆黒から最暗部の色は使われていないというのも面白い。

キャラクター画像と背景のヒストグラムの比較。縦軸は画素数を表し，横軸は明暗を表す。左にいくほど暗く，右にいくほど明るい

　これは，背景グラフィックスを控えめなトーン（階調）にすることで，手前のキャラクター達のグラフィックスを引き立てる意図からのデザインなのだ。
　背景グラフィックスに漆黒や暗部階調が用いられていないのは，コントラストを抑えるためだ。
　キャラクターグラフィックスのほうで，漆黒や暗部階調はもちろん，最明部階調までをも使っているのは，逆にコントラスト感をはっきりさせつつ，色鮮やかな表現にして，見た目としてくっきりと際立たせるためだ。

キャラクターは色鮮やかでコントラスト感もある。背景は暗く，コントラスト感を抑えている

　3DグラフィックスのSFVでは，SFZシリーズほど極端ではないものの，これに近い，色階調補正（COLOR GRADING）が行われているという。
　下図は，実際の製品版のSFVのワンシーンだが，見ての通り，背景は暗い赤基調の，色温度が低い色あいにまとめ上げられているのに対し，キャラクターグラフィックスはやや色温度が高めである。背景もキャラクターも，3Dグラフィックス特有の立体感あるライティングで美しいが，キャラクターがちゃんと目立つ配色になっていて，SFZ的な配色演出が行われているのが分かる。

SFVのワンシーン。SFZ的な色階調補正が行われた結果である

　一方，下図は，実際にGPUがレンダリングしたグラフィックスを，色階調補正なしで出力したものだ。映像としてのリアリティはこちらのほうがあるかもしれないが，キャラクターが背景に溶け込んでおり，ちょっと格闘ゲームとしては遊びにくいかもしれない

上と同一シーンだが，色階調補正をオフにした状態

　亀井氏によれば，SFVでは，色階調補正（Color Grading）を複数（Multi）のセグメントで実装しており，これをプロジェクト内では「Multi Color Grading」（MCG）と呼んでいたそうだ。
　MCGでは，背景を「左右」×「遠近」の4セグメントで分けて管理しており，GPUがレンダリングした結果としての色を，演出的な意図で別の色に変換する仕組みが採用されているのだ。

SFVではバトルステージを4セグメントに切り分けて色補正ができる仕組みが実装されている

　ステージによっては背景をわざわざ「左右」×「遠近」の4セグメントで管理する必要がないこともあり，少ないセグメントで色変換を行う場合もあったようだ。

左は前後の2セグメントの事例。右は奥は1セグメントだが，手前は左右の2セグメント構成の事例

　下図は，近景に赤が強めな色変換テーブルを用意し，遠景に緑が強めの色変換テーブルを設定したMCGの例で，「左右」で区分するセグメント管理は省略している事例だ。

わざと極端にMCGを適用した事例。ステージの前後（遠景・近景）で色あいが随分と違っているのが分かる。これは色階調補正の結果としてこうなっている

3Dグラフィックスを2Dっぽく見せるための工夫

　3Dグラフィックスは，3Dシーンを視点位置から遠くに向かって広がるような視界（視錐台）で切り取って描画するのだが，その際，本来は半球状態（ドーム状）となって描かれるべき視界をGPUはテレビ画面の形状である四辺形に投影して描画する。このため，画面の端に行くほど，やや広がるようにして描かれてしまう。
　SFVは，3Dグラフィックスを使っていても，ゲームメカニクスは2D格闘なので，画面の位置に応じてキャラクターが「痩せ太り」してしまっては，ワザの当たり判定効果が分かりにくくなってしまう。

3Dグラフィックスにおける描画投射系の都合でキャラクターは端に行くほど太り，中央に行くほど痩せる特性がある

リュウを普通に3Dグラフィックスとして画面中央と画面端に配置して描画したテスト画面ショット。画面端版のリュウはカメラに対する向きも微妙に異なって見える

　これは，3Dグラフィックスで2Dのゲームメカニクスを実装しようとすると誰しもが突き当たる問題で，筆者の連載である「西川善司の「試験に出るゲームグラフィックス」（2）「GUILTY GEAR Xrd -SIGN-」（以下，GGXS）で実現された「アニメにしか見えないリアルタイム3Dグラフィックス」の秘密，後編」（参考URL）で取り扱った「GUILTY GEAR Xrd -SIGN-」でも同様の課題に対して，独自の対処を行っていた。
　SFVでは，通常の3Dグラフィックスで用いられる，近くのモノほど大きく遠くのものほど小さく描く「透視投影法」と，工業イラストなどで用いられる，遠近に関わらずモノの大小を相対的に描く「平行投影法」をブレンドして，この課題に対して対処している。
　具体的には透視投影法50％，平行投影法50％のブレンド投影法で描くことで，この「痩せ太り」問題を低減させている。
　「痩せ太り」問題だけを解決したいならば，平行投影法100％でやればいいのだが，亀井氏によれば，それだと3Dグラフィックスらしい立体感がなくなってしまうので，遠近感が出る透視投影法も織り交ぜたとのこと。
　ちなみに，GGXSでは，透視投影法30％，平行投影法70％で，SFVよりも平行投影法の割合が多い。この違いは興味深い。

透視投影法100％（Fix Projection＝0.0）の状態の画面ショット

平行投影法100％（Fix Projection＝1.0）の状態の画面ショット

透視投影法50％，平行投影法50％（Fix Projection＝0.5）の状態の画面ショット。これが製品版である

　なお，この「透視投影法：平行投影法＝1：1」のバランスは格闘する2体のメインキャラクターにだけ適用され，背景グラフィックスは迫力重視としたため，透視投影法を支配的にしているとのことである。

SFVのグラフィックスの仕組み（1）〜絵画調シェーディングはSFIVとは別手法に

なぜNPRを採用したのか

　ここから，亀井氏の話はやや技術寄りになっていく。具体的にいえばシェーディングにまつわる話題へと移った。
　SFVのグラフィックスは，前述したような「見やすさ」「分かりやすさ」「記号的な理解のしやすさ」を表現すべくフォトリアル系ではなく，絵画的，イラスト的なNPR（Non-Photorealistic Rednering）表現手法が採用された。

　路線が決まれば続いて「どういうNPR表現でいくか」という議論に進むわけだが，「リアル系を捨てる」という方針が決定されてからは，迷うことなく「ある方針」に決定したと亀井氏は振り返る。それは「ストリートファイターシリーズの歴代イメージイラストを具現化する」というものだ。
　下図は今作の開発のために描き起こされたコンセプトアートだ。

SFVのコンセプトアート

　そして，このコンセプトアートを実機でリアルタイム再現するにあたり，シェーダの設計イメージとしては，「油彩風」でありながら，「ライティングが豊か」という基本方針が掲げられたようだ。この「豊か」とは，「情報量が多いこと」と亀井氏は説明していた。SFVは，1920×1080ピクセルのフルHD解像度でのレンダリングを前提としていたので，NPR的な表現とはいえども，ディテール表現などは余すことなく再現したかったのだという。
　実際に，ゲームに登場するキャラクターグラフィックスは下図のようになる。

製品版のビジュアルはこんな感じに。コンセプトアートの要素をうまく再現できているといえよう

　さて，このSFVの独特なシェーディングはどのように実現されたのだろうか。
　一般に，アニメ風のセルシェーディング法は，ライティングの結果をわざと大ざっぱにして，段階的な階調を作り出す手法で実現される。

面の向き（法線）と光源の向き，そして鏡面反射の場合は視線の向きも関係してくるが，こうした2要素ないしは3要素でライティングが計算される。その計算結果としての陰影をわざと大ざっぱに表すのがセルシェーディングの基本形

　SFVは，ゲームエンジンとして，Epic GamesのUnreal Engine4（UE4）を採用しているわけだが，UE4のグラフィックスエンジンはDeferred Renderingベースである。Deferred Renderingの特長の一つに「光源をシーン内にたくさん置ける」というのがあるのだが，実際，SFVでは，複数の光源を設置しており，この状態でセルシェーディングをすると，目指していたグラフィックス表現とは違ったものになってしまったそうだ。
　そこで，UE4上でのシェーダ設計では特別なことをせず，別のアプローチで，「油彩風」×「豊かなライティング」を実装することにした。

UE4のグラフィックスエンジン側でセルシェーディングを実装するのは諦めたという。UE4上のピクセルシェーダは「ライティングしてテクスチャを貼る」というようなごく一般的な形態にしている

　それは，「タッチ（筆致）の再現」「エッジ・色境界の強調」「色・彩度の制御」の3要素を盛り込むことだった。
　「タッチの再現」とは，イラストレーターが描いた絵にその筆の流れ・軌跡が残ることだ。

筆を動かして色を塗ったことが分かるタッチを再現したい

　前作SFIVでは，この「筆の跡」を再現するために，微細凹凸を表現する法線マップテクスチャ（≒バンプマップテクスチャ）に対して，Photoshopで「ちりめんじわ」フィルタを適用することで実現していた。効果としては，法線マップに揺らぎのあるスジのようなノイズが挿入されることになり，最終的な描画結果では独特な引っ掻いたような陰影を出せていた。この陰影は，明部や暗部の領域にはこの陰影は出ず，中間階調に多く出る特性があり，これが丁度イラストレーターの絵筆のタッチに近いということで採用したそうだ。

前作SFIVでは，法線マップにPhotoshopのちりめんじわフィルタを与えることで筆致表現を実現していた

ちりめんじわフィルタ適用なしの描画結果

　SFVでもこの手法を試したというが，SFVでは，全体的な解像度アップがなされたことで，法線マップテクスチャも高解像度化され，「ちりめんじわ」テクニックによる筆のタッチが微細すぎてイラストの筆使いに見えなくなってしまったそうだ。そこで別の方策を当たることにしたとのこと。

SFVでは法線マップテクスチャの解像度が上がったことで，ちりめんじわフィルタの効果が分かりにくくなってしまった

各種絵画タッチに画像・写真を変換するPhotoshop対応プラグインソフト「SnapArt」

　そこで開発チームが選択したのはPhotoshop向けのプラグイン「SnapArt」（参考URL）だった。
　SnapArtは，写真などをイラスト調や油彩調に変換することができるもの。
　しかし，法線マップテクスチャを，SnapArtで油彩調にしても，それほど油彩っぽい効果が乗らなかったそうだ。
　これはSnapArtのフィルタ処理が，色変化に呼応して機能するフィルタだったため。
　知っている人も多いとは思うが，法線マップテクスチャ上の法線ベクトルは接平面（タンジェントスペース）を基底にして生成/作成されている。

　法線マップテクスチャとは，簡単に言えば，凹凸の面の向き（法線ベクトル）をテクスチャマップで表現しているものだ。なので，平坦な基準平面に凹凸を展開したようなものになっている。三次元の法線ベクトルは（x，y，z）の三要素の数値で表されるが，これがテクスチャマップに落とし込まれると，当然ながらRGBの画素に格納される。つまり，データの意味としてはベクトルデータなのだが，結果として画像データの形態で格納されているわけである。なお，法線マップテクスチャは基準平面に対する微細凹凸が記録されているので，多くの法線ベクトルは直上を向いたものになる。これは画像としてはちょうど紫色（マゼンタ）に近いものになる。だから法線マップテクスチャは紫色（マゼンタ）っぽい色が支配的なのだ。
　しかし，SnapArtは色変化に呼応してフィルタを適用するような動作アルゴリズムになっている。「ほとんど紫」の法線マップテクスチャでは，SNapArtフィルタの効果は限定的になってしまうのだ。
　なんとか，法線マップテクスチャを色とりどりにできないか。
　そこで開発チームが考えついたのが，法線マップテクスチャを，オブジェクトスペース（テクスチャスペースと呼ぶ場合もある）に変換する方法だった。要は，法線マップテクスチャを立体的な3Dモデルに適用したあとの法線情報状態に変換するということだ。
　立体物上の各点は法線ベクトル（面の向き）がいろんな方向を向くことになるので，すなわち（x，y，z）が適度にばらけたり，なだらかな階調を作るようになる。となれば，これを画像データとして見た場合は色豊かになるということだ。
　実際に，これでSnapArtを試してみたところ，想像に近い効果が得られることが分かったという。

左が接平面（タンジェントスペース）基準の一般的な法線マップテクスチャで，色あいは紫が主体。右がオブジェクトスペース基準での法線マップテクスチャ。色合いが豊かになっている

オブジェクトスペースへと変換された法線マップテクスチャに対し，油彩タッチを入れたのが右

　ただ，UE4のグラフィックスエンジンで取り扱う法線マップテクスチャは接平面基準でなければならないので，ゲームに載せる際には，オブジェクトスペースの法線マップテクスチャを再び，接平面基準に戻している。

法線マップテクスチャに対してSnapArtを用いて油彩表現を盛り込むための工程全貌

　さて，油彩調で筆のタッチが乗るようになったのはいいが，筆遣いが一定だったためか，人間のイラストレーターが描いたような雰囲気を出すにはもう一工夫が必要と判断された。
　実は，イラストレーターは，見る者（鑑賞者）の注視点を意識して，描く部位に応じて筆の使いの詳細度を切り分けている。「もう一工夫」のヒントはここにあった。

イラストレーターが描いたコンセプトアート

細かい筆遣いは顔とその周辺に集中しており，逆に顔面から離れるにつれて筆遣いは粗めになるというヒントが，イラストレーターが描いたコンセプトアートに隠されていた

　人間はやはり人（キャラクター）の顔に視線が集まりやすいため，ここに最も詳細な筆のタッチを入れるようにした。続いて高い詳細度は与えたのは身体で，顔→身体→衣服→小物……といった順で，SnapArtで生成させる筆のタッチの疎密感を調整したそうだ。この一工夫でさらにグッとコンセプトアートの感じの再現が進むこととなった。

SnapArtで油彩効果を与えた法線マップのテクスチャアトラスに，顔→身体→衣服→小物……といった順で，油彩効果の疎密感に違いを与えた

　実際に，SnapArt処理による筆のタッチ「なし/あり」の比較画像が下図だ。

SnapArt処理による法線マップへの筆のタッチ効果付与なし

SnapArt処理による法線マップへの筆のタッチ効果付与あり

　SFIVの「ちりめんじわ」フィルタによる筆のタッチは，やや周囲の陰影や色あいからずれていて周囲の色と馴染んでない感じもしたが，今作SFVでは，陰影自体をリアルに出つつ，その陰影の出方そのものが筆の軌跡状に出るため，確かに絵画的に見える。ディテールとして描き出されている微細陰影はそれほど筆のタッチ表現の掻き乱されておらず，3Dグラフィックスとしての立体感も損なわれていないのもまた好感触である。

SFVのグラフィックスの仕組み（2）〜SFVにおける線描の仕組み

　続いて，亀井氏は，SFVが実装したSFV特有のNPR表現要素の二つめ，「エッジ・色境界の強調」についての解説を行った。
　これは平たくいえば「輪郭線の付与」ということだ。
　輪郭線の線描は，NPRグラフィックスにおいては定番とも言える要素だが，その手法はいろいろ考案されている。
　「GRAVITY DAZE」シリーズが採用したような，視線に対して直交する（あるいはそれに近い）法線を持つピクセルを輪郭線と見なして線描するような，いかにも「3D」グラフィックス的な処理系で付与する方法もあるが，SFVでは，描画結果フレーム内においてRGB（赤緑青）の色段差（≒色の変化量が大きい箇所）が大きい箇所を輪郭線とする……という画像処理的なアプローチで線描を実装している。

SFVの線描は画像処理的なアプローチで付与する方針となった

　亀井氏は，実際にSFVで採用した線描ピクセルシェーダの概念をステップバイステップで図解した。
　まず，下図がGPUが描画した線描前の描画結果だ。

線描付与前の元となる画像

　これに対し，左右にnピクセルずらした画像を求める。nピクセルの「n」とは，事実上，線描の太さを決めるパラメータとなる。このずらした2枚の画像の差分を取った画像が下図だ。

左右にnピクセルずらす

　続いて同様の処理系を今度は「上下にnピクセルずらして」実装し，差分画像を求める。この両者を重ね合わせると下図のような，色段差から輪郭線が求まるのだ。

差分を抽出した画像がこちら

抽出された色段差をもとに線描画像を求めた

　SFVでは，アーティストの指定で，線描の色を任意に指定できるようになっているので，抽出された輪郭線に対して，その色を掛け合わせて線描画像の完成となる。

完成した輪郭画像がこちら。この画像自体は線が緑色っぽく見えるが，元画像に対してあとで差っ引く画像（いわばネガ画像）となっているため，輪郭線の色としては茶色っぽい色になる

　この線描画像を，元の描画結果と合成することで，線描付きの描画結果が得られる……というわけだ。

これが線描と元画像を合成した結果。テスト画像なのでわざと強調した色になっている

こちらが製品版での線描

　このアプローチは，上で「画像処理」というふうに表現したが，実際にはUE4のレンダリングパイプラインにおけるポストプロセス機能によってリアルタイムに実装されている。
　「3D」的な処理で生成するのではなく，描画結果に対して線描フィルタをかける……という処理系なので，3Dモデルの境界面だけではなく，テクスチャの中身に対してやライティング結果の陰影に対しても線描が付与される。色段差に対して線描するこの手法は「画像中のあらゆる箇所に線描が発生する」ため，アニメタッチのゲームグラフィックスを目指すケースではこの特性が嫌われることもあるのだが，SFVの場合は，アニメタッチではなく，「細かく描き込んだ系」のイラストタッチを目指したため，この手法がマッチしたようだ。

線描オフ	線描オン。背景，右下のテクスチャ（張り紙），リュウの胸の辺りのハイライトに至るまで線描画出現しているのが分かる

SFVのグラフィックスの仕組み（3）〜Enlightenを採用。ついに間接光表現を導入！　

　SFVは，PS4世代……というか「DirectX 11世代のゲームグラフィックス」ということで，この世代のゲームグラフィックスでは採用事例が増えてきている間接光表現（大局照明：GLobal Illumination）の仕組みを導入することに踏み切った。といっても，あくまで導入の目的は，当初の予定通り，SFシリーズのイラストレーターが描いてきた「あのタッチ」の再現である。別に「リアル」を求めての導入ではない。
　間接光表現……というと仰々しいが，印象派風のイラストや，アニメなどでは，物理的には正しいとはいいがたい照り返し表現がよく用いられる。物理的には正しくなくとも，その表現こそが絵画的というか，NPR独特の味わいとなる。SFVでは，あのイラスト的な「印象的な照り返し」表現を，リアルタイムの間接光表現として実装することに挑戦したのだ。

SFシリーズのイラストに見られる印象的な照り返し表現（矢印のあるところ）。その場面にあるとは思えない色の光がキャラクターを照らし返しているが，これが独特な味わいとなっている。これを目指しての間接光導入というわけだ

　亀井氏は，その間接光表現の実装形態の紹介の前に，SFVのライティングの流れを図示した（下図）。

SFVのキャラクターライティングの要素分解・画面ショット

　最初の「Lighting前」という部分は，実際には，天球からのライティング（実質的な環境光）と，静的光源（UE4におけるStatic Light）によるライティングが背景オブジェクトに対して行われている。
　真ん中の「Stationary Light調整」では，UE4特有の「ハイパフォーマンスだが扱いに制限がある動的光源」である「Stationar Light」を使ってメインキャラクター2体に対して直接光のライティングが行われる。いうなれば，ここまでが間接光表現要素無しのライティングイメージだ。

　最後の「間接光」の部分が，SFIVのグラフィックスにはなかった新要素のイラスト調の照り返し光的間接光表現の部分になる。
　このSFVにおける間接光表現に実装にあたっては，二つのアプローチによって間接光要素を生成している。
　一つは，UE4が標準搭載している「Indirect Lighting Cache」（ILC）と呼ばれる機能だ。
　UE4のILCは，一言でいうなれば，事前生成した全方位の間接光情報のこと。SFVでは，Static Lightを配置してライティングしたバトルステージの各点において，全方位の間接光情報を取得してキャッシング（保存）しておき，このキャッシュデータを用いて闘い合う主役2体のキャラクターを直接光ライティングに加えて追加ライティングしている。

　二つめは，間接光表現用のミドルウェア「Enlighten」を使って生成した間接光情報だ。
　Enlightenでは，3Dシーン内に設定した動的光源の照明結果が3Dシーン内の各点にどう間接光として伝搬するかをリアルタイムに求めることができる。3Dシーンの立体構造やテクスチャ構造に対する事前解析や，間接光情報の取得ポイント（Probe）の設定などは事前に行っておく必要があるが，3Dシーン内の光源を動かしても正しい間接光表現がリアルタイムに得られるのがEnlightenのウリだ。
　SFVでは，ILCを「下地的な間接光照明」に活用し，Enlightenの間接光照明のほうを主体的に活用していると亀井氏は解説していた。

左端が直接光のみのライティング結果。中央がILCによる間接光表現を付加した状態。右端がEnlightenによる間接光表現を付加した状態

　Enlightenによる間接光は，リアルタイムかつ意図的に変調することが可能なので，どこにも青い照り返しなどはないのに青の要素を深めたり……といったことができる。これはまさに，前述したような「物理的には正しくないが印象的な照り返しを演出したい」という意図にはぴったしというわけである。

Enlightenによる間接光の色をどう変調するかを設定している様子。講演中，実機での間接光の色を変更するデモが行われた

　亀井氏は，「UE4のILCでは，間接光の影響を調整しようとすると，ILCのための事前計算を時間をかけてやり直さなければならないが，Enlightenの場合は，3Dシーンの構造さえいじらなければ，動的光源の置き方や間接光の変調も自由自在。ここが，アーティストにとってやりやすい部分だった」と振り返っていた。
　また，「こうしたEnlightenの使い方は本来の使い方ではないのかもしれない（笑）」とも。


　亀井氏は最後に「アート（グラフィックス）は，ゲームにおいて，ゲームの状況を一瞬にしてプレイヤーにフィードバックする最重要項目だと思う。その中で，ゲームにおけるアートは，どんな役割を果たせるのか，果たすべきなのかを考えていかなければならないと思う」と述べて講演を締めくくった。
　本講演は，格闘ゲームのグラフィックス，それも歴史ある有名シリーズのグラフィックスに関連した内容であったが，「3Dグラフィックスのダイナミックさを出しつつ2Dゲームメカニクス視点でも見やすくかるための工夫」「イラスト風の3Dグラフィックスをリアルタイムで実現するテクニック」といった部分は，他ゲームジャンルにも幅広く活用していけそうだ。
　個人的には，ドット画時代にまとめられたという「人体ポーズからドット画を起こすためのレシピ」の内容に大いに興味をそそられた。いずれ，この内容についても講演を聴いてみたいものである。