第1回 – Phaserでのゲーム制作、最初の一歩

みなさんこんにちわ。
プログラミングの勉強をしていると、ゲームを作ってみたいな～とか思ったりしませんか？実は私はもその一人です。でもゲーム制作って物理的な計算と制御、多くのキャラクタデータとか必要で、一人じゃ本格的なゲームはまず作れなそうですね。でも、とりあえず、一人でもできる簡単なゲームでもいいので作ってみたい思いいろいろ調べたら、PhaserというHTML5ゲーム開発のためのオープンソースのフレームワークがあったので、試してみることにしました
このブログでは、実際に試行錯誤しながら作ったゲームを記録として記載します。

公式サイト

Phaser公式サイトでは、迅速なフレームワークのセットアップ手順、詳細な使い方ドキュメンテーション、サンプルコードとチュートリアル、アクティブなコミュニティへのリンク、最新情報など詳しく説明されてます。

Phaser公式サイト(https://phaser.io/)

Phaserのダウンロードとセットアップ

Phaserの導入は非常に簡単です。いくつか方法はありますが、今回はCDNでの導入方法が一番簡単なのでその方法を紹介します。
CDNの場合は、公式サイトで最新のバージョンを調べることができます。

Phaser公式サイトインストール情報（https://phaser.io/download/stable)

基本的なサンプルの作成

以下のコードは、文字列「HELLO WORLD」をバウンドさせる基本的な例です。

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- Phaser.jsのスクリプトを読み込み -->

    <script src="//cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.js"></script>

</head>



<body>

    <!-- スタイル設定 -->

    <style>

        #game-container {

            margin: auto 0;

            padding: 0;

        }



        #game-container {

            width: 100%;

            height: 100%;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        #game-container canvas {

            border-radius: 5px;

        }

    </style>

    <!-- ゲームを表示するコンテナの設定 -->

    <div id="game-container"></div>



    <!-- JavaScriptコード -->

    <script>

        // ウィンドウの縮尺値を設定

        let window_scale = 0.9;



        // ウィンドウの幅が800より大きい場合、縮尺値を変更

        if (window.innerWidth > 800)

            window_scale = 0.5;



        // ゲームフレームの幅と高さの計算

        let frame_width = window.innerWidth * window_scale;

        let frame_height = window.innerHeight * window_scale;



        // Phaser ゲームの設定

        const config = {

            type: Phaser.AUTO,

            width: frame_width,

            height: frame_height,

            backgroundColor: "#222222",

            parent: "game-container",

            physics: {

                default: 'arcade',

                arcade: {

                    gravity: { y: 300 },

                    debug: false

                }

            },

            scene: {

                preload: preload,

                create: create,

                update: update

            }

        };



        // Phaser ゲームの作成

        const game = new Phaser.Game(config);



        // テキストエレメントの初期化

        let textElement;



        // 画像の事前読み込み

        function preload() {

            // ベースURLを設定

            this.load.setBaseURL("https://honda-workshop.com/works/phaser/");

            this.load.image("repeating-background", "/assets/sky.png");

        }



        // ゲーム内のオブジェクトの作成

        function create() {

            // ゲームのコンフィグから幅と高さを取得

            const { width, height } = this.sys.game.config;



            // 背景スプライトの作成

            const bg = this.add.tileSprite(0, 0, width, height, "repeating-background");

            bg.setOrigin(0, 0);



            // シーン全体に物理エンジンを有効化

            this.physics.world.enable(this);



            // テキストを画像の子要素に設定

            textElement = this.add.text(frame_width / 2, frame_height / 2, "HELLO WORLD", {

                font: "30px monospace",

                color: "white"

            })

                .setOrigin(0.5, 0.5)

                .setShadow(5, 5, "#5588EE", 0, true, true);



            // ワールド境界との衝突時のバウンス効果を設定

            this.physics.add.existing(textElement);

            textElement.body.setBounce(1.0);

            textElement.body.setCollideWorldBounds(true);

        }



        // ゲームの更新ロジック（現在は未使用）

        function update(time, delta) {

            // ここにキーボード入力などのゲームの更新ロジックを追加できます

        }



        // ウィンドウのリサイズ時の処理

        window.addEventListener('resize', function () {

            // フレームの幅と高さを更新

            frame_width = window.innerWidth * window_scale;

            frame_height = window.innerHeight * window_scale;



            // ゲームのスケールを調整

            game.scale.resize(frame_width, frame_height);



            // リサイズ後の位置にテキストエレメントを更新

            textElement.setPosition(frame_width / 2, frame_height / 2);

        });



    </script>

</body>



</html>