tl.enchant.js

久しぶりのブログになります。学生なので、春休みに入りました。やったね。


最近扱ってるのがenchant.jsというゲームエンジンを利用した開発なので,そっちの方もちょいちょい書いていきたいと思います。(というかAndroidをあんま触っていない...)

一年ぶりにenchantを触ってリハビリしていたのですが,便利と名高い(？)tl.enchant.jsをようやく使い始めました。アニメーション用のライブラリです。え？去年enchant扱い始めた頃はまだ知らないライブラリ恐怖症だったのですが,使っておけばよかった。

めっちゃ便利です。びっくりした....

ということで概要を僕なりに書いていきます。

まず,enchant.jsを使った通常の書き方
enchant.jsではフレーム数という一秒辺りのコマ数が設定できます。
で,配置したオブジェクトを動かすにはオブジェクトに1フレーム毎の挙動を設定してあげなければなりませんでした。これがめんどくさかった。
例えば,下の画像のようなクマ(変数bear)を左から右へ動かすにはフレームごとに

bear.addEventListener(Event.ENTER_FRAME,function(){
    this.x+=3;
  });

のような記述をしなければなりませんでしたし,画面右で止める・左右に動かすなどの動きにはfor文やif文による制御も必要でした。

これがtl.enchant.jsではすっごく簡単にできるのです。すっごく簡単にできるのです。(大事なことなのでry

bear.tl.moveTo(250,100,32);

これだけ。イベントリスナーも細かい制御もいりません。
.moveTo(x,y,f)はx,yが目標の座標,fがそこまで何フレームかけて進むかを指定しています。
クマの初期位置が(0,100)であったとすると上記のソースだけで画面右へクマが移動します。
左右に動かしたい時も関数を繋いでいけばいいだけ。

bear.tl.moveTo(250,100,32).moveTo(0.100,32).loop();

関数を繋いでいくとキューのように関数が溜まっていき順次実行されます。最後のloop()でその一連の動作を繰り返します。
この動作を実現させるのに去年どれだけ苦労したか・・・物悲しいですね。無知は罪だ。