Skip to content

JSで驚くほど簡単にアニメーションが扱える! tl.enchant.jsの使い方を先輩に説明してみる

enchant.jsのバージョン0.4.4から導入され、意外と使いやすくて億が深いと言われているものの、いまいち使い方が解られていないtl.enchant.js。どんなふうに使うと効果的なのか、悩んでいる男がここにも一人・・・。

先輩「うーん…」

後輩「どうしたんですか?」

先輩「いや、シューティングゲームを作ってるんだけどさ。敵のモーションをもっと高度にしたくて…」

   enenmy.addEventListener("enterframe", function(){
       this.y ++;
   });

先輩「これだと単に上から降りてくるだけだから、ジグザグに動いてからまっすぐに変わったり、回転させたりさせたいんだよね。」

後輩「シューティングゲームだと、途中で向きが変わったりする場合が多いですよねー」

先輩「ジグザグだけ書いてみたんだけどさ、これだと途中で動きを変えたりとかが難しくて」

   enenmy.addEventListener("enterframe", function(){
       if(Math.floor(enemy.age / 30) % 2 == 0){
           this.x += 0.5;
           this.y += 0.2
       }else{
           this.x -= 0.5;
           this.y += 0.2
       }
   });

後輩「それ、tl.enchant.js で出来ますよ」

先輩「なにそれ? WebGLは使ってないよ?」

後輩「GLじゃなくて、TLです。時間に沿った動きを管理するプラグインですよ」

先輩「初めて聞いたな」

後輩「昔は animation.enchant.js という名前だったんですよ。ともかく、tl.enchant.js を使えば、スプライトの動きを簡単に制御できるんです。ほら」

   enemy.tl.moveBy(30, 10, 30).moveBy(-30, 10, 30).loop();

先輩「へー。これどういう意味?」

後輩「まず30,10に30フレームの時間をかけて移動して、そのあと-30,10に30フレームかけて移動する、というのを繰り返す、という意味です。これだけでジグザグな動きを定義できるんですよ」

先輩「こんなふうに書けるのかあ。これは便利だなあ。FlashのTweenerみたいなものかな。てか、メソッドはいくらでも繋げられるのか?」

後輩「基本的にはいくつ繋げても大丈夫ですよ」

先輩「じゃあ、こう書けば…」

   enemy.tl.moveBy(30, 10, 30).moveBy(-30, 10, 30).moveBy(30, 10, 30).moveBy(-15, 10, 30).moveBy(0, 100, 180);

後輩「ジグザグに動いて、そのあと直進するようになります」

先輩「直進し終わったら、画面から消したいんだけど」

後輩「それでしたら、removeFromScene(); という関数があります」

   enemy.tl.moveBy(30, 10, 30).moveBy(-30, 10, 30).moveBy(30, 10, 30).moveBy(-15, 10, 30).moveBy(0, 100, 180).removeFromScene();

先輩「そんな便利なものまで!・・・でも、攻撃を受けたら enemy は画面から消えるんだけど、大丈夫か?」

後輩「タイムラインに追加されたモーションはすべて enterframe イベントのリスナとして追加されるので、画面から消えた後は実行されませんね」

先輩「どこ見ればそういうの載ってるの?」

後輩「以前開かれた enchant.js meetup でも発表されてましたし、slideshareのスライドでも解説されていますよ」

先輩「なるほど… なんだ、イージングも使えるのか?」

後輩「はい。Tweener で使えるイージングは全部使えますよ」

先輩「そうなのか、早速シューティングにも入れてみよう。…これでどうだ。かなりソレっぽくなったな・・・・うーん。でも、これだけだと回転しながら動かしたりというのはできなくない?」

後輩「and() を使えば並列で処理できますよ」

   enemy.tl.moveBy(30, 10, 30).and().rotateBy(360, 30);

先輩「3つ以上繋げるとちょっと長くなっちゃうなぁ」

後輩「じゃあ、こういう風にも書けますよ」

   enemy.tl.tween({ x: 30, y: 30, rotation: 360, time:30 });

先輩「なるほど、このオブジェクトからトゥイーンを生成してくれるのか。オブジェクトをどこかに取っておけば同じ動きを使いまわしたりできるな」

後輩「delay と then を使うだけでも、タイマーとしてかなり便利ですよ。1秒後に○○する、って素の enchant.js では意外と大変ですし…」

   Game.rootScene.tl.delay(30).then(function(){
       // 1秒後に実行する処理
   });

先輩「なるほど、thenってのは関数実行か。rootScene に適用しているけど、もしかしてSpriteじゃなくても使えるの?」

後輩「はい、Node を継承しているやつはなんでも使えます」

先輩「なるほど。じゃあたとえば爆発のアニメーションをさせて最後には消したい場合は?」

後輩「cueを使うと、適切な時間をおいたあとに好きな処理を実行できます」

this.tl.cue({
  0:function(){this.frame++;},	
  5:function(){this.frame++;},
 10:function(){this.frame++;},	
 15:function(){this.frame++;},
 20:function(){game.rootScene.removeChild(this);}

先輩「なんと。こりゃあ便利だ。例えばタイトルのSTARTの文字の出方を変えるとかできそうだね」

後輩「nineleap.enchant.jsを書き換える必要がありますね。こんな感じでしょうか」

this.startScene.element.tl.rotateTo(45,1).scaleTo(5,1).scaleTo(1,30).and().rotateTo(0,30);

先輩「おおこりゃすげえ!どうやるの?」

後輩「さっきの行をnineleap.enchant.jsの17行目あたりに入れて、enchant.nineleap.SplashSceneクラスの定義を以下のように書き換えます」


enchant.nineleap.SplashScene = enchant.Class.create(enchant.Scene, {
    image: {
        get: function() {
            return this._image;
        },
        set: function(image) {
            this._image = image;

            while (this.firstChild) {
                this.removeChild(this.firstChild);
            }
            var sprite = new Sprite(image.width, image.height);
            sprite.image = image;
            sprite.x = (this.width - image.width) / 2;
            sprite.y = (this.height - image.height) / 2;
            this.addChild(sprite);
            this.element = sprite; // この行を追加する
        }
    }
});

先輩「なるほど。画像を直接いじるためにelementにspriteを代入してやって、それを動かすのか!」

後輩「他にもいろんな応用法があるんですけど、今日はこのへんでいいですか?」

先輩「ありがう。いやあ面白い!こりゃあ遊べるなあ」

このエントリーをはてなブックマークに追加
はてなブックマーク - JSで驚くほど簡単にアニメーションが扱える! tl.enchant.jsの使い方を先輩に説明してみる
Post to Google Buzz
Share on GREE

Related posts:

  1. たった99行でシューティングゲームを作る方法
  2. 続・Ruby×enchant.jsへの挑戦 / イベントドリブンモデルの実現
  3. Ruby on enchant.js / RubyでHTML5ゲームを作ってみる
  4. enchant.js + node.jsで作る非同期型ネットゲームのプロトタイプ
  5. Ruby on enchant.js : HotRubyにおける組み込みクラスの継承の実装

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*