【出張ヒストリア2017】 Art of airtone

Art of Airtone アートディレクター／ テクニカルアーティスト 黒澤 エンジニア/ Tech Research 二階堂 © historia Inc. #出張ヒストリア2017

作品紹介（動画） © historia Inc. #出張ヒストリア2017

開発体制 ジャンル エアーリズムアクション（VR） ハードウェア / プラットフォーム • Oculus Rift / Oculus Store • Vive / Steam エンジン / ミドルウェア • Unreal Engine 4（UE 4.12 → 4.14） • Wwise 開発期間 約10ヵ月 開発体制（ピーク時） • • • • • • プロデューサー & ディレクター × 1 ゲームデザイナー × 2 エンジニア × 4 アーティスト × 3 UIデザイナー × 1 サウンド & チャートデザイナー × 3 （社外） © historia Inc. #出張ヒストリア2017

おしながき ◆ ネオンのアート ◆ In-Gameの背景アート ◆ Out-Gameの背景アート ◆ まとめ © historia Inc. #出張ヒストリア2017

説明の順番 各項目を以下の順に解説 要望 構想 実装 要望 ＝ 企画からの要望 構想 ＝ 上記要望を満たすアートの構想、コンセプト 実装 ＝ アートの構想をどのように実現したか © historia Inc. #出張ヒストリア2017

ネオンのアート © historia Inc. #出張ヒストリア2017

ネオンの要望 王道ヒロイン感 ゲームの案内役（子供すぎない） 動きのでる髪型、服装 このゲームならではの特徴（音楽モチーフ） キャラクターデザイン ポリゴン・ピクチュアズ 森山佑樹さま © historia Inc. Airtoneのヒロイン ネオンちゃん #出張ヒストリア2017

ネオンのキャラクターデザイン（第一稿） © historia Inc. #出張ヒストリア2017

ネオンのキャラクターデザイン（第二稿） © historia Inc. #出張ヒストリア2017

ネオンのキャラクターデザイン（決定稿） © historia Inc. #出張ヒストリア2017

ネオンの制作フロー 製作期間 約３週間 モデリング＋マテリアル＋テクスチャ＋リグ 3DCoat（スカルプト・リトポ・UV・テクスチャ） Maya（リグ・ウエイト・BlendShape） UE4（マテリアル） © historia Inc. #出張ヒストリア2017

モデリングワークフロー 3DCoatでスカルプト 自動リダクションで直接UE4に出力、VRで確認 VRで見るとデザインそのままでは現実感がなかった 体の細さ、目の大きさなどをVRで確認しながら調整 © historia Inc. #出張ヒストリア2017

ジョイント／モーフ 顔のジョイントはまぶた／眼球 – 大きな回転で動かすものはジョイント – 小さな変化のものはモーフ – 【例外】 リップシンクはフォルマントによる自動制御 モーフのみの制御 表情の変化はBlendSpace フォルマントについて 少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 - © historia Inc. #出張ヒストリア2017

• https://www.slideshare.net/historia_Inc/ss-75213477?ref=http://historia.co.jp/archives/6453

ネオンのNPR表現の要望 キャラクターデザインに合わせた表現 ある程度の現実感／実在感がほしい （VRでは重要） (開発中テストショット) © historia Inc. #出張ヒストリア2017

ネオンのNPR表現の構想 肌 基本的にはトゥーン すこし柔らかめにしてパキッとしすぎない 目 瞳孔の微妙な揺れを入れて実在感を出す 瞳のウルウルさせる 服 トゥーン表現にくわえ、リフレクションを入れる VRなので、現実感／手触り感をだしたい © historia Inc. #出張ヒストリア2017

ネオンのNPR表現の実装（肌と服のマテリアル） トゥーン表現 ライトベクトルと法線の内積 LUTに輪郭をぼかした物を使用 擬似的なスペキュラー リフレクションベクターと法線の内積 輪郭線は反転モデル（色トレス用のUV） © historia Inc. #出張ヒストリア2017

