概要

Phaserとは、HTML5ゲームエンジンの１つです。
Webブラウザで動作するjavascriptのライブラリですので、
Web開発環境でゲームが作成できます。

今回は、Phaserを用いたゲーム開発を始めるための、準備を行います。

ちなみに何故phaserを使うか、ですが、phaserはgithubのスターをかなり多く集めている有力なゲームエンジンである、という理由と、「phaser」という名前にピン！と来たためです（笑）。

使用ツール

npm
webpack
typescript
vscode
phaser

※Mac環境で動作確認を行っています。

ビルド環境準備

まずは必要なツールの導入です。
node環境が無い場合は、ndenv（筆者はanyenvから導入)などでセットアップしてください。

準備ができたら、作業ディレクトリを作成します。

mkdir phaser-test
cd phaser-test
npm init

次に、typescriptをインストールします。
typescriptはglobalでインストールしました。

npm i -g typescript

続いて、webpackでtypescriptを開発するための諸々をインストールします。

npm i -D webpack webpack-dev-server awesome-typescript-loader source-map-loader

最後に、Phaserをインストールします。

npm i -D phaser

開発時には、webpack-dev-serverを用いて動作確認をしますので、その起動コマンドをpackage.jsonに追記します。
ついでにwebpackビルドコマンドも追記します。

package.json

  "scripts": {
    "webpack": "webpack -d --progress --colors --watch",
    "start": "webpack-dev-server --content-base dist/"
  },

typescriptのビルドのために、コンフィグファイルを作成します。
tsconfig.jsonというファイル名で下記内容のファイルを作成します。

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

ソースコード用ディレクトリと、出力ディレクトリを作成します。

mkdir src dist

webpackの設定を準備します。
webpack.config.jsというファイル名で、下記内容のファイルを作成します。

webpack.config.js

const path = require('path');
const webpack   = require("webpack");

module.exports = [{
    entry   : {
        main: "./src/main.ts",
    },
    output  : {
        path        : path.join(__dirname, "dist", "js"),
        filename    : "[name].js",
        publicPath  : "/js/",
    },
    devtool: "source-map",
    resolve : {
        extensions: ["", ".ts", ".js"],
        moduleDirectories: ["node_modules"]
    },
    module  : {
        loaders : [
            {
                test    : /\.ts$/,
                loader  : "awesome-typescript-loader",
                exclude : [
                    /node_modules/,
                ],
            },
        ],
        preLoaders: [
            {
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },
}]

コーディング環境準備

コーディングには、Visual Studio Codeを利用します。

Macでのインストール方法はこちらを参照してください。

PATHを通したあとは、一度シェルを再起動して先程のディレクトリに戻ってきます。
その後、

code .

でvscodeが立ち上がります。

それでは早速始めましょう。
まずは、表示用のhtmlを作成します。
distディレクトリに、下記内容の index.html ファイルを作成してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script src="./js/main.js"></script>    
</body>
</html>

次に、 src ディレクトリに、 main.ts ファイルを作成します。

main.ts

/// <reference path="../node_modules/phaser/typescript/phaser.d.ts"/>

import {MainState} from "./mainState";

// new Phaser.Game(width, height, レンダラ(Phaser.AUTOで自動選択), DOMエレメント指定)
let game    = new Phaser.Game(640, 480, Phaser.AUTO, "");

// MainStateクラスを、"mainState"という名前で状態登録
game.state.add("mainState", MainState);

window.onload   = () => {
    // 登録した状態のうち、"mainState"をスタートする
    game.state.start("mainState");
}

このファイルでは、起動する状態(state)を登録して、onloadのタイミングで開始しているだけです。

実際のゲーム内容は、stateファイルに記載します。

src ディレクトリに、 mainState.ts を作成します。

mainState.ts

/// <reference path="../node_modules/phaser/typescript/phaser.d.ts"/>

class MainState extends Phaser.State {
    constructor() {
        super();
    }

    // init() -> preload() -> create()の順に呼び出され、
    // update()がメインループとなる

    init() {
        console.log("init()");
    }

    // おもにリソースファイルのダウンロードを行う
    preload() {
        console.log("preload()");
    }

    // おもにゲームオブジェクト関連の初期化を行う
    create() {
        console.log("create()");
    }

    // メインループ
    update() {
        console.log("update()");
    }
}

export {MainState};

さて、ここまで準備ができたら、コンソールからwebpack-dev-serverを起動してみましょう。

npm run start

ブラウザで、 http://localhost:8080/webpack-dev-server/ にアクセスすると、黒い枠が出ていると思います。
これで準備完了です！
chromeであれば、開発者ツールを起動するとupdate()がconsoleに記録され続けているはずです（ウインドウからフォーカスを外すと止まります）

今回のソースコードはこちらです。

終わりに

phaserでゲーム開発を行うための導入部分を解説しました。
次からは、実際にかんたんなゲームを作ってみたいと思います。

Phaserでブラウザゲー制作 Part.1 環境整備

概要

使用ツール

ビルド環境準備

コーディング環境準備

終わりに