CreateJSを使って「ぬりぬり育成 ジェルミィ」という mixi アプリを制作しました。
のでその感想なんかを。
結論から言うと CreateJS 最高です。
上記QRコードよりスマフォでアクセスしてください。
※ mixi へのログインが必要となります。
ログインメンドイ！って人はPC体験版をどうぞ。
http://vaseline.jp/nurinuri/
CreateJS でなにができるのか
CreateJS には、大きく4つのライブラリが含まれています。
- EaselJS
canvas を as 的に扱える。as になれてる人ならすんなりいける。 - TweenJS
アニメーションを制御。なにかしらのトゥイーンライブラリを使ったことがあればすんなりいける。メソッドチェーンで記述できるので直感的。 - SoundJS
音を制御。今回は見送り、独自に実装。 - PreloadJS
外部ファイルの読み込みを制御。
Adobe Flash Professional Toolkit for CreateJS でなにができるのか
Flash で作ったタイムラインアニメーションをボタン一つで js に変換できます。
しかもスマフォでさくさく動きます。
書き出された js を編集するのもそんなに大変じゃないです。
ベクター画像を js に書き出して制御は自分でといった使い方もできます。
なので、Flash でアニメーション付きのムービークリップを作成して、それを js エディタ（今回はWebStorm）で制御していくという使い方をしました。
参考：FlashからHTML5へ | CreateJS toolkitについてさらに詳しく
参考：Flash Professional Toolkit for CreateJSのファーストステップガイド | Adobe Developer Connection
苦労したところ
CreateJS 関係なく、Androidの謎挙動。
js の知識がなくても大丈夫？
as が書ければなんとかなります。なんとかなりました。
まずは Flash で簡単なアニメーションを作って書き出してみると、なんとなく使い方がわかると思います。
気をつけるべきポイント
- 入れ子にしたムービークリップの名前が hoge_1, hoge_2 みたいになるので、自分で制御する場合は手動で書き直す必要がある。
- 画像の基準点を設定する regX, regY は読み込みが完了してからでないと反映されない。
PreloadJS で必要なもの一式を予め読み込んでおくといいです。 - alpha を0にするとマウスイベントが拾えなくなる。
0.01とかにして対応しました。 - canvasのスケールを変えるとマウス座標がズレる。
- インスタンス生成時に負荷が上がってカクつくので必要なものは予め作っておくといい。
ジェルミィでは、ハードは8個、フキダシは2個を予め生成して使い回してます。 - ただ、大量に生成した直後にトゥイーンさせるとアニメーションが飛ぶ。
0.1秒とか待ってから実行、で対応しました。 - Androidはタップ時に黄色い枠がでるので css で非表示に。
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); - canvasリサイズ時に固まる or 落ちる端末がある。（Android 4.0系）
Android 4.0系のみサイズを固定して対応しました。 - スクロール時に動作が極端に遅くなる端末があり、スクロール後も継続する。
- 別ドメインの画像を描画する場合、クロスドメイン問題が発生する。
- ドラッグ中にスムージングがオフになる端末がある。
- 画像は整数座標にしないとボケる。（PC）
Firefoxはそもそもスムージングがかからない？
今回わかったこと
- Androidは、新しい端末ほど処理が遅くなったりする。
なので開発途中でのマメなチェックが必要。 - ドラッグ処理が必要なコンテンツの場合、スクロール停止を前提とした設計が必要。
なんだけどAndroid だと独自の操作でスクロールしちゃったりする端末もある。 - 端末の処理速度に応じてフレームレートを動的に変更する処理が必要。
ジェルミィは 15fps 固定。
宣伝
PCでもぬりぬりできる！ジェルミィの体験版を CreateJS でつくりました。
IE以外のブラウザでご覧ください。
ぬりぬりの部分は mixi アプリ版と同じ js で動いてます。
よろしくお願いします！