ネオンのNPR表現の実装（瞳のマテリアル） 白目／黒目／瞳孔／ハイライトの4層構造 BumpOffsetで、テクスチャの座標をずらし、 奥にある感じを出す 時間ベースのハイライトのランダム揺れ 瞳孔の拡縮に対応 © historia Inc. #出張ヒストリア2017

In-Gameの背景アート © historia Inc. #出張ヒストリア2017

各ステージのコンセプト（企画） 企画がステージの基本となる舞台とランドマークを設定 – ステージ 自然物 – ランドマーク 人工物 ステージ全体の印象はSF過ぎないようにしたい ランドマークでSF感を出す ランドマークがあることでステージの基準向きがわかる © historia Inc. #出張ヒストリア2017

In-Gameの要望 ほどよい未来感 ✕ 重厚なSF ◯ マジカルミライのような日本人ウケするSF モーショングラフィックス的な映像 – 曲に合わせて自動的な演出 – 音ゲー的な世界観＋音に合わせて動く 空間を飛行する 短納期（だいたい１ステージ10日） © historia Inc. #出張ヒストリア2017

In-Gameのコンセプトアートと構想 フラットな質感を多用 モーショングラフィックスになじませる テクスチャを使用せず、マテリアルで質感をつける – ワールド座標で色を決める – テクスチャの制作期間をカット © historia Inc. #出張ヒストリア2017

トンネル © historia Inc. #出張ヒストリア2017

トンネルとは In-Game内のパートの一部 全身を使ったVRらしい遊びが楽しめる （レーンをなぞる遊び） インゲームにメリハリをつける役割 激しい曲での小休止の役割 © historia Inc. #出張ヒストリア2017

トンネルの要望 インゲームの一定区間に埋めこむ 通常とは異なった遊びであることを伝える必要がある © historia Inc. #出張ヒストリア2017

トンネルのコンセプトアートと構想 トンネルという形はそのまま残す 外から見ると狭そうな空間 内部では広がりがあると面白いのではないか？ （シェーダー内でレイマーチングしたような表現） 特にVRでは特別な体験になりそう © historia Inc. #出張ヒストリア2017

In-Game 草原ステージ © historia Inc. #出張ヒストリア2017

草原ステージの要望 ◆ ステージ 牧歌的な大地 ◆ ランドマーク マスドライバーキャッチャー （宇宙からの荷物を受け取るための装置 ） © historia Inc. #出張ヒストリア2017

草原ステージのコンセプトアート トンネル外部 トンネル内部 草原/乾いている 海/水の中 © historia Inc. #出張ヒストリア2017

草原ステージのコンセプト トンネル外部 トンネル内部 草原/乾いている 海/水の中 • 唐草模様状にうねった道 • テーブルサンゴ • 曲に合わせて回る風車 • 海面から差し込む光 • カプセルハウスのようなシンプルな建物 • クジラ • 空に浮かぶUFO型のスピーカー • プランクトン © historia Inc. #出張ヒストリア2017

草原ステージの完成 © historia Inc. #出張ヒストリア2017

コンセプトアートと完成の比較 コンセプトアート 完成 © historia Inc. #出張ヒストリア2017

In-Gameの実装例 水ステージ © historia Inc. #出張ヒストリア2017

In-Game（水ステージ）の要望 ◆ ステージ クレーター・池 ◆ ランドマーク 移民船 © historia Inc. #出張ヒストリア2017

水ステージのコンセプトアート トンネル外部 トンネル内部 水/下降 森/上昇 © historia Inc. #出張ヒストリア2017

水ステージのコンセプト トンネル外部 トンネル内部 水/下降 森/上昇 • いろんなものが下に落ちていく感じ • 森のようなイメージ • 滝がゆっくり下に落ちる • 木がぐんぐん伸びる • 細い雨が進行に合わせて出現 水玉が落ちる • 谷間のような大地 © historia Inc. #出張ヒストリア2017

水ステージの完成 © historia Inc. #出張ヒストリア2017

コンセプトアートと完成の比較 コンセプトアート 完成 © historia Inc. #出張ヒストリア2017

In-Gameの実装例 氷ステージ © historia Inc. #出張ヒストリア2017

氷ステージの要望 ◆ ステージ 氷・雪 ◆ ランドマーク 氷のピラミッド © historia Inc. #出張ヒストリア2017

