Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 88 Ad

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

Download to read offline


全スライドをDocswellで公開中!
https://www.docswell.com/s/historia_Inc/K4EWNZ-2017-art-of-airtone

=================================
「出張ヒストリア! UE4勉強会2017」(https://atnd.org/events/89177)で行ったVRゲーム『Airtone』のアートディレクションおよび、それをどう技術的に解決したかのスライドです。

講演者:
黒澤 徹太郎(アートディレクター / テクニカルアーティスト)
二階堂 透(エンジニア / Tech Research)

以下、セッション概要より抜粋。
VR専用エアーリズムアクションゲーム『Airtone』のアートができるまでをご紹介します。
VRでの見え方を重視したデザイン、Roomとリズムゲーム部分でのアートの方向性や、音とのシンクロ感、トンネル(ゲームの中で異空間が広がっている表現)などの工夫、そしてそれをUE4の機能で実現したかについて語ります。
=================================


全スライドをDocswellで公開中!
https://www.docswell.com/s/historia_Inc/K4EWNZ-2017-art-of-airtone

=================================
「出張ヒストリア! UE4勉強会2017」(https://atnd.org/events/89177)で行ったVRゲーム『Airtone』のアートディレクションおよび、それをどう技術的に解決したかのスライドです。

講演者:
黒澤 徹太郎(アートディレクター / テクニカルアーティスト)
二階堂 透(エンジニア / Tech Research)

以下、セッション概要より抜粋。
VR専用エアーリズムアクションゲーム『Airtone』のアートができるまでをご紹介します。
VRでの見え方を重視したデザイン、Roomとリズムゲーム部分でのアートの方向性や、音とのシンクロ感、トンネル(ゲームの中で異空間が広がっている表現)などの工夫、そしてそれをUE4の機能で実現したかについて語ります。
=================================

Advertisement
Advertisement

More Related Content

More from historia_Inc (17)

Recently uploaded (20)

Advertisement

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

  1. 1. © historia Inc. #出張ヒストリア2017 Art of Airtone アートディレクター/ テクニカルアーティスト 黒澤 エンジニア/ Tech Research 二階堂
  2. 2. © historia Inc. #出張ヒストリア2017 作品紹介(動画)
  3. 3. © 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 (社外)
  4. 4. © historia Inc. #出張ヒストリア2017 おしながき  ネオンのアート  In-Gameの背景アート  Out-Gameの背景アート  まとめ
  5. 5. © historia Inc. #出張ヒストリア2017 説明の順番 各項目を以下の順に解説 要望 = 企画からの要望 構想 = 上記要望を満たすアートの構想、コンセプト 実装 = アートの構想をどのように実現したか 要望 構想 実装
  6. 6. © historia Inc. #出張ヒストリア2017 ネオンのアート
  7. 7. © historia Inc. #出張ヒストリア2017 ネオンの要望 王道ヒロイン感 ゲームの案内役(子供すぎない) 動きのでる髪型、服装 このゲームならではの特徴(音楽モチーフ) キャラクターデザイン ポリゴン・ピクチュアズ 森山佑樹さま Airtoneのヒロイン ネオンちゃん
  8. 8. © historia Inc. #出張ヒストリア2017 ネオンのキャラクターデザイン(第一稿)
  9. 9. © historia Inc. #出張ヒストリア2017 ネオンのキャラクターデザイン(第二稿)
  10. 10. © historia Inc. #出張ヒストリア2017 ネオンのキャラクターデザイン(決定稿)
  11. 11. © historia Inc. #出張ヒストリア2017 ネオンの制作フロー 製作期間 約3週間 モデリング+マテリアル+テクスチャ+リグ 3DCoat(スカルプト・リトポ・UV・テクスチャ) Maya(リグ・ウエイト・BlendShape) UE4(マテリアル)
  12. 12. © historia Inc. #出張ヒストリア2017 モデリングワークフロー 3DCoatでスカルプト 自動リダクションで直接UE4に出力、VRで確認 VRで見るとデザインそのままでは現実感がなかった 体の細さ、目の大きさなどをVRで確認しながら調整
  13. 13. © historia Inc. #出張ヒストリア2017 ジョイント/モーフ 顔のジョイントはまぶた/眼球 –大きな回転で動かすものはジョイント –小さな変化のものはモーフ –【例外】リップシンクはフォルマントによる自動制御 モーフのみの制御 表情の変化はBlendSpace フォルマントについて 少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
  14. 14. © historia Inc. #出張ヒストリア2017 ネオンのNPR表現の要望 キャラクターデザインに合わせた表現 ある程度の現実感/実在感がほしい (VRでは重要) (開発中テストショット)
  15. 15. © historia Inc. #出張ヒストリア2017 ネオンのNPR表現の構想 肌 基本的にはトゥーン すこし柔らかめにしてパキッとしすぎない 目 瞳孔の微妙な揺れを入れて実在感を出す 瞳のウルウルさせる 服 トゥーン表現にくわえ、リフレクションを入れる VRなので、現実感/手触り感をだしたい
  16. 16. © historia Inc. #出張ヒストリア2017 ネオンのNPR表現の実装(肌と服のマテリアル) トゥーン表現 ライトベクトルと法線の内積 LUTに輪郭をぼかした物を使用 擬似的なスペキュラー リフレクションベクターと法線の内積 輪郭線は反転モデル(色トレス用のUV)
  17. 17. © historia Inc. #出張ヒストリア2017 ネオンのNPR表現の実装(瞳のマテリアル) 白目/黒目/瞳孔/ハイライトの4層構造 BumpOffsetで、テクスチャの座標をずらし、 奥にある感じを出す 時間ベースのハイライトのランダム揺れ 瞳孔の拡縮に対応
  18. 18. © historia Inc. #出張ヒストリア2017 In-Gameの背景アート
  19. 19. © historia Inc. #出張ヒストリア2017 各ステージのコンセプト(企画) 企画がステージの基本となる舞台とランドマークを設定 –ステージ 自然物 –ランドマーク 人工物 ステージ全体の印象はSF過ぎないようにしたい ランドマークでSF感を出す ランドマークがあることでステージの基準向きがわかる
  20. 20. © historia Inc. #出張ヒストリア2017 In-Gameの要望 ほどよい未来感 ✕ 重厚なSF ◯ マジカルミライのような日本人ウケするSF モーショングラフィックス的な映像 –曲に合わせて自動的な演出 –音ゲー的な世界観+音に合わせて動く 空間を飛行する 短納期(だいたい1ステージ10日)
  21. 21. © historia Inc. #出張ヒストリア2017 In-Gameのコンセプトアートと構想 フラットな質感を多用 モーショングラフィックスになじませる テクスチャを使用せず、マテリアルで質感をつける – ワールド座標で色を決める – テクスチャの制作期間をカット
  22. 22. © historia Inc. #出張ヒストリア2017 トンネル
  23. 23. © historia Inc. #出張ヒストリア2017 トンネルとは In-Game内のパートの一部 全身を使ったVRらしい遊びが楽しめる (レーンをなぞる遊び) インゲームにメリハリをつける役割 激しい曲での小休止の役割
  24. 24. © historia Inc. #出張ヒストリア2017 トンネルの要望 インゲームの一定区間に埋めこむ 通常とは異なった遊びであることを伝える必要がある
  25. 25. © historia Inc. #出張ヒストリア2017 トンネルのコンセプトアートと構想 トンネルという形はそのまま残す 外から見ると狭そうな空間 内部では広がりがあると面白いのではないか? (シェーダー内でレイマーチングしたような表現) 特にVRでは特別な体験になりそう
  26. 26. © historia Inc. #出張ヒストリア2017 In-Game 草原ステージ
  27. 27. © historia Inc. #出張ヒストリア2017 草原ステージの要望  ステージ 牧歌的な大地  ランドマーク マスドライバーキャッチャー (宇宙からの荷物を受け取るための装置 )
  28. 28. © historia Inc. #出張ヒストリア2017 トンネル外部 トンネル内部 草原/乾いている 海/水の中 草原ステージのコンセプトアート
  29. 29. © historia Inc. #出張ヒストリア2017 草原ステージのコンセプト トンネル外部 草原/乾いている • 唐草模様状にうねった道 • 曲に合わせて回る風車 • カプセルハウスのようなシンプルな建物 • 空に浮かぶUFO型のスピーカー トンネル内部 海/水の中 • テーブルサンゴ • 海面から差し込む光 • クジラ • プランクトン
  30. 30. © historia Inc. #出張ヒストリア2017 草原ステージの完成
  31. 31. © historia Inc. #出張ヒストリア2017 コンセプトアートと完成の比較 コンセプトアート 完成
  32. 32. © historia Inc. #出張ヒストリア2017 In-Gameの実装例 水ステージ
  33. 33. © historia Inc. #出張ヒストリア2017 In-Game(水ステージ)の要望  ステージ クレーター・池  ランドマーク 移民船
  34. 34. © historia Inc. #出張ヒストリア2017 水ステージのコンセプトアート トンネル外部 トンネル内部 水/下降 森/上昇
  35. 35. © historia Inc. #出張ヒストリア2017 水ステージのコンセプト トンネル外部 水/下降 • いろんなものが下に落ちていく感じ • 滝がゆっくり下に落ちる • 細い雨が進行に合わせて出現 水玉が落ちる • 谷間のような大地 トンネル内部 森/上昇 • 森のようなイメージ • 木がぐんぐん伸びる
  36. 36. © historia Inc. #出張ヒストリア2017 水ステージの完成
  37. 37. © historia Inc. #出張ヒストリア2017 コンセプトアートと完成の比較 コンセプトアート 完成
  38. 38. © historia Inc. #出張ヒストリア2017 In-Gameの実装例 氷ステージ
  39. 39. © historia Inc. #出張ヒストリア2017 氷ステージの要望  ステージ 氷・雪  ランドマーク 氷のピラミッド
  40. 40. © historia Inc. #出張ヒストリア2017 氷ステージのコンセプトアート トンネル外部 トンネル内部 白/ポップ/キッズ 黒/シック/アダルト
  41. 41. © historia Inc. #出張ヒストリア2017 氷ステージのコンセプト トンネル外部 白/ポップ/キッズ • ピラミッド(ランドマーク)が回転 • 色々なものがピョコピョコ動く • アーチ状の岩と柔らかい形の雪山 • 丸い形の隕石 • 流氷がポコポコと浮き上がる トンネル内部 黒/シック/アダルト • オーロラがゆっくりとはためく • オーロラ以外には何もない空間
  42. 42. © historia Inc. #出張ヒストリア2017 氷ステージの完成
  43. 43. © historia Inc. #出張ヒストリア2017 コンセプトアートと完成の比較 コンセプトアート 完成
  44. 44. © historia Inc. #出張ヒストリア2017 In-Gameの実装例 都市ステージ
  45. 45. © historia Inc. #出張ヒストリア2017 都市ステージの要望  ステージ 都市(ニューヨークをベースに各有名都市る) ジャンクション  ランドマーク 巨大プラント (巨大プラントを中心にパイプが放射線状に走っている)
  46. 46. © historia Inc. #出張ヒストリア2017 都市ステージのコンセプトアート トンネル外部 トンネル内部 未来/ジャングル/カオス 古代/計画的な都市/秩序
  47. 47. © historia Inc. #出張ヒストリア2017 都市ステージのコンセプト トンネル外部 未来/ジャングル/カオス • 上空を走る道路 この星は重力が小さいこともあり、道路が上空に設置 されている。川のように見える。 • 丸く宙に浮いた個人住宅 • 大きなオフィスビルで埋め尽くされている • 巨大プラント なぜか自由の女神に似たシルエットをしている トンネル内部 古代/計画的な都市/秩序 • エレクトリカルパレード風 • ライトアップされた凱旋門を何度も通る
  48. 48. © historia Inc. #出張ヒストリア2017 都市ステージの完成
  49. 49. © historia Inc. #出張ヒストリア2017 コンセプトアートと完成の比較 コンセプトアート 完成
  50. 50. © historia Inc. #出張ヒストリア2017 Notes – Lane
  51. 51. © historia Inc. #出張ヒストリア2017 Notes – Laneとは? Notes リズムに合わせて流れてくる音符 Lane ノーツが流れてくる1本ずつの線の名称 Notes Lane
  52. 52. © historia Inc. #出張ヒストリア2017 Notes – Laneの要望 音ゲーとして視認しやすいもの VRの音ゲーなので背景の中を移動する (これまでのゲームにない音楽との一体感)
  53. 53. © historia Inc. #出張ヒストリア2017 他の音ゲーとの違い これまでの音ゲー 背景が黒い 視点は上から(大きさは固定) パースがない Airtone 背景がカラフル 一人称視点 (遠くにあるノーツは小さい) パースがついている (形状の認識がしくい)
  54. 54. © historia Inc. #出張ヒストリア2017 実装 白い輪郭線をつける ビートに合わせて動かす 遠くにあると少し大きい ビートに合わせて明滅 いろいろやってます! 難しい部分だが、カラフルな背景の中を進むというコンセプトと合わせて あきらめられない部分。 VRの音ゲーの定番を狙うためには必須だった。
  55. 55. © historia Inc. #出張ヒストリア2017 In-Gameの実装(モデリング) 大半のモデルはMayaで作成 その他のツールでは3DCoatを多用 –ボクセルなのでブーリアンを多用したモデルが得意 –オートリダクションでポリゴン数を調整
  56. 56. © historia Inc. #出張ヒストリア2017 In-Gameの実装(マテリアル) 基本的な表現/アート –カメラからの距離 –ワールドでの位置 –ライトと法線の内積 –バウンディングボックス内の座標 特殊な表現/エンジニア –空の表現 –ビートに合わせる表現 –トンネルの表現
  57. 57. © historia Inc. #出張ヒストリア2017 箸休め 表現のためのエンジニアリング –ジオデシックドーム –トンネル
  58. 58. © historia Inc. #出張ヒストリア2017 アーティスト要望 正三角形だけで作られた球が、特定の位置から 徐々に三角形が縮んで壊れていく演出を入れたい
  59. 59. © historia Inc. #出張ヒストリア2017 こういうやつ
  60. 60. © historia Inc. #出張ヒストリア2017 プロシージャルメッシュで 正20面体(Geodesic Dome)を生成 更に、任意の数で三角形を分割できるように対応 (ConstructionScript でプレビュー可能) 分割
  61. 61. © historia Inc. #出張ヒストリア2017 三角形が縮む演出は 頂点アニメーション で対応 基準位置や移動方向、移動量は Normal や VertexColor をバッファとして使用
  62. 62. © historia Inc. #出張ヒストリア2017 箸休め 表現のためのエンジニアリング –ジオデシックドーム –トンネル
  63. 63. © historia Inc. #出張ヒストリア2017 トンネルのコンセプトアートと構想 トンネルという形はそのまま残す 外から見ると狭そうな空間 内部では広がりがあると面白いのではないか? (シェーダー内でレイマーチングしたような表現) 特にVRでは特別な体験になりそう
  64. 64. © historia Inc. #出張ヒストリア2017 こういうやつ
  65. 65. © historia Inc. #出張ヒストリア2017 「穴から向こうが見える」のよくある実装方法 静的CubeMap/パノラマ –全方向の視界をあらかじめテクスチャとして保存 –遠景が見える表現でよく使われる –「Room」内で使用している(壁紙変更) –動かない –近景は不可(視差が再現できない) リアルタイムキャプチャ –「向こう側」のイメージをヘッドトラッキングと同期するSceneCaptureで 取得 –両眼分のキャプチャーが必要(おそらく高負荷) –左右の眼でテクスチャを使い分ける必要がある(要技術検証)
  66. 66. © historia Inc. #出張ヒストリア2017 今回用いた手法
  67. 67. © historia Inc. #出張ヒストリア2017 シェーダー単体でこれを実現する 視線がトンネル入口を通過するときピクセルを描画する さらに出口を通過する場合は描画しない
  68. 68. © historia Inc. #出張ヒストリア2017 視線がトンネル入口を通過するときピクセルを描画する さらに出口を通過する場合は描画しない –入口の場合の逆を行うのみなので説明を省略 [考え方の基本①] 問題を分解する 描画されるべきエリア
  69. 69. © historia Inc. #出張ヒストリア2017 [考え方の基本①] 問題を分解する 視線がトンネル入口を通過するときピクセルを描画する –(視線を含む)直線と円との衝突判定 –(円を含む)平面とピクセルのいずれが手前にあるかを判定 衝突が起こるエリア 円より奥のエリア
  70. 70. © historia Inc. #出張ヒストリア2017 [考え方の基本①] 問題を分解する 視線がトンネル入口を通過するときピクセルを描画する –(視線を含む)直線と円との衝突判定  後で触れます –(円を含む)平面とピクセルのいずれが手前にあるかを判定  P・N < C・N のとき描画 –・は内積 –Pはピクセルの座標 –Nは法線ベクトル(図では左向き) –Cは円の中心座標 衝突が起こるエリア 円より奥のエリア
  71. 71. © 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)  小技(グラデーション化) 衝突が起こるエリア 円より奥のエリア
  72. 72. © historia Inc. #出張ヒストリア2017 [考え方の基本①] 問題を分解する 視線がトンネル入口を通過するときピクセルを描画する –(視線を含む)直線と円との衝突判定 –(円を含む)平面とピクセルのいずれが手前にあるかを判定 衝突が起こるエリア 円より奥のエリア
  73. 73. © historia Inc. #出張ヒストリア2017 [考え方の基本①] 問題を分解する 視線がトンネル入口を通過するときピクセルを描画する –(視線を含む)直線と円との衝突判定  ①直線 と (円を含む)平面 との衝突判定  ② [①で得た衝突位置と円の中心との距離]を円の半径と比較 –説明を割愛 衝突が起こるエリア
  74. 74. © historia Inc. #出張ヒストリア2017 [考え方の基本②] 机上で解く 1. 各種条件を方程式で表現  多くは単純な条件の組み合わせ –ベクトルの内積(ドット積)は頻繁に使う  すごくよく使う 2. プログラム化できるように変形  左辺を未知数単体、右辺を既知の値のみ で構成される式にするとプログラム化できる 3. コーディング(ノーディング) 直線と平面の衝突判定 とりあえず解いてみた
  75. 75. © historia Inc. #出張ヒストリア2017 [考え方の基本②] 机上で解く 図と数式を使う –頭の中に答えが出来上がっているような場合には不要 –そうでないなら必要 プレビューに頼った試行錯誤は悪手 –ゴールまでの筋道が見えていないと、はまる可能性が高い –論理的に正しくない状態でそれっぽく見えるように調整できてしまう罠  微妙におかしかったり  条件が変わった際にトラブル
  76. 76. © historia Inc. #出張ヒストリア2017 [まとめ] 予め決められた形状・質感の表現ではない、 論理に依存するグラフィックス表現の使用機会が増えている。多分。 –要因?  CPU/GPUの能力向上  ソフトウェア的な環境が整い作りやすくなった –Airtoneでも使われているということで紹介した
  77. 77. © historia Inc. #出張ヒストリア2017 [まとめ] 問題解決のコツ –問題をより単純な問題に分解する –試行錯誤に頼らず机上で解決する
  78. 78. © historia Inc. #出張ヒストリア2017 [まとめ] この手の表現は平均的なアーティストには難しい(できる人もいる) –が、特にマテリアルについてはアート系の人にアサインされがち –ロジックの組み立てにはエンジニアが適任  そしてその後のルック調整はアーティストに任せるというフローが〇
  79. 79. © historia Inc. #出張ヒストリア2017 [まとめ] アートな人へ –詰まりそうならこの手のものが得意そうなエンジニア(か何か)に相談を  嬉々としてやってくれるかも(個人の感想です) エンジニアな人へ –まだの人、シェーダーどうでしょう  パズル / 詰将棋感覚(楽しい)  フィードバックが早くて視覚的(楽しい)
  80. 80. © historia Inc. #出張ヒストリア2017 [まとめ] お客様(?)の声 –「半日悩んで解けなかったやつが数分で終わるとか(笑)」 –「何やってるか全然分からんけどすごい」 –「他の人にもおすすめしておきます」 楽しい VS. 捗る/不可能が可能に
  81. 81. © historia Inc. #出張ヒストリア2017 Out-Game
  82. 82. © historia Inc. #出張ヒストリア2017 Out-Gameの要望 アンドロイドの女の子と一緒に生活する空間 白い部屋(SF感は強く出さない) In-Gameと異なり、実在感が欲しい
  83. 83. © historia Inc. #出張ヒストリア2017 どうやって一緒に生活していることを伝えるか アンドロイドなので睡眠をとらない アンドロイドなので食事もしない プレイヤーにとって安心できる場所 いつもニコニコしていて負の感情を出さない 一緒に生活している空間とは?
  84. 84. © historia Inc. #出張ヒストリア2017 Out-Gameの構想 空間の変化で一緒にいることを強調 ネオンちゃんのいる空間 白ベースである意味無機質 プレイヤーと一緒に過ごすことでカラフルになっていく (ペイントオーバーによる部屋の変化コンセプト)
  85. 85. © historia Inc. #出張ヒストリア2017 Out-Gameのデザイン なかなかちょうどいいバランスの建物に行き着かなかった 弊社の建築チームにも意見を伺い、 実際の建築物で近いイメージのものを探してもらった (仮モデルによるレイアウト) (部屋のレイアウト)
  86. 86. © historia Inc. #出張ヒストリア2017 Out-Gameの実装 In-Gameと異なり、実在感を出したい –壁のテクスチャにディテールノーマル –微小サイズの塵のパーティクル (通常プレイの10倍の量の塵を出しています)
  87. 87. © historia Inc. #出張ヒストリア2017 まとめ
  88. 88. © historia Inc. #出張ヒストリア2017 まとめ 「ゲームアートには根拠が必要」 ゲームアート=ゲームのテーマを自然に伝えるための手段 UE4という共通言語を使うことで アートとエンジニアのシームレスな連携ができた

Editor's Notes

  • 開発体制はあくまでピーク時のもので、
    開発初期は TAとプランナーの二人体制

    ぼくは3ヶ月めくらいから本格合流しました
    それまでは別プロジェクトを進行しながら、コンセプトアートなどでアートの方向性を決めるという参加の仕方
  • 構想は本来要望よりもうえに来るものですが、ここではあくまでも
    企画からの、ゲームの、要望を満たすためのアートの構想です。
    コンセプトアートもしくは、テキストによるコンセプト

    ゲームのコンセプトや構想は要望よりも先にあるものですが、

    今後、特別なことわりがない限り、構想とかコンセプトと言った場合には
    アート面の構想、コンセプトですので、ご了承下さい
  • ネオンというのはこのゲームのヒロイン
    キャラデザはポリゴンピクチャースの森山さま

    このヒロインに求められたこと

    ゲームの案内役 音ゲーパートについて説明する役割があるという、
    ゲームデザイン的側面があって、子供過ぎないというのは必須。
    決して単なる趣味ではありませんw

    動きの出る服、主にぼくから
    うえの2つは最初から、佐々木の方から出ていた

    このような要望は最初から全部まとまった形で出せているわけでもなく、
    ラフを出していただきながら、一緒に探りながら出していったかんじ
  • 年齢や性格をふまえて、最初に大まかなシルエットを決めた

    最初からとてもいいデザインが上がってきて、スムーズにすすめることができた

    中央をベースに進めてもらった
  • 飛行する要素を出してもらう

    左を中心に進めてもらった
  • 髪留めや、胸元のト音記号などをつけ、色もこのゲームのキーカラーの黄色と青にまとめる

    最後に入った調整は、音楽モチーフ
    なにか足りないと思って、その正体を探った結果がこれだったという感じ
    音楽モチーフと言っても、このゲームにおける音楽というのが問題になる
    音符やクラシック的な記号ではなく、三角形や丸などの記号を中心にデザインを調整してもらった
  • デザインが固まったところで、モデリングなどの制作フローの話

    使用ツールの説明

    3DCoatはスカルプトソフトだけど、Zbrushと違って、リトポや3Dペイントにも強いのが特徴
    Mayaは会社のメインのDCCツール、社内ではBlenderを使うスタッフも多い

    UE4はマテリアル、今回はトゥーンレンダリングなので、DCCツールと見た目が大きく変わる。
    VRということもあり、モデルングの早い段階からUE4に持ち込んでVRでの確認を心がけた
  • こちらのモデルにはスカルプトデータからベイクしたノーマルは使用していない
    多くのゲームではスカルプトする場合は、ノーマルをベイクするため

    今回はすこし特殊な使い方。
    スカルプトしたデータを直接UE4に持ち込んでVRで確認した。

    VRで見るとデザインそのままでは、現実感がない (胴体周りが華奢すぎる、目が大きすぎるなど)
    スカルプトモデルであれば細かいことを気にせずにバランスをとることだけに集中できる。
    そのためイテレーションがはやい。 完成モデルではNormalなどのディテールを使う要素を使用しなくてもスカルプトを行う価値はある
  • 基本方針は
    モーフは変型先の形状にリニアに変わる
    なので、基本方針は口などの大きな回転が目立つものはジョイント、
    顔の筋肉などの細かい変型が多い要素はモーフ

    弊社で以前担当したねこぱライブの際にモーフが重いことは懸念していた
    しかし、4.14からモーフが軽くなった

    口の開閉もジョイントで行いたかったが、自動リップシンクの仕組みをシンプルにしたかったので、
    モーフに変更した。
    アニメ調、かつ口がそこまで大きく開かないので問題はなかった。

    フォルマントについては以前Unrealフェスで登壇した原さんのスライドを参考にしてください
  • キャラクターデザインに合わせることはあるていど当然
    しかし、モデルにも言えることですが、VRということもあり、もう少し実在感がほしかった

    開発中テストショット は、
    もう少しsifi的な世界観に合いそうな調整例、この頃はストーリーもまだ完全には固まっていなく、
    もう少しはかなげな物語になる可能性もあったので、その雰囲気が入っている
  • すこし柔らかめのトゥーン
    そこまでポリゴン数が多くないので、パキッとすると動かしたときの
    ポリゴン割によるアラが出る

    瞳のウルウルは重要。テクスチャを張っただけのような表現は、
    VRではプレゼンスが剥がれる
    実在感がうすくなる


    トゥーン表現はディテールが少ないために、左右の目から入ってくる情報も同じになりがち、立体感に乏しい。
    実在感を足すために、リフレクションを入れる工夫を行った
  • 動画はフォルマントによる自動フェイシャルによるもの

    もう少しだったね!と言ってるはず
    表情を変える機能もついているので、そのままキャプチャーした
  • 瞳はアニメやイラストでもこだわる部分ですよね、
    VRでは単にこだわって描くだけではなく、
    層になっていてテクスチャを描いただけに見えないことが重要

    瞳孔の拡縮は一応できるようにしておいたが、ゲーム内では未使用
  • In-Game 音ゲー部分のことを指す
  • 各ステージはどんな場所なのか企画が設定した
    具体的には、こんな場所でこんなものがあるという写真の選定

    アジア圏にウケる音ゲーという狙いがあったため、
    あまりSF感は強すぎないようにしたかった。

    そのため、自然物を多めにしてランドマークにSF感のあるものという方向性になった。

    ランドマークにはステージの基準向きがわかるというゲームデザイン的な役割もある。
    だいたいランドマークの方向にすすむ
  • ここでの要望とは、企画側から提示されたもの
    ここまで具体的なものがいきなり全て揃って出てくるわけではなく、ラフ画などを出しながらイメージをすりあわせていく

    隠れた要望 、納期
    リクエストにはいつも納期という条件がつきます。
  • そのままよむ

    企画から このゲームのキーカラーは青と黄色


    テクスチャをあまり使用せずに、マテリアルで質感をつける
    ワールド座標で色を付けるというのは、
    例えば地面に近い物体はなんでも地面の色になるようなもの

    このゲームは、音楽に合わせてものが出現する
    ある程度、想定外の配置が行われても、突き刺さりがわからなくなる

    演出制作はアートが行うが、演出の配置はチャートデザイナーが担当
  • In-Game 音ゲー部分のことを指す
  • プロトですでにトンネルという形になっていた
  • プロトですでにトンネルという形になっていた
  • 空間内に浮かんだボールのようなもの
    デス・スター
    入り口は狭いが内部に広大な空間
  • 以上の構想にもとづき、各ステージのコンセプトアートを作り、実装した
  • 牧歌的な大地 スタンダードなステージ。

    マスドライバーキャッチャー 宇宙からの荷物を受け取るための装置 
  • 自然・クレーター・池 Stage01と"多少"似ててOK 。スタンダード派生という扱い。

    移民船
  • 氷・雪
    氷のピラミッド
  • トンネルの中を暗くしたかったが、
    空間的な広がりがなくてイマイチだったので、そんなに暗くしなかった
  • 都市(ニューヨークをベースに各有名都市)、ジャンクション

    巨大プラント そこを中心に、パイプが放射線状に走っている
  • 無人の都市なので寂しくならないようにした
  • トンネルの中を暗くしたかったが、
    空間的な広がりがなくてイマイチだったので、そんなに暗くしなかった
  • テクスチャを貼らないため、UVも不要

    アセットを作る工数はかなり少ない
    どちらかというと、どこに何を置くべきかのほうが時間がかかった
  • こんな感じ

    僕が手掛けたものではありませんが、面白いので紹介します
  • 頂点アニメーション:頂点シェーダー(PositionOffset)
  • さっきあったページの再掲です

    VRとありますが、「両眼対応」が一つのカギ

    きちんと視差がある
  • 「トンネル」と呼ばれているが、
    機能で言うと
    「穴から別世界が見える機能」

    ・どこでもドア
    ・Portal
  • いずれも今回は採用しなかった手法ですが紹介しておきます。

    後者についてはおそらく要件を満たせた、
  • 左端のピークが視点、カメラの位置
    縦長の円がトンネルの入り口及び出口です

    こういうことができれば、
    元の風景に重ねることで要求を満たせるはず。
  • 言葉で説明するとこう。
  • 視線がトンネル入口を通過するときピクセルを描画する
    とはつまり、こういう円錐の先を切り取ったような形状のエリアを求めたい

    ぱっと見でどのように組み立てればよいか答えが出ない問題に当たった時に行うべきは、
    問題をより単純なものに分解するという作業です。

    見ての通り、「円錐」と「断面」から構成されていることが分かります。
  • つまり、問題をこのように分解できます。

    円錐の内外
    面の表裏

    二つのエリアの重なる部分が表示されるべき領域です

    それぞれについて解き方を考えます。
  • 一つ目については比較的複雑なので後で。

    面の表裏判定は簡易な式で表現できます。

    P・N < C・N のとき描画 と言われてもピンと来ない?
    →次ページへ
  • 描画するかどうかを判定
    =ようは不透明度を求めるということ。

    (三項演算子)→マテリアルエディタではIFノード

    境界をぼかす
    Aが大きいほど急に変化する
  • 次はもったいぶったコレです。

    とはいってもあまり詳しくは話しません
  • さらに分解します。

    コツ
    この手の問題を分解する場合、
    視線→視線を含む直線
    円→円を含む平面
    のように図形の境界を取り払う方向になります。

    ②は簡単なので省略します。

    ①は少しだけ複雑な問題になります。
  • プログラミングまでの手順の説明です

    とりあえず解いてみたら右のような感じ
    雰囲気を伝えるためのものなので読まなくてよいです!


    条件を数式で表現
    要素間の関係を記述すると基本的には連立方程式になる。

    実際、(内積)このスライドでも何度も出ています。多分5回目。

    UE4ではマテリアルエディタが使える
  • という感じで、この種の問題は図や数式を使って机上で解決します。

    (あれば)ホワイトボードもおすすめ。
    なぜか考えやすい。広いから?立っている状態がよい?


    プレビューができるばかりに・・・
    見た目が正解に近い=正しい処理に近い とは限らないのがこの手の問題
  • ソフトウェア環境 :ゲームエンジン、マテリアルエディタ
  • 前者についてはプログラミング全般の基本
  • ミスマッチが起こりやすい。
  • 基本的に文字やら見えない何かと戦っているエンジニア的にはけっこう楽しい部類の仕事。
  • 一緒に生活していると言ってもどんな家具を配置すればいいの?

    え?私のライフスタイルやばすぎ?
  • 下の方はヒストリアで働いて変化を感じた
    良かった部分

×