Phaser × TypeScript で快適なゲーム開発環境を構築する
前回の記事
この記事は大変な反響があって驚きました。「初心者にやさしい」という表現から「プログラミングなしでゲームがつくれる」ことを期待していた方が少なくなかったので、すこし申し訳ない気もしました。。でも、ゲームを自分でつくりたい!っていう人はたくさんいるんですね。なんだか嬉しかったです。
そして、今回の記事をしたためている間に Phaser 2.1 がリリースされました。
まだまだ活発に成長しているライブラリなのです。
僕としてはもっと Phaser が流行って欲しいので、今回は「快適なゲーム開発環境を構築する」と題して記事にしました。
Why TypeScript?
Phaser は JavaScript ライブラリです。TypeScript は JavaScript での開発を便利にするためのものです。 ここで紹介する内容においての主な利点は以下のとおりです。
コードヒントが利用できる
エラー箇所がすぐにわかる
Phaser の作者による解説がある
- Phaser - GETTING STARTED
tutorials on using Phaser with TypeScript- Photon Storm » Blog Archive » How to use Phaser with TypeScript
Visual Studio 2013 を例とした手順。任意の IDE でも応用が効く。 - Photon Storm » Blog Archive » Advanced Phaser and TypeScript Projects
プリローダからタイトル、ゲーム画面まで状態別に分けた外部.ts
ファイルを扱う手順。
- Photon Storm » Blog Archive » How to use Phaser with TypeScript
ほんとは、this
をたくさん書くスタイルが冗長に思えて改善を図るところが発端でした。CoffeeScript との連携に挑戦したものの、自動コンパイルまわりがうまくいかず断念したという背景もあります。また、その際に情報を漁っていて見つけた記事がピンポイントで作者による TypeScript 記事で、これに従わない手はないといった流れです。
環境構築
エディタには Brackets を、Webサーバには Middleman を利用します。
OS は Mac を想定していますが、Windows でも同じように構築できると思います。
Phaser 型定義ファイルの入手
Phaser には型定義ファイル phaser.d.ts
が用意されています。
- phaser/phaser.d.ts at master · photonstorm/phaser
Raw
ボタンを右クリックして保存
Brackets 拡張機能のインストール
- BuildSys
TypeScript コンパイラのインストール (Node.js)
シェルから$ tsc
コマンドでコンパイルできるようにします。
これは上記 BuildSys が呼び出すことになります。
- Node.js のインストール
- 公式のインストーラを使うのが手っ取り早いです
- http://nodejs.org/
- TypeScript コンパイラのインストール
- Welcome to TypeScript - Microsoft
$ npm install -g typescript
Middleman のインストール (Ruby)
RubyGem「Middleman」の Live Reload 機能を使って、TypeScript コンパイルを自動で検知しブラウザをリロードさせます。 Brackets にもライブプレビュー機能がありますが、こちらは HTML や CSS のリアルタイム編集用途が想定されているため、スクリプトの編集には向いていないと判断しました。
Ruby まわりの環境構築については記事の主旨ではないので割愛します。
Gemfile
source 'https://rubygems.org' gem 'middleman' gem "middleman-livereload"
TypeScript を扱うにあたっての補足
型定義ファイルを有効にするためには、そのスクリプトファイルから参照させてやる必要があります。
///<reference path="phaser.d.ts"/>
更に、間接的に参照させている外部ファイルを含めるには同様に記述します。
///<reference path="phaser.d.ts"/> ///<reference path="Boot.ts"/> ///<reference path="Preloader.ts"/> ///<reference path="MainMenu.ts"/> ///<reference path="Level1.ts"/>
サンプル Castlevania でのディレクトリ構造と参照構造
- app.ts
- Game.ts
- phaser.d.ts
- Boot.ts
- phaser.d.ts
- Preloader.ts
- phaser.d.ts
- MainMenu.ts
- phaser.d.ts
- Level1.ts
- phaser.d.ts
- Player.ts
- phaser.d.ts
開発の流れ
準備
$ cd theproject
$ bundle exec middleman
- http://localhost:4567 にアクセス
- Brackets にプロジェクトフォルダ(build.shのある階層)をドラッグ
開発
.ts
ファイルを書く- 保存して、エラーがないことを確認(右下のアイコン)
- 「ファイル」メニューの中に Build (build.sh) を実行
js/game.js
にコンパイル結果が出力される- Middleman が
js/game.js
の変更を検知してライブリロードが走る - 動作確認
サンプル Castlevania の TypeScript ソースコードはこちらに置いてありますので参考にしてください。
おわりに
以上が Phaser によるゲームの開発用環境構築の説明です。Phaser に限らず、似たようなライブラリでも利用できると思います。
僕が Phaser についてまとめたものの最新はここで管理しています: