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

GREE Tech Conference 2024で発表された資料です。
https://techcon.gree.jp/2024/session/TrackB-1

Transcript

1. ヘブンバーンズレッドにおける フィールドギミックの裏側 株式会社WFS ゲームプログラマー 近藤 大地
2. 近藤 大地 株式会社コナミデジタルエンタテインメントを経て 2023年1月に株式会社WFSに入社。 現在はクライアントエンジニアとして『ヘブンバーン ズレッド』のフィールドパートを主に担当。 株式会社WFS ゲームプログラマー 2
3. 目次 • ヘブンバーンズレッドについて • リリース後からのフィールド変遷 • フィールドギミック紹介 • 具体的な実装方法や工夫、考え方等を詳しく紹介 • まとめ 3 よろしくお願いします！ WFS マスコットキャラクター: Fちゃん
4. ヘブンバーンズレッドについて 4
5. ヘブンバーンズレッド ジャンル RPG リリース 2022/ 2/ 10 配信端末 iOS, Android, Steam フィールドを駆け回り、 かけがえのない日常を体験しながら、 命を賭した戦いに挑むドラマチックRPG 5
6. ヘブンバーンズレッド ジャンル RPG リリース 2022/ 2/ 10 配信端末 iOS, Android, Steam フィールドを駆け回り、 かけがえのない日常を体験しながら、 命を賭した戦いに挑むドラマチックRPG 6 本講演は「フィールド」部分に着目した内容
7. フィールドについて紹介 - リリース後からの変遷 - 7
8. フィールドとは 8 フィールドって一体なんのことだろう？ ★ 学園やダンジョンなど、 実際にプレイヤーを操作して移動可能な場所のことをフィールドと総称 ★ その中でも物語進行やバトルが発生する最近の3Dマップに焦点を当てる そういえば、キャラクターを操作して歩けるパートのこと だって聞いた気がするなぁ
9. 初期のフィールド 9 基本的に横スクロールで 進んで行くマップで作られているみたい ダンジョン 学園
10. 現在のフィールド 10 敵が徘徊する迷路のようなマップや、 高低差のあるマップなんかも登場したね 制圧戦 5章前編
11. フィールドはどう変わった？ 11 現在 初期 ★ 自由な移動やカメラ操作に耐えられる見た目や凝った仕組み、演出等が求められる ように
12. フィールドギミック紹介 - 直近どんなギミックや演出があった？ - 12
13. ギミック紹介　- レーザー砲撃 - 13 レーザーで狙撃してくるから、 敵を避けつつ隠れる必要があるんだよね
14. ギミック紹介　- レーザー扉 / 解除端末 - 14 レーザー扉を別部隊側に存在する端末で 解除しながらルートを切り開いていくよ 解除端末 レーザー扉
15. ギミック紹介　- 一方通行扉 - 15 背面からだと通れないけど、 正面を調べると開くことができる扉だね
16. ギミック紹介　- 瓦礫 - 16 降ってくる瓦礫に 当たらないかヒヤヒヤしちゃうなぁ
17. ギミック紹介　- レールアクション - 17 レールを滑っていく疾走感がたまらないね！
18. ギミック紹介　- トランスポート補助装置 - 18 トランスポート（ワープ移動）で 崖の上まで移動ができるようになるよ
19. ギミック紹介　- 宝箱 - 19 宝箱だ！ 何が入ってるかな？
20. レーザー砲撃ギミックを抜粋して説明 20 ★ 具体的な実装方法を紹介しつつ、 3Dゲームの実装全般に応用できる考え方を交えて説明
21. 21 レーザー砲撃ギミック制作の裏側
22. 説明の流れ • ギミックの仕様 • 目指す動き • それを実現するためのアセット構成 • 実際の実装方法、表現方法 • 合間に大事な考え方や、技術的なトピックを補足 22
23. 仕様の概要 • マップに巣食う ボスが超遠距離から放つレーザー • 砲撃エリアに侵入すると起動 • 狙いを定めつつ、 レーザーのエネルギーを溜めて発射 • 爆発に巻き込まれるとダメージ 23 【ゲーム中の役割】 ★ ボスの脅威を感じさせる ★ 危険な近道を突破するか、安全に遠回りするかといった進行ルートを考えさせる
24. そもそもレーザーってどういう動きをするの？ 24 ★ どんな体験を与えたいかコンセプトを明確にする - 前スライドの仕様や役割などに相当 ★ どんな動きを目指すかを決める - 他作品や映像作品など参考になるものは数多くある ★ どんなアセット構成や表現があれば実現できるかを考える - 参考作品を研究したり実装アイディアを組み合わせる レーザーと言っても世の中には色んな表現があるよね 目指すゲーム性によって求められるものは違うから 色々考えることがあるよ
25. どんな動きを目指すか 【目指す動きに関わる仕様】 ・ 超遠距離から発射される ・ 発射口周辺でエネルギーが段階的に溜まっていき、発射とともに放出 ・ プレイヤーに狙いを定める 【そのためには何が必要か】 ・ レーザーが遠くから近づいてくるのが分かる動き ・ 発射予兆がわかりやすいエフェクト遷移 ・ レーザーとは別に、照準を定めるアセットや挙動 25
26. アセット構成 26 レーザー本体 発射口周辺 着弾 発射口周辺 + レーザー本体 + 照準ライン+ 着弾 のアセットで構成 （※ 照準ラインはスライド後半で別途説明します）
27. 各アセットの概要 【発射口周辺エフェクト】 ・エネルギーが溜まっていく様子を表現 ・ボスの内部ステート（≒ 時間経過）に合わせて順次切り替えていく 【レーザー本体】 ・発射後にプレイヤーに向けて移動させたり、シェーダーパラメータを変更 【着弾エフェクト】 ・着弾地点に発生 27 パフォーマンス面を考慮して、 一度生成したものは次回以降再利用しているよ
28. レーザー本体の構成　- 補足 - 【シェーダー】 ・主要素は UVスクロール + Fresnel 　伸縮しても破綻の少ない見た目 【ボーン】 ・根本と先端の2箇所に仕込む 　伸縮する動きの作りやすさに繋がる 28
29. レーザー本体の動き　- 発射後 - 【目標地点まで徐々にレーザーを伸ばす】 ・根本ボーンの位置は固定 ・先端ボーンの位置を目標に近づける 　レーザーが進む様子を表現 29 スローで見ると 進む動きがわかりやすいね
30. レーザー本体の動き　- 着弾後 その1- 【目標地点まで徐々にレーザーを縮める】 ・先端ボーンの位置は固定 ・根本ボーンの位置を目標に近づける 　レーザーが進む様子を表現 30 発射とは逆の動かし方を しているよ
31. レーザー本体の動き　- 着弾後 その2 - 【各パラメータを変化】 ・シェーダーのFresnel Bias ・本体のScale 　レーザーが消失する様を表現 31 再利用しているから、 次回発射時に値をリセット するのも忘れずにね
32. レーザーのヒット判定 32 ★ 速度によってすり抜けが発生 ★ パフォーマンス面で不利 ★ どこに当たるかを視覚化しづらい ★ 形状や作りによって位置ズレが起こることがある　など どうやってつくろうかな？ レーザーをでっかい当たり判定で囲んで試してみよう うーん、出来なくはないけど あまり良い手段じゃないかもしれないなぁ
33. レイキャストについて　- 補足 - 33 FちゃんAから、FちゃんBに向かう光線 = Ray 壁 位置: 0 [m] 10 [m] 20 [m] Hit！ 得られた情報 オブジェクト名：壁 位置：10 [m] Fちゃん A Fちゃん B 得られた情報 オブジェクト名：Fちゃん B 位置：20 [m] 当たった物体の情報を取得できたり、 間に障害物がはさまっているのかといったことを判断できる Hit！
34. レーザーのヒット判定　- フロー図 - 34 ・先端は目標地点へと徐々に近づく ・地形コリジョンへのレイキャスト > ヒット地点を割り出す 目標設定（プレイヤー） ヒットまで繰り返し 根本から先端へ レイキャスト 目標更新（ヒット箇所） 各種イベント 地形ヒットイベント / プレイヤー被弾判定 など > カメラシェイク、着弾エフェクト、ダメージ処理 着弾 ヒット箇所を目標地点に設定 > 複数ヒット時は発射地点に最も近い箇所を優先 流れを図にしたよ 発射
35. レーザーのヒット判定　- 視覚化 - 35 レイと目標地点 爆発範囲 地形ヒット箇所
36. 36 どう判定されているのかが リアルタイムで分かるように作っているんだね レーザーのヒット判定　- 視覚化 -
37. プレイヤーの被弾判定　- フロー図 - 37 プレイヤーと着弾地点間の距離で判定 > 前スライドの黄色の球体範囲 地形ヒットイベント 判定繰り返し 爆発範囲内か 遮蔽されているか 判定消滅 一定時間で判定消滅 > トランスポートで避けたりもできるように時間は短め 判定時間経過 プレイヤーから着弾地点へのレイキャスト > 『間に壁や床があった = 爆風が遮られている』 　 として被弾判定にしない 被弾判定開始 こっちも図にしたよ
38. ヒット判定のまとめ 38 ★ レイキャストを上手く使いこなす ★ 状況に応じて、コリジョン同士の判定と使い分ける ★ 判定を視覚化できると調整・デバッグ時に便利 ★ 判定は納得感のあるものだと良し レイキャストを上手く使うと、色んな表現ができるんだね システムの制約によって実装が難しいこともあるけど、 応用の効く考え方だから覚えておこうっと
39. 照準ライン 39 ★ プレイヤーは危険な状態なのか ★ レーザーの被弾から隠れられるスポットはどこなのか ★ レーザー発射まであとどれくらいか　を伝える役割 これは何のために必要なんだろう？ 「現在位置がレーザーに当たる危険な状態だと プレイヤーに知らせる表現をしたい」 という仕様実現に必要な機能なんだって聞いた気がする
40. 照準ラインの構成　- 補足 - 40 レーザー本体と似た作りだね 【シェーダー】 ・主要素は UVスクロール + Fresnel ・ノイズ やボロノイによる粒子の拡散 　伸縮しても破綻の少ない見た目 【ボーン】 ・根本と先端の2箇所に仕込む 　伸縮する動きの作りやすさに繋がる
41. 照準の動き　- 基本挙動 - 【ボーンの位置】 ・根本ボーンは固定 ・先端ボーンはヒット箇所 【エフェクト変化】 ・アニメーション ・周辺エフェクトとリンクして色変化 41 こっちも考え方は レーザー本体と同じだね
42. 照準の動き　- 追従する動き - 【減衰追従】 ・現在位置から目標位置へ動かす際の 　変化量を前フレームより小さくする 　短時間の間に減速しながら 　目的地へ到達することを繰り返すイメージ プレイヤーの移動に遅延しながら滑らかに追従 42 ピッタリくっついてくると、 狙いを定めている表現からは 遠くなっちゃうからね
43. 照準の動き　- パーツのターゲッティング - 【狙うパーツの変更を交互に繰り返す】 ・プレイヤーの中心を狙う ・ランダムなパーツを狙う 　 　頭や両手両足など 　狙う候補は事前にピックアップ 　ターゲットを解析しながら 　狙いすましているかのような表現 43 位置はプレイヤーの ボーンを参照しているよ
44. 照準の動き　- パーツのターゲッティング - 【最後は必ず中心で止まってから発射】 ・プレイヤーの中心を狙う ・ランダムなパーツを狙う 　解析が終わって、 　最適な箇所 = 中心 に狙いを定めた表現 44 中心でピタッと止まるから、 狙いが定まった感じがするね
45. 照準の動き　- だんだん激しく - 【時間経過で激しさが増す】 ・ターゲットの切り替わり速度 上昇 ・追尾強度 上昇 　　減衰追従に影響 ・解析が急速に進んで行くかのような表現 ・プレイヤーに発射が迫る危険性を伝える 45 実際には 移動速度やトランスポート中か、 といった状況に応じてさらに細か く設定されているんだよ
46. 照準のヒット判定　- フロー図 - 46 レーザー本体と基本の流れは統一化 目標設定（プレイヤー） 発射まで繰り返し 目標へレイキャスト 照準先端の位置更新 （ヒット箇所） 照準消滅 発射 内部ステート変更に伴った レーザー側の処理 + 照準側の処理 ＞エフェクト変更や照準の動きなど 照準生成 照準のターゲッティング 内部ステート変更 また図にしてみたよ
47. ギミック制作のまとめ 47 - 大切なこと- ★ どんな体験を与えたいかコンセプトを明確にする - 仕様や役割などに相当 ★ どんな動きを目指すかを決める - 他作品や映像作品など参考になるものは数多くある ★ どんなアセット構成や表現があれば実現できるかを考える - 参考作品を研究したり実装アイディアを組み合わせる ★ 表現したいことを限られた時間内で実現できる実装方法を模索する 続けることで引き出しの量も徐々に増えてくる 大事なので再掲！
48. 参考　- その他の処理 - 48 ★ 今回は見た目や動きを中心に話したが、他にも色々やっていることがある • ギミック挙動 - 攻撃エリア外に出たりバトル突入等したら攻撃をキャンセルする等 • UIやステータスへの反映 - 被弾時にHUDを更新したり、バトルのステータスに反映させる • 演出用機能 - インゲーム外でスクリプトから指定地点へレーザーを発射するAPI • 3Dサウンド - 距離や遮蔽に応じた音の減衰など • ダウンロードが発生しにくい仕組み • その他、既存システムで動かすための色々なお作法 紹介しきれなかった 部分はブースで聞けるかも
49. 参考　- 全体の調整用パラメータ - 49 設定値は非公開だけど、 画像に入り切らないくらい パラメータがあるのがわかるね • ほぼ全てのパラメータを調整可能 - UnityのScriptableObject を利用 リアルタイムに調整 & 保存できる • インゲーム内外で読み込むパラメータを変 えている • 作ったらドキュメント化もしよう
50. まとめ 50 ★ アップデートにより3Dフィールドを駆け回るゲーム性へと進化 - 自由な移動やカメラ操作に耐えられる見た目や凝った仕組み、 演出等が求められるようになった ★ レーザーの作り方に絞って制作の裏側を紹介 - 実現にあたっての考え方、アセット構成、具体的な実装方法を説明 - 3Dゲーム全般に応用できる考え方なので、 引き出しを増やす、実装のヒントを得る機会へ繋がったら嬉しい おつかれさまでした！
51. ご清聴ありがとうございました 51