氷ステージのコンセプトアート トンネル外部 トンネル内部 白/ポップ/キッズ 黒/シック/アダルト © historia Inc. #出張ヒストリア2017

氷ステージのコンセプト トンネル外部 トンネル内部 白/ポップ/キッズ 黒/シック/アダルト • ピラミッド（ランドマーク）が回転 • オーロラがゆっくりとはためく • 色々なものがピョコピョコ動く • オーロラ以外には何もない空間 • アーチ状の岩と柔らかい形の雪山 • 丸い形の隕石 • 流氷がポコポコと浮き上がる © historia Inc. #出張ヒストリア2017

氷ステージの完成 © historia Inc. #出張ヒストリア2017

コンセプトアートと完成の比較 コンセプトアート 完成 © historia Inc. #出張ヒストリア2017

In-Gameの実装例 都市ステージ © historia Inc. #出張ヒストリア2017

都市ステージの要望 ◆ ステージ 都市（ニューヨークをベースに各有名都市る） ジャンクション ◆ ランドマーク 巨大プラント （巨大プラントを中心にパイプが放射線状に走っている） © historia Inc. #出張ヒストリア2017

都市ステージのコンセプトアート トンネル外部 トンネル内部 未来／ジャングル／カオス 古代／計画的な都市／秩序 © historia Inc. #出張ヒストリア2017

都市ステージのコンセプト トンネル外部 トンネル内部 未来／ジャングル／カオス 古代／計画的な都市／秩序 • 上空を走る道路 この星は重力が小さいこともあり、道路が上空に設置 されている。川のように見える。 • 丸く宙に浮いた個人住宅 • 大きなオフィスビルで埋め尽くされている • 巨大プラント • エレクトリカルパレード風 • ライトアップされた凱旋門を何度も通る なぜか自由の女神に似たシルエットをしている © historia Inc. #出張ヒストリア2017

都市ステージの完成 © historia Inc. #出張ヒストリア2017

コンセプトアートと完成の比較 コンセプトアート 完成 © historia Inc. #出張ヒストリア2017

Notes – Lane © historia Inc. #出張ヒストリア2017

Notes – Laneとは？ Notes リズムに合わせて流れてくる音符 Lane ノーツが流れてくる1本ずつの線の名称 Notes Lane © historia Inc. #出張ヒストリア2017

Notes – Laneの要望 音ゲーとして視認しやすいもの VRの音ゲーなので背景の中を移動する （これまでのゲームにない音楽との一体感） © historia Inc. #出張ヒストリア2017

他の音ゲーとの違い これまでの音ゲー Airtone 背景が黒い 背景がカラフル 視点は上から（大きさは固定） 一人称視点 （遠くにあるノーツは小さい） パースがない パースがついている （形状の認識がしくい） © historia Inc. #出張ヒストリア2017

実装 白い輪郭線をつける ビートに合わせて動かす 遠くにあると少し大きい ビートに合わせて明滅 いろいろやってます！ 難しい部分だが、カラフルな背景の中を進むというコンセプトと合わせて あきらめられない部分。 VRの音ゲーの定番を狙うためには必須だった。 © historia Inc. #出張ヒストリア2017

In-Gameの実装（モデリング） 大半のモデルはMayaで作成 その他のツールでは3DCoatを多用 – ボクセルなのでブーリアンを多用したモデルが得意 – オートリダクションでポリゴン数を調整 © historia Inc. #出張ヒストリア2017

In-Gameの実装（マテリアル） 基本的な表現/アート – カメラからの距離 – ワールドでの位置 – ライトと法線の内積 – バウンディングボックス内の座標 特殊な表現/エンジニア – 空の表現 – ビートに合わせる表現 – トンネルの表現 © historia Inc. #出張ヒストリア2017

箸休め 表現のためのエンジニアリング – ジオデシックドーム – トンネル © historia Inc. #出張ヒストリア2017

アーティスト要望 正三角形だけで作られた球が、特定の位置から 徐々に三角形が縮んで壊れていく演出を入れたい © historia Inc. #出張ヒストリア2017

こういうやつ © historia Inc. #出張ヒストリア2017

