『ヘブンバーンズレッド』におけるフィールドギミックの裏側

by gree_tech

Slide 1

Slide 1 text

ヘブンバーンズレッドにおけるフィールドギミックの裏側株式会社WFS ゲームプログラマー近藤大地

Slide 2

Slide 2 text

近藤大地株式会社コナミデジタルエンタテインメントを経て 2023年1月に株式会社WFSに入社。現在はクライアントエンジニアとして『ヘブンバーンズレッド』のフィールドパートを主に担当。株式会社WFS ゲームプログラマー 2

Slide 3

Slide 3 text

目次 ● ヘブンバーンズレッドについて ● リリース後からのフィールド変遷 ● フィールドギミック紹介 ● 具体的な実装方法や工夫、考え方等を詳しく紹介 ● まとめ 3 よろしくお願いします！ WFS マスコットキャラクター: Fちゃん

Slide 4

Slide 4 text

ヘブンバーンズレッドについて 4

Slide 5

Slide 5 text

ヘブンバーンズレッドジャンル RPG リリース 2022/ 2/ 10 配信端末 iOS, Android, Steam フィールドを駆け回り、かけがえのない日常を体験しながら、命を賭した戦いに挑むドラマチックRPG 5

Slide 6

Slide 6 text

ヘブンバーンズレッドジャンル RPG リリース 2022/ 2/ 10 配信端末 iOS, Android, Steam フィールドを駆け回り、かけがえのない日常を体験しながら、命を賭した戦いに挑むドラマチックRPG 6 本講演は「フィールド」部分に着目した内容

Slide 7

Slide 7 text

フィールドについて紹介 - リリース後からの変遷 - 7

Slide 8

Slide 8 text

フィールドとは 8 フィールドって一体なんのことだろう？ ★ 学園やダンジョンなど、実際にプレイヤーを操作して移動可能な場所のことをフィールドと総称 ★ その中でも物語進行やバトルが発生する最近の3Dマップに焦点を当てるそういえば、キャラクターを操作して歩けるパートのことだって聞いた気がするなぁ

Slide 9

Slide 9 text

初期のフィールド 9 基本的に横スクロールで進んで行くマップで作られているみたいダンジョン学園

Slide 10

Slide 10 text

現在のフィールド 10 敵が徘徊する迷路のようなマップや、高低差のあるマップなんかも登場したね制圧戦 5章前編

Slide 11

Slide 11 text

フィールドはどう変わった？ 11 現在初期 ★ 自由な移動やカメラ操作に耐えられる見た目や凝った仕組み、演出等が求められるように

Slide 12

Slide 12 text

フィールドギミック紹介 - 直近どんなギミックや演出があった？ - 12

Slide 13

Slide 13 text

ギミック紹介　- レーザー砲撃 - 13 レーザーで狙撃してくるから、敵を避けつつ隠れる必要があるんだよね

Slide 14

Slide 14 text

ギミック紹介　- レーザー扉 / 解除端末 - 14 レーザー扉を別部隊側に存在する端末で解除しながらルートを切り開いていくよ解除端末レーザー扉

Slide 15

Slide 15 text

ギミック紹介　- 一方通行扉 - 15 背面からだと通れないけど、正面を調べると開くことができる扉だね

Slide 16

Slide 16 text

ギミック紹介　- 瓦礫 - 16 降ってくる瓦礫に当たらないかヒヤヒヤしちゃうなぁ

Slide 17

Slide 17 text

ギミック紹介　- レールアクション - 17 レールを滑っていく疾走感がたまらないね！

Slide 18

Slide 18 text

ギミック紹介　- トランスポート補助装置 - 18 トランスポート（ワープ移動）で崖の上まで移動ができるようになるよ

Slide 19

Slide 19 text

ギミック紹介　- 宝箱 - 19 宝箱だ！何が入ってるかな？

Slide 20

Slide 20 text

