DisplacementMapFilterで波紋エフェクト

はてなブックマーク

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

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

import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
import flash.geom.Point;

//フィルターの元となるビットマップデータを生成
var bitmap:BitmapData = new BitmapData(mapMC.width,mapMC.height);

//mapMCの内容をビットマップに書き込む
bitmap.draw(mapMC);

//DisplacementMapFilterを生成
var dismap:DisplacementMapFilter = new DisplacementMapFilter(
    bitmap,
    new Point(0,0),
    4,4,
    30,30
    );

//targetMCに適用
targetMC.filters = [dismap];

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

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

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