ふと enchant.js の開発環境を Yeoman で作り、CoffeeScript で書いてみようという衝動に駆られたので、やってみました。
ちなみに enchant.js のソースは、GitHub にあります。
⇒ https://github.com/uei/enchant.js-builds
今回は Yeoman の webapp ジェネレータを利用しました。ジェネレータを利用した理由としては、CoffeeScript で書くための環境を、お手軽に作りたかったからです。
Yeomanの ジェネレータを利用すると Grunt/Bower まわりの環境がある程度そろうので楽です。
環境構築
前提
- 手元の OS：
Mac OS X 10.9.5 (Mavericks) - Yeoman、Grunt、Bower を使います。もしまだインストールしていない場合、こちらの投稿を参考にインストールしてください。
-
webapp ジェネレータをインストールしていない場合は、次のようにインストール。
$ npm install -g generator-webapp -
結果的に今回、利用したツール/ライブラリ郡のバージョンは次のとおり。
- Yeoman：
1.3.2 - Yeoman の generator-webapp：
0.5.1 - enchant.js：
0.8.2
- Yeoman：
手順
-
ジェネレータを起動します。この際、
--coffeeを付与します。$ yo webapp --coffee
選択できるオプションは全て外します。
-
雛型の生成がおわったら、本命の enchant.js を Bower でインストールします。
$ bower install enchant.js-builds --save -
次のようにファイルが展開されました。
-
ここで一旦、動作確認します。
$ grunt serve
enchant.js を動かす
といっても、enchant.js の開発知識が無いので^^; 公式ページのトップ にあるソースと同じことをやってみます。
まず index.htm で enchant.js を読み込みます。
〜
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
<script src="bower_components/enchant.js-builds/build/enchant.js"></script>
<!-- endbuild -->
〜
スクリプトを CofeeScript で書きます。
$ ->
enchant()
game = new Core(320, 320)
game.preload "images/chara1.png"
game.fps = 20
game.onload = ->
bear = new Sprite(32, 32)
bear.image = game.assets["images/chara1.png"]
game.rootScene.addChild bear
bear.frame = [
6
6
7
7
]
bear.tl.moveBy(288, 0, 10)
.scaleTo(-1, 1, 10)
.moveBy(-288, 0, 90)
.scaleTo(1, 1, 10)
.loop
return
game.start()
return
メソッドチェーンで、キャラクターの動きを順番につけれるようですね。chara1.png はライブラリ中のフォルダに入っているので、app/images/ 配下にコピーしておきます。
$ grunt serve で動かしてみます。
デモはこちらに置きました（GitHub Pages）。
⇒ http://hkusu.github.io/enchant.js_demo/dist/
おわりに
今回のソースは GitHub にも置きました。
⇒ https://github.com/hkusu/enchant.js_demo
手元で再現する場合は、次のようにしてください。
$ cd enchant.js_demo
$ npm install
$ bower install