enchant.jsを使って9分でゲームを作るときのテンプレート

leapfest2012やGDC2012であった9min Coding Battleというイベントがとても楽しかったので9min用のテンプレートを整えました。
ntotani/enchant.js-9min-template · GitHub
eller86さんに習ってCakeを書きました。readyタスクで必要なファイルをダウンロードし、fightタスクでCoffeeScriptのコンパイルを始めます。

git clone https://github.com/ntotani/enchant.js-9min-template.git 9min
cd 9min
cake ready
cake fight

9minはその場で出されたお題に沿ったゲームを9分で作って発表し、観客の投票で勝ちを決めます。時間がないのは当然として、できたものを如何にそれっぽく見せるかが重要なので「少ない手間で大袈裟に見せて誤魔化す」という方針で作っています。

index.html

    <script type="text/javascript" src="js/Box2dWeb.js"></script>
    <script type="text/javascript" src="js/enchant.js"></script>
    <script type="text/javascript" src="js/animation.enchant.js"></script>
    <script type="text/javascript" src="js/util.enchant.js"></script>
    <script type="text/javascript" src="js/nineleap.enchant.js"></script>
    <script type="text/javascript" src="js/box2d.enchant.js"></script>
    <script type="text/javascript" src="js/game.js"></script>

とにかくプラグインを沢山読み込んでおきます。特にゲームの開始と終了のためのnineleap.enchant.jsと、スコアとタイムのラベルを表示するutil.enchant.jsはかなり便利です。START、GAME OVERと画面に大きく表示されたらなんとなく出来上がってるように見え、スコアと時間表示は「タイムアタックにすればとりあえずゲームっぽくなる」という9minの鉄則と親和性が高いです。

animationプラグインも便利です。ユーザの入力に対する反応やキャラ同士のインタラクションはとくかく大袈裟に見せた方が伝わりやすいので、巨大化やフェードアウトがすぐ書けるのは大きいです。animationプラグインは単純に既存のSpriteを拡張してくれるので、入れておいて損はありません。

他には物理のプラグインも入れてあります。
これもプラグインの出来が良く、数行で物理シュミレーションを使えるので短時間でそれっぽさを出すにはもってこいです。例えば次のようにするだけでもうボールが転がります。

world = new PhysicsWorld 0, 9.8
for i in[0...20]
  box = new PhyBoxSprite 16, 16, enchant.box2d.STATIC_SPRITE, 1.0, 0.5, 0.3, true
  box.image = game.assets["map2.gif"]
  box.position = (x:i*16+8, y:312)
  scene.addChild box
ball = new PhyCircleSprite 8, enchant.box2d.DYNAMIC_SPRITE, 1.0, 0.5, 0.2, true
ball.image = game.assets["icon0.gif"]
scene.addChild ball
scene.addEventListener Event.ENTER_FRAME, ->
  world.step game.fps

game.coffee

enchant()

window.onload = ->
  game = new Game 320, 320
  game.rootScene.backgroundColor = "gray"
  game.preload "chara1.gif", "effect0.gif", "font.png", "icon0.gif", "map2.gif", "start.png", "end.png"
  scene = new Scene
  game.onload = ->
    game.pushScene scene
  game.start()

言語はCoffeeScriptを使います。enchant.jsは基本的にはCoffeeScriptから使用しても問題ないので、タイプ数が少ないという良さを生かせます。補完の効いているエディタだとあまり差が無いかもしれませんが、"function"や"{"を打たなくていいので、コンパイルする環境さえ整えておけばJavaScriptより楽に作れます。

9minはきっと流行る！

イベントとしての楽しさもそうですが、速く小さく作るというのはラピッドプロトタイピングという点から見ても意味のあることだと思います。月末のenchant.js meetup!でもやるそうなので、これを機に流行るといいですね。