AS3 DisplacementMapFilterで波紋を作る練習
僕の名刺です。チョイっとクリックしてみてください。
いつも縦の名刺ですが、今回ちょっと横向きなんてどうだろ？なんて思い、勝手にデザインを変えちゃいました、以外と僕の中では新鮮。
今回の勉強はDisplacementMapFilterクラスという、あんまり聞き慣れてなかったフィルターを使った練習をメモしておきます。
僕がよく生徒さんの前で講義に使うAdobe Photoshop等などには良く見かけるFilter機能ですが、これを使う事でワープ効果なんて表現も出来るらしい、ということで実験。
やってみると、波紋を出すポイントがずれて、最初は苦労したけどPointクラスとMatrixクラスをうまく使う事で座標をマウスクリックした座標に合わせる事が可能です。
これは単純にリンケージしたムービークリップシンボルのスーパークラスをわざとSpriteに定義しています。これが名刺の画像が入ったMCなわけです。そのままaddChildしときます。
続いて以下の定義というのは・・・
spriteはその中に波紋の元となる円をgraphics.drawCircleで3重丸を入れているSpriteで、これに対してまずベベルフィルタ（エンボスのようなもの）とフラーフィルタ（ぼかしフィルタ）をかける事で、波紋の形状が出来上がります。ただし、必要なのは、このSprite内の画像のBitmapData型の情報が必要なので、private var bm:BitmapDataを仮で定義しておきます。毎フレーム処理の時に、このBitmapdataにdrawすることで波紋の形状を更新しているわけです。
しかし厄介なのは、このdrawしている第二引数にMatrixで位置を移動させないと、円の真ん中から右下だけをdrawしてしまうので、このようにしています。
これによって波紋の円の左上から右下までしっかりとdrawしてくれるというワケです。
private var clickPoint:Pointにはクリックした瞬間のマウスの座標が入ります。これがDisplacementMapFilterクラスを実行している際に必要になってきます。
それでは本題のDisplacementMapFilter。
var pt:Point = 〜〜の部分はクリックされた地点を計算してPointオブジェクトに格納します。
さて毎フレームごとに上記のgetFilterメソッドが呼び出されます。
ここで一番ハマったのは、毎フレーム、呼び出しているはずなのに、波紋が大きく伸びていかない。なぜだ！？
で、さんざん試行錯誤したあげく、ヘルプにこんな事が書いていた。
フィルタ操作の潜在的な問題
なんじゃそりゃ？
で、調べてやっと解決の糸口が見えました、要はフィルタの中身を変形して更新するときは、一旦配列のコピーを作ってそれを適用させないといけない、ということで、
が要るというわけです。ちょっとまどろっこしいけど、一応これで解決してます。
DisplacementMapFilterコンストラクタへの引数はいっぱいあって、色々試してみましたが、一番しっくり来たのがこの値でした。ちなみに3,4引数のBitmapDataChannel.RED定数はBLUEでもGREENでも、結果はこの場合、同じでした。
5,6引数の100の値は大きいほど効果が目に見て現れやすいです。
DisplacementMapFilterModeは4つの定数の中で、CLAMPにしてみました。
あまり波紋が大きくなると、極端に重くなるので、波紋が広がっている間は次の波紋は出ないようにしてます。この辺は改良が出来そうです、研究しておきます。
