LoginSignup
15
15

More than 3 years have passed since last update.

@gale07

Phaser 3 + Webpack + Typescript でゲームを作る

Posted at

概要

  • Phaser 3を使ってHTML5ゲームを開発するための環境構築
  • Typescriptで処理を書き，Webpackでトランスパイル
  • ESLint + Prettier によるコード整形の導入

各種ツールの導入

フレームワークやパッケージなど，環境構築に必要なものを導入していきます．

Node.jsの導入

Node.jsというサーバサイドのJavaScirpt実行環境をインストールします．

Node.jsのホームページからインストーラーをダウンロードするか，MacならHomebrewでもインストールできます．

brew install node

Node.jsのバージョンを簡単に管理したい方はNodebrewからインストールするのもおすすめ．(bash_profile等は適宜変えてください)

brew install nodebrew
nodebrew setup
echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.bash_profile
nodebrew install-binary v14.15.3
nodebrew use v14.15.3
node -v

Node.jsのパッケージ管理ツールはnpmとyarnが主に使われてますが，ここではyarnを使います．npm派の方は適宜読み替えてください．

npm install -g yarn
yarn -v

プロジェクトの初期化

プロジェクトのルートディレクトリでプロジェクトを初期化します．

yarn init

色々聞かれますが，特に理由がなければEnterを押していれば大丈夫だと思います．初期化が終わると，ルートディレクトリにpackage.jsonが生成されます．

Phaserの導入

Phaserを導入します．PhaserはHTML5用ブラウザゲームのフレームワークです．

yarn add phaser

Typescriptの導入

TypeScriptという言語を導入します．ざっくり言うと，静的型付けのJavaScriptです．

yarn add -D typescript

TypeScriptをインストールしたら，ルートディレクトリにtsconfig.jsonというファイルを作成してください．

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

Webpackの導入

Webpackというモジュールバンドラを導入します．JavaScriptやCSS，TypeScriptなどのファイルを1つのJavaScriptファイルにまとめてくれます．

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

webpack-cliのv4をインストールするとエラーが発生するので，バージョン指定をしています．

上記のインストールができたら，ルートディレクトリに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'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader', exclude: '/node_modules/' },
      {
        test: /phaser\.js$/,
        loader: 'expose-loader',
        options: {
          exposes: { globalName: 'Phaser', override: true },
        },
      },
    ],
  },
  devServer: {
    contentBase: path.resolve(__dirname, './'),
    publicPath: '/dist/',
    host: '127.0.0.1',
    port: 8080,
    open: true,
  },

  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      phaser: phaser,
    },
  },
};

ESLintとPrettierの導入

ESLintとPrettierを導入します．どちらもコード整形してくれるツールで，ESLintは構文チェックとコード整形を，PrettierはESLintで整形できないコードを整形してくれます．

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

ESLintをインストールしたら.eslintrc.jsonを，Prettierをインストールしたら.prettierrcをルートディレクトリに作成してください．

.exlintrc.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"]
  }
}
.prettierrc
{
 "trailingComma": "all",
 "tabWidth": 2,
 "semi": true,
 "singleQuote": true
}

上記2つのファイルはコード整形のルールなので，コードが書きやすいように適宜ルールを書き換えてください．

動作確認

Phaser 3のチュートリアルを使って動作確認します．

今回は，チュートリアルのPart2 - Loading Assetsまで(公式HPで配布されているチュートリアルのサンプルコードのpart3.htmlまで)の内容を動作させてみます．

公式HPにあるチュートリアルのPart1 - IntroductionのRequirementsの節にあるサンプルコードのzipファイルをダウンロードしてください．

ダウンロードしたらzipファイルを解凍し，中にあるassetsディレクトリを，プロジェクトのルートディレクトリの下に置いてください．また，ルートディレクトリにscenesディレクトリを作成しておいてください．

HTMLの用意

プロジェクトのルートディレクトリに，index.htmlを作成してください．

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>TutorialMaking your first Phaser 3 Game - Part 1</title>
    <style type="text/css">
      body {
        margin: 0;
      }
    </style>
    <script src="dist/bundle.js" ></script>
  </head>
  <body>
    <div id="game"></div>
  </body>
</html>

中身はサンプルコードのhtmlファイルとほほ同じです．ただし，scriptタグのsrcはdist/bundle.jsに指定しています．

エントリーポイントの用意

Phaserではゲームの1画面を1つのSceneというオブジェクトで管理しています．なので，先程作成したscenesディレクトリにScene毎のTypeScriptファイルを置き，Webpackのエントリーポイントであるindex.tsファイルでSceneを読み込んであげます．

ルートディレクトリにindex.tsを作成してください．

index.ts
import 'phaser';
import Main from './scenes/main';

const config: Phaser.Types.Core.GameConfig = {
  width: 800,
  height: 600,
  type: Phaser.AUTO,
  parent: 'game',
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    parent: 'game',
  },
  scene: Main,
};

export class Game extends Phaser.Game {
  constructor(config: Phaser.Types.Core.GameConfig) {
    super(config);
  }
}

window.addEventListener('load', () => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const game = new Game(config);
});

index.tsでPhaserを読み込み，GameConfigオブジェクトを作成して，Gameインスタンスを作成します．使うSceneをConfigで宣言することで，実際に読み込んで描画することができます．

Sceneの用意

今回は，画面は1つしかないので，Sceneは1つになります．

scenesディレクトリにmain.tsを作成し，描画するオブジェクトや処理を書いていきます．

main.ts
export default class Main extends Phaser.Scene {
  constructor() {
    super({
      key: 'Main',
      physics: {
        arcade: {
          gravity: { y: 300 },
          debug: false,
        },
      },
    });
  }

  preload(): void {
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 'assets/dude.png', {
      frameWidth: 32,
      frameHeight: 48
    });
  }

  create(): void {
    this.add.image(400, 300, 'sky');
  }

  update(): void {
  }
}

サーバの起動

以下のコマンドで開発用サーバを起動し，表示されたURLへ飛ぶと動作しているかと思います(デフォルトのURLは http://127.0.0.1:8080/ になっているかと思います)．

npx webpack-dev-server

チュートリアルのpart2までなので，空の背景を読み込んで描画させているだけですが，とりあえず動作はしているのではないでしょうか．

最後に

1画面1ファイルだと，ちょっとゲームの規模が大きくなると1ファイルのステップ数がスゴイことになりそうなので，部品毎に分けるなど，うまいことスクリプトを細分化して綺麗な設計になるように考えたい

15
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
15