分割 プロシージャルメッシュで 正20面体（Geodesic Dome）を生成 更に、任意の数で三角形を分割できるように対応 （ConstructionScript でプレビュー可能） © historia Inc. #出張ヒストリア2017

三角形が縮む演出は 頂点アニメーション で対応 基準位置や移動方向、移動量は Normal や VertexColor をバッファとして使用 © historia Inc. #出張ヒストリア2017

箸休め 表現のためのエンジニアリング – ジオデシックドーム – トンネル © historia Inc. #出張ヒストリア2017

トンネルのコンセプトアートと構想 トンネルという形はそのまま残す 外から見ると狭そうな空間 内部では広がりがあると面白いのではないか？ （シェーダー内でレイマーチングしたような表現） 特にVRでは特別な体験になりそう © historia Inc. #出張ヒストリア2017

こういうやつ © historia Inc. #出張ヒストリア2017

「穴から向こうが見える」のよくある実装方法 静的CubeMap/パノラマ – 全方向の視界をあらかじめテクスチャとして保存 – 遠景が見える表現でよく使われる – 「Room」内で使用している（壁紙変更） – 動かない – 近景は不可（視差が再現できない） リアルタイムキャプチャ – 「向こう側」のイメージをヘッドトラッキングと同期するSceneCaptureで 取得 – 両眼分のキャプチャーが必要（おそらく高負荷） – 左右の眼でテクスチャを使い分ける必要がある（要技術検証） © historia Inc. #出張ヒストリア2017

今回用いた手法 © historia Inc. #出張ヒストリア2017

シェーダー単体でこれを実現する 視線がトンネル入口を通過するときピクセルを描画する さらに出口を通過する場合は描画しない © historia Inc. #出張ヒストリア2017

[考え方の基本①] 問題を分解する 視線がトンネル入口を通過するときピクセルを描画する 描画されるべきエリア さらに出口を通過する場合は描画しない – 入口の場合の逆を行うのみなので説明を省略 © historia Inc. #出張ヒストリア2017

[考え方の基本①] 問題を分解する 視線がトンネル入口を通過するときピクセルを描画する – （視線を含む）直線と円との衝突判定 衝突が起こるエリア – （円を含む）平面とピクセルのいずれが手前にあるかを判定 円より奥のエリア © historia Inc. #出張ヒストリア2017

[考え方の基本①] 問題を分解する 視線がトンネル入口を通過するときピクセルを描画する – （視線を含む）直線と円との衝突判定 ▪ 後で触れます 衝突が起こるエリア – （円を含む）平面とピクセルのいずれが手前にあるかを判定 ▪ P・N < C・N のとき描画 – ・は内積 – Pはピクセルの座標 – Nは法線ベクトル（図では左向き） – Cは円の中心座標 © historia Inc. 円より奥のエリア #出張ヒストリア2017

[考え方の基本①] 問題を分解する 視線がトンネル入口を通過するときピクセルを描画する – (視線を含む)直線と円との衝突判定 衝突が起こるエリア – (円を含む)平面とピクセルのいずれが手前にあるかを判定 ▪ P・N < C・N のとき描画 – Alpha = (C・N > P・N) ? 1.0 : 0.0 – Alpha = saturate((C・N–P・N)*A+0.5) ▪ 小技（グラデーション化） © historia Inc. 円より奥のエリア #出張ヒストリア2017

[考え方の基本①] 問題を分解する 視線がトンネル入口を通過するときピクセルを描画する – (視線を含む)直線と円との衝突判定 衝突が起こるエリア – (円を含む)平面とピクセルのいずれが手前にあるかを判定 円より奥のエリア © historia Inc. #出張ヒストリア2017

[考え方の基本①] 問題を分解する 視線がトンネル入口を通過するときピクセルを描画する – (視線を含む)直線と円との衝突判定 ▪ ▪ ①直線 と (円を含む)平面 との衝突判定 ② [①で得た衝突位置と円の中心との距離]を円の半径と比較 – 説明を割愛 衝突が起こるエリア © historia Inc. #出張ヒストリア2017