レーザー砲撃ギミックを抜粋して説明 20 ★ 具体的な実装方法を紹介しつつ、 3Dゲームの実装全般に応用できる考え方を交えて説明

Slide 21

Slide 21 text

21 レーザー砲撃ギミック制作の裏側

Slide 22

Slide 22 text

説明の流れ ● ギミックの仕様 ● 目指す動き ● それを実現するためのアセット構成 ● 実際の実装方法、表現方法 ● 合間に大事な考え方や、技術的なトピックを補足 22

Slide 23

Slide 23 text

仕様の概要 ● マップに巣食うボスが超遠距離から放つレーザー ● 砲撃エリアに侵入すると起動 ● 狙いを定めつつ、レーザーのエネルギーを溜めて発射 ● 爆発に巻き込まれるとダメージ 23 【ゲーム中の役割】 ★ ボスの脅威を感じさせる ★ 危険な近道を突破するか、安全に遠回りするかといった進行ルートを考えさせる

Slide 24

Slide 24 text

そもそもレーザーってどういう動きをするの？ 24 ★ どんな体験を与えたいかコンセプトを明確にする - 前スライドの仕様や役割などに相当 ★ どんな動きを目指すかを決める - 他作品や映像作品など参考になるものは数多くある ★ どんなアセット構成や表現があれば実現できるかを考える - 参考作品を研究したり実装アイディアを組み合わせるレーザーと言っても世の中には色んな表現があるよね目指すゲーム性によって求められるものは違うから色々考えることがあるよ

Slide 25

Slide 25 text

どんな動きを目指すか【目指す動きに関わる仕様】・超遠距離から発射される・発射口周辺でエネルギーが段階的に溜まっていき、発射とともに放出・プレイヤーに狙いを定める【そのためには何が必要か】・レーザーが遠くから近づいてくるのが分かる動き・発射予兆がわかりやすいエフェクト遷移・レーザーとは別に、照準を定めるアセットや挙動 25

Slide 26

Slide 26 text

アセット構成 26 レーザー本体発射口周辺着弾発射口周辺 + レーザー本体 + 照準ライン+ 着弾のアセットで構成（※ 照準ラインはスライド後半で別途説明します）

Slide 27

Slide 27 text

各アセットの概要【発射口周辺エフェクト】・エネルギーが溜まっていく様子を表現・ボスの内部ステート（≒ 時間経過）に合わせて順次切り替えていく【レーザー本体】・発射後にプレイヤーに向けて移動させたり、シェーダーパラメータを変更【着弾エフェクト】・着弾地点に発生 27 パフォーマンス面を考慮して、一度生成したものは次回以降再利用しているよ

Slide 28

Slide 28 text

レーザー本体の構成　- 補足 - 【シェーダー】・主要素は UVスクロール + Fresnel 　伸縮しても破綻の少ない見た目【ボーン】・根本と先端の2箇所に仕込む　伸縮する動きの作りやすさに繋がる 28

Slide 29

Slide 29 text

レーザー本体の動き　- 発射後 - 【目標地点まで徐々にレーザーを伸ばす】・根本ボーンの位置は固定・先端ボーンの位置を目標に近づける　レーザーが進む様子を表現 29 スローで見ると進む動きがわかりやすいね

Slide 30

Slide 30 text

レーザー本体の動き　- 着弾後その1- 【目標地点まで徐々にレーザーを縮める】・先端ボーンの位置は固定・根本ボーンの位置を目標に近づける　レーザーが進む様子を表現 30 発射とは逆の動かし方をしているよ

Slide 31

Slide 31 text

レーザー本体の動き　- 着弾後その2 - 【各パラメータを変化】・シェーダーのFresnel Bias ・本体のScale 　レーザーが消失する様を表現 31 再利用しているから、次回発射時に値をリセットするのも忘れずにね

Slide 32

Slide 32 text

