前回はキャラクターをクリックによって動かしましたね。
今回はキャラクターを自動的に動かしてみましょう。
シューティングゲームやアクションゲームの敵キャラの動き等に使えますね。

タイムラインの使い方

1. 移動させる

   移動させる
   
   

   enchant(); // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara1.png']; this.x = x; this.y = y; this.frame = 4; game.rootScene.addChild(this); }, }); window.onload = function() { game = new Game(320, 320); game.preload('chara1.png'); game.onload = function() { kuma = new Kuma(0, 0); // 一人目のクマ作成 kuma.tl.moveTo(288,288,50); //クマを右斜め下に動かす！ } game.start(); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   enchant();   // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 {     initialize: function(x, y) { //初期化する         Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化         this.image = game.assets['chara1.png'];         this.x = x;         this.y = y;         this.frame = 4;         game.rootScene.addChild(this);     }, });   window.onload = function() {     game = new Game(320, 320);     game.preload('chara1.png');     game.onload = function() {                  kuma = new Kuma(0, 0); // 一人目のクマ作成         kuma.tl.moveTo(288,288,50); //クマを右斜め下に動かす！     }     game.start(); }

   重要な部分はkuma.tl.moveTo(288.288.50)の部分です。
   この部分で50回の画面描写の間にクマをx軸288, y軸288の位置に移動させます。

2. 別の動きを追加する
   moveToを連結することで、動きを追加することができます。

   別の動きを追加する
   
   

   enchant(); // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara1.png']; this.x = x; this.y = y; this.frame = 4; game.rootScene.addChild(this); }, }); window.onload = function() { game = new Game(320, 320); game.preload('chara1.png'); game.onload = function() { kuma = new Kuma(0, 0); // 一人目のクマ作成 kuma.tl.moveTo(288,288,50).moveTo(288,0,50) .moveTo(0,0,50); } game.start(); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

   enchant();   // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 {     initialize: function(x, y) { //初期化する         Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化         this.image = game.assets['chara1.png'];         this.x = x;         this.y = y;         this.frame = 4;         game.rootScene.addChild(this);     }, });   window.onload = function() {     game = new Game(320, 320);     game.preload('chara1.png');     game.onload = function() {                  kuma = new Kuma(0, 0); // 一人目のクマ作成         kuma.tl.moveTo(288,288,50).moveTo(288,0,50)         .moveTo(0,0,50);     }     game.start(); }

3. 動きを繰り返す

   loopメソッドを利用することで動きを繰り返すことができます。

   動きを繰り返す
   
   

   enchant(); // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara1.png']; this.x = x; this.y = y; this.frame = 4; game.rootScene.addChild(this); }, }); window.onload = function() { game = new Game(320, 320); game.preload('chara1.png'); game.onload = function() { kuma = new Kuma(0, 0); // 一人目のクマ作成 kuma.tl.moveTo(288,288,50).moveTo(288,0,50) .moveTo(0,0,50).loop(); } game.start(); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

   enchant();   // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 {     initialize: function(x, y) { //初期化する         Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化         this.image = game.assets['chara1.png'];         this.x = x;         this.y = y;         this.frame = 4;         game.rootScene.addChild(this);     }, });   window.onload = function() {     game = new Game(320, 320);     game.preload('chara1.png');     game.onload = function() {                  kuma = new Kuma(0, 0); // 一人目のクマ作成         kuma.tl.moveTo(288,288,50).moveTo(288,0,50)         .moveTo(0,0,50).loop();     }     game.start(); }

   右下に移動して上に上がる処理を繰り返します

4. 待機する。動きの途中で待ち時間を入れることができます。

   待機する
   
   

   enchant(); // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara1.png']; this.x = x; this.y = y; this.frame = 4; game.rootScene.addChild(this); }, }); window.onload = function() { game = new Game(320, 320); game.preload('chara1.png'); game.onload = function() { kuma = new Kuma(0, 0); // 一人目のクマ作成 kuma.tl.moveTo(288,288,50).moveTo(288,0,50) .moveTo(0,0,50).delay(30).loop(); } game.start(); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

   enchant();   // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 {     initialize: function(x, y) { //初期化する         Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化         this.image = game.assets['chara1.png'];         this.x = x;         this.y = y;         this.frame = 4;         game.rootScene.addChild(this);     }, });   window.onload = function() {     game = new Game(320, 320);     game.preload('chara1.png');     game.onload = function() {                  kuma = new Kuma(0, 0); // 一人目のクマ作成         kuma.tl.moveTo(288,288,50).moveTo(288,0,50)         .moveTo(0,0,50).delay(30).loop();     }     game.start(); }

   右下に移動、上に移動したのち30描写（1秒）待って同じ処理を繰り返します。

