Phaser.jsで始める簡単ゲーム開発②｜Phaser.jsの基本設定とテキストオブジェクトの表示

2024年8月12日

この記事では、Phaser.jsを使って初心者でも簡単に楽しいゲームを作れるよう、ステップごとに分かりやすく解説していきます。最終的に、このシリーズを通して「ぱくぱくフルーツ」という、画面に現れる果物をタップして消していくシンプルなゲームを完成させることができます。「ぱくぱくフルーツ」は、クリックやタッチで果物を消すと、次の果物が出現して繰り返し遊べるような仕組みや、インタラクティブな要素やアニメーションを取り入れたゲームです。

こんにちは！前回の記事で、ゲーム開発の準備と基本的なフォルダ構成について学びました。

前回の記事▽

Phaser.jsで始める簡単ゲーム開発①｜VSCodeで初心者向けゲーム制作の基本準備

…

今回は、いよいよPhaser.jsを使って、実際にゲームを作っていきます。ここでは、index.htmlにコードを書いて、Phaser.jsを導入し、ゲームの基本的な設定や簡単なオブジェクトの表示方法を説明します。それでは、さっそく始めましょう！

Phaser.jsの導入
ゲームの初期設定
簡単なオブジェクトの表示
動作確認

Phaser.jsの導入

まずは、index.htmlにPhaser.jsを読み込むコードを書き加えます。Phaser.jsは、Web上で2Dゲームを作成するためのライブラリで、多くの便利な機能が揃っています。

Phaser.jsを使うメリットはこちらに書いています▽

ChatGPTとPhaser.jsで初めてのJavaScriptゲーム開発：子供向けブラウザゲーム制作の体験談 | ゲームでぴこ…

こんにちは！私は２歳の息子を育てるママで、フロントエンドエンジニアとして働いています。最近、ChatGPTがど

ゲームでぴこぽ | 赤ちゃん子ども…

Phaser.jsを読み込む

index.htmlファイルに、以下のようなコードを追加します。このコードは、Phaser.jsのライブラリを外部から読み込むためのものです。

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

全体のコードはこちらです▽

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Game</title>
    <style>
        body {
            margin: 0;
            background-color: #add8e6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
　　　　　　　　　　　　　　　　　　　　　　　overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
    <script>
        // ゲームのコードはここに書きます
    </script>
</body>
</html>

これにより、Phaser.jsを使用してゲームを作成するための準備が整います。

ゲームの初期設定

次に、ゲームの基本設定を行います。ゲームの設定には、キャンバスのサイズや背景色、シーン（ゲームの各段階を管理する部分）の設定などがあります。これらをindex.htmlの<script>タグ内に記述していきましょう。

キャンバスの設定

Phaser.jsでは、ゲームを表示する領域をキャンバスと呼びます。以下のコードを追加して、キャンバスのサイズや背景色などを設定します。

<script>
    const config = {
        type: Phaser.AUTO,  // Phaserが最適なレンダリング方法を選択
        width: 800,         // キャンバスの幅
        height: 600,        // キャンバスの高さ
        backgroundColor: '#add8e6', // 背景色
        scene: {
            preload: preload,
            create: create
        }
    };

    const game = new Phaser.Game(config);
</script>

このconfigオブジェクトで、キャンバスのサイズや背景色を指定します。また、ゲームの初期化と描画を行うために、preloadとcreateという2つの関数を設定します。

簡単なオブジェクトの表示

それでは、実際に画面にオブジェクトを表示してみましょう。今回は、Phaser.jsの基本機能を使って、簡単なテキストを画面中央に表示します。

オブジェクトの表示

まず、preload関数とcreate関数を以下のように記述します。

<script>
    function preload() {
        // ここにリソースの読み込みコードを書きます
    }

    function create() {
        // テキストオブジェクトの表示
        this.add.text(400, 300, 'Hello Phaser!', { fontSize: '32px', fill: '#ffffff' }).setOrigin(0.5, 0.5);
    }
</script>

preload関数: ここでは、画像や音声などのリソースを読み込むことができますが、今回は特に何も読み込む必要がないので空にしておきます。
create関数: ここでゲームオブジェクトを生成します。上記のコードでは、画面中央に「Hello Phaser!」というテキストを表示しています。setOrigin(0.5, 0.5)は、テキストの基準位置を中央に設定するためのものです。

ここまでの全体のコードはこちらです▽

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Game</title>
    <style>
        body {
            margin: 0;
            background-color: #add8e6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
    <script>
        const config = {
        type: Phaser.AUTO,  // Phaserが最適なレンダリング方法を選択
        width: 800,         // キャンバスの幅
        height: 600,        // キャンバスの高さ
        backgroundColor: '#add8e6', // 背景色
        scene: {
            preload: preload,
            create: create
        }
    };

    const game = new Phaser.Game(config);

    function preload() {
        // ここにリソースの読み込みコードを書きます
    }s

    function create() {
        // テキストオブジェクトの表示
        this.add.text(400, 300, 'Hello Phaser!', { fontSize: '32px', fill: '#ffffff' }).setOrigin(0.5, 0.5);
    }
    </script>
</body>
</html>