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

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

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

2018.09.21

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

はじめに

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

初めまして、さばです。

普段はJavaでWeb系システムの開発に携わっています。

今回興味がありPhaser 3というJavascriptゲームエンジンに触れてみました。

Javascriptについてはまだまだ勉強中の身ですが、自分の中で整理出来て良いかなと思い記事にしました!

長くなりそうなので、「導入編」「設定編」に分けようと思います。

(いつになるかわかりませんが、「ゲーム作成編」も作る予定です。)

この記事で触れること

  • Phaser 3について
  • Webpackについて
  • Babelについて
  • Phaser 3を用いたゲーム環境構築について

前提知識

  • パッケージマネージャ(yarn, npm)の基礎知識と使い方

Phaser 3とは

Phaser 3とはJavascript, WebGLを用いた2Dゲームエンジンのことです。

Githubでのスター数が20,000を超える程の超人気ゲームエンジンです。

日本国内では記事も少なく、まだあまり普及していません(?)

また、Phaser 2もありますが、全く構文が違うらしいので、今回は新しいバージョンの3を選択しました。

公式サイトはこちら

Phaser 3の良いところ

  1. とにかく導入が簡単で、最もシンプルにやるならばGithubからJSファイルをダウンロードするだけで開発を始められる
  2. 公式のチュートリアル、サンプルがとても分かりやすく学習しやすい
  3. インターネットで探せば、大体どんな種類のゲームでもハンズオンがある
  4. 構文がわかりやすく、一度環境を整えたら直感的にプログラミング出来る

Phaser 3の辛いところ

  1. 日本語ドキュメントがほぼ皆無なため、わからないことは英語で探さなければいけない
  2. APIドキュメントに使用例がないため、ドキュメント単体だといまいち使い方がわからない

Webpackとは

Webpackとは、Javascriptのモジュールバンドラーのことです。

複数のJavascriptファイルを一つにまとめるためのモジュールです。

JavascriptでなくてもCSSなどもまとめることが出来るらしいですが、今回はCSSは触れないため割愛します。

Babelとは

Babelとは、ES6構文以降で書かれたJavascriptファイルをES5の構文へ変換するためのツールのことです。

ES6構文は全てのブラウザに対応していないため、全てのブラウザに対応しているES5構文に変換することで、全てのブラウザで見ることが出来るようになります。

例えば、ES6構文ではアロー関数やclass構文を定義することができますが、ES5構文ではこれらを定義することが出来ません。

今回は主旨とずれるため、これ以上は深く踏み込みません。

Phaser 3の開発環境構築について

それでは、前置きが長くなりましたが本題に入りたいと思います。

最初に、必要モジュールの導入を全て行い、その後に設定等を行います。

「導入編」ではモジュールの導入までを行います。

構築する環境

今回構築する環境は以下の通りです。

  • 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

それぞれバージョンが書いていますが、実施段階の最新モジュールを導入しています。

また、パッケージマネージャーにはyarnを使用していきます。

ディレクトリ構造

今回は以下の様にディレクトリを作っていきます。

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

assets配下に使用する画像ファイルを配置していきます。

src/js配下にJavascriptファイルを作成していきます。

src/js配下のディレクトリ構造は自由です。

モジュール導入

まずは、任意のフォルダ名でプロジェクトフォルダを作成し、初期設定を行います。

yarn init

今回は以下の通りに行いました。

$ yarn init
yarn init v1.7.0
question name (phaser3-wp4-bb7):
question version (1.0.0):
question description: Sample Project for Phaser3 + Webpack4 + Babel7
question entry point (index.js):
question repository url:
question author: saba
question license (MIT):
question private: true
success Saved package.json
Done in 33.43s.

次に、必要なモジュールを導入していきます。

yarn add -D webpack
yarn add -D webpack-cli
yarn add -D copy-webpack-plugin
yarn add -D webpack-dev-server
yarn add -D write-file-webpack-plugin
yarn add -D babel-loader@^8.0.0
yarn add -D @babel/core
yarn add -D @babel/preset-env

webpack-cliは、webpackをコマンドラインから実行する際に必要なモジュールです。

copy-webpack-pluginは、ビルド先に任意のファイルやフォルダをコピーするためのプラグインです。

webpack-dev-serverは、開発環境でローカルサーバーを建ててくれるモジュールです。

write-file-webpack-pluginは、webpack-dev-server使用中でもJavascriptファイルをビルド用に書き出してくれます。

最後にPhaserを導入します。これでモジュールの導入は完了です。

yarn add phaser@^3.0.0

今回はここまでです。「設定編」では、webpackの設定、package.jsonの編集、そしてPhaser 3のHello Worldをやる予定です。

関連記事

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

エンジニア募集中!

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