はじめてToolkit for CreateJS使ってみての所感

業務ではじめてToolkit for Createjs使いました。
その所感というか、ハマったところ・気をつけなければならないことも多々あったのでメモ。

flash内の画像ファイル名やインスタンス名には気をつけよう

flash内で画像ファイル名やインスタンス名が日本語だと、パブリッシュで生成されるjsファイル内に2バイト文字が混ざることになる。これは最悪。
今回はデザイナーさんにflashでアニメーションをつくってもらったあとにそのことに気づいてしまったので、お手数ながたリネームしてもらったということがあったので、以後デザイナーさんにToolkit for Createjsでアニメーションをつくってもらうときは注意が必要。

画像読み込みについて

画像のファイル数は比較的多くなりがちになるのだと思うけど、

地獄の“大開発者”養成ブログ — クレイジー極まりないToolkit for CreateJSのワークフローをどうにかしよう その1 問題を整理しよう

でも書かれているように、パブリッシュ時に画像をスプライトイメージにまとめてくれるわけもなく、画像の読み込みがそのままだと重くなってしまう。このスプライトイメージ化のフローはまだ自分も確立できていない。スプライトイメージにする余裕がないときは、せめて画像の読み込みは並列にしてあげたほうが絶対いいと思う。

loader.setMaxConnections(6);

jsファイルは遅延読み込みの考慮も

アニメーションの記述が細かく書かれたjsファイル容量は結構重いので、場合によっては遅延ロードするのが良いかも。自分の場合だと、必ずしもそのアニメーションが表示されるというわけではなかったので(ユーザが条件を満たしているときのみ表示されるアニメーション)遅延読み込みしています。

画像パス

画像パスについてはパブリッシュされたjsファイル内に相対パスで記述されている。で自分の場合は画像サーバとjsファイルを置くサーバが異なるので、そこのパスを修正しなければならないのだけど、jsファイルを直接書き換えるのはNG。そうなると修正入ったときにまた書き換えなければいけないから。なのでパブリッシュされたHTML側で以下のような記述を書くようにした。

var list = test.properties.manifest,
	len = list.length;
for(i = 0; i < len; i++){
	src = "ushisantoasobu/test/" + list[i].src;
	list[i].src = src;
}

書き方はともかく、jsファイルは一切手をつけないこと。これ大事。

バージョン注意

これ一番ハマった。。といっても問題が起きるケースは稀かもしれない。
まずToolkit for Createjsでパブリッシュすると、生成されたHTML内でcreatejs関連のjsファイルをスクリプトタグで読み込んでいる(こちらはFlash Professional CCでパブリッシュしたもの)。

<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.0.min.js"></script>

で、問題が起きたケースとしては、プロジェクトで使っているcreatejsがあって、それをToolkit for Createjsでつくったアニメーションと同時に使用しなければならない、そのときにcreatejsでバージョンの差異があるときだ。

<script src="/js/libs/createjs.min.js"></script>
## 実際にあった例、当プロジェクトで使用しているcreatejsは少し古く、
## "http://code.createjs.com/createjs-2013.05.14.min.js"にあたるもので
## "EaselJS 0.6.1, TweenJS 0.4.1, SoundJS 0.4.1, PreloadJS 0.3.1"という構成

createjsではバージョンの互換が効かないことが多々あって、上記の例では一方のバージョンに寄せるだけだと一方が動かなくなる。

Flash側でcreatejsのバージョンの調整はできないらしい。

"createjs"という名前空間自体を変更してパブリッシュすることもできるので、それでうまくいけるのかなと思って試してみたのですがうまくいかなかった・・・(ここできるよ、という方はご教授ください!)

で結局どうしたかというと、Flash Professional CS6でパブリッシュしたときに同じcreatejsのバージョンだったので、なんとか事なきを得たという感じだったのだけど・・・ここらへん怖い。



以上、Toolkit for CreateJS関連の情報もそんなないしあまり使われてないのかなぁ〜。