2018年10月24日

BYU の学生がリズム ゲームと格闘ゲームを融合した「Beat Boxers」を開発

作成 BYU Student Team

BYU におけるチーム ベースのゲーム開発

Brigham Young University (BYU) では、20 人ほどの学生から成るチームで、毎年ビデオ ゲームを 1 本開発しています。2018 年夏に完成した今年のゲーム、Beat Boxers は、E3 の権威ある College Game Competition で最優秀賞を受賞しました。

BYU では毎年夏になると、アニメーションとコンピューター サイエンスを専攻する学生からアイデアを募集し、その中から 1 つを次のグループ プロジェクトとして選んでいます。

FEATURE_BeatBoxersInterview.jpg
学生の Vanessa Palmer 氏が描いた目標の画像

2017 年に選ばれた Beat Boxers は、パフォーマンスの勝負で脚光を浴びるチャンスが得られるエクスペリエンスを中心に据えたものでした。プロジェクトは最終的に、プレイヤーが 3 つの中から技を選べる格闘ゲームになりました。技はそれぞれ音楽のビートに合ったときに威力が増します。プレイヤーはまた、ビートごとに、相手の選択に勝てる技を選ぶ必要があります。これはジャンケンを高速で何度も行うようなものです。

プロデューサーとディレクターを含め、プロジェクトのすべての役職を学部生が務め、Beat Boxers を最初に考案した学生がプログラミング リードになりました。

Unreal での制作

Beat Boxers を開発したのは、ゲーム開発を楽しむためだけではなく、ゲーム開発の原則について学生が学ぶようにするためでもありました。Unreal Engine を採用した理由の 1 つとして、プロのような作品を作ることができる、パワフルで安定したパッケージであった、という点が挙げられます。BYU の学生は世界中の AAA スタジオに就職を希望することになるため、最終的なビジュアルは非常に重要でした。また、さらに深い原則の学習に役立つことも Unreal Engine を選んだ理由の 1 つです。ノード ネットワークや高度な機能を使用することで、学生はいろいろと試し、難しい問題を解決できます。UE4 のマテリアル システムは、学生が慣れているノード ネットワークとプロシージャルなワークフローをベースとしているため、その点でも適していました。

夏の間、アーティストたちは、UE4 のブループリントを使用して頻繁にプロトタイプを作成し、キャラクターやステージのデザインのホワイトボックスをいくつか試しました。この作業を通じて、プレイヤーに提供したいエクスペリエンスについて考えがまとまり、それに向けてデザインを進めることができました。

Whitebox2.jpg
Unreal Engine 内の Beat Boxers のホワイトボックス バージョン

Beat Boxers は格闘ゲームであり、リズム ゲームでもありますが、格闘ゲームとリズム ゲームにはそれぞれ独自の仕組みがあるため、両者の要素をうまく組み合わせたゲームプレイを見つけ出す必要がありました。ブループリント システムにより、ゲームプレイのデザインを迅速かつ簡単に変化させて、何十個ものプロトタイプを作成できました。リード デザイナーが、ブループリントでゲームプレイの変更、追加を行ってから、それを C++ に反映できました。

BeatBoxers_Screen1.jpg
最終的なゲームプレイのスクリーンショット

コントロールとゲームプレイ

格闘ゲームとリズム ゲームのバランスを取るのは難しいことでした。私たちは、いずれのジャンルからも大きく外れることのないように、最初に格闘ゲームを作ってから、それにリズムの要素を加えることにしました。

テスト プレイを行うと、プレイヤーがビートに合わせて攻撃するには、ゲーム自体のペースをビートに合わせる必要があることがわかりました。このため、入力をバッファリングし、ビートに合わせて、対戦相手の入力と同時に処理する仕様になりました。技の構成はジャンケンの性質を持つため、格闘ゲームの経験がないプレイヤーのために操作方法をシンプルなものにしながら、格闘ゲーム ファンのために入力をクリエイティブな方法で使うことができました。

BeatBoxersBlueptint.jpg
プレイヤーの入力がビートに合っていたかどうかを判定するロジックのブループリント

