CreateJSのお勉強中。 Flashでできることを、なるだけおなじくらいの時間で再現できるようになりたいと思いすこしづつ理解を進めております。
今回は「深度管理」「bitmapのマトリクス変形」「音」について調べてみました。
CreateJS 深度変更
マウスダウンで一番手前に表示されるようにしました。
as3でいうところのnumChidrenにあたるものがなさそうで
やや戸惑いました。
EaselJS conteinerクラスに、getNumChildren()がありました。
参考サイト
EaselJS Container Class/getNumChildren
http://w.livedoor.jp/w2u_dev/d/EaselJS%20-Container#content_4_9
http://www.fumiononaka.com/Sample/mztm/CreateJS_130215.html
CreateJS ビットマップ変形
matrix2Dを使用し画像変形できるようにしました。
キーボードで変形できます。
（← → ↑ ↓ 4 8 6 2 0：リセット）参考サイト
http://fumiononaka.com/Business/html5/FN1210005.html
http://oshiete.goo.ne.jp/qa/627652.html
CreateJS 音を鳴らす
SoundJSを使って音を鳴らす練習。
ビットマップ画像の金魚クリックで音が鳴ります。
※画像と音に関連はありません。たまに変な音にナリマス。LoadQueueで、mp3と画像をまぜこぜにして読み込んでみました。
TweenJSも使ってみました。
ローカル確認中に
ビットマップに設置したマウスイベントで
クロスドメイン関連のエラーが出ました。（console.logで確認）
web上で同ドメインにある画像ではエラーが出ませんでした。
外部読み込み関連は注意が必要そうです。あと、アルファ付のpngの透明部分はクリック範囲に
含まれないみたいです。参考サイト
http://nakajmgtech.blogspot.jp/2013/03/preloadjs-x-soundjs.html
http://webdelog.info/2013/03/web/javascript/createjs-part2-tweenjs/
CreateJS、jsメモ
・ライブラリのバージョン更新で、動かなくなるところが多々有り
PreloadJS、SoundJSのバージョンごとの対応でハマった。・描画更新のupdate()を良く忘れてハマる。。。
・別ドメインの外部画像にマウスイベントリスナーを
設定するとクロスドメイン系エラーがおきる。
※ローカル確認時は、同一階層にあってもこのエラーで
処理が続行されない。web上では大丈夫でした。CreateJS、今後学びたいこと
・「toolkit for CreateJS」連携で
Flash素材の流用が簡単にできるようノウハウを得る。
・その他javaScript向けライブラリとの連携。
・TweenJSの詳しい使い方の研究
