読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

CoffeeScriptを使ってみる!:Cocos Creator

 こちらの記事で、CoffeeScriptについて調べました。
mmorley.hatenablog.com
 せっかくなので、1度は使ってみよう!ということで、CoffeeScriptを実際に試してみます。
 Cocos CreatorでJavaScriptCoffeeScriptが使えるので、実行環境はすでに整っています。
 
 やる内容は、以前やったCocosCreatorのチュートリアルです。
 JavaScriptコードをCoffeeScriptに書き換えて、CoffeeScriptの作法やその効果を体験したいと思います。
  チュートリアルのリンクです。

 その1はシーンの作成なのでコードは書きません。コードを書くのはその2からです。
 
 書き換え作業で特徴的だった部分をまとめました。

使用環境

 私が使用している環境です。

  • Mac OS X El Capitan Version 10.11.4
  • Cocos Creator Version 1.0.1
  • ブラウザ:Google Chrome Version 50.0.2661.86 (64-bit)

JavaScriptCoffeeScriptに書き直す

 チュートリアルJavaScriptのコードをCoffeeScriptに書き直しました。
 CoffeeScriptの特徴的なところや、手こずったところをピックアップします。
 ちなみにCocosCreatorでは、JavaScriptのファイルの拡張子は『*.js』ですが、CoffeeScriptでは『*.Coffee』になります。

その1

元のJavasScriptのコード
// Player.js
    //...省略
    properties: {
        // メインキャラクタのジャンプの高さ
        jumpHeight: 0, 
        // メインキャラクタのジャンプの時間
        jumpDuration: 0, 
        // 最大移動速度
        maxMoveSpeed: 0, 
        // 加速度
        accel: 0, 
    },
    //...省略
CoffeeScriptで書き直したコード
// Player.coffee
    #...省略
    properties: 
        # メインキャラクタのジャンプの高さ
        jumpHeight: 0 
        # メインキャラクタのジャンプの時間
        jumpDuration: 0
        # 最大移動速度
        maxMoveSpeed: 0 
        # 加速度
        accel: 0
    #...省略

CoffeeScriptの説明

コメントの書き方
  • 単一行のコメントは先頭に#を付けます。
  • 複数行の場合は ###で囲みます。
###
ここにコメントを
書きます。
###
{}の代わりにインデント

 インデント(行の先頭を1段右に下げる)ことで{}の代わりになります。
 {}を付けても構いません。

要素の区切りのカンマを省略できる

 改行だけでOKです。カンマ使っても構いません。

その2

元のJavasScriptのコード
// Player.js
    setJumpAction: function () {
        // ジャンプアップ
        var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // ジャンプダウン
        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // リピート
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
    },
CoffeeScriptで書き直したコード
// Player.coffee
    setJumpAction: ->
        # ジャンプアップ
        jumpUp = cc.moveBy(@jumpDuration, cc.p 0, @jumpHeight).easing cc.easeCubicActionOut()
        #ジャンプダウン
        jumpDown = cc.moveBy(@jumpDuration, cc.p 0, -@jumpHeight).easing cc.easeCubicActionIn()
        # アクションが終わった後に、他の定義されたメソッドを呼び出すためのコールバック関数を追加
        callback = cc.callFunc @playJumpSound, @
        #絶えず繰り返し実行、毎回着地の後に音を再生するためにコールバックを呼び出す
        cc.repeatForever cc.sequence jumpUp, jumpDown, callback

CoffeeScriptの説明

関数の宣言は、functionの代わりに->を使う

 引数がある場合は、下記のコードになります。

// JavaScriptの場合
setJumpAction = function(a, b) {
    return a + b;
};
# CoffeeScriptの場合
setJumpAction = (a, b)->
    a + b
インデントを下げている部分が関数のブロック
varで宣言しない

 勝手に補完してくれます。

末尾の;(セミコロン)が不要
thisのかわりに@を使う
関数の呼び出しは、関数名(スペース)引数1(カンマ)引数2

 ()を省略出来ます。()を使っても構いません。
 下記の部分のように1行にまとめて書くと慣れるまで読みづらいですね。

 jumpUp = cc.moveBy(@jumpDuration, cc.p 0, @jumpHeight).easing cc.easeCubicActionOut()

 でも分けて書くと、いちいち変数名を考えなくちゃいけないのが面倒です。
 区切りがあいまいだったり、読みづらくなるようだったら()使ったほうがいいですね。

引数の無い関数の呼び出しには必ず()を付ける *ここ重要

 ここが一番重要でした。
 CoffeeScriptって全部かっこを省略できるんだ〜と思ってたので罠でした。
 デバッグ時にわかりづらかったです。

最後の行がreturnで返される

 値を返したくない場合は、最後の行をreturnにします。 

その3

元のJavasScriptのコード
// Player.js
    setInputControl: function () {
        var self = this;
        // キーボードのイベントリスナーを追加
        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,
            // キーを押したときに、それが設定した方向ボタンであれば、対応する方向に加速度を設定します。
            onKeyPressed: function(keyCode, event) {
                switch(keyCode) {
                    case cc.KEY.a:
                        self.accLeft = true;
                        self.accRight = false;
                        break;
                    case cc.KEY.d:
                        self.accLeft = false;
                        self.accRight = true;
                        break;
                }
            },
            // キーを離したときに、その方向の加速を辞めます。
            onKeyReleased: function(keyCode, event) {
                switch(keyCode) {
                    case cc.KEY.a:
                        self.accLeft = false;
                        break;
                    case cc.KEY.d:
                        self.accRight = false;
                        break;
                }
            }
        }, self.node);
    },
CoffeeScriptで書き直したコード
    setInputControl: ->
        self = @
        #キーボードのイベントリスナーを追加
        cc.eventManager.addListener(
            event: cc.EventListener.KEYBOARD
            #キーを押したときに、それが設定した方向ボタンであれば、対応する方向に加速度を設定します。
            onKeyPressed: (keyCode, event) ->
                switch keyCode
                    when cc.KEY.a
                        self.accLeft = true
                        self.accRight = false
                    when cc.KEY.d
                        self.accLeft = false
                        self.accRight = true
    
            #キーを離したときに、その方向の加速を辞めます。
            onKeyReleased: (keyCode, event) ->
                switch keyCode
                    when cc.KEY.a 
                        self.accLeft = false
                    when cc.KEY.d
                        self.accRight = false
        self.node);
        return

CoffeeScriptの説明

swich caseは、switch when、breakは省略可

 最初のswich文は、JavaScriptに自動変換されると下記のようにreturnで値を返します。

          switch (keyCode) {
            case cc.KEY.a:
              self.accLeft = true;
              return self.accRight = false;
            case cc.KEY.d:
              self.accLeft = false;
              return self.accRight = true;
          }

 問題なく動いていましたが、何か気持ち悪いですね。
 breakを書くと、returnをやめさせることができます。

あとがき

 CoffeeScriptは、いろいろコードを省略する書き方があるので、評判通りスッキリ書ける感がありました。
 
 引数のない関数を呼び出す場合は、かならずカッコが必要になるのは盲点でした。
 デバッグに手こずりました。
 今回は、上手く動くことがわかっているJavaScriptを書き換えだったので、そうじゃない場合はもっとデバッグが大変かもしれません。
 疑う部分が増えるのは大変です。
 
 ただ、全く使う気がなくなったかというとそうでもありません。簡潔に書けるのは魅力的です。CoffeeScriptの書き方を網羅したわけでもないので、評価するにはまだ早いかもしれません。
 

広告を非表示にする