FMOD プラグインを使用して、音楽のビートに合わせてイベントを発行しました。このイベントとタイマーを使用して、「オンビート ウィンドウ」を開いたり閉じたりしました。曲のビートの約 0.1 秒前から約 0.1 秒後までの間が「オンビート ウィンドウ」になります。「オンビート ウィンドウ」が開いていれば (どのタイマーがアクティブであるかで判断)、攻撃はオンビートで、それ以外はオフビートとしました。

キャラクターのデザイン

最初の課題は、音楽のジャンルを人に見立て、それぞれ性格が異なる魅力的なキャラクターを作り上げることでした。最初に開発したのは、クラシックのバイオリンのキャラクター、Maestra です。このキャラクターは、ゲームを最初に考案したときのスケッチがベースになっています。このキャラクターにより、ゲームの可能性について、期待が高まりました。デザインは、数か月かけて、たくさんの人々の意見を取り入れ、何度も手を加えられました。最終的には、2018 年の E3 でお見せしたような、長身かつ優雅で、対戦相手としては手強いキャラクターになりました。Unreal Engine のおかげで、モデルを短時間で取り込み、チームのほかのメンバーが開発中のアセットと合わせたときにどのように見えるかをテストできました。アセットは、なるべく早期に Unreal に取り込み、相互の関係性を確認するようにしました。

BeatBoxers_CharacterComparison_1.jpg
コンセプト アート (左) と Unreal での制作物 (右) の比較

次のキャラクターは、Maestra と同じ世界に属しながらも対照的なものにしたいと考えました。図体が大きくてユーモアがあり、スポットライトが大好きなロックのキャラクターが、Maestra のスリムなシルエットと対照的で、ゲームにまとまりをもたらすと判断しました。名前は愛情を込めて Riff にしました。キャラクターの開発を同時に始めずに、1 人ずつ開発するというプロセスは有効でした。キャラクターに関する問題を 1 つのチーム内で解決してから、そのときの教訓を次のキャラクターのチームに引き継ぐことができたため、複数のチームで繰り返し同じ問題を解決する必要はありませんでした。

アセットのテクスチャには、Substance Painter を使いました。Maestra の木目のテクスチャは完全にプロシージャルです。眉とゴールドのアクセントは手書きです。マップは、基本的なテクスチャ マップとして Substance からエクスポートしてから、Unreal Engine でシェーダー ネットワークを通じて Fresnel などの効果を追加しました。

BeatBoxers_Character_Comparison_2.jpg
コンセプト アートと Unreal での制作物の比較

Riff と Maestra はいずれも、それぞれが表すジャンルをよく表すようにデザインされました。Maya と ZBrush でモデルを作成し、Substance Painter でテクスチャを適用しました。Maestra は 37,670 個、Riff は 29,747 個の三角メッシュを使用しています。どちらのキャラクターも、使用している UV チャンネルは 1 つだけです。

アニメーション

アニメーションに関しては、キャラクターが戦っていると同時に演奏しているように見えるようにしたいと考えました。参考のために、『ストリートファイター』スタイルのゲームをいくつも研究し、各キャラクターの技の構成をユニークにする方法を見つけました。また、コンサートを鑑賞し、交響楽団の威厳ある優雅さと、ロック コンサートで放たれる生のエネルギーの基本的な違いを見出しました。このような経験すべてが、Maestra と Riff の技の構成を組み立てるうえで役立ちました。

格闘ゲームにリズムの要素を取り入れるのは難しいことです。ゲームのすべての側面で、テンポとビートの重要性を強調する必要がありました。そのために、攻撃ごとに 2 つのアニメーション ファイルを作成しました。タイミングやポーズの誇張表現を変えて、プレイヤーのアクションがビートに合っていたときは、よりパワフルでビジュアル的に魅力的な技のアニメーションという見返りが得られるようにしました。プレイヤーがビートを無視すると、2 番目のアニメーションを使った弱いバージョンになり、ポイントも減ります。アニメーションを優秀なプログラマーに渡すと、これらのファイルがノード ネットワークとして連結されました。プレイヤーがコンボを決めたときにはスムーズに移行し、ビートに合わなかったときにはアニメーションで気まずい一時停止が生じます。完成したバージョンは、いいパフォーマンスができるかどうかが自分にかかっていると実感できるものになり、私たちは盛り上がりました。

技の構成はステートマシンとして編成され、プレイヤーの入力など、特定の基準でステート間の移動が判定されます。

スタジアム環境

