ハマったこと：AndroidにおけるCreateJS/Canvasのバグ

スマホアニメーション。
AndroidでもFlashが使えなくなって久しいが、
最近では手間のかかるCSS3アニメーションを諦めて、
多少再生パフォーマンスが悪くともFlashから直に出力できる
CreateJSによるアニメーションがソシャゲ界では定番のようだ。



特にAndroid4はCSSのマスクとアニメーションの併用が壊滅的なので、
マスクがちゃんと使えるというメリットも大きい。



さて、CreateJSで開発していると壁にぶち当たるのが
CreateJSというかCanvasのバグ。
しかもAndroidのWebViewだとさらに調子が悪くなる。
内容としては描画がおかしくなったり、ブラウザやアプリが落ちたり。



筆者の経験だとSamsung Galaxy SIIIやXperia Z、A等の
Snapdragon S4を搭載している機種で再現しやすい模様。
Canvasで本気でアニメーションさせるというネタがまだ少ないので
いつか同じ問題にぶつかる方のためにも解決策を記事に残して置く。



例えばcanvasのclearRect()において
キャンバスのサイズと同じ数値を指定すると落ちるなどが有名所だろうか。
CreateJSのclear()の実装はclearRect()なので当然落ちる。
ググると数回にピクセルを分けてclearRect()するなどの対処法が書かれているが、
これについては、easelJSの0.6.1以降では対策されているため、
そちらを使用すれば問題ない。
（まさか縦横ともに1ピクセル大きくクリアするだけで解決とは・・・）



それでも負荷のかかるアニメーションで落ちるパターンがあったので
調べたところ、



http://blog.happyelements.co.jp/2013/08/love-peace-and-android.html



こちらのブログに答えが見つかった。
そう、アニメーションを開始させる前、
stage = new createjs.Stage(canvas);
の後に
stage.clear();
を呼ぶことが大切だったようだ。
特に背景が透過しているアニメーションで発生しやすかったように思うが、
clear()で対策できるということは
明らかにCanvasのメモリリークだろう。






Androidはひとつのカーネルでいろんな機種に対応できるのが売りであるが、
ドライバーはメーカーやチップベンダーがカスタムしたものを使用するため
ハードの性能は一流でもドライバーの完成度の低さに起因する
問題が多い気がする。
以前JSによるswfプレイヤーの開発を手伝っていたことがあったが、
とある機種ではJS内での簡単な少数演算で桁あふれを起こすこともあった。

OS自体は無料のはずなのに、めったなことがないとアップデートはされないし、
このままではiPhoneに負ける一方ではないか（もちろんiPhoneにもバグはあるが）。
個人的にはGoogleが好きなので、
Android陣営には4.4 Kitkatで是非とも頑張ってもらいたい所である。