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

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

作品紹介（動画）

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

おしながき
 ネオンのアート
 In-Gameの背景アート
 Out-Gameの背景アート
 まとめ

説明の順番
各項目を以下の順に解説
要望＝企画からの要望
構想＝上記要望を満たすアートの構想、コンセプト
実装＝アートの構想をどのように実現したか
要望構想実装

ネオンのアート

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

ネオンのキャラクターデザイン（第一稿）

ネオンのキャラクターデザイン（第二稿）

ネオンのキャラクターデザイン（決定稿）

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

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

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

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

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

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

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

In-Gameの背景アート

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

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

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

トンネル

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

トンネルの要望
インゲームの一定区間に埋めこむ
通常とは異なった遊びであることを伝える必要がある

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

In-Game
草原ステージ

草原ステージの要望
 ステージ
牧歌的な大地
 ランドマーク
マスドライバーキャッチャー
（宇宙からの荷物を受け取るための装置）

トンネル外部トンネル内部
草原/乾いている海/水の中
草原ステージのコンセプトアート

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

草原ステージの完成

コンセプトアートと完成の比較
コンセプトアート完成

In-Gameの実装例
水ステージ

In-Game（水ステージ）の要望
 ステージ
クレーター・池
移民船

水ステージのコンセプトアート
水/下降森/上昇

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

水ステージの完成

In-Gameの実装例
氷ステージ

氷ステージの要望
 ステージ
氷・雪
氷のピラミッド

氷ステージのコンセプトアート
白/ポップ/キッズ黒/シック/アダルト

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

氷ステージの完成

In-Gameの実装例
都市ステージ

都市ステージの要望
 ステージ
都市（ニューヨークをベースに各有名都市る）
ジャンクション
巨大プラント
（巨大プラントを中心にパイプが放射線状に走っている）

都市ステージのコンセプトアート
未来／ジャングル／カオス古代／計画的な都市／秩序

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

都市ステージの完成

Notes – Lane

Notes – Laneとは？
Notes
リズムに合わせて流れてくる音符
Lane
ノーツが流れてくる1本ずつの線の名称
Notes
Lane

Notes – Laneの要望
音ゲーとして視認しやすいもの
VRの音ゲーなので背景の中を移動する
（これまでのゲームにない音楽との一体感）

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

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

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

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

箸休め
表現のためのエンジニアリング
–ジオデシックドーム
–トンネル

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

こういうやつ

プロシージャルメッシュで正20面体（Geodesic Dome）を生成
更に、任意の数で三角形を分割できるように対応
（ConstructionScript でプレビュー可能）
分割

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

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

今回用いた手法

シェーダー単体でこれを実現する
視線がトンネル入口を通過するときピクセルを描画する
さらに出口を通過する場合は描画しない

さらに出口を通過する場合は描画しない
–入口の場合の逆を行うのみなので説明を省略
[考え方の基本①] 問題を分解する
描画されるべきエリア

–（視線を含む）直線と円との衝突判定
–（円を含む）平面とピクセルのいずれが手前にあるかを判定
衝突が起こるエリア
円より奥のエリア

–（視線を含む）直線と円との衝突判定
 後で触れます
–（円を含む）平面とピクセルのいずれが手前にあるかを判定
 P・N < C・N のとき描画
–・は内積
–Pはピクセルの座標
–Nは法線ベクトル（図では左向き）
–Cは円の中心座標

–(視線を含む)直線と円との衝突判定
–(円を含む)平面とピクセルのいずれが手前にあるかを判定
 P・N < C・N のとき描画
–Alpha = (C・N > P・N) ? 1.0 : 0.0
– Alpha = saturate((C・N–P・N)*A+0.5)
 小技（グラデーション化）

–(円を含む)平面とピクセルのいずれが手前にあるかを判定

 ①直線と (円を含む)平面との衝突判定
 ② [①で得た衝突位置と円の中心との距離]を円の半径と比較
–説明を割愛

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

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

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

[まとめ]
問題解決のコツ
–問題をより単純な問題に分解する
–試行錯誤に頼らず机上で解決する

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

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

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

Out-Game

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

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

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

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

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

まとめ

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

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

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

Recommended

More Related Content

More from historia_Inc

More from historia_Inc(17)

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

Editor's Notes