ゲーム内のアセットの多くは、柔軟で再利用できるように設計しました。Houdini を使って複雑なプロシージャル アセットを開発してから、Houdini Engine を使って Unreal に移植しました。Unreal Editor は、Houdini Engine プラグインを使用できる柔軟性が備わっていたため、さまざまなソースのコンポーネントを Unreal Editor で流動的に調整できました。スタジアムの座席や足場など、複雑な部分も、驚くほど簡単にアート ディレクションできました。

ライティング

ゲーム内でのライトの使用は最小限に抑えました。各キャラクターには、ライティング チャンネルを通じてそれぞれ別々にライトを当てました。それぞれ独立してライティングと微調整ができるため、ほかのキャラクターや環境とのコントラストを損なうことはありませんでした。キャラクターを背景から目立たせる必要があったため、背景の要素は薄暗く照らしました。また、背景のライトは弱くして、フォグを加えました。ライティングの調整は繰り返し行い、その度にアート リードが上塗りをしました。

このプロジェクトは、ビジュアルが高く評価されましたが、それは Unreal Engine の優れたアーティスティック ツールのおかげです。

観客

観客は、ハードウェア インスタンシングされたメッシュであり、アニメーションがテクスチャにベイクされています。アニメーションには、シェーダーで頂点オフセット情報を通じてアクセスします。

通常は、描画するメッシュごとに CPU がドロー コールを GPU に送信する必要があります。CPU が次のコールを送信する前に GPU での処理が完了することがあるため、この方法では多くの時間が無駄になります。ハードウェア インスタンシングを使用すると、変換マトリックスの配列が GPU に保存されます。GPU は、1 回のドロー コールで、モデルを 1 回のみ描画し、それぞれの変換マトリックスのために使用します。

BeatBoxers_Capture5.jpg
ハードウェア インスタンシングされた観客

ハードウェア インスタンシングの短所は、専用のグラフィック カードがないコンピューターや、スケルタル アニメーションでは機能しない点です。この場合、観客は動かず、均一になります。

ハードウェア インスタンシングしたメッシュでアニメーションを実現するには、アニメーションするスケルタル メッシュから始め、それとアニメーションを処理します。その結果が、頂点カラー データに具体的なデータが含まれるスタティック メッシュ、アニメーションを表すテクスチャ、そして複雑なシェーダーになります。

BeatBoxers_Capture7.jpg
テクスチャでアニメーションするノード ネットワーク
BeatBoxers_Capture8.jpg
アニメーションのテクスチャにカラー チャンネルを使用した場合

このプロセスでは、各フレームで、バインド ポーズから見た各頂点の位置の差異を計算します。その差異をテクスチャに保存します。1 つの軸は時間 (フレーム) で、もう 1 つの軸は頂点 ID (各頂点に割り当てる必要がある一意の ID) になります。モデルの頂点カラー データの RGBA チャンネルすべてに頂点 ID の値をエンコードします。その後、頂点カラー データから頂点 ID をデコードするシェーダーを記述します。このシェーダーで、経過時間を使用してサンプリングする UV を判断してから、テクスチャをサンプリングして各頂点を移動させる距離を求め、その値を頂点のオフセットに入れます。sRGB を無効にし、ニアレスト フィルタリングを使用するようにします。また、頂点の移動を頂点のオフセットに適用する前に、ワールド空間に変換するようにします。複数のアニメーションを 1 つの画像にまとめるには、スプライト シートと同じように複数の異なるアニメーションをサンプリングします。

BeatBoxers_Capture6.jpg
観客のキャラクター用のアニメーションするテクスチャのスプライトシート タイムライン

Unreal に用意されている Instanced Static Mesh コンポーネントで各インスタンスに割り当てることができる 1 つのランダム値を使用すると、観客をそれぞれ別個に変化させることができます。また、位置デルタを頂点のオフセットに適用する前に、ローカル空間からワールド空間に変換する必要があります (ただしこの場合、スケーリングの問題が生じる可能性があります)。法線がねじれていることもわかります。この時点ではまだ静的な位置の法線を使用しています。これが問題になる場合は、アニメーションの過程における法線の変化を計算し、別の画像 (または同じ画像の別の部分) に保存することで解決できます。

最適化

Unreal の微調整のオプションや強力なツールを使用して、ゲームを最適化し、ビジュアルが維持されるようにしました。キャラクターとステージ以外のすべてでコリジョンを無効にしました。また、背景のアセットは静的ライティングに設定しました。

