どこでも“その場で”即バトル。『ストリートファイター6』ワールドツアーで実現した、自由探索型3Dマップから2D格ゲーへシームレスに移行するシステム&レベルデザイン【CEDEC2023】

2023.10.19
注目記事ゲームづくりの知識ルールをつくるしくみをつくるゲームの舞台裏講演レポートCEDECCEDEC2023ゲームデザインレベルデザイン
この記事をシェア!
twitter facebook line B!
twitter facebook line B!

国内最大規模のゲーム業界カンファレンス「CEDEC2023」が、2023年8月23日(水)から8月25日(金)までの日程で開催されました。初日となる8月23日には、カプコンのゲームデザイナーであるレーベボリ テオドール氏が登壇し、「『ストリートファイター6』ワールドツアーモードにおける2D格闘システムと3Dレベルデザインの関係」と題した講演が行われました。「3Dマップのどこからでもシームレスに2D格闘バトルへ切り替えるシステム」の説明、およびそのシステムが作業工程でどのように影響したのかなどが解説された本講演をレポートします。

TEXT / じく

EDIT / 田端 秀輝

目次

登壇したのは株式会社カプコンのゲームデザイナー レーベボリ テオドール氏。『ストリートファイター6』ワールドツアーのレベルデザイナーとして、主にマップ制作、バトルエリア全般の調整などを担当しています。

『ストリートファイター6』のワールドツアーモードとは?

『ストリートファイター6』は大きく3つのモードに分けられ、1対1の2D格闘バトルを楽しめる「Fighting Ground」、オンラインモードの「Battle Hub」、そして本講演の対象である1人用のストーリーモード「World Tour」(以下、ワールドツアー)があります。

3Dで構築された『ストリートファイター6』の世界を探索し、「Fighting Ground」のキャラクターたちが実際に登場するストーリーを楽しめる。同時にプレイヤーが『ストリートファイター6』の2D格闘バトルを学ぶこともできる

通常の対戦モードである「Fighting Ground」ではあらかじめキャラクターのパラメーターや使用可能な技は決まっていますが、ワールドツアーではプレイヤーが作成したキャラクターが成長させることができるRPGとなっています。

このワールドツアーでは、探索は3Dマップの中で行い、戦闘は他のモードと同じように2Dの格闘バトルで行われます。そして、3Dマップから2D格闘バトルへの移行がシームレスに実行されるのが特徴です。

3Dマップを探索中にNPCとエンカウントしたり自らバトルを仕掛けたりすると、暗転などのシーン切り替えも無く、見た目も一致した2Dバトルがシームレスに発生する

『ストリートファイター6』World Tourゲームプレイ&アバターバトルトレーラーより、3Dマップから2Dバトルに移行する様子

ワールドツアーが目指した「どこでも」「シームレスに」発生するバトル

開発陣がワールドツアーで目指したのは「暗転や異空間に飛ばされることなく、その世界に留まるシームレスなバトルの発生」「バトルを3Dマップ上のどこでも発生させる」という2点でした。

3Dマップ上でNPCが存在する場所ならばどこでもバトルが発生することと、3Dマップから2Dバトルへのシームレスな移行を両立させることが最大の課題だった

この2点を実現するには、3Dマップ上で2Dバトルを開始させるための計算をリアルタイムで行う必要があります。

3Dマップでバトルの相手が確定したら、地面の状態や横幅などを確認し、回転させた上でエリアを確保できたら、プレイヤー(上記画像のPL)を対戦スタート位置にワープさせてバトルを開始させる

スペースを含めこのようなリアルタイム計算で出来上がったものを開発側では「バトルライン」と呼ぶことにしました。

このバトルラインの実装が、2Dバトルのシステム設計や3Dマップのレベルデザインにどう影響したかを見ていきましょう。

3Dマップから2Dバトルを成立させるための空間的条件

ゲーム中、3Dマップ上で2Dバトルを成立させる空間的条件として、「横7m×奥行12m×高さ5mのスペース」「水平(±15cm以内)な地面」の2点があげられました。

