ここでは、「game01」というディレクトリ内で作業しているという前提で説明しています。

キャラクターの動きを定義する

キャラクターの動きをプログラミングしてみます。
サンプルのソースでは、

            motionObj: sample

となっていますが、これを

            motionObj: bearChara

に変更して保存します（監視処理がバックで動いていれば自動的にコンパイルされます）。
次にこのキャラクター専用の動作定義クラスファイルを生成するコマンドを実行します。
ゲームのトップディレクトリ（ディレクトリ「game01」直下）で、

$ enforce derive bearChara

と実行します。
実行が正常に終了すると「src」ディレクトリの中に「bearChara.coffee」が生成されて、監視処理が動いている場合は自動的にコンパイルが行われています。
それでは、この新しく生成した「bearChara.coffee」を開いてみましょう。

class bearChara extends _stationary
    #**************************
    # character constructor
    #**************************
    constructor:(initparam)->
        super(initparam)

    #**************************
    # character destructor
    #**************************
    destructor:->
        super()

    #**************************
    # character behavior
    #**************************
    behavior:->
        super()
        switch @_processnumber
            when 0
                nop()

    #**************************
    # touch event
    #**************************
    #touchesBegan:(pos)->
    #    super(pos)

    #**************************
    # swipe event
    #**************************
    #touchesMoved:(pos)->
    #    super(pos)

    #**************************
    # detach event
    #**************************
    #touchesEnded:(pos)->
    #    super(pos)

    #**************************
    # touch cancel event
    #**************************
    #touchesCanceled:(pos)->
    #    super(pos)

上から順に説明していきます。

    constructor:(initparam)->
        super(initparam)

このメソッドはインスタンスが生成された時に実行されます。
キャラクターの初期化処理などを記述します。
ここでは拡大処理を書いてみます。

        @scaleX = 1.5
        @scaleY = 1.5

をメソッドに追記してください。

    constructor:(initparam)->
        super(initparam)
        @scaleX = 1.5
        @scaleY = 1.5

上記のようになったと思いますので、保存（とコンパイル）して、表示しているブラウザをリロードしてみてください。
画面で動いているクマが大きくなりましたか？

ここで記述した、

        @scaleX

などの「＠」で始まる変数は、全てのキャラクター（クラス）が共通で持っているインスタンス変数です。
インスタンス変数には他に、

@x: x座標
@y: y座標
@z: z座標
@xs: x加速度
@ys: y加速度
@zs: z加速度
@visible: 表示フラグ
@scaleX: 水平方向拡大率（0.0〜1.0）
@scaleY: 垂直方向拡大率（0.0〜1.0）
@gravity: 重力
@intersectFlag: 当たり判定フラグ
@opacity: 透過度（0.0〜1.0）
@animnum: アニメーション番号
@rotation: スプライトの回転角（0.0〜359.0）

などがあります。
ここに「z座標」に関する変数がありますが、これは擬似3Dになっておりz座標をプラスにすることにより奥に行ったようにy座標から引かれます（擬似3D処理を行うための奥行き表現が必要無い時はまったく使用しません）。

では、次に実際にキャラクターの動きを定義してみましょう。

    behavior:->
        super()
        switch @_processnumber
            when 0
                nop()

上記のようになっている箇所を、

    behavior:->
        super()
        switch @_processnumber
            when 0
                @xs = 1
                @waitjob(1.0)
            when 1
                @xs = 0
                @waitjob(1.0)
            when 2
                @scaleX *= -1
                @xs = -1
                @waitjob(1.0)
            when 3
                @xs = 0
                @waitjob(1.0)
            when 4
                @scaleX *= -1
                @setProcessNumber(0)

上記のように修正して、保存（コンパイル）の後、ブラウザをリロードしてみください。
クマが右へ1秒歩いた後に1秒静止、向きを左に変えて1秒歩いた後に1秒静止・・・を繰り返すと思います。
これはシステムが用意した「@_processnumber」という変数によって処理を分けています。
この「@_processnumber」の初期値は「0」です。
なのでインスタンス生成直後は特殊な処理を記述しない限り、

            when 0

の処理が実行されます。
そして、キーになる処理が次の、

                @waitjob(1.0)

です。
この処理の意味は「1.0秒間実行し続けた後に、今の@_processnumberの値をインクリメントしろ」になります。
ですので、「when 0」に記述してある処理の意味は「x方向の移動量を1（右方向へ毎フレーム移動）にして1.0秒間実行し続けろ」になります。
なので、1秒間右へ移動した後に1秒停止したわけです。
最後の「@_setProcessNumber(0)」は、@_processnumberに値を強制的に設定しています。
アンダースコアで始まる変数は直接値を代入すると処理がおかしくなる可能性があります。
ただ単純に「@_processnumber」をインクリメントするメソッドとして「@nextjob()」があります。

チュートリアル（２） <--- ⬛︎ ---> チュートリアル（４）

enforceチュートリアル一覧

enchant.jsとtmlib.jsを使ったゲーム作成フレームワーク「enforce」チュートリアル（３）動作を定義する

キャラクターの動きを定義する