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

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

Art of Airtone

アートディレクター／テクニカルアーティスト黒澤

エンジニア/Tech Research 二階堂


作品紹介（動画）

https://www.youtube.com/watch?v=z3HLCpmlBBU

https://www.youtube.com/watch?v=z3HLCpmlBBU


開発体制

ジャンルエアーリズムアクション（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

フォルマントについて

少人数開発でもクオリティを諦めない- エンジニア視点から見る少人数開発の極意 -

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


ネオンの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 をバッファとして使用


箸休め

表現のためのエンジニアリング

–ジオデシックドーム

–トンネル


トンネルのコンセプトアートと構想

トンネルという形はそのまま残す

外から見ると狭そうな空間内部では広がりがあると面白いのではないか？（シェーダー内でレイマーチングしたような表現）

特にVRでは特別な体験になりそう


こういうやつ


「穴から向こうが見える」のよくある実装方法

静的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

Software

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