バトル・カメラ・観戦者を考慮した7m×12m×5mのスペース

バトルを成立させるためには、バトルライン上でキャラクターが移動する「ファイター領域」に加え「カメラ領域」「観戦者領域」と呼ばれる領域も考慮する必要があります

「ファイター領域」の奥行は技を繰り出す幅を参考に3m、幅は駆け引きが生まれる画面スクロールも考慮して6m、高さはキャラクターの通常ジャンプの高さを基準としてその倍の5mとしました。

奥行は、設定時点で最大の幅を取る技であるザンギエフのダブルラリアットに基づいて3mと決められた

「ファイター領域」の手前側に、バトルを映し出すカメラを動かす「カメラ領域」として、奥行9m、幅に左右0.5mずつの領域を足していきます。

さらに「ファイター領域」の奥側に、バトルを盛り上げる観戦者を配置可能な「観戦者領域」を設定できるようにしました。

「ファイター領域」の奥側に奥行3mの「観戦者領域」を設定可能に(バトル成立の必須条件ではない)

以上を踏まえ、2Dバトルを発生させるのに必要最低限のスペースを、横7m×奥行12m×高さ5mとすることにしました。

「観戦者領域」は必須ではないので、最低スペースの計算からは除外

モデルとPL判定とのズレを考慮した地面の制約

バトルのスペースを確保するだけでなく、もう1つ考慮すべき点として地面の高低差がありました。それは、プレイヤーキャラクターのモデル(表示されているグラフィック)とPL判定(※)のズレです。

※プレイヤー判定。バトル上の当たり判定の意味で「ヒットボックス」とも呼ぶ。

モデルは3Dマップの地面に合わせて表示されるが、キャラクターのPL判定(黄色いボックス範囲)は緑のバトルライン上に固定される

PL判定は格闘ゲームプレイヤーが気にする重要な要素だが、地面に高低差があるとモデルの見た目位置とPL判定がズレてしまう

モデルとPL判定がズレてしまうと「当たっていないのに当たった」という違和感や不公平感が生まれてしまう

以上の「モデルを地面に合わせている」「PL判定をずらせない」という2点を考慮して、「地面は水平(±15cm以内)でなければならない」というバトル成立の条件を追加しました。

どこでもシームレス化の実現①:背景作りへの影響

背景(本稿では3Dマップの主に見た目の部分を指す)を開発するにあたり、「3Dマップ・2Dバトルの両方で見た目が一致したシームレスなバトル」という要望を実現するために「3D・2D両方で適用できるコリジョン」を、またバトル成立の空間的条件から「横7m×奥行12m以上確保」「高さ5m以上確保」「地面凸凹±15cm以内確保」といったルールが定められました。

3Dマップ・2Dバトル両方適用できるコリジョン

背景作りではスペースの確保に加えて、シームレスなバトル移行を実現するための3D・2D両方を適用できるコリジョン(当たり判定)を設定する必要がありました。

はじめにキャラクターを映すカメラが「ストップする」「通る」2つの判定と透過の可否を3Dマップに設定しました。

3D上で透過可能なものは2D時にも透過できるようにしましたが、次にバトルライン上の物をどこまで消して、どこからは消さずに透過させるかを判定する必要があります。

青いボックスのファイター領域に物を置くとキャラクターと接触するコリジョンを持ってしまうので消す。一方、赤いボックスのカメラ領域ならばキャラクターも接触しないので3Dマップのルール上透過OKの物ならば2Dバトル上でも残しつつ透過させる

以上の結果、バトル発生に伴って3Dマップの物を消したり残したりして2Dバトルにも反映させる

ただし、この判定だけだと「物が消えすぎる」「物が消えなさすぎる」という問題が発生します。

物が消えすぎてしまうと椅子やテーブルが消えて人や物が浮いているように見えてしまう。一方、物が消えなさすぎると2Dバトルを妨げる見え方になってしまう

