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


![Phaser-Logo-Small.png](https://qiita-image-store.s3.amazonaws.com/0/129201/b7be9003-67bb-589a-2372-302a54c6ef42.png "Phaser-Logo-Small.png")


概要
=====

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

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

ちなみに何故phaserを使うか、ですが、phaserはgithubのスターをかなり多く集めている有力なゲームエンジンである、という理由と、[「phaser」という名前にピン！と来た](https://www.google.co.jp/search?q=phaser+beam&source=lnms&tbm=isch&sa=X&biw=1237&bih=666)ためです（笑）。


使用ツール
=====
- npm
- webpack
- typescript
- vscode
- phaser

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


ビルド環境準備
====
まずは必要なツールの導入です。
node環境が無い場合は、[ndenv](https://github.com/riywo/ndenv)（筆者は[anyenv](https://github.com/riywo/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ビルドコマンドも追記します。

```json: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](https://code.visualstudio.com/)を利用します。

Macでのインストール方法は[こちら](https://code.visualstudio.com/docs/setup/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/](http://localhost:8080/webpack-dev-server/) にアクセスすると、黒い枠が出ていると思います。
これで準備完了です！
chromeであれば、開発者ツールを起動するとupdate()がconsoleに記録され続けているはずです（ウインドウからフォーカスを外すと止まります）

今回のソースコードは[こちら](https://github.com/alf-ytakada/phaser-webpack-boilerplate)です。


終わりに
====

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