レーザーのヒット判定 32 ★ 速度によってすり抜けが発生 ★ パフォーマンス面で不利 ★ どこに当たるかを視覚化しづらい ★ 形状や作りによって位置ズレが起こることがある　などどうやってつくろうかな？レーザーをでっかい当たり判定で囲んで試してみよううーん、出来なくはないけどあまり良い手段じゃないかもしれないなぁ

Slide 33

Slide 33 text

レイキャストについて　- 補足 - 33 FちゃんAから、FちゃんBに向かう光線 = Ray 壁位置: 0 [m] 10 [m] 20 [m] Hit！得られた情報オブジェクト名：壁位置：10 [m] Fちゃん A Fちゃん B 得られた情報オブジェクト名：Fちゃん B 位置：20 [m] 当たった物体の情報を取得できたり、間に障害物がはさまっているのかといったことを判断できる Hit！

Slide 34

Slide 34 text

レーザーのヒット判定　- フロー図 - 34 ・先端は目標地点へと徐々に近づく・地形コリジョンへのレイキャスト > ヒット地点を割り出す目標設定（プレイヤー）ヒットまで繰り返し根本から先端へレイキャスト目標更新（ヒット箇所）各種イベント地形ヒットイベント / プレイヤー被弾判定など > カメラシェイク、着弾エフェクト、ダメージ処理着弾ヒット箇所を目標地点に設定 > 複数ヒット時は発射地点に最も近い箇所を優先流れを図にしたよ発射

Slide 35

Slide 35 text

レーザーのヒット判定　- 視覚化 - 35 レイと目標地点爆発範囲地形ヒット箇所

Slide 36

Slide 36 text

36 どう判定されているのかがリアルタイムで分かるように作っているんだねレーザーのヒット判定　- 視覚化 -

Slide 37

Slide 37 text

プレイヤーの被弾判定　- フロー図 - 37 プレイヤーと着弾地点間の距離で判定 > 前スライドの黄色の球体範囲地形ヒットイベント判定繰り返し爆発範囲内か遮蔽されているか判定消滅一定時間で判定消滅 > トランスポートで避けたりもできるように時間は短め判定時間経過プレイヤーから着弾地点へのレイキャスト > 『間に壁や床があった = 爆風が遮られている』　として被弾判定にしない被弾判定開始こっちも図にしたよ

Slide 38

Slide 38 text

ヒット判定のまとめ 38 ★ レイキャストを上手く使いこなす ★ 状況に応じて、コリジョン同士の判定と使い分ける ★ 判定を視覚化できると調整・デバッグ時に便利 ★ 判定は納得感のあるものだと良しレイキャストを上手く使うと、色んな表現ができるんだねシステムの制約によって実装が難しいこともあるけど、応用の効く考え方だから覚えておこうっと

Slide 39

Slide 39 text

照準ライン 39 ★ プレイヤーは危険な状態なのか ★ レーザーの被弾から隠れられるスポットはどこなのか ★ レーザー発射まであとどれくらいか　を伝える役割これは何のために必要なんだろう？「現在位置がレーザーに当たる危険な状態だとプレイヤーに知らせる表現をしたい」という仕様実現に必要な機能なんだって聞いた気がする

Slide 40

Slide 40 text

照準ラインの構成　- 補足 - 40 レーザー本体と似た作りだね【シェーダー】・主要素は UVスクロール + Fresnel ・ノイズやボロノイによる粒子の拡散　伸縮しても破綻の少ない見た目【ボーン】・根本と先端の2箇所に仕込む　伸縮する動きの作りやすさに繋がる

Slide 41

Slide 41 text

照準の動き　- 基本挙動 - 【ボーンの位置】・根本ボーンは固定・先端ボーンはヒット箇所【エフェクト変化】・アニメーション・周辺エフェクトとリンクして色変化 41 こっちも考え方はレーザー本体と同じだね

Slide 42

Slide 42 text

照準の動き　- 追従する動き - 【減衰追従】・現在位置から目標位置へ動かす際の　変化量を前フレームより小さくする　短時間の間に減速しながら　目的地へ到達することを繰り返すイメージプレイヤーの移動に遅延しながら滑らかに追従 42 ピッタリくっついてくると、狙いを定めている表現からは遠くなっちゃうからね