この問題に対応するために、物を消す「カリング処理」を新たに追加しました。

街灯のアセットにPL判定が接触しても柱部分は表示されるように、カリング処理範囲を再設定

テーブルだけ消えてその上の物だけ空中に残るのを防ぐため、カリング処理範囲を合体させ一緒に消えるようにする

このカリング処理はすべて手作業で、大量のアセットに設定する必要がありました。

横7m×奥行12m以上の確保

かなりの広さが必要なバトル用のエリアを3Dマップに確保するには「各エリアを広く作ればいいのでは?」という考え方もありました。しかしそうすると、「移動距離が増えて視野も遠くなる」「広くなった空間を埋めるようにアセットを配置することになり情報量が多くなる」「各エリアに似たような空間ができてしまう」という問題があります。

そこで、ギリギリまで攻めた狭い場所も作るようにしました。

バトルラインのために安易に3Dマップに広めのエリアを確保はせず、上記のチャイナタウンのような狭い空間も作成した

こういった狭いエリアでもバトルを発生させるために、ピンポイントで物を消してバトルラインを確保する作業をしました。

チャイナタウン裏路地のような狭いエリアの場合、右画像の緑の箱を消し、左画像の青点線のようなバトルラインを確保するといった対応を行った

天井の高さの設定

『ストリートファイター6』の通常の対戦モードでは、高さが12mの空間で設定されています。しかし、この高さでワールドツアー上の階層を持つ建造物を設計してしまうと、すべての建造物が巨大になってしまいます。

そのため、ワールドツアーでは屋内の階層の高さを5mにし、同時に屋内でのバトル中はキャラクターが天井を抜かないようにモデルを止める設定をしました。

ザンギエフのスクリュードライバー(画像左下)は本来11mほど跳ぶ技であるが、屋内エリアでのバトルでは5mに抑えられている

地面凸凹±15cm以内の確保

1エリアの高低差が±15cm(合計30cm)以内であることをバトル発生の条件としましたが、これは段階的に1段が15cm以内ならばOKという意味になります。

左の場合はバトル発生が可能だが、右のように1段が15cmを超える場合はバトルが成立しない

高低差が15cmを超える場合は、下記画像のようにバトル可能なエリアを2つに分けています。

ワールドツアーでは一部にこういった高低差がある場所が存在し、その場合はバトル可能なエリアを分けるようにしている

しかし、以上の調整をしても目標である「どこでも可能にすること」は非現実的でした。それは常にバトル条件を満たそうとすると、3Dマップが不自然なものだらけの世界になってしまうからです。

例えばバトル条件に合わせた扉を作成すると、現実よりはるかに大きくなる。同様に廊下・路地・坂・階段にも無理が生じてしまう

そこで、背景で解決できない問題はバトルラインシステムで解決するよう試みました。

どこでもシームレス化の実現②:バトルラインシステムへの影響

RPGである本パートを盛り上げるため「シナリオなどに紐づくバトルは見た目を固定させたい」といった要望もあがりました。また、前述のように「バトル不可能なエリアでもバトルを発生させたい」という課題は残りました。そこで、これらを解決するにあたりバトルラインについて新規システムが用意されました。

固定バトルライン

3Dマップからリアルタイム計算で作られる通常のバトルラインとば別に、必ず同じ場所や見た目でバトルさせる「固定バトルライン」用意されました。

リアルタイム計算をしないシンプルな仕組みで、ミッション・NPC・場所に紐づいてバトルが発生しバトルラインも固定化されている

テーブル式バトルライン

バトルが不可能な場所でも、あらかじめ配置した別のバトルラインに飛んでバトルを発生させる保険データとして、「テーブル式バトルライン」用意されました。

上記のマップ内に描かれている白いボックスがテーブル式バトルライン。ワールドツアー全体を通して1m²ごとに作成されている

バトル不可能な段差(赤のエリア)でバトルが発生しても、テーブル式で事前に用意された平地のバトルラインに飛ばしてバトルを可能にした

