CreateJSを使用した際に一部のAndroid4端末でおこる不具合に関して

createjs
これはCreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで発生する不具合に関する報告である。

概要

CreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで、不具合が発生することがいくつかのブログで報告されている。問題報告と同時に解決策を提示してるブログもある為、それを検証した結果を報告する。

本件に関するブログ

本件に関して触れているブログとして以下のものがある。
(1)まるちゃんブログ
CreateJSでハマったこと
(2)1 pixel|サイバーエージェント公式クリエイターズブログ
Flashで作るスマフォブラウザゲーム向けアニメーション
(3)しょぶろぐ
Android4.0とCanvasアニメーションの話

不具合の起こる端末

実際に不具合の起こる端末として以下の名前が挙げられている。[]内の数字は上記のブログの番号を示すものである。

  • Galaxy SⅢ [(1),(3)]
  • Xperia GX [(1),(3)]
  • Xperia Z [(2)]

不具合の内容

端末と不具合の内容は以下の通りである。[]内の数字は上記のブログの番号を示すものである。

Galaxy SⅢ
  • アニメーション途中に表示が崩れる [(1)]
  • ブラウザが落ちる [(1)]
  • canvasの領域外に描画しようとするとブラックアウトする [(2)]
  • 画面がちらついて強制終了する [(3)]
Xperia GX
  • アニメーション途中に表示が崩れる [(1)]
  • ブラウザが落ちる [(1)]
  • 画面がちらついて強制終了する [(3)]
Xperia Z
  • canvasアニメーションを再生するのとほぼ同じタイミングでブラウザが落ちる [(2)]

*尚、上記のブラウザが具体的にどのブラウザであるかはいずれのブログでも触れられていない。

不具合の回避方法

不具合の回避方法として以下の方法が取り上げられている。[]内の数字は上記のブログの番号を示すものであり、その後に続く端末名は該当ブログで触れられているものである。

  1. 一度のclearRect()で更新する領域を小さく抑えておく [(1) : Galaxy SIII,Xperia GX]
  2. canvas領域以上の大きさでclearRect()する [(2) : Galaxy SIII,Xperia Z]

これ以降は実際に行った検証に関してである。

検証端末

検証に用いた端末は以下の通りである。

・スマートフォン
MEDIAS N-04C

OS : Google Android 2.3.3
対象ブラウザ

  • 標準ブラウザ
Xperia Arc SO-01C

OS : Google Android 2.3.4
対象ブラウザ

  • 標準ブラウザ
  • FireFox
NEC MEDIAS N-04D

OS : Google Android 4.0.4
対象ブラウザ

  • 標準ブラウザ(version : 4.0.4-eng.20121130.132313)
  • Chrome(version : 18.0.1025469)
XPERIA Z SO-02E

OS : Google Android 4.1.2
対象ブラウザ

  • 標準ブラウザ(version : 4.1.2-wj5_rw)
  • Chrome(version : 18.0.1025469)
・タブレット
MOTOROLA XOOM TBi11M

OS : Google Android 3.1
対象ブラウザ

  • 標準ブラウザ
  • Chrome
  • Firefox
Kindle Fire HD

OS : Google Android 4.0
対象ブラウザ

  • 標準ブラウザ
  • Silk
Nexus7

OS : Google Android 4.2.2
対象ブラウザ

  • Chrome

検証用コード

検証用コードは以下の通りである。

検証方法

以下に示す検証用コードを次の3つの場合において実行し、その結果を検証する。
EaselJSに変更を加える場合は、easeljs/display/Stage.jsの301行目以降のclearメソッドに変更を加えいている。

[1]何も変更を加えない

clearRect()を行っているコードは以下の通りで何も変更をしていない。

http://www.mztm.jp/works/createjs/sample_01/index.html

[2]一度のclearRect()で更新する領域を小さく抑えておく

clearRect()メソッドを以下の様に変更する。これにより一度のclearRect()で更新する領域を小さくしている。
なお、clearRectするCanvas領域の大きさは暫定的なもであり、最適化はしていない。

http://www.mztm.jp/works/createjs/sample_02/index.html

[3]Canvas領域以上の大きさでclearRect()する

clearRect()メソッドを以下の様に変更する。これによりCanvasより大きい領域をclearRect()する。

http://www.mztm.jp/works/createjs/sample_03/index.html

検証結果

XPERIA Z SO-02Eで標準ブラウザを使用して[1]を実行した場合のみ、canvas表示から1秒程度でブラウザが落ちる事が確認できた。[2]、[3]の場合はブラウザが落ちることはない。
XPERIA Z SO-02E以外の端末では、対象ブラウザ、[1][2][3]のコードに関係なくブラウザが落ちることはない。

日本ではシェアの高い機種であり、この解決が無い場合は、CreateJS自体の有効性が疑われる恐れがある。副作用など無ければ、速やかなマージが望まれる。

スマートフォンの出荷台数に関する参考ページ

http://bcnranking.jp/category/subcategory_0010_month.html
http://bcnranking.jp/news/class/index.html?cl=3

2 Comments

canvas をクリアする方法について、clearRect の代わりに canvas.width = canvas.width ではどうでしょうか?処理は clearRect よりも遅いのですが、もしかしたらこの方法でも解決できるのかも?しれないなと思いました。

yomotsu様

コメント頂きありがとうございます。
“canvas.width = canvas.width”は知らなかったのですが、こんな方法があったのですね。参考になります。

clearメソッドを以下の様に変更して、不具合の確認されているXPERIA Z SO-02Eでこの方法を試してみたところ、標準ブラウザが落ちることはありませんでした。

http://www.mztm.jp/works/createjs/sample_04/index.html

貴重な情報を頂きありがとうございます。

canvas.width = canvas.widthに関する参考サイト
HTML5 canvas のパフォーマンスの改善

Comments are closed.