【Phaser入門】見下ろし2Dレトロアクションゲームを作るPart2 Phaserの基本編

どうも。

前回はPhaserでゲームを作るための準備について発信しました。まだ見ていない方はこちらもご覧ください。

www.murinote.com

今回はPhaserでゲームの基礎部分を作る方法を説明していきます！

1. シーンとは？

Phaserでゲームを作るにはシーンの理解が必要となります。このシーンというのはいわゆるタイトル画面、ステージ選択画面、戦闘画面、等の画面のことだと思っていただけたらと思います。

Phaserでは必要な分だけシーンを作り、適切に切り替えていくことでゲームが動いていきます。実際にゲームを作るときは、タイトルシーン、ゲームシーン、ゲームオーバーシーン、等を作っていくことになるかと思います。

2. タイトルシーンの作成

では、まずはじめにタイトルシーンを作成していきましょう。

Phaser Launcherを開き、以前作成したゲームを立ち上げます。
立ち上げたら、何やら左側にいろいろとファイルが並んでいますが、いったん無視して右上のアイコンからシーンを新たに作成します。シーンの名前はTitleSceneとでもしておきましょう。

ソースコードの解説

作成したシーンのソースコード（=プログラミングされた内容）が表示されますので、早速解説していきます。

// "Every great game begins with a single scene. Let's make this one unforgettable!"
export class TitleScene extends Phaser.Scene {
    constructor() {
        super('TitleScene');
    }

    init() {
        // Initialize scene
    }

    preload() {
        // Load assets
    }

    create() {
        // Create game objects
    }

}

ソースコードの最初に英文で「どんなすごいゲームも一つのシーンから作られます。これを忘れないでください！」とありますね。まったくその通りだと私も思います。

export class TitleScene extends Phaser.Scene {
    constructor() {
        super('TitleScene');
    }

冒頭のこの部分ですが、タイトルシーンのクラスを作成しています。作成にあたって、PhaserのPhaser.Sceneクラスを継承しています。シーンを作るときは基本的にこのクラスを継承して作ります。

コンストラクタでsuper('TitleScene')と記述されています。シーンごとに割り当てたい一意の文字列を渡すことでシーンを作成できますが、よくわからないという方はおまじないのようなものと考えて差し支えないです。

次に、init()、preload()、create()の3つの関数が定義されています。この関数はコメントの通り、それぞれ以下のような挙動をします。

関数名	処理内容
`init()`	シーンの開始時に動く初期化処理。
`preload()`	シーンで使用するアセット類のロード処理。
`create()`	シーンで使用するキャラ、敵、床などのオブジェクトの生成処理。

この関数はそれぞれシーン開始後、init()、preload()、create()の順番で動いていきます。

では、これを踏まえて実際にタイトルシーンのソースコードを書いていきましょう！

文字を表示する

タイトル画面であることがわかるように、文字を画面の中央に表示してみましょう。

文字を表示するときは、add.text()を使って以下のように書きます。

    create() {
        // タイトルの文字列を画面中央に表示
        this.textTitle = this.add.text(
            this.scale.width / 2,
            this.scale.height / 2,
            "Game Start",
            {
                fontFamily: "Arial Brack",
                fontSize: 42,
                color: "#ffffff",
                stroke: "#000000",
                strokeThickness: 8,
            }
        );
    }

add.text()はシーンに備わっている、テキストを画面に表示する関数です。この関数の引数は順番にテキストのx座標、y座標、表示文字列、フォントの設定となります。

引数にあるthis.scale.width(height)は画面の幅、高さを表します。その後のフォントの設定は何やらごちゃごちゃしていますが、フォントのスタイルや文字サイズ、文字色、文字の外枠などを決めています。

では早速表示させるためにゲームを起動して確認したいのですが、このまま起動してもこのタイトルシーンは動いてくれないので、このシーンが動くようになるため設定を行いましょう。

main.jsというファイルがあるはずなので、それを開いてください。開くと何やらconfigという変数が定義されていますが、これはゲームの起動などを設定しているものです。

ここで先ほど定義したTitleSceneを、ゲーム起動時に真っ先に動くように設定します。

// ここでゲームに必要なシーンをインポートする
import { Start } from './scenes/Start.js';
import { TitleScene } from './scenes/TitleScene.js'

const config = {
    type: Phaser.AUTO,
    title: 'Overlord Rising',
    description: '',
    parent: 'game-container',
    width: 1280,
    height: 720,
    backgroundColor: '#000000',
    pixelArt: false,
    // ここで使用するシーンを並べる。一番初めに定義したものが最初に起動される
    scene: [
        TitleScene,
        Start,
    ],
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
}

new Phaser.Game(config);

コメントの通りですが、TitleSceneをimportしてconfigのsceneに並べます。この時先頭に来たものが、起動時に最初に動くシーンとなります。

では早速、上の再生ボタンからゲームを起動してみましょう。

起動すると以下のような画面になると思います。

何やら少しだけ文字が右下に寄っています。さらに言うと背景が真っ黒で見づらいです。

微調整してみる

ゲーム開発では試行錯誤が基本となります。一度目でうまくいくなんて事はほぼないので、何度も調整を繰り返すことに慣れておきましょう。

ではまず画面の背景を灰色にしてみましょう。さらにテキストの位置もあることをすれば直るので同時に直してみましょう。

    create() {
        // 背景色を灰色にセット
        this.cameras.main.setBackgroundColor("#808080");
        // タイトルの文字列を画面中央に表示
        this.textTitle = this.add.text(
            ...
            ...
        );
        // 指定した座標を、その要素のどの部分を起点にするか決める。
        // 左上を起点にするなら(0, 0)、中央なら(0.5, 0.5)、右下なら(1, 1)
        this.textTitle.setOrigin(0.5, 0.5);
    }