CreateJS × Android でハマったこと

More than 5 years have passed since last update.

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 をはじめる人が知っておくとラクなこと

という投稿もしています。