CocosCreatorやCocos2d-x(JS)で利用できるCoffeeScript

こんにちは。清水です。今回は、CocosCreatorやCocos2d-x(JS)で利用できるCoffeeScriptを紹介します。

CocosCreator

CocosCreatorは、一般的にJavaScript向けプロジェクトで利用するエディタですが、リリース当初よりデフォルトでCoffeeScriptもサポートされています。ここではCoffeeScriptの詳しい説明は割愛しますが、CocosCreatorでは、自動でCoffeeScriptをJavaScriptへコンパイルしてくれます。

試しにHelloWorldをCoffeeScriptで書いてみましょう。

CoffeeScript

cc.Class
    extends: cc.Component

    properties:
        label:
            default: null
            type: cc.Label
        text: 'Hello, World!'


    onLoad: () ->
        @label.string = @text

そしてブラウザで実行すると、いつものように実行できます。そのソースコードを確認すると、次のようにJavaScriptに変換されていることがわかります。

JavaScript

"use strict";
cc._RFpush(module, '04afax9CbNGhaoEgGXM/B//', 'HelloWorld');
// Script/HelloWorld.coffee

(function() {
  cc.Class({
    "extends": cc.Component,
    properties: {
      label: {
        "default": null,
        type: cc.Label
      },
      text: 'Hello, World!'
    },
    onLoad: function() {
      return this.label.string = this.text;
    }
  });

}).call(this);

cc._RFpop();

Cocos2d-x

ではCocos2d-x(JS)でもCoffeeScriptを利用してみましょう。しかしCocos2d-x(JS)はデフォルトでCoffeeScriptはサポートされていません。私が今まで利用した中では、Jitterを利用する方法が最も簡潔だと思います。（）

コマンド

cocos new CoffeeTest -l js
cd CoffeeTest/src
jitter ./ ./ --bare

app.coffeeファイルを作成し、次のようにソースコードを入力すると、jitterが自動でapp.jsを更新してくれます。これを実行すると、いつものHello World画面が表示されます。

CoffeeScript

HelloWorldLayer = cc.Layer.extend
  sprite: null
  ctor: () ->
    @_super()

    size = cc.winSize
    helloLabel = new cc.LabelTTF("Hello World", "Arial", 38)
    helloLabel.x = size.width / 2
    helloLabel.y = size.height / 2 + 200
    @addChild(helloLabel, 5)

    @sprite = new cc.Sprite(res.HelloWorld_png)
    @sprite.attr
      x: size.width / 2
      y: size.height / 2
    @addChild(@sprite)

    true;

HelloWorldScene = cc.Scene.extend
  onEnter: () ->
    @_super()
    layer = new HelloWorldLayer()
    @addChild(layer)

CocosCreatorやCocos2d-xでCoffeeScriptを扱うことは簡単ですね。JavaScriptよりも記述するコード量が少なくなるので開発効率も上がることでしょう。