CoffeeScriptからenchant.jsを叩いて使ってみたところ、スゴい速さでクロスプラットフォームなゲームができあがって、非常に開発がしやすい感じだったので、今回の開発についてまとめてみました。
この方法でゲームを開発すると
ゲーム開発ができます。
enchant.jsとは、国産のJavaScriptで実装されたゲームフレームワークです。
ドキュメントやサンプルが充実しており、初学者でも敷居が低いのが特徴です。
enchant.js - HTML5 + JavaScript Game Engine
環境を構築する
当方はMacユーザーなので、他の環境については各自ググってください。
Homebrewをインストール済みの方は、
brew install node
brew install coffee-script
brew install yuicompressor
辺りをインストールしておくと良いと思います。(MacPortsでも大丈夫！)
yuicompressorについては任意ですが、後述するCakefileで、JSをminifyするのに利用しています。
Cakefileを書く
ゲームを作り始める前にCakefileを記述してみましょう
Cakefileとは、CoffeeScriptで記述できるMakefileのようなもので、コンパイル時の動作を定義しておくこともできます。
今回は、コマンド一発で
という一連の動作を行ってくれるように記述してみましょう。
例えば、以下のようなCakefileを用意します。
その後
cake compile
を実行すると、定義したCoffeeScriptのソースコードを全て結合し、minifyされたgame.min.jsが自動で生成されます。
（このCakefileを実行する場合、yuicompressorをインストールしていないと正常に動作しません）
また、エディタの設定を変えて、cake compileの実行をバインドしておくと、キー一つで、変更をゲームに反映させることができます。
例えばvimの場合
~/.vim/ftplugin/coffee.vimを以下のように定義しておくと良いでしょう。
このように設定しておくと、特定のキー（今回はCtrl+C）を押すと、Cakefileが存在する場合、cakeを実行し、存在しない場合はjsを自動的に生成します。
あらかじめこのような下準備をしておくと、高速に動作確認が行えるようになります。
また、vimスクリプト中のCoffeeMake!はvim-coffeescriptのコマンドのため、前述のステップでインストールしていないとこのままでは使えません。
基本的なゲームを作ってみよう
ここでさっそくCoffeeScriptからenchant.jsを利用して、ゲームを作ってみましょう。
わずかこれだけのコード量でキャラクターの移動が実装できてしまいます。
JavaScriptを用いて書くよりも、簡潔に書けることがわかります。
また、enchant.jsのクラスをCoffeeScriptの文法で継承して利用することができるため、あたかもクラスベースのオブジェクト指向のように開発することができます。
詳しくはenchant.jsのドキュメントをご覧ください。
Class Index | JsDoc Reference
作ってみて雑感
- 凄まじい速度でアイディアが形にできる
- 環境構築不要
- クロスプラットフォーム。スマートフォンでも動く！
- ↑のゲームは5~6時間×3日ぐらいでできた気がします。
- すぐに作れるし、遊んで貰いやすい！
- ファイルを分割しても簡単に結合できるので、大規模開発にも向いている
- もうJS書きたくない
- enchant.js使いにくい
- クラス構造が謎
- 例えば、scaleやrotateはSpriteのフィールドなので、LabelやGroupを回転したり拡大したりできないとか
- ところどころバギー
- イベント周りが貧弱
- 一時的にイベントを退避させたりができない
- そのため、ポーズなどを実装するときにイベントドリブンだと難しい
- いつか自分でゲームフレームワーク作りたいですね
オマケ：nodeunitでテスト駆動する
ライブラリを作るときにTDDを行うためにnodeunitを利用したのですが、日本語の記事がほとんどなかったため、ついでにまとめてみます。
caolan/nodeunit - GitHub
nodeunitをインストールしてしまっても良いのですが、プロジェクト内に組み込んでしまうのがオススメです。
具体的には
git submodule add git://github.com/caolan/nodeunit.git node_modules/nodeunit
git submodule init
git submodule update
をプロジェクトrootで実行すると良いでしょう。
次に、テストコードを記述します。
以下のように、testを引数とするユニットテストを書いていきます。
テストコードの最後にtest.done()が必要ですのでお忘れなく。
その後、テスト実行用のコードを記述します。ここではnodeunit.coffeeとします。
このとき、nodeunitはnode_modulesディレクトリ直下に置いておきます。
nodeのモジュールロードが若干取っつきにくいですが、詳しくはこの辺に書いてます。
node.jsのモジュールロードのルール - hakobenikki# - subtech
その後
coffee nodeunit
を実行すると、テストが走ります。
test_calc.coffee
✔ testCalc - testSum
✔ testCalc - testSub
✔ testCalc - testMul
✔ testCalc - testDiv
OK: assertions (5ms)
このようにすることで、CoffeeScriptでテストを記述することができます。
ゲーム開発の場合、TDDで開発するのは難しいですが、知っておくと役に立つかもです。
ここに書いてある情報は、nodeunitのREADMEとほぼ同じ内容なので、そちらを見てもらった方が詳しくわかります。
まとめ
みんなゲーム作ろうぜ！
あと、面白いと思った方はCoffeeScriptでenchant.jsよりも良い感じのゲームフレームワークを作ってくださると僕が喜びます。
