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)は大風、大雨で会社が半ドンとなったので家でこの原因究明しようと思い、

さてと、enchant.jsで Spriteを rotate or scale したときに、 xとかyを加算できない問題の原因を究明する。てかそういうものなの？ #enchant.js
— hidesukeさん (@hidesuke) 4月 3, 2012

とつぶやくと、

@hidesuke Safariのバグです
— Ryo Shimizuさん (@shi3z) 4月 3, 2012

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にサンプル上げたんでそちらもどうぞ

2012-04-03 1st - jsdo.it - share JavaScript, HTML5 and CSS

Osaki.jsは勉強になるね！（棒

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