これにより坂や階段などでもバトル発生が可能になりました。しかし、プレイヤーが飛ばされた位置を把握できず混乱する可能性があったので、坂や階段はできる限り短くするようにしました。

このように、「どこでもシームレスにバトルを発生させる」ための新規バトルラインシステムがワールドツアーに実装されました。

3Dマップから2Dバトルをどこでもシームレスに発生させるために開発された3つのバトルラインシステムは、「固定バトルライン」→「リアルタイム計算」→「テーブル式バトルライン」の優先順位で処理される

3Dマップのレベルデザインにおけるワールドツアーならではの作業

これまでに見てきた「どこでもシームレスにバトルを発生させる」ためのシステムが3Dマップの開発工程でどのように実装されたか、「企画マップ」「企画モデル」「本モデル」の3工程に着目して、通常の3Dゲームにおける工程と比較してながら説明します。

多くの開発工程の中で、本講演では企画が担当する3工程について解説が行われた

3つの工程のどの段階においても、3Dゲームにおける基本作業に加えて、『ストリートファイター6』特有の「どこでもシームレスにバトルを発生させる」ための作業が発生しました。

「企画マップ」段階では、基本ルートやエリア概要だけでなく、バトル可能エリアを指定していきます。

メトロシティの工場エリアは『ファイナルファイト』『ストリートファイターV』を参考に作成。「企画マップ」作成タイミングで横7m×奥行12m×高さ5mを考慮したバトル可能エリアも想定

「企画マップ」に基づきサイズ感やレイアウトを指定する「企画モデル」作成段階では、天井の高さや横幅が条件を満たしているかといった、バトルエリアを確保する作業が発生します。

さらにストーリーやNPC、過去作のオマージュに紐づいた固定バトルを発生させるシチュエーションを指定します。

「本モデル」作成時にはコリジョンに加えてバトルが成立するための背景作りルールも確認していきます。

そして、テーブル式バトルラインの生成用コリジョンと保険データを作成し、固定バトルラインを配置していきます。

以上の作業を行った上で、オブジェクト透過などのバトルの見た目を確認して完成となります。

3Dと2Dを同時に存在させる影響と価値

どこでもシームレスに3Dマップと2Dバトルを遷移するシステムを実現するのはとても大変な作業でした。3Dと2Dが同時に存在することによってチェックや実装コストなどおよそ倍になります。3Dマップ内で作成したバトルラインは、およそ60万に上りました。

実現のためには事前に問題を予測することが重要で、品管部門のチェックやツール無しには成し得ませんでした。

しかし、『ストリートファイター6』がリリースされて実際にプレイしたレーベボリ テオドール氏も「結果的になかなかユニークで綺麗なものになった」と感想を述べ、ワールドツアーの共同開発者であるフィールド・プレイヤー企画担当・橋本祐介氏とバトルプログラマー・水間康夫氏に感謝を述べて講演を締めくくりました。

ストリートファイター6 公式サイト『ストリートファイター6』ワールドツアーモードにおける2D格闘システムと3Dレベルデザインの関係 - CEDEC2023
じく

ゲーム会社で16年間、マニュアル・コピー・シナリオとライター職を続けて現在フリーライターとして活動中。 ゲーム以外ではパチスロ・アニメ・麻雀などが好きで、パチスロでは他媒体でも記事を執筆しています。 SEO検定1級(全日本SEO協会)、日本語検定 準1級&2級(日本語検定委員会)、DTPエキスパート・マイスター(JAGAT)など。

関連記事

