Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
Search
gree_tech
PRO
October 25, 2024
Technology
2
39
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
GREE Tech Conference 2024で発表された資料です。
https://techcon.gree.jp/2024/session/TrackB-1
gree_tech
PRO
October 25, 2024
Tweet
Share
More Decks by gree_tech
See All by gree_tech
REALITY株式会社における開発生産性向上の取り組み: 失敗と成功から学んだこと
gree_tech
PRO
1
54
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
27
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
21
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
23
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
30
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
36
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
40
Jamstack でリニューアルするグリーグループのメディア
gree_tech
PRO
2
210
「Groupee 」で実現!システム横断で権限管理を一元化し、グループ管理の悩みを解決
gree_tech
PRO
1
21
Other Decks in Technology
See All in Technology
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
16
3.5k
内製化によるシステムモダナイゼーションの実践
kazokmr
3
510
Nix入門パラダイム編
asa1984
1
160
Hotwire光の道とStimulus
nay3
5
2k
品質の高い機能を”早く”提供するために技術的な面でチームでやったこと、やりたいこと
sansantech
PRO
2
230
生成AI×マルチテナントSaaSな新規事業を立ち上げる上でテックリードとして気を使った点の紹介
lunastera
0
510
DevOpsに関連するツールとその概要を淡々と読み上げる会
devops_vtj
1
140
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
300
JPOUG_10_20241018_OracleDB_AWS_v1.3.pdf
asahihidehiko
2
240
EKS初心者が早めに知っておきたかったこと
cuorain
0
130
生成AIの活用パターンと継続的評価
asei
10
1.3k
ZOZOのデータマネジメントの取り組み:これまでとこれから / ZOZO's Data Management Initiatives
takagiyudai
0
550
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
YesSQL, Process and Tooling at Scale
rocio
167
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Thoughts on Productivity
jonyablonski
67
4.3k
Code Review Best Practice
trishagee
64
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Designing for humans not robots
tammielis
249
25k
Transcript
ヘブンバーンズレッドにおける フィールドギミックの裏側 株式会社WFS ゲームプログラマー 近藤 大地
近藤 大地 株式会社コナミデジタルエンタテインメントを経て 2023年1月に株式会社WFSに入社。 現在はクライアントエンジニアとして『ヘブンバーン ズレッド』のフィールドパートを主に担当。 株式会社WFS ゲームプログラマー 2
目次 • ヘブンバーンズレッドについて • リリース後からのフィールド変遷 • フィールドギミック紹介 • 具体的な実装方法や工夫、考え方等を詳しく紹介 •
まとめ 3 よろしくお願いします! WFS マスコットキャラクター: Fちゃん
ヘブンバーンズレッドについて 4
ヘブンバーンズレッド ジャンル RPG リリース 2022/ 2/ 10 配信端末 iOS, Android,
Steam フィールドを駆け回り、 かけがえのない日常を体験しながら、 命を賭した戦いに挑むドラマチックRPG 5
ヘブンバーンズレッド ジャンル RPG リリース 2022/ 2/ 10 配信端末 iOS, Android,
Steam フィールドを駆け回り、 かけがえのない日常を体験しながら、 命を賭した戦いに挑むドラマチックRPG 6 本講演は「フィールド」部分に着目した内容
フィールドについて紹介 - リリース後からの変遷 - 7
フィールドとは 8 フィールドって一体なんのことだろう? ★ 学園やダンジョンなど、 実際にプレイヤーを操作して移動可能な場所のことをフィールドと総称 ★ その中でも物語進行やバトルが発生する最近の3Dマップに焦点を当てる そういえば、キャラクターを操作して歩けるパートのこと だって聞いた気がするなぁ
初期のフィールド 9 基本的に横スクロールで 進んで行くマップで作られているみたい ダンジョン 学園
現在のフィールド 10 敵が徘徊する迷路のようなマップや、 高低差のあるマップなんかも登場したね 制圧戦 5章前編
フィールドはどう変わった? 11 現在 初期 ★ 自由な移動やカメラ操作に耐えられる見た目や凝った仕組み、演出等が求められる ように
フィールドギミック紹介 - 直近どんなギミックや演出があった? - 12
ギミック紹介 - レーザー砲撃 - 13 レーザーで狙撃してくるから、 敵を避けつつ隠れる必要があるんだよね
ギミック紹介 - レーザー扉 / 解除端末 - 14 レーザー扉を別部隊側に存在する端末で 解除しながらルートを切り開いていくよ 解除端末 レーザー扉
ギミック紹介 - 一方通行扉 - 15 背面からだと通れないけど、 正面を調べると開くことができる扉だね
ギミック紹介 - 瓦礫 - 16 降ってくる瓦礫に 当たらないかヒヤヒヤしちゃうなぁ
ギミック紹介 - レールアクション - 17 レールを滑っていく疾走感がたまらないね!
ギミック紹介 - トランスポート補助装置 - 18 トランスポート(ワープ移動)で 崖の上まで移動ができるようになるよ
ギミック紹介 - 宝箱 - 19 宝箱だ! 何が入ってるかな?
レーザー砲撃ギミックを抜粋して説明 20 ★ 具体的な実装方法を紹介しつつ、 3Dゲームの実装全般に応用できる考え方を交えて説明
21 レーザー砲撃ギミック制作の裏側
説明の流れ • ギミックの仕様 • 目指す動き • それを実現するためのアセット構成 • 実際の実装方法、表現方法 •
合間に大事な考え方や、技術的なトピックを補足 22
仕様の概要 • マップに巣食う ボスが超遠距離から放つレーザー • 砲撃エリアに侵入すると起動 • 狙いを定めつつ、 レーザーのエネルギーを溜めて発射 •
爆発に巻き込まれるとダメージ 23 【ゲーム中の役割】 ★ ボスの脅威を感じさせる ★ 危険な近道を突破するか、安全に遠回りするかといった進行ルートを考えさせる
そもそもレーザーってどういう動きをするの? 24 ★ どんな体験を与えたいかコンセプトを明確にする - 前スライドの仕様や役割などに相当 ★ どんな動きを目指すかを決める - 他作品や映像作品など参考になるものは数多くある
★ どんなアセット構成や表現があれば実現できるかを考える - 参考作品を研究したり実装アイディアを組み合わせる レーザーと言っても世の中には色んな表現があるよね 目指すゲーム性によって求められるものは違うから 色々考えることがあるよ
どんな動きを目指すか 【目指す動きに関わる仕様】 ・ 超遠距離から発射される ・ 発射口周辺でエネルギーが段階的に溜まっていき、発射とともに放出 ・ プレイヤーに狙いを定める 【そのためには何が必要か】 ・
レーザーが遠くから近づいてくるのが分かる動き ・ 発射予兆がわかりやすいエフェクト遷移 ・ レーザーとは別に、照準を定めるアセットや挙動 25
アセット構成 26 レーザー本体 発射口周辺 着弾 発射口周辺 + レーザー本体 + 照準ライン+
着弾 のアセットで構成 (※ 照準ラインはスライド後半で別途説明します)
各アセットの概要 【発射口周辺エフェクト】 ・エネルギーが溜まっていく様子を表現 ・ボスの内部ステート(≒ 時間経過)に合わせて順次切り替えていく 【レーザー本体】 ・発射後にプレイヤーに向けて移動させたり、シェーダーパラメータを変更 【着弾エフェクト】 ・着弾地点に発生 27
パフォーマンス面を考慮して、 一度生成したものは次回以降再利用しているよ
レーザー本体の構成 - 補足 - 【シェーダー】 ・主要素は UVスクロール + Fresnel 伸縮しても破綻の少ない見た目 【ボーン】
・根本と先端の2箇所に仕込む 伸縮する動きの作りやすさに繋がる 28
レーザー本体の動き - 発射後 - 【目標地点まで徐々にレーザーを伸ばす】 ・根本ボーンの位置は固定 ・先端ボーンの位置を目標に近づける レーザーが進む様子を表現 29 スローで見ると 進む動きがわかりやすいね
レーザー本体の動き - 着弾後 その1- 【目標地点まで徐々にレーザーを縮める】 ・先端ボーンの位置は固定 ・根本ボーンの位置を目標に近づける レーザーが進む様子を表現 30 発射とは逆の動かし方を しているよ
レーザー本体の動き - 着弾後 その2 - 【各パラメータを変化】 ・シェーダーのFresnel Bias ・本体のScale レーザーが消失する様を表現 31
再利用しているから、 次回発射時に値をリセット するのも忘れずにね
レーザーのヒット判定 32 ★ 速度によってすり抜けが発生 ★ パフォーマンス面で不利 ★ どこに当たるかを視覚化しづらい ★ 形状や作りによって位置ズレが起こることがある など
どうやってつくろうかな? レーザーをでっかい当たり判定で囲んで試してみよう うーん、出来なくはないけど あまり良い手段じゃないかもしれないなぁ
レイキャストについて - 補足 - 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 ・先端は目標地点へと徐々に近づく ・地形コリジョンへのレイキャスト > ヒット地点を割り出す 目標設定(プレイヤー) ヒットまで繰り返し
根本から先端へ レイキャスト 目標更新(ヒット箇所) 各種イベント 地形ヒットイベント / プレイヤー被弾判定 など > カメラシェイク、着弾エフェクト、ダメージ処理 着弾 ヒット箇所を目標地点に設定 > 複数ヒット時は発射地点に最も近い箇所を優先 流れを図にしたよ 発射
レーザーのヒット判定 - 視覚化 - 35 レイと目標地点 爆発範囲 地形ヒット箇所
36 どう判定されているのかが リアルタイムで分かるように作っているんだね レーザーのヒット判定 - 視覚化 -
プレイヤーの被弾判定 - フロー図 - 37 プレイヤーと着弾地点間の距離で判定 > 前スライドの黄色の球体範囲 地形ヒットイベント 判定繰り返し 爆発範囲内か
遮蔽されているか 判定消滅 一定時間で判定消滅 > トランスポートで避けたりもできるように時間は短め 判定時間経過 プレイヤーから着弾地点へのレイキャスト > 『間に壁や床があった = 爆風が遮られている』 として被弾判定にしない 被弾判定開始 こっちも図にしたよ
ヒット判定のまとめ 38 ★ レイキャストを上手く使いこなす ★ 状況に応じて、コリジョン同士の判定と使い分ける ★ 判定を視覚化できると調整・デバッグ時に便利 ★ 判定は納得感のあるものだと良し
レイキャストを上手く使うと、色んな表現ができるんだね システムの制約によって実装が難しいこともあるけど、 応用の効く考え方だから覚えておこうっと
照準ライン 39 ★ プレイヤーは危険な状態なのか ★ レーザーの被弾から隠れられるスポットはどこなのか ★ レーザー発射まであとどれくらいか を伝える役割 これは何のために必要なんだろう? 「現在位置がレーザーに当たる危険な状態だと
プレイヤーに知らせる表現をしたい」 という仕様実現に必要な機能なんだって聞いた気がする
照準ラインの構成 - 補足 - 40 レーザー本体と似た作りだね 【シェーダー】 ・主要素は UVスクロール + Fresnel
・ノイズ やボロノイによる粒子の拡散 伸縮しても破綻の少ない見た目 【ボーン】 ・根本と先端の2箇所に仕込む 伸縮する動きの作りやすさに繋がる
照準の動き - 基本挙動 - 【ボーンの位置】 ・根本ボーンは固定 ・先端ボーンはヒット箇所 【エフェクト変化】 ・アニメーション ・周辺エフェクトとリンクして色変化 41
こっちも考え方は レーザー本体と同じだね
照準の動き - 追従する動き - 【減衰追従】 ・現在位置から目標位置へ動かす際の 変化量を前フレームより小さくする 短時間の間に減速しながら 目的地へ到達することを繰り返すイメージ プレイヤーの移動に遅延しながら滑らかに追従 42
ピッタリくっついてくると、 狙いを定めている表現からは 遠くなっちゃうからね
照準の動き - パーツのターゲッティング - 【狙うパーツの変更を交互に繰り返す】 ・プレイヤーの中心を狙う ・ランダムなパーツを狙う 頭や両手両足など 狙う候補は事前にピックアップ ターゲットを解析しながら
狙いすましているかのような表現 43 位置はプレイヤーの ボーンを参照しているよ
照準の動き - パーツのターゲッティング - 【最後は必ず中心で止まってから発射】 ・プレイヤーの中心を狙う ・ランダムなパーツを狙う 解析が終わって、 最適な箇所 = 中心
に狙いを定めた表現 44 中心でピタッと止まるから、 狙いが定まった感じがするね
照準の動き - だんだん激しく - 【時間経過で激しさが増す】 ・ターゲットの切り替わり速度 上昇 ・追尾強度 上昇 減衰追従に影響 ・解析が急速に進んで行くかのような表現
・プレイヤーに発射が迫る危険性を伝える 45 実際には 移動速度やトランスポート中か、 といった状況に応じてさらに細か く設定されているんだよ
照準のヒット判定 - フロー図 - 46 レーザー本体と基本の流れは統一化 目標設定(プレイヤー) 発射まで繰り返し 目標へレイキャスト 照準先端の位置更新 (ヒット箇所)
照準消滅 発射 内部ステート変更に伴った レーザー側の処理 + 照準側の処理 >エフェクト変更や照準の動きなど 照準生成 照準のターゲッティング 内部ステート変更 また図にしてみたよ
ギミック制作のまとめ 47 - 大切なこと- ★ どんな体験を与えたいかコンセプトを明確にする - 仕様や役割などに相当 ★ どんな動きを目指すかを決める
- 他作品や映像作品など参考になるものは数多くある ★ どんなアセット構成や表現があれば実現できるかを考える - 参考作品を研究したり実装アイディアを組み合わせる ★ 表現したいことを限られた時間内で実現できる実装方法を模索する 続けることで引き出しの量も徐々に増えてくる 大事なので再掲!
参考 - その他の処理 - 48 ★ 今回は見た目や動きを中心に話したが、他にも色々やっていることがある • ギミック挙動 - 攻撃エリア外に出たりバトル突入等したら攻撃をキャンセルする等
• UIやステータスへの反映 - 被弾時にHUDを更新したり、バトルのステータスに反映させる • 演出用機能 - インゲーム外でスクリプトから指定地点へレーザーを発射するAPI • 3Dサウンド - 距離や遮蔽に応じた音の減衰など • ダウンロードが発生しにくい仕組み • その他、既存システムで動かすための色々なお作法 紹介しきれなかった 部分はブースで聞けるかも
参考 - 全体の調整用パラメータ - 49 設定値は非公開だけど、 画像に入り切らないくらい パラメータがあるのがわかるね • ほぼ全てのパラメータを調整可能 -
UnityのScriptableObject を利用 リアルタイムに調整 & 保存できる • インゲーム内外で読み込むパラメータを変 えている • 作ったらドキュメント化もしよう
まとめ 50 ★ アップデートにより3Dフィールドを駆け回るゲーム性へと進化 - 自由な移動やカメラ操作に耐えられる見た目や凝った仕組み、 演出等が求められるようになった ★ レーザーの作り方に絞って制作の裏側を紹介 -
実現にあたっての考え方、アセット構成、具体的な実装方法を説明 - 3Dゲーム全般に応用できる考え方なので、 引き出しを増やす、実装のヒントを得る機会へ繋がったら嬉しい おつかれさまでした!
ご清聴ありがとうございました 51
None