More than 3 years have passed since last update.

Phaser3（TypeScript）を使いたい　①環境構築

Last updated at 2020-01-03Posted at 2020-01-02

概要

Typescript + Phaser3でHTML5ゲームを作る環境を構築する
ESLint + Prettierを導入する

この記事では、必要パッケージのインストール手順まで記載します。
基本的に、phaser3-typescriptというボイラープレートの写経をしつつ、ESLintなどの設定を加えた内容になります。

すぐ使いたい場合には、phaser3-typescriptを取得して、これをベースに書いていくのが手っ取り早いです。

Phaserって？

ブラウザ上で動作するゲームフレームワークです。
JavaScript（TypeScript）で実際のゲーム処理を書いていくことができます。
物理演算エンジンなどが組み込まれてます。
ただし、レベルエディタなどは本体には組み込まれていないので、外部ツール（Tiled）を使ったりする必要があります。

必要なツールを導入する

必要なツールの導入手順を説明します。

Node.jsなどのインストール

Node.jsというサーバサイドで動作するJavaScript環境をインストールしてください。
https://nodejs.org/ja/

JavaScriptの世界では、npmかyarn、いずれかのパッケージ管理ツールが主に使われてますが、
yarnのほうが好きなのでyarnで解説してます。
https://yarnpkg.com/lang/ja/

npmを利用されている場合には適宜読み替えてください。

エディタはVSCodeを使っています。
ご自由に。

プロジェクトの初期化

適当なディレクトリを作成して、プロジェクトを初期化します。

yarn init

なんか色々聞かれます。基本的に外部公開しなければEnter押してればOKです。

必要パッケージのインストール

Phaser（ゲームエンジン本体）
TypeScript
Webpack

をインストールしていきます。

yarnを利用する場合、
yarn add [パッケージ名]
で各種パッケージがインストールされていきます。

TypeScriptの導入

TypeScriptというJavaScriptにいろいろ開発しやすくなる仕組みを追加した言語を使って開発します。

yarn add -D typescript

を実行してください。
そしてプロジェクトのルートディレクトリ（package.jsonと同じディレクトリ）に
tsconfig.json
というファイルを作成してください。
中身には下記を記入してください。

tsconfig.json

{
    "compilerOptions": {
      "target": "ES6",
      "module": "commonjs",
      "sourceMap": true,
      "noImplicitAny": false,
      "strict": false
    }
}

TypeScriptで書いたスクリプトは最終的にJavaScriptに変換（トランスパイル）されます。
tsconfig.jsonではTypeScriptをどんな感じにJavaScriptへ変換するかオプションを指定できます。

{
    "compilerOptions": {
      "target": "ES6",            //どのECMAScript仕様に書き出すか指定
      "module": "commonjs",       //各モジュールのexportの書き出し方を指定
      "sourceMap": true,          //sourceMapをつけるかどうか
      "noImplicitAny": false,     //any型を見つけた時に怒るかどうか
      "strict": false             //厳密な型指定を有効化するかどうか
    }
}

Webpackの導入

Webpackというモジュールバンドラを導入します。

yarn add -D webpack webpack-cli webpack-dev-server ts-loader expose-loader

を実行してください。

Webpackが何をしてくれるかというと、スクリプトなどを一個のファイルにまとめてくれます。
Webpackがモジュール間の依存関係をうまいこと整理してくれます。
Phaserを使った開発の場合、おそらくシーン単位程度でスクリプトファイルを分けていくのではないかと思います。
シーンを追加するたびに、HTML側に呼び出し順序を意識しつつスクリプトのタグを書いていくのは大変です。

Webpackを導入すると、その手間を解消してくれます。

また、TypeScriptなどをコンパイルする仕事を担わせたり、コードに対して変更があるたびにリロードする（ホットリロード）の機構で開発しやすさが上がったりするなど、導入しとくといろいろとおいしいことが多いです。

Webpackの設定を行うために、package.jsonと同じディレクトリに
webpack.config.js
というファイルを作成して下記のように書いてください。

webpack.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require("path");
const pathToPhaser = path.join(__dirname, "/node_modules/phaser/");
const phaser = path.join(pathToPhaser, "dist/phaser.js");

module.exports = {
  entry: "./index.ts",      //エントリポイント。依存関係整理の起点にするファイル。
  output: {
    path: path.resolve(__dirname, "dist"),    //distというディレクトリに生成する
    filename: "bundle.js"   //バンドルして書き出すファイル名
  },
  module: {
    rules: [
      //.tsがケツにつくファイルを探索し、TypeScriptとして読み込む(ts-loader)
      { test: /\.ts$/, loader: "ts-loader", exclude: "/node_modules/" },
      //phaser-hogehoge.jsというファイルの内容はPhaserというグローバル変数に内容を突っ込む(expose-loader)
      { test: /phaser\.js$/, loader: "expose-loader?Phaser" }
    ]
  },
  //開発用サーバを立てるときの設定
  devServer: {
    contentBase: path.resolve(__dirname, "./"),
    publicPath: "/dist/",
    host: "127.0.0.1",
    port: 8080,
    open: true
  },
  
  resolve: {
    //バンドル対象にするファイルを指定する
    extensions: [".ts", ".js"],
    //import "phaser"ってしたときに読み込みに行くやつを指定する
    alias: {
      phaser: phaser
    }
  }
};

Phaserの導入

同じ要領でPhaserを導入してみます。

yarn add phaser

これでおわりです。

ESlint + Prettier　の導入

これはオプションです。
コードの変な書き方は機械的に指摘してもらったほうが経験上快適です。
また、コードを見やすく自動的に整形したりしてもらったほうが、見通しのきくコードになります。
変な書き方の指摘と一部自動解決をしてくれるのがESLint、整形を担うのがPrettierです。

導入する場合は

yarn add -D prettier 
yarn add -D eslint eslint-config-prettier eslint-plugin-prettier
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

これを実行したうえで、.eslintrc.jsonというファイルを作成して

.eslintrc.json

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": "./tsconfig.json"
    },
    "plugins": ["@typescript-eslint", "prettier"],
    "extends": [
      "plugin:@typescript-eslint/recommended",
      "prettier/@typescript-eslint",
      "plugin:prettier/recommended"
    ],
    "env": {
      "browser": true,
      "node": true,
      "es6": true
    },
    "rules": {
      "prettier/prettier": "error",
      "no-return-assign": ["off"]
    }
  }

このようにESLintのルールを記載してください。

Prettierについても.prettierrcというファイルを作成して

.prettierrc

{
 "trailingComma": "all",
 "tabWidth": 2,
 "semi": true,
 "singleQuote": true
}

このようにPrettierのルールを記載してください。

実際に書きながら、適宜ルールを緩和したり付け足したりするのがいいと思います。

npm-scriptsの追加

開発中によくつかうシェルスクリプトをpackage.jsonに仕込んでおくことができます。
主に開発用サーバを立ち上げたりするときに、仕込んでおくと便利です。
package.jsonを下記のような内容にしてください。

package.json

{
  ///中略

  "scripts": {
    "dev": "webpack --mode development && webpack-dev-server --mode development",
    "build": "webpack --mode production && webpack-dev-server --mode production"
  }
}

最終的にはこんな感じになってると思います。