“弾が大きくて遅い”対戦TPS『FOAMSTARS』、戦闘システムが生まれた経緯をトイロジックが解説。重視したポイントは「いかに上手くエイムできるか」ではない
2024.04.18
バンダイナムコスタジオ、「CEDEC2023」から6セッションの動画を公開。インタラクティブミュージック作曲の舞台裏や、『BLUE PROTOCOL』のAI実装など
2024.04.01
CEDEC2024セッション講演者の公募が受付開始。締切は4/1まで。「CEDEC ゲーム開発技術ロードマップ2023 年度版」も公開
2024.02.01
カプコン技研の開発者がCEDEC2015からCEDEC2018にて登壇したセッション資料がDocswellにて公開
2024.01.22
ブループリントとPCGで、オブジェクトをプロシージャルに生成&配置。UE5極め本の著者が披露するPCG極め術【UE5 Deep Dive 2023】
2024.01.16
ユニティ・テクノロジーズ・ジャパン、『CEDEC2023』4講演の動画・スライドをUnity Learning Materialsに公開。CEDECのYouTubeチャンネルで未公開の『推論ライブラリを実装する』など
2023.12.27

注目記事ランキング

2024.04.20 - 2024.04.27
1
【2022年5月版】今から始めるフォートナイトの「クリエイティブ」モードープレイ開始から基本的な操作方法まで解説
2
『フォートナイト』で動く本格的なゲームが作れるツール「UEFN」とは?従来のクリエイティブモードから進化したポイントを一挙紹介!
3
フォートナイト クリエイティブとUEFNで使える仕掛け一覧
4
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.1「アイテム系」
5
【CHALLENGE1】「クリエイター ポータル」を使って、UEFNで作成した島を世界中に公開する
6
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.5「島の設定」
7
フォートナイトとUEFNがv29.30にアップデート。すでに公開した島をプレイできないようにする機能が導入される
8
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part1
9
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.2「ユーティリティ系」
10
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.4「ゲームシステム系」
11
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.6「チーム・対戦系」Part1
12
まるで『マイクラ』?ボクセル地形を生み出す無料アセット「VoxelPlugin Free」で”地形を掘ったり積み重ねたり”して遊んでみよう
13
UEFNで使えるプログラミング言語「Verse」のノウハウが集結。『UEFN.Tokyo 勉強会 03 Verse Night』レポート
14
『フォートナイト』で建築ビジュアライゼーション!?UEFNでオリジナルの世界観をどう作り上げたか、その手法を解説【UNREAL FEST 2023 TOKYO】
15
【STEP2】UEFNの基本的な使い方を覚えよう
16
フォートナイトとUEFNがv29.20にアップデート。見下ろし視点でもプレイヤーキャラクターの向きを操作できるようになった
17
フルカラー書籍「UEFN(Unreal Editor For Fortnite)でゲームづくりを始めよう!」、ついに本日発売!全国書店で好評発売中!
18
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part2
19
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part1
20
【CHALLENGE2-1】フレンドと一緒にゲームを作ろう――UEFNプロジェクトをチームメンバーとリアルタイムで共同編集する
21
【CHALLENGE3】UEFNの機能「ランドスケープ」を使ってオリジナルの地形を作る
22
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.3「プレイヤー系」
23
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.8「ゾーン系」
24
「UEFN」って実際どうなの? 編集部が3時間で「みんなで遊べるアクションゲーム(?)」を作ってみた
25
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.9「建築物系」Part1
26
【STEP4-2】リスポーンとチェックポイントの仕組みを作る
27
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part2
28
【STEP4-1】コース外に出たらデスする仕組みを作る
29
Epic Games、200を超えるフォートナイトの島クリエイターが年間10万ドル以上の配当金を得られると発表。島の「プレイ時間」が影響
30
フォートナイトとUEFNがv26.30にアップデート。ロビー画面が一新され、クリエイターが島ごとにロビー背景を自由にカスタムできるように
VIEW MORE

イベントカレンダー

VIEW MORE

今日の用語

フォグ(Fog)
フォグ 「霧」を意味する英単語。3DCGにおいて、現実の霧による見た目をシミュレーションする画面効果やエフェクトを指す。代表的なものとして、カメラから遠くにあるオブジェクトの色調を変化させることで遠近感を出す手法がある。
VIEW MORE

Twitterで最新情報を
チェック!