Zenn
🟢

ぷよぷよプログラミングをGodotで実装 01 コード理解（基盤とgame.js）

に公開
JavaScript
ゲーム開発
初心者向け
Godot
プログラミング入門
tech

はじめに

ぷよぷよプログラミングを利用して、Godotでパズルゲームの作り方の基礎を一緒に学んでいこうと思います。YouTubeでもこの記事の内容に沿ってゲームを作っているので、動画を見ながら取り組んでみてください。
ぷよぷよプログラミングは、プログラミング学習環境『Monaca Education』において、セガが展開するアクションパズルゲーム『ぷよぷよ』をプログラミング学習できる教材です。 製品版と同じ画像素材を利用して、世界中で使われるコンピュータ言語を使い、プロが使う開発環境で本物のプログラミングを無料で楽しむことが出来るコンテンツです。

ぷよぷよプログラミングは主にプログラミングを書き写すことをメインとしているため、プログラムを理解せずに完成することも可能です。
とても素晴らしい教材なのに写すだけで満足していてはもったいないため、この記事では中身のコードをGodotで実装できるように理解を深めていきましょう。

https://youtu.be/7jXj-_jI-Pk

利用教材

この記事で学ぶこと

godotを触る前にまずはぷよぷよプログラミングのソースコード(javascript)について解説をしていきます。
今回は主にgame.jsについて解説します。

ファイル構成

主に下記のJsファイルがゲームの機能を扱っています。

  • config.js
  • game.js
  • player.js
  • puyoimage.js
  • score.js
  • stage.js

config.js

役割

ゲームの設定値を保持するファイル

内容

ぷよぷよの画像サイズ、ステージのサイズ、背景色、スコア背景色、速度設定、アニメーション時間などの定数を定義します。

game.js

役割

ゲーム内の処理のループを管理するファイル

内容

ゲームのステータスを管理し、各フレームごとにプレイヤー操作やぷよの落下、消去などの処理を行います。ゲームの初期化と主要な処理の流れを制御します。

player.js

役割

プレイヤーの操作とぷよの状態管理を担当するファイル

内容

キーボード入力をキャプチャし、プレイヤーの移動、ジャンプ、回転の処理を行います。また、新しいぷよの生成や位置の更新、接地判定などを管理します。

puyoimage.js

役割

ぷよの画像やゲームオーバー時のアニメーションを管理するファイル

内容

ぷよの画像をロードおよび管理し、必要なときにぷよの画像を提供します。さらに、ゲームオーバーのアニメーションや表示を担当します。

score.js

役割

ゲームのスコア管理を担当するファイル

内容

現在のスコアを計算し表示します。消去や連鎖に基づいてスコアを計算し、画面上にスコアを更新します。

stage.js

役割

ステージ内のぷよの配置と管理を行うファイル

内容

ステージの初期化、ぷよの配置、落下、消去の管理を行います。ステージの状態を更新し、ぷよ同士の衝突や接地の判定を行います。

game.js の解説

ゲームの起点となる処理が書かれているファイルです。
通常のWebサイトなどのプログラムとは異なり、ゲームは基本的に処理を繰り返し実行を繰り返し、その処理の中のタイミングで入力を受け付けたり、ゲーム内への反映ををおこなっています。

// 起動されたときに呼ばれる関数を登録する
window.addEventListener("load", () => {
    // まずステージを整える
    initialize();

    // ゲームを開始する
    loop();
});

上記のコードはloadのタイミングで処理が呼び出されるようにしています。
つまり、ゲームに必要なリソースが読み込まれてから処理が開始されるように制御しています。

initializeではこの後解説する各種モジュールの初期化とゲームに使うフラグの初期値を設定しています。

準備が整ったらloop関数で処理を繰り返し実行します。

loop関数では、switch(mode)で状況毎に処理を分けて実行させています。

