Phaser × TypeScript で快適なゲーム開発環境を構築する

f:id:syonx:20140907211225p:plain

前回の記事

この記事は大変な反響があって驚きました。「初心者にやさしい」という表現から「プログラミングなしでゲームがつくれる」ことを期待していた方が少なくなかったので、すこし申し訳ない気もしました。。でも、ゲームを自分でつくりたい！っていう人はたくさんいるんですね。なんだか嬉しかったです。

そして、今回の記事をしたためている間に Phaser 2.1 がリリースされました。
まだまだ活発に成長しているライブラリなのです。

僕としてはもっと Phaser が流行って欲しいので、今回は「快適なゲーム開発環境を構築する」と題して記事にしました。

Why TypeScript?

Phaser は JavaScript ライブラリです。TypeScript は JavaScript での開発を便利にするためのものです。ここで紹介する内容においての主な利点は以下のとおりです。

コードヒントが利用できる

f:id:syonx:20140907212104p:plain

エラー箇所がすぐにわかる

f:id:syonx:20140911234939p:plain

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 ファイルを扱う手順。

ほんとは、thisをたくさん書くスタイルが冗長に思えて改善を図るところが発端でした。CoffeeScript との連携に挑戦したものの、自動コンパイルまわりがうまくいかず断念したという背景もあります。また、その際に情報を漁っていて見つけた記事がピンポイントで作者による TypeScript 記事で、これに従わない手はないといった流れです。

環境構築

エディタには Brackets を、Webサーバには Middleman を利用します。
OS は Mac を想定していますが、Windows でも同じように構築できると思います。

Phaser 型定義ファイルの入手

Phaser には型定義ファイル phaser.d.ts が用意されています。

phaser/phaser.d.ts at master · photonstorm/phaser
Rawボタンを右クリックして保存

Brackets 拡張機能のインストール

Brackets Typescript
- コード補完やシンタックスハイライト、エラーチェックができるようにする拡張
- プロジェクトごとの設定ファイル.brackets.jsonはなくても動いてる

BuildSys
- シェルスクリプトを Brackets から一発で呼び出せるようにする拡張
- （だけどCmd+Bに割当たらないようだ…）
- 「ファイル」メニューの中に Build (build.sh) があるのでそれを選択すると実行される

参考:
- Brackets + TypeScript：なぜ？編 | // andy hall
- Brackets + TypeScript：どうやって？編 | // andy hall

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"/>