概要
Phaserとは、HTML5ゲームエンジンの１つです。
Webブラウザで動作するjavascriptのライブラリですので、
Web開発環境でゲームが作成できます。
今回は、Phaserを用いたゲーム開発を始めるための、準備を行います。
ちなみに何故phaserを使うか、ですが、phaserはgithubのスターをかなり多く集めている有力なゲームエンジンである、という理由と、「phaser」という名前にピン！と来たためです（笑）。
使用ツール
- npm
- webpack
- typescript
- vscode
- phaser
※Mac環境で動作確認を行っています。
ビルド環境準備
まずは必要なツールの導入です。
node環境が無い場合は、ndenv（筆者は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ビルドコマンドも追記します。
"scripts": {
"webpack": "webpack -d --progress --colors --watch",
"start": "webpack-dev-server --content-base dist/"
},
typescriptのビルドのために、コンフィグファイルを作成します。
tsconfig.jsonというファイル名で下記内容のファイルを作成します。
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5"
},
"include": [
"./src/**/*"
]
}
ソースコード用ディレクトリと、出力ディレクトリを作成します。
mkdir src dist
webpackの設定を準備します。
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を利用します。
Macでのインストール方法はこちらを参照してください。
PATHを通したあとは、一度シェルを再起動して先程のディレクトリに戻ってきます。
その後、
code .
でvscodeが立ち上がります。
それでは早速始めましょう。
まずは、表示用のhtmlを作成します。
distディレクトリに、下記内容の 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 ファイルを作成します。
/// <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 を作成します。
/// <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/ にアクセスすると、黒い枠が出ていると思います。
これで準備完了です！
chromeであれば、開発者ツールを起動するとupdate()がconsoleに記録され続けているはずです（ウインドウからフォーカスを外すと止まります）
今回のソースコードはこちらです。
終わりに
phaserでゲーム開発を行うための導入部分を解説しました。
次からは、実際にかんたんなゲームを作ってみたいと思います。