function loop() {
    switch(mode) {
        // 12種類のモードで振り分け
        case 'start':

モードはstart、checkFall、fall、checkErase、erasing、newPuyo、playing、moving、rotating、fix、gameOver、batankyuの12種類で判断されます。

状態遷移図

状態の説明

START

ゲームが開始されたときの初期状態。
特に何も処理をしないで、次のCHECK_FALLの状態に遷移します。

CHECK_FALL

空中にあるぷよが自由落下するかどうかを確認する状態。
例えば高低差のある位置にぷよを横並びにした時やぷよ消去時に空中に浮いているぷよが存在するかを確認するためのモードです。
開始時も盤面に空中に浮いているぷよが無いか確認しています。
今回のサンプルのプログラミングでは無いけど、ハンディキャップでお邪魔ぷよを開始時設定している場合なんかは初回時にも利用されると考えられます。
自由落下するぷよが存在する場合はFALLの状態に遷移します。
自由落下するぷよが存在しない場合はCHECK_ERASEの状態に遷移します。
自由落下するかの確認処理はstage.jsで実装されています。

FALL

ぷよが自由落下する処理を行う状態。
プレイヤーの操作から外れている時に空中にあるぷよを地面まで落下せる際のモード。
自由落下が完了していない場合は引き続きFALLの状態で処理を続けます。
自由落下が完了している場合はCHECK_ERASEの状態に遷移します。
自由落下が完了しているかの確認処理はstage.jsで実装されています。

CHECK_ERASE

ぷよが消去可能かを判定する状態。
消せるぷよが存在する場合は得点の加算とコンポ数のインクリメントを行い、ERASINGの状態に遷移します。
消せるぷよが存在しない場合はコンボ数を0にリセットして、NEW_PUYOの状態に遷移します。
消せるぷよが存在するかの確認処理はstage.jsで実装されています。

ERASING

ぷよを消去するアニメーション処理を行う状態。
アニメーションが終わった場合は、再度落ちるかどうか判定するためCHECK_FALLの状態に遷移します。
アニメーションが終わっていない場合は、引き続きERASINGの状態で処理を続けます。
アニメーションの確認処理はstage.jsで実装されています。

消去前 消去後

NEW_PUYO

新しいぷよを生成し、ステージに配置する状態。
ぷよの生成を行いPLAYINGの状態に遷移します。
ぷよが生成できない場合はGAME_OVERの状態に遷移します。
ぷよの生成処理はplayer.jsで実装されています。

PLAYING

プレイヤーがぷよを操作する状態。この状態では、ぷよの移動や回転操作を行います。
プレイヤーの入力を確認し、入力内容に合わせてPLAYING、MOVING、ROTATING、FIXの状態に遷移します。
プレイヤーの操作処理はplayer.jsで実装されています。

MOVING

ぷよが左右に移動する処理を行う状態。
移動が完了した場合はPLAYINGの状態に遷移します。
移動が完了していない場合は引き続きMOVINGの状態で処理を続けます。
移動処理はplayer.jsで実装されています。

ROTATING

ぷよが回転する処理を行う状態。
回転が完了した場合はPLAYINGの状態に遷移します。
回転が完了していない場合は引き続きROTATINGの状態で処理を続けます。
回転処理はplayer.jsで実装されています。

FIX

ぷよをステージに固定する処理を行う状態。
現在の位置でぷよを固定し自由落下を確認するため、CHECK_FALLの状態に遷移します。
ぷよの固定処理はplayer.jsで実装されています。

GAME_OVER

ゲームオーバーの処理を行う状態。
ぱたんきゅーの画像を画面上に表示させるために画像サイズやHTMLの要素を設定しています。
設定が終わったらBATANKYUの状態に遷移します。
処理はpuyoimage.jsで実装されています。

BATANKYU

ゲームオーバー時のアニメーション処理を行う状態。
ぱたんきゅーの画像をアニメーションとして繰り返し表示させます。
この状態は最後の状態遷移となります。
ぱたんきゅーのアニメーション処理はpuyoimage.jsで実装されています。

ループ処理の最後

モードに対応した処理が完了したら、frame変数をインクリメントし、requestAnimationFrameを利用してloop処理を再度呼び出します。

    frame++;
    requestAnimationFrame(loop); // 1/60秒後にもう一度呼び出す

frame変数は、ぷよぷよプログラミングの進行の基盤となるもので、
ゲーム内でのタイミングやアニメーションの制御、連鎖の管理など、さまざまな目的で活用されます。
これにより、スムーズで一貫したゲームプレイ体験を提供することができます。

requestAnimationFrameは、ブラウザに「次の再描画（フレーム）を行う前に、この関数を呼び出して」と指示するためのものです。これは、アニメーションやゲームのループをスムーズに動作させるために使われます。

まとめ

ぷよぷよプログラミングではgame.jsがゲームの基礎となり、ゲーム全体の流れを管理しています。
詳細の処理については状態に合わせたてモジュールの処理を呼び出すようにしています。
全体のぷよの管理はstage.js、操作しているぷよについては、player.jsで管理をしていることがわかったと思います。

次回は引き続きそれぞれのモジュールの中身について解説をおこなっていきます。
合わせてYouTubeの解説も見ていただき、いいなと思ったら、チャンネル登録と高評価をよろしくお願いいたします！！

[チャンネル登録リンク]

Discussion