CreateJS × Android でハマったこと #JavaScript

CreateJS（主にEaselJS、TweenJS）は
Canvasを簡単に扱えるとても便利なライブラリだけど、
実際に使うと色々なカベにぶちあたる（主にAndroid）。

alphaはTweenさせる前にもう一度0にセット

StageにaddChildした時に、alphaを0にセットしていても
Tweenを設定するとなぜか要素がうっすら表示されてしまうことがある。

JavaScript

tween_target
.set({
    alpha : 0
})
.to({
    alpha : 1
}, 300)

toする前にいま一度alphaを0にセットする。

タッチデバイスにて、mousedownが2回発火

Touch.enable(stage) で、タッチイベントをCreateJSがラップしてくれるようになる。
このとき、 mousedownイベントがもともと発火するタッチデバイスにて、
CreateJSがラップしたmousedownイベントが2回発火する問題が発生する。
（touchstart分とmousedown分が発火しているみたい）

JavaScript

button.addEventListener("mousedown", function (event) {

    if(event.nativeEvent.type != "touchstart") {
    // mousedownの時は処理を行わない
        return;
    }

});

eventオブジェクトのnativeEventのtypeをみて、
mousedownでは処理を行わないようにする。
mouseupでも同じ問題が起きるので、同様に回避する。

cache()とclone()を組み合わせるとBitmapが変になる

Bitmapインスタンスを扱うときに、cache()メソッドを使うと処理を軽くできるわけですが、
cache()メソッドを使ったBitmapをclone()して扱うと、表示が変になるバグが発生する。

JavaScript

instance2 = instance1.clone();

instance2.updateCache();

updateCache()でcacheを更新すると回避できる。

clearRect() 部分が原因で、一部のAndroid端末で処理落ち

clearRect()が原因で、一部のAndroid端末のブラウザが落ちるという現象が発生する。
EaselJS内の

easelJS

p.clear = function() {
    if (!this.canvas) { return; }
    var ctx = this.canvas.getContext("2d");
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}

という部分を

easelJS

p.clear = function() {
  if (!this.canvas) { return; }
  var ctx = this.canvas.getContext("2d");
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  var m = (this.canvas.width + 255) >> 8;
  var n = (this.canvas.height + 255) >> 8;
  for (var i = 0; i < m; ++i) {
      for (var j = 0; j < n; ++j) {
          ctx.clearRect(i << 8, j << 8, 256, 256);
      }
  }
}

のように修正する。
分割してclearRectすることで回避できる。
（詳しくは、以下の2つめの参考URL）

参考にさせてもらったページ

Android × Canvas の即死ポイントとその回避策
 CreateJSでハマったこと - まるちゃんブログ

おわりに

ここにまとめたのは Androidで CreateJSをつかったときに起こる問題です。
CreateJSに限らず、Android × Canvasでは色々と問題が多い。
それについてはまたどこかで・u・ノ

CreateJS触り始めの人向けに、
CreateJS をはじめる人が知っておくとラクなこと
という投稿もしています。