Slide 43

Slide 43 text

照準の動き　- パーツのターゲッティング - 【狙うパーツの変更を交互に繰り返す】・プレイヤーの中心を狙う・ランダムなパーツを狙う　　頭や両手両足など　狙う候補は事前にピックアップ　ターゲットを解析しながら　狙いすましているかのような表現 43 位置はプレイヤーのボーンを参照しているよ

Slide 44

Slide 44 text

照準の動き　- パーツのターゲッティング - 【最後は必ず中心で止まってから発射】・プレイヤーの中心を狙う・ランダムなパーツを狙う　解析が終わって、　最適な箇所 = 中心に狙いを定めた表現 44 中心でピタッと止まるから、狙いが定まった感じがするね

Slide 45

Slide 45 text

照準の動き　- だんだん激しく - 【時間経過で激しさが増す】・ターゲットの切り替わり速度上昇・追尾強度上昇　　減衰追従に影響・解析が急速に進んで行くかのような表現・プレイヤーに発射が迫る危険性を伝える 45 実際には移動速度やトランスポート中か、といった状況に応じてさらに細かく設定されているんだよ

Slide 46

Slide 46 text

照準のヒット判定　- フロー図 - 46 レーザー本体と基本の流れは統一化目標設定（プレイヤー）発射まで繰り返し目標へレイキャスト照準先端の位置更新（ヒット箇所）照準消滅発射内部ステート変更に伴ったレーザー側の処理 + 照準側の処理＞エフェクト変更や照準の動きなど照準生成照準のターゲッティング内部ステート変更また図にしてみたよ

Slide 47

Slide 47 text

ギミック制作のまとめ 47 - 大切なこと- ★ どんな体験を与えたいかコンセプトを明確にする - 仕様や役割などに相当 ★ どんな動きを目指すかを決める - 他作品や映像作品など参考になるものは数多くある ★ どんなアセット構成や表現があれば実現できるかを考える - 参考作品を研究したり実装アイディアを組み合わせる ★ 表現したいことを限られた時間内で実現できる実装方法を模索する続けることで引き出しの量も徐々に増えてくる大事なので再掲！

Slide 48

Slide 48 text

参考　- その他の処理 - 48 ★ 今回は見た目や動きを中心に話したが、他にも色々やっていることがある ● ギミック挙動 - 攻撃エリア外に出たりバトル突入等したら攻撃をキャンセルする等 ● UIやステータスへの反映 - 被弾時にHUDを更新したり、バトルのステータスに反映させる ● 演出用機能 - インゲーム外でスクリプトから指定地点へレーザーを発射するAPI ● 3Dサウンド - 距離や遮蔽に応じた音の減衰など ● ダウンロードが発生しにくい仕組み ● その他、既存システムで動かすための色々なお作法紹介しきれなかった部分はブースで聞けるかも

Slide 49

Slide 49 text

参考　- 全体の調整用パラメータ - 49 設定値は非公開だけど、画像に入り切らないくらいパラメータがあるのがわかるね ● ほぼ全てのパラメータを調整可能 - UnityのScriptableObject を利用リアルタイムに調整 & 保存できる ● インゲーム内外で読み込むパラメータを変えている ● 作ったらドキュメント化もしよう

Slide 50

Slide 50 text

まとめ 50 ★ アップデートにより3Dフィールドを駆け回るゲーム性へと進化 - 自由な移動やカメラ操作に耐えられる見た目や凝った仕組み、演出等が求められるようになった ★ レーザーの作り方に絞って制作の裏側を紹介 - 実現にあたっての考え方、アセット構成、具体的な実装方法を説明 - 3Dゲーム全般に応用できる考え方なので、引き出しを増やす、実装のヒントを得る機会へ繋がったら嬉しいおつかれさまでした！