CreateJS BitmapData for EaselJSを試してみました。


nekome_bitmapDataTest_140415kudox.jp/ピクセル職人に捧ぐ–BitmapData for EaselJS-で公開されているBitmapData for EaselJSを使って画像が爆発する効果を作ってみました。 キャンバス内クリックで、画像粉砕します。
※IEでは記事内コンテンツが正常に動作しない可能性があります。
BitmapDataTest←こちらから開く新規ウィンドウでは動作しました。(環境win7 IE11)※音が出ます

 

CreateJS BitmapDataTest

 


CreateJS BitmapDataTest

※音が出ます
 

製作メモ

kudox.jp/ピクセル職人に捧ぐ – BitmapData for EaselJS –
 公開されているBitmapData for EaselJSを使って画像が爆発する効果を作ってみました。

・キャンバス内クリックで、画像粉砕、元に戻るを繰り返します。
 ※登場する画像はランダムです。 

・キャンバスサイズにビットマップ領域がフィットして描画されるようにしました。 
 下部リンクで別窓で開き、ウィンドウサイズを変更→リロードで、
 広範囲の爆発を確認できます。
 ※フルスクリーンなど広げすぎると、激重でブラウザごと落ちる場合がありますので要注意

・設定fps30
・Chrome、FireFoxだとそこそこ動いた。IEだと重すぎて、動かなくなるときがあった。

感想

・as3に近い記述でかけて安心。
 もっといろんなことができそうだけど、重くなりがちなので再生環境と相談。
・blurフィルターをかけると重すぎて動かなかったので今回は実装しませんでした。

参考リンク

kudox.jp/ピクセル職人に捧ぐ – BitmapData for EaselJS –
CreateJS BitmapData 1ピクセルに分解してパーティクル
画面が粉々になるエフェクト