2012年4月3日火曜日

enchant.js(+Safari)でrotateと移動を一緒にやる方法

昨日のOsaki.jsの終わって、自席に戻ったときに@pinori さんに
Spriteを回転させながら移動ってできない? 
と聞かれました。
つまり、コードにしたらこんな感じ

var img = new Sprite(16, 16);
img.image = someImage;

game.rootScene.addEventListener(Event.ENTER_FRAME, function(){ 
    img.y += 5;
    img.scaleY += 1;
    img.rotate(30);
  }
});

imgというSpriteを毎フレーム毎にy方向に動かしながら、活縦にびよーんと伸ばしながら、かつ30°づつ回転させるというコードです。
コレが動かない……。

で、今日(4/3)は大風、大雨で会社が半ドンとなったので家でこの原因究明しようと思い、



とつぶやくと、

UEIの清水さんから直接ご回答いただきました! 本当に便利な世の中です! ありがとうございました!




バグなら仕方ないんですが、やはりSafariで確認することが多いMac使い。ここはSafariでも動くようにしておきたい。
というわけで、動くようにしました。

回避方法は、twitterでもつぶやいているように、偶数フレームではローテート、奇数フレームでは移動するという動作を交互に実行するようにしました。

コードはこんな感じ。


  var img = new Sprite(16, 16);
  var dScaleY = 1,
      dRotate = 30,
      dy = 3;

  game.rootScene.addEventListener(Event.ENTER_FRAME, function(){
    if(game.frame % 2 === 0) {
      console.log("hoge"); 
      if(img.y > game.height || img.y < 0) {
        dy *= -1;
      }
      img.y += dy;
    } else {
      if (img.scaleY > 10 || img.scaleY < -10) {
        dScaleY *= -1;
      }
      img.scaleY += dScaleY;
      img.rotate(dRotate);
    }
  });

うん、説明と逆だね! 偶数フレームで移動、奇数フレームで回転&拡縮を行なっています。
jsdo.itにサンプル上げたんでそちらもどうぞ


Osaki.jsは勉強になるね!(棒

でもできるゲームを早く公開できたらいいなーと思います。
昨日は、入社3年目ボーイがつくった Metal Bear Solidがスペランカーばりの難易度でゲラゲラわらえてよかったw

0 件のコメント:

コメントを投稿