ここでは、「game01」というディレクトリ内で作業しているという前提で説明しています。
キャラクターアニメーション
それでは、この雛形の処理を下記のように変更してみます。
class enforceMain
constructor:->
bearobj = addObject
motionObj: sample
type: SPRITE
x: SCREEN_WIDTH / 2
y: SCREEN_HEIGHT / 2
image: 'bear'
width: 32
height: 32
animlist: [
[50, [0, 0, 1, 1, 2, 2, 1, 1]]
[50, [5, 5, 6, 6, 5, 5, 7, 7]]
]
変更した後にはCoffeeScriptをコンパイルする必要があります。
コンパイルは、ゲームディレクトリのトップ（srcの中とかでなく、game01ディレクトリ直下）で、
$ enforce build
を実行するとコンパイルされます。
しかし、変更するたびにコンパイルするのは効率が悪いので別のコンソールを開き、同じゲームディレクトリで、
$ enforce build -w
と実行すると、スクリプトの変更を検知し保存と同時にコンパイルが行われます。
コンパイルが終わりましたらWebブラウザで開いてみてください。
アニメーションしているクマが画面の中央に出るはずです。
それでは、このソースの後ろに、
bearobj.animnum = 1
と記述してください。
（別コンソールで監視コンパイルコマンドを実行していれば、保存と同時にコンパイルされます）
CoffeeScriptなのでインデントに注意してください。
コンパイルでエラーが出なければ、Webブラウザで表示しているページをリロードしてみてください。
画面中央でアニメーションしているキャラが白いクマになっているはずです。
これは、addObjectのパラメータ、
animlist: [
[50, [0, 0, 1, 1, 2, 2, 1, 1]]
[50, [5, 5, 6, 6, 5, 5, 7, 7]]
]
の、下のアニメーションパターンを指定したので白いクマのアニメーションに変わりました。
（上のアニメーションパターンは「0」になります）
この配列の意味は、
[表示時間, [画像番号、画像番号、画像番号・・・]]
になります。
「表示時間」は一枚の画像を表示する時間になります。
「50」を指定するとアニメーションパターンのひとコマが50/1000秒になります。
その後の配列に羅列される「画像番号」がアニメーションに使われる画像の番号になります。
この番号は「image」で指定した、プリロードされた画像での画像番号になります。
このあたりはenchant.jsや、tmlib.jsの画像番号指定と同じなので、そちらを参照してください。
「image」で指定する名前（この例では「bear」）は「environ.coffee」に記述した、プリロードデータ一覧で設定したキーになります。
アニメーション関係の処理には他に、
指定したアニメーション番号のアニメーションを一回だけ表示した後にオブジェクトを削除する
bearobj.setAnimationToRemove(アニメーション番号）
アニメーション番号で指定したアニメーション1を一回だけ表示した後に、アニメーション番号2に変更する
bearobj.setAnimationToOnce(アニメーション番号1、アニメーション番号2）
などがあります。
チュートリアル（１） <--- ⬛︎ ---> チュートリアル（３）