DisplacementMapFilterで波紋エフェクト

はてなブックマーク

水面にぽたっと水滴が落ちた時の波紋をFLASHで表現したいなと調べていると、 DisplacementMapFilterなるものにたどり着きました。いわゆる「置き換えフィルタ」です。
FLASHではこれをフレーム毎に適用することで、インスタンスをぐにょーんと変形させたりできます。(ホームページで採用しました。大きいので劇的に重いです。)概要は、フィルタ側のRGBの値(0~255)によって、適用された部分Aから移動した部分Bのピクセルが部分Aに採用されるというものです。Photoshopのコピースタンプツールの感覚に近いような。移動距離は128を0として127以下ならマイナス、129以上ならプラスとなります。
下のFLASHは緑の値をDisplacementMapFilterとした例です。2種類のうちどちらかをクリックして画像にマウスオーバーしてみると、感覚的にわかるかもしれません。

さて、スクリプトのおおまかな流れとしては、フィルタの元となるビットマップデータを生成し(ここではbitmapという名前)、さらにそれを引数にDisplacementMapFilterオブジェクトを生成(ここではdismap)、それを適用したいインスタンスのfiltersプロパティに(フィルタの一種なので配列で)押し込みます。
以下コード例です。

01.import flash.display.BitmapData;
02.import flash.filters.DisplacementMapFilter;
03.import flash.geom.Point;
04. 
05.//フィルターの元となるビットマップデータを生成
06.var bitmap:BitmapData = new BitmapData(mapMC.width,mapMC.height);
07. 
08.//mapMCの内容をビットマップに書き込む
09.bitmap.draw(mapMC);
10. 
11.//DisplacementMapFilterを生成
12.var dismap:DisplacementMapFilter = new DisplacementMapFilter(
13.    bitmap,
14.    new Point(0,0),
15.    4,4,
16.    30,30
17.    );
18. 
19.//targetMCに適用
20.targetMC.filters = [dismap];

以下DisplacementMapFilterコンストラクタの主な引数です。

1.new DisplacementMapFilter(
2.  使用するビットマップ,
3.  フィルタ処理を開始する位置,
4.  x座標の変形に使用したい色,y座標の変形に使用したい色,
5.  x座標の乗数,y座標の乗数
6.);

4行目の、座標の変形に使用したい色は、「チャンネル」として数値を与えます。赤が1、緑が2、青が4、アルファが8となります。
5行目の乗数は、数値が大きいほど変化も大きくなります。
以上を踏まえて...

mapMCをこのようにアニメーションさせ、ENTER_FRAMEで常にフィルタを更新すると波紋のようになります。ちなみにフィルターの元となるビットマップ自体をActionScriptで描画してしまうこともできます。すごいです。
波紋エフェクト - NORISUKE WORKS
鏡面反射と波紋: 鮭とプログラムとか

トラックバック(2)

トラックバックURL: http://endlessblank.com/mt/mt-tb.cgi/7

波紋エフェクトを集めてみました。いろんな実装方法が有りました。... 続きを読む

前回の続きです。 が、今日はまったく違うことをやります。 前回はActionScriptで外部サイトからXMLデータを取得してきて表示するところまでやりま... 続きを読む

コメント(1)

I really appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You've made my day! Thanks again!

コメントする

  • RSS