[考え方の基本②] 机上で解く 1. 各種条件を方程式で表現 ▪ 多くは単純な条件の組み合わせ – ベクトルの内積（ドット積）は頻繁に使う ▪ すごくよく使う 2. プログラム化できるように変形 ▪ 左辺を未知数単体、右辺を既知の値のみ で構成される式にするとプログラム化できる 3. コーディング（ノーディング） 直線と平面の衝突判定 とりあえず解いてみた © historia Inc. #出張ヒストリア2017

[考え方の基本②] 机上で解く 図と数式を使う – 頭の中に答えが出来上がっているような場合には不要 – そうでないなら必要 プレビューに頼った試行錯誤は悪手 – ゴールまでの筋道が見えていないと、はまる可能性が高い – 論理的に正しくない状態でそれっぽく見えるように調整できてしまう罠 ▪ ▪ 微妙におかしかったり 条件が変わった際にトラブル © historia Inc. #出張ヒストリア2017

[まとめ] 予め決められた形状・質感の表現ではない、 論理に依存するグラフィックス表現の使用機会が増えている。多分。 – 要因？ ▪ ▪ CPU/GPUの能力向上 ソフトウェア的な環境が整い作りやすくなった – Airtoneでも使われているということで紹介した © historia Inc. #出張ヒストリア2017

[まとめ] 問題解決のコツ – 問題をより単純な問題に分解する – 試行錯誤に頼らず机上で解決する © historia Inc. #出張ヒストリア2017

[まとめ] この手の表現は平均的なアーティストには難しい（できる人もいる） – が、特にマテリアルについてはアート系の人にアサインされがち – ロジックの組み立てにはエンジニアが適任 ▪ そしてその後のルック調整はアーティストに任せるというフローが〇 © historia Inc. #出張ヒストリア2017

[まとめ] アートな人へ – 詰まりそうならこの手のものが得意そうなエンジニア（か何か）に相談を ▪ 嬉々としてやってくれるかも（個人の感想です） エンジニアな人へ – まだの人、シェーダーどうでしょう ▪ ▪ パズル / 詰将棋感覚（楽しい） フィードバックが早くて視覚的（楽しい） © historia Inc. #出張ヒストリア2017

[まとめ] お客様(?)の声 – 「半日悩んで解けなかったやつが数分で終わるとか（笑）」 – 「何やってるか全然分からんけどすごい」 – 「他の人にもおすすめしておきます」 楽しい VS. 捗る/不可能が可能に © historia Inc. #出張ヒストリア2017

Out-Game © historia Inc. #出張ヒストリア2017

Out-Gameの要望 アンドロイドの女の子と一緒に生活する空間 白い部屋（SF感は強く出さない） In-Gameと異なり、実在感が欲しい © historia Inc. #出張ヒストリア2017

どうやって一緒に生活していることを伝えるか アンドロイドなので睡眠をとらない アンドロイドなので食事もしない プレイヤーにとって安心できる場所 いつもニコニコしていて負の感情を出さない 一緒に生活している空間とは？ © historia Inc. #出張ヒストリア2017

Out-Gameの構想 空間の変化で一緒にいることを強調 ネオンちゃんのいる空間 白ベースである意味無機質 プレイヤーと一緒に過ごすことでカラフルになっていく （ペイントオーバーによる部屋の変化コンセプト） © historia Inc. #出張ヒストリア2017

Out-Gameのデザイン なかなかちょうどいいバランスの建物に行き着かなかった 弊社の建築チームにも意見を伺い、 実際の建築物で近いイメージのものを探してもらった （仮モデルによるレイアウト） © historia Inc. （部屋のレイアウト） #出張ヒストリア2017

Out-Gameの実装 In-Gameと異なり、実在感を出したい – 壁のテクスチャにディテールノーマル – 微小サイズの塵のパーティクル （通常プレイの10倍の量の塵を出しています） © historia Inc. #出張ヒストリア2017

まとめ © historia Inc. #出張ヒストリア2017

まとめ 「ゲームアートには根拠が必要」 ゲームアート＝ゲームのテーマを自然に伝えるための手段 UE4という共通言語を使うことで アートとエンジニアのシームレスな連携ができた © historia Inc. #出張ヒストリア2017