はじめに
この記事は 「MM2025 開発記」 シリーズ第8回です。
前回の記事ではEDGEを使ったゲーム用ドット絵制作について紹介しました。
今回は、Mainクラスはどのような役割をしているのか、どうやって全体管理をしているのか、などについて紹介します。
Mainクラスの役割
今回作成した応募作品では、
-
Canvasを使用した横スクロールゲーム -
TextAlive App APIを利用した歌詞・楽曲同期 - ゲーム進行と音楽再生の同時制御
など、いろいろな要素が組み合わさっている。このような複雑な構成の中で、Mainクラスはそれらをまとめる重要な役割を果たしている。
Mainクラスでやっていること
- ゲーム全体の初期化
- TextAlive Player の生成・設定
- 再生位置や再生終了イベントの管理
- ゲーム側へイベントを伝える
ゲームと音楽の連携
冒頭でも説明したように、今回作成したゲームは大まかに「Canvasを利用したゲーム」部分と「TextAlive App APIを利用した音楽系」部分に分かれている。
それぞれでやっていること
ゲーム部分
- ゲームキャラクターの移動
- スクロール処理
- コイン取得判定
- ゴール判定
音楽部分
- 楽曲歌詞情報（再生タイミングなど）
- 再生終了イベント
- 楽曲の再生位置
このように全く別の処理を行っている2つを、Mainクラスがつなげている。具体的には、TextAliveのイベントを受け取り、「再生位置」「再生終了」といった音楽側の情報を、ゲーム内のイベント（ゴール出現など）に変換している。
例えば、MM2025 開発記 # 6 で解説した、TextAlive App APIを利用して楽曲の情報などを取得する部分・Playerの初期化部分はMainクラスに含まれている。
Mainクラスのコード
ここでは、Mainクラスの中の代表的なコードについて少し紹介していく。
再生終了時の処理
onPlayEnd() {
console.log("再生終了");
if (goalX === null) {
goalX = scrollX + canvas.width - 200;
gameStarted = true;
gameLoop();
}
}
楽曲が終了したらゴール演出へ移動する。
楽曲が終了するのはTextAlive側のイベントだが、それを利用してゲーム全体の処理を行うため、Mainクラスに記述している。
リサイズ対応
_resize() {
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
}
- ウィンドウサイズ変更
- 端末の回転
- フルスクリーン切り替え
ゲームプレイヤーごとの設定ではなく、アプリ全体に関わる問題のためMainクラスに記述している。
グローバル変数について
本作品では、以下のようなグローバル変数を使用している。
本来はクラスにまとめる方が良いとされるが、自分が初心者であり、設計しやすくしたかったため、そっちを優先してゲーム全体の状態はグローバル変数で保持するようにした。
let taPlayer;
let gameStarted = false;
let score = 0;
let scrollX = 0;
さいごに
今回の記事では、応募作品におけるMainクラスの役割や、やっていることについて解説しました。
次回は、Canvasゲームループ部分のコードについて紹介していきます。