Toolkit for CreateJSのスプライトイメージ化のフローを検討する (2)

前回のエントリで書いた方法で大方問題ないかなと思ったのだけどまだ駄目だった 汗。

スプライトイメージをそれぞれの画像として用いるためにトリミングしようとするところで、

(lib.hoge = function() {
     this.initialize(img.hoge);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,64,64);

Bitmapクラスのコンストラクタに渡すのは"imageOrUri"ということで(こちら参照)、
スプライトイメージをcanvasのtoDataUrlメソッドでbase64化したものを使おうと試みた。
が、Android標準ブラウザでエラーが。。。

SecurityError: DOM Exception 18

ちなみにAndorid標準ブラウザでコンソールログ表示する方法は以下
http://www.dprog.info/javascript/about_debug/Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方法 | design programming

これは便利・・・助かる。


エラーの内容的にクロスドメインまわりかと思い、以前書いたエントリ同様、CORSの対応入れてみたのですがダメだった・・・。

stackoverflowに答えを求めると、

javascript - Android Browser only: canvas.toDataURL throws Uncaught Error: SecurityError: DOM Exception 18 - Stack Overflow

こんなのがあった。

ふむ、全く同じ問題を抱えていて、でもxhrのresponseTypeを'arraybuffer'にすればいけそうとのこと!
だがPreloadJSでいけるのかは不明。次回はそこを試してみる~。

そもそも・・・

このフロー根本的に見直したほうがいいのかとも思った。以下2つのことも調査したい。

  • Flashにスプライト画像をぶち込む

Flashにスプライト画像を読み込んで、それにマスクをかけていってやる方法もあると同僚から提言いただいた。

デザイナーがアニメーションを作成するメリット|1 pixel|サイバーエージェント公式クリエイターズブログ

この方法だと、ちょっと画像追加したくなった~って度にスプライト画像修正するコストが高いと個人的には思うのですがどうなんだろう??

  • Toolkit for CreateJSで吐きだされるjsをもっとごにょごにょ

Toolkit for CreateJSで吐きだされるjsの

(lib.hoge = function() {
     this.initialize(img.hoge);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,64,64);

の部分をうまいこと変換してしまうというのも手かも。



殴り書きで恥ずかしい・・・。