CreateJS × Android でハマったこと

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

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

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

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

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

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

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

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()して扱うと、表示が変になるバグが発生する。

instance2 = instance1.clone();

instance2.updateCache();

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

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

clearRect()が原因で、一部のAndroid端末のブラウザが落ちるという現象が発生する。
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 をはじめる人が知っておくとラクなこと
という投稿もしています。