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 の作者による解説がある

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

環境構築

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

Phaser 型定義ファイルの入手

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

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

  • Brackets Typescript
    • コード補完やシンタックスハイライト、エラーチェックができるようにする拡張
    • プロジェクトごとの設定ファイル.brackets.jsonはなくても動いてる
  • BuildSys
    • シェルスクリプトを Brackets から一発で呼び出せるようにする拡張
    • (だけどCmd+Bに割当たらないようだ…)
    • 「ファイル」メニューの中に Build (build.sh) があるのでそれを選択すると実行される

TypeScript コンパイラのインストール (Node.js)

シェルから$ tscコマンドでコンパイルできるようにします。
これは上記 BuildSys が呼び出すことになります。

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

開発の流れ

準備

  1. $ cd theproject
  2. $ bundle exec middleman
  3. http://localhost:4567 にアクセス
  4. Brackets にプロジェクトフォルダ(build.shのある階層)をドラッグ

開発

  1. .tsファイルを書く
  2. 保存して、エラーがないことを確認(右下のアイコン)
  3. 「ファイル」メニューの中に Build (build.sh) を実行
  4. js/game.jsコンパイル結果が出力される
  5. Middlemanjs/game.js の変更を検知してライブリロードが走る
  6. 動作確認

f:id:syonx:20140911212752p:plain

サンプル Castlevania の TypeScript ソースコードはこちらに置いてありますので参考にしてください。

おわりに

以上が Phaser によるゲームの開発用環境構築の説明です。Phaser に限らず、似たようなライブラリでも利用できると思います。

僕が Phaser についてまとめたものの最新はここで管理しています:

http://syon-wiki.herokuapp.com/Phaser


TypeScriptリファレンス Ver.1.0対応

TypeScriptリファレンス Ver.1.0対応