5. 関数を実行する。

   関数を実行する
   
   

   enchant(); // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara1.png']; this.x = x; this.y = y; this.frame = 4; game.rootScene.addChild(this); }, }); window.onload = function() { game = new Game(320, 320); game.preload('chara1.png'); game.onload = function() { kuma = new Kuma(0, 0); // 一人目のクマ作成 kuma.tl.moveTo(288,288,50).moveTo(288,0,50) .then(function(){this.x=0;this.y=288}) .moveTo(0,0,50).loop(); } game.start(); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   enchant();   // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 {     initialize: function(x, y) { //初期化する         Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化         this.image = game.assets['chara1.png'];         this.x = x;         this.y = y;         this.frame = 4;         game.rootScene.addChild(this);     }, });   window.onload = function() {     game = new Game(320, 320);     game.preload('chara1.png');     game.onload = function() {                  kuma = new Kuma(0, 0); // 一人目のクマ作成         kuma.tl.moveTo(288,288,50).moveTo(288,0,50)         .then(function(){this.x=0;this.y=288})         .moveTo(0,0,50).loop();     }     game.start(); }

   右下に移動、上に移動した後、連結されたthenの中の関数が実行されます。
   関数の中で、this.xとthis.yの値を変更して左下にワープさせています。

   then(関数)

   1

   then(関数)

    

6. 回転させる

   回転させる
   
   

   enchant(); // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara1.png']; this.x = x; this.y = y; this.frame = 4; game.rootScene.addChild(this); }, }); window.onload = function() { game = new Game(320, 320); game.preload('chara1.png'); game.onload = function() { kuma = new Kuma(0, 0); // 一人目のクマ作成 kuma.tl.rotateBy(360,50).loop(); } game.start(); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   enchant();   // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 {     initialize: function(x, y) { //初期化する         Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化         this.image = game.assets['chara1.png'];         this.x = x;         this.y = y;         this.frame = 4;         game.rootScene.addChild(this);     }, });   window.onload = function() {     game = new Game(320, 320);     game.preload('chara1.png');     game.onload = function() {                  kuma = new Kuma(0, 0); // 一人目のクマ作成         kuma.tl.rotateBy(360,50).loop();     }     game.start(); }

   回転させる場合はrotateByを利用します。

   rotateBy(角度,画面表示数);

   1	rotateBy(角度,画面表示数);

    

7. 拡大縮小させる

   拡大縮小させる
   
   

   enchant(); // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara1.png']; this.x = x; this.y = y; this.frame = 4; game.rootScene.addChild(this); }, }); window.onload = function() { game = new Game(320, 320); game.preload('chara1.png'); game.onload = function() { kuma = new Kuma(0, 0); // 一人目のクマ作成 kuma.tl.scaleTo(2,2,30); } game.start(); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   enchant();   // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 {     initialize: function(x, y) { //初期化する         Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化         this.image = game.assets['chara1.png'];         this.x = x;         this.y = y;         this.frame = 4;         game.rootScene.addChild(this);     }, });   window.onload = function() {     game = new Game(320, 320);     game.preload('chara1.png');     game.onload = function() {                  kuma = new Kuma(0, 0); // 一人目のクマ作成         kuma.tl.scaleTo(2,2,30);     }     game.start(); }

8. フェードイン、フェードアウト

   フェードイン、フェードアウト
   
   

   enchant(); // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara1.png']; this.x = x; this.y = y; this.frame = 4; game.rootScene.addChild(this); }, }); window.onload = function() { game = new Game(320, 320); game.preload('chara1.png'); game.onload = function() { kuma = new Kuma(0, 0); // 一人目のクマ作成 kuma.tl.fadeOut(30).fadeIn(30).loop(); } game.start(); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   enchant();   // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 {     initialize: function(x, y) { //初期化する         Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化         this.image = game.assets['chara1.png'];         this.x = x;         this.y = y;         this.frame = 4;         game.rootScene.addChild(this);     }, });   window.onload = function() {     game = new Game(320, 320);     game.preload('chara1.png');     game.onload = function() {                  kuma = new Kuma(0, 0); // 一人目のクマ作成         kuma.tl.fadeOut(30).fadeIn(30).loop();     }     game.start(); }

   fadeInフェードインするまでの画面表示数
   fadeOutフェードアウトするまでの画面表示数

9. 動きを組み合わせる

   動きを組み合わせる
   
   

   enchant(); // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara1.png']; this.x = x; this.y = y; this.frame = 4; game.rootScene.addChild(this); }, }); window.onload = function() { game = new Game(320, 320); game.preload('chara1.png'); game.onload = function() { kuma = new Kuma(0, 0); // 一人目のクマ作成 kuma.tl.rotateBy(360,50).and().moveTo(288,288,50).scaleTo(0.5,0.5,50) .and().moveTo(288,0,50).moveTo(0,0,50).and().scaleTo(1,1,50) .and().rotateBy(4120,50).loop(); } game.start(); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

   enchant(); // Knightコンストラクタをつくる Kuma = Class.create(Sprite, // Spriteの機能を継承 {     initialize: function(x, y) { //初期化する         Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化         this.image = game.assets['chara1.png'];         this.x = x;         this.y = y;         this.frame = 4;         game.rootScene.addChild(this);     }, });   window.onload = function() {     game = new Game(320, 320);     game.preload('chara1.png');     game.onload = function() {                  kuma = new Kuma(0, 0); // 一人目のクマ作成         kuma.tl.rotateBy(360,50).and().moveTo(288,288,50).scaleTo(0.5,0.5,50)         .and().moveTo(288,0,50).moveTo(0,0,50).and().scaleTo(1,1,50)         .and().rotateBy(4120,50).loop();     }     game.start(); }

   and()は前後の動作を同時に実行します。
   例えば、回転と移動を同時に実施して、回転しながら右下に移動するといった
   動きを実現します。 

Tweet

Pocket