さらに、ゲームのパフォーマンスを維持するために、観客のフォグ エフェクトとパーティクル エフェクトを調整しました。当初はマップに 3 種類のフォグ エフェクトがありました。視野角はゲーム中にほとんど変わらないため、最適化を担当した学生は、フォグを 1 つに減らし、それをカメラ ビュー内で拡張しました。この場合、ほかの角度からの見た目はよくないかもしれませんが、プレイヤーの視点からは、最初のイテレーションと同じように見えます。

マスター マテリアルは 3 つあり、それぞれ複雑さの程度が異なります。最もシンプルなものを、観客と背景に使用しました。このマテリアルはカラー チャンネルだけのものです。次のマテリアルは、ステージのフロアとセット上の小道具に使用しました。このマテリアルには、カラー、ラフネス、法線、メタリック、AO があります。最後のマテリアルは、キャラクターのみに使用しました。これには、前述したものに加え、色調の制御や Fresnel エフェクトなどがあります。この方法で、シェーダーの複雑度を適切に維持できました。

特殊効果

エフェクトは、手書きされた、アニメーションのスプライト シートを使用して作成しました。そして、Unreal のカスケード パーティクル システムで左から右へフレーム単位で読み取りました。これをゲーム内では 2D アニメーションとして、プレイヤーの攻撃やアクションに合わせて再生します。このプロセスを使用することで、エフェクトの形状、ペース、ディゾルブを、求めていたスタイルに合わせて計画し、デザインすることができました。その後、アニメーションにスパーク、ライト、ヒットのエフェクトのレイヤーを重ねて、3D のゲームプレイにスムーズに統合しました。最終的な効果は、3D エフェクトよりもスタイルに沿ったものになり、『ドラゴンボール ファイターズ』や『GUILTY GEAR Xrd -SIGN-』などのゲームに似ていました。プレイヤーの攻撃がビートに合っているかどうかに応じて、再生するエフェクトを変えました。


OffBeat.gifOnBeat.gif
左側がオフビートのエフェクト、右側がオンビートのエフェクト

まとめ

Unreal Engine によって、学生のチームが、プロのようなコンテンツを短期間で制作し、十分なパフォーマンスを得るために最適化する方法を学ぶことができました。Unreal Engine のインターフェイスは、アーティストがそれぞれの作業をアップロードできる程度に扱いやすいものであると同時に、プログラマーがゲームプレイをカスタマイズして、私たちが求めていたエクスペリエンスを達成できるほど奥深いものでした。このインターフェイスのおかげで、頻繁に修正して磨きをかけることができました。この点が、E3 の College Game Competition に準備万端で臨むことができた理由の 1 つでした。チームのメンバーは、カリフォルニアの E3 カンファレンスに参加し、ほかの参加者と交流し、AAA ゲームのスタジオが何を制作しているのかを見る機会を与えられたことに興奮していました。また、Beat Boxers が 2018 年の College Competition で最優秀賞を受賞したことを光栄に思います。プログラマー、モデラー、テクスチャ アーティスト、コンセプト デザイナー、ゲームプレイ デザイナー、そしてロジスティクスの担当者から成るチーム全体が力を合わせ、作り出したエクスペリエンスを、私たちだけでなく、みなさんにもぜひ楽しんで欲しいと思います。ゲームは Steam で無料で提供されています。

クレジット

ディレクター - David Burnham
プロデューサー - Jessica Runyan
デザイン リード - Mike Towne
アート ディレクター - Vanessa Palmer
音楽 - Alastair Scheuermann、Jarrett Davis
サウンド - Jared Richardson、Dallin Frank


制作者 (次の学生がゲームの制作過程においてそれぞれさまざまな役割を担いました)

Sydney Adams
Dyanara Banana
Paige Caldwell
Andrea Davila
Jessica Davila
Derrick Drysdale
Wyatt Earnshaw
Jedi Lion
Shannon Lyman
Connor Mathewson
Calvin McMurray
Brenna Oldroyd
Do Park
Parin Phurisat
Laura Porter
Alexa Poulton
Andrew Rios
Patrick Spencer
Jordan Stewart
Nate Swinney
Sarah Tippets
Jenessa Welker
Wei Wong