「エンジニアが成長できる環境を提供する」株式会社リヴェラの様子をご紹介します!

「エンジニアが成長できる環境を提供する」株式会社リヴェラの様子をご紹介します!

Phaser 3 + Webpack 4 + Babel 7でゲーム開発環境を作る(設定編)

2018.11.08

Phaser 3 + Webpack 4 + Babel 7でゲーム開発環境を作る(設定編) はコメントを受け付けていません。

はじめに

この記事は、Phaser3を用いたゲーム開発環境構築についての「設定編」になります。

「導入編」の記事はこちらから

こんにちは、さばです。

現場が忙しくて、結構期間が空いてしまいました…

前回からの続きで、今回はWebpackの設定やPhaser3でのHello Worldをやっていきます。

今回の記事で開発環境は完成する予定です。

この記事で触れること

  • 今回構築する環境構成について
  • Webpackの設定について
  • Phaser 3でHello World

前提条件

  • 「導入編」で構築した環境が整っていること

今回構築する環境構成

「導入編」でも触れましたが、もう一度触れておきます。

まず、導入したモジュールは下記の通りです。

  • phaser 3.12.0
  • webpack 4.19.1
  • webpack-cli 3.1.0
  • webpack-dev-server 3.1.8
  • babel-core 7.1.0
  • babel-loader 8.0.0

そして、ディレクトリ構造は下記の通りにしようと思います。

root/
├ assets/
├ build/
│  ├ assets/
│  ├ js/
│  └ index.html
├ src/
│  ├ js/
│  │  ├ somedirectory/
│  │  │   └ ..
│  │  ├ hoge.js
│  │  ├ ..
│  │  └ index.js
│  └ index.html
├ package.json
└ webpack.config.js

Webpackの設定

ここからは、Webpackの設定を行っていきます。

まず、rootディレクトリにwebpack.config.jsを新規作成します。

このwebpack.config.jsファイルがWebpackの設定ファイルになります。

そしてファイルの中身ですが、全てに説明を書いていたらそれだけで一記事になってしまうので、一部の箇所をピックアップして説明し、それ以外はコメントで軽く触れる程度にします。

また、ES6のモジュール記法についても省略します。

以下が今回作成するwebpack.config.jsの中身です。

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    // Webpack4から推奨されるようになったプロパティ
    // developmentかproductionを指定する
    mode: 'development',

    // ビルドの起点になるJSファイル指定する
    entry: {
        app: './src/js/index.js',
        'production-dependencies': ['phaser']
    },

    // ビルド後のファイル出力先とファイル名を指定する
    output: {
        path: path.resolve(__dirname, 'build/js'),
        filename: '[name].bundle.js'
    },

    // 使用するモジュールLoaderを指定する
    module: {
        // ファイル拡張子毎に使用するLoaderを指定できる
        rules: [
            {
                // 対象の拡張子を正規表現で指定する
                test: /\.js$/,
                // 除外するディレクトリを指定する
                exclude: /node_modules/,
                // 対象のディレクトリを指定する
                include: path.resolve(__dirname, 'src/js/'),
                // Loaderを指定する
                loader: 'babel-loader',
                // Loaderのオプションを指定する
                options: {
                    babelrc: false,
                    presets: [
                        '@babel/preset-env',
                    ]
                }
            }
        ]
    },

    // 使用するプラグインを指定する
    plugins: [
        // サーバー起動中でも編集したファイルを上書きロードしてくれる
        new WriteFilePlugin(),
        // JSファイル以外をビルド先にコピーしてくれる
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, 'src/index.html'),
                to: path.resolve(__dirname, 'build')
            },
            {
                from: path.resolve(__dirname, 'assets', '**', '*'),
                to: path.resolve(__dirname, 'build')
            }
        ]),
        // WebGLを使用するための設定
        new webpack.DefinePlugin({
            'typeof CANVAS_RENDERER': JSON.stringify(true),
            'typeof WEBGL_RENDERER': JSON.stringify(true)
        }),
    ],

    // 開発用サーバーの設定
    devServer: {
        contentBase: path.resolve(__dirname, 'build'),
        port: 9000
    },

    // 複数のエントリーポイントで利用している共通モジュールを外出しして出力するための設定
    optimization: {
        splitChunks: {
            name: 'vendor',
            chunks: 'initial'
        }
    }
}

moduleについて

ファイルをバンドルする前に何か実行したい機能がある場合にここに記述します。

今回はES6で書かれたJavascriptファイルをES5に変換したいため、babal-loaderを使用する設定を書きます。

ざっくり日本語で設定内容を書くと、以下の様な感じになります。

/node_modules/フォルダを除くsrc/jsディレクトリ直下にある、.jsファイルに対して、babel-loaderを使用して変換する。

またbabel-loaderのオプションとして、以下を指定しています。

  • babelでは.babelrcファイルを作成し、そこに設定を書くこともできますが、今回は使用しないためfalse
  • 自動的に環境に応じて使用するbabelプラグインを決定してくれるbabel-preset-envを使用

pluginsのDefinePluginについて

Phaserのゲームをビルドする際に、Webpack側にレンダラーを示してあげる必要があります。

そのために、グローバル変数としてCANVAS_RENDERERWEBGL_RENDERERを定義し、それぞれにtrueを設定しています。

CANVAS_RENDERERWEBGL_RENDERERはどちらもThree.jsに含まれるレンダラーです。

どちらか片方だけビルドに含む場合は、いらない方をfalseに設定します。

例えば、リッチな描画がいらない場合は、CANVAS_RENDERERだけで十分ですので、WEBGL_RENDERERfalseにします。

より詳細な違いと特徴についてはここでは省きます。

optimizationについて

複数のエントリーポイントで利用している共通モジュールを外出しして出力するために、Webpack 3では代わりにCommonsChunkPluginというプラグインを設定していましたが、Webpack 4で廃止されました。

詳しいことは下記の記事が参考になります。

webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜

Phaser 3でHello World

Webpackの設定が終わりましたら、ファイルの配置をしていきます。

今回はPhaser 3でHello Worldということで、Hello Worldという文字を表示するだけのゲームを作っていきます。

今回作成するファイルは以下の通りです。

  • src/js/index.js
  • src/js/scene/helloWorldScene.js
  • src/index.html

それでは順番に作っていきます。

index.jsの作成

index.jsは、Webpackビルド時の起点となるファイルです。

ここがビルドで一番上の階層になるように書いていきます。

書く内容としては、ゲームの基本情報が中心です。

まずは、src/jsフォルダを新規作成し、index.jsファイルを作成します。

そして作成したindex.jsファイルの中に下記の内容を書き込んでください。

import 'phaser';

const config = {
    width: 680,
    height: 400
};

new Phaser.Game(config);

configオブジェクト内には、ゲームの基本情報を記述します。

今回は文字を表示するだけですので、幅と高さだけを指定しています。

他にも様々なオプションがありますが、詳しくは下記のドキュメントをご覧ください。

Phaser 3 API Documentation – Global

helloWorldScene.jsの作成

helloWorldScene.jsにはゲームのシーン情報を記述します。

シーンとはそのままの意味で、ゲームにおける場面のことです。

RPGに例えると、タイトルシーン、フィールドシーン、戦闘シーンなどに分けて作成していくイメージです。

今回はhelloWorldという文字を表示するシーンを作成します。

まずは、src/jsフォルダ内にsceneフォルダを新規作成し、その中にhelloWorldScene.jsファイルを作成します。

そして作成したhelloWorldScene.jsの中に下記の内容を書き込んでください。

export default class HelloWorldScene extends Phaser.Scene {
    create() {
      this.add.text(250, 150, 'Hello World', { fill: '#fff' });
    }
}

Phaserで定義するSceneクラスはPhaser.Sceneを継承してあげます。

またSceneクラスは3つのメソッドを基盤に組み立てます。

  • preloadメソッド:シーンが始まる前に読み込まれるメソッド。assets等の事前読み込みはここで行う。
  • createメソッド:オブジェクトの生成メソッド。シーンに追加したいオブジェクトの定義はここで行う。
  • updateメソッド:アクションを検知してオブジェクトの状態を更新するメソッド。

今回は画像読み込み、状態遷移等は定義せずに、とりあえずHelloWorldと表示するだけなのでcreateメソッドのみ実装しています。

作成したシーンの読み込み

作成したシーンはindex.jsで読み込んで使用できるようにする必要があります。

index.jsを以下の様に修正してください

import 'phaser';

import HelloWorldScene from './scene/helloWorldScene' // Sceneのインポート

const config = {
    width: 680,
    height: 400,
    scene: HelloWorldScene // Scene定義
};

new Phaser.Game(config);

Sceneの定義はconfigオブジェクト内で行います。

index.htmlの作成

index.htmlでは、Webpackビルドした際に作成されるjsファイルを読み込んであげるようにします。

srcフォルダ内にindex.htmlを作成し、以下の内容を書き込んでください。

<html>
    <head>
    </head>
    <body>
        < script src="js/production-dependencies.bundle.js"></script>
        < script src="js/app.bundle.js"></script>
        < script src="js/vendor.bundle.js"></script>
    </body>
</html>

Webpackビルド

これらのファイルの作成が終わったら、ビルドの準備が出来ました。

以下のコマンドでWebpackビルドを実行することが出来ます

yarn run webpack

ビルドが無事完了したら、以下のコマンドでWebpack Dev Serverを起動してみます。

yarn run webpack-dev-server

i 「wdm」: Compiled successfully.の様にログが表示されていたら、起動しています。

今回開発用サーバーのポートを9000に設定しているので、localhost:9000にアクセスします。

下記の様な画面が表示されていたら成功です。

あとがき

今回はHello Worldという文字を表示するだけでしたので少し物足りなかったかもしれません。

そんな方は、以下のTutorialを今回構築した環境で再現すると良いと思います。

公式チュートリアル

一通りの作り方を学ぶことが出来ます。

他にもシューティング、ADV等色々なゲームのハンズオンがインターネット上に転がっているので、

自分が作りたいジャンルで調べてハンズオンを進めると良いです。

(ただし英語記事ばかりですが…)

次の記事は未定ですが、2DアニメーションのSpineが気になっているので、その記事になる説が濃厚です。

関連記事

コメントは利用できません。

エンジニア募集中!

株式会社リヴェラ Webページ