[Flash]流体っぽいのを作ろうと思ったの解説。

下のサンプルでどんな DisplacementMapFilter で流体っぽい動きになってるか試しみて、ソースを見た方がわかると思います。

 

  • _canvasBmpData : BitmapData
    描画用のBitmapData。Bitmap化し、BlurFilterをかけてる。 
    • 
_canvasBmpData = new BitmapData(MAP_WIDTH, MAP_HEIGHT, false, 0x000000);
var canvasBmp : Bitmap = new Bitmap(_canvasBmpData);
canvasBmp.filters = [new BlurFilter(4, 4, 1)];

  • _mapBmpData : BitmapData
    描画用の _canvasBmpData に適用する DisplacementMapFilter (_displaceMapFilter) の mapBitmap。
    BlurFilterのかかった流体用マップ _fluidBmp が draw() される。(ので、結局 _fluidBmpと同じ見た目 ) 
    • 
_displaceMapFilter = new DisplacementMapFilter();
_displaceMapFilter.mapBitmap = _mapBmpData;

  • fluidMapBmpData : BitmapData
    流体用マップ( _fluidBmp )の元にする FluidMap クラスで計算した結果の BitmapData
    _fluidBmp 用の BitmapData となる。

    •  

     

    ドラッグすると FluidMap クラスで計算した結果を _fluidBmp として、DisplacementMapFilter の mapBitmap である _mapBmpData に draw() する。

    
// FluidMap : update
fluidMapBmpData = _fluidMap.updateMap();
_fluidBmp.bitmapData = fluidMapBmpData;

// update _mapBmpData
_mapBmpData.draw(_fluidBmp, _fluidBmp.transform.matrix);

    DisplacementMapFilter の内容が変わったので _canvasBmpData に DisplacementMapFilter を繰り返し適用してやることで、描画が変化しつづける。（ことをEnterFrameでやってる。）

    
//updateDisplaceMapFilter(_canvasBmpData, _displaceMapFilter);で以下の処理
var sourceRect : Rectangle = _canvasBmpData.rect;
var destPoint : Point = new Point(sourceRect.left, sourceRect.top);
_canvasBmpData.applyFilter(_canvasBmpData, sourceRect, destPoint, _displaceMapFilter);

     

    FluidMap では縦横サイズとグリッドのサイズを指定して、各グリッドのFluid計算用のデータ FluidMapDataを2次元配列に格納する。

    例えば、300×300でグリッドのサイズを「10」としたら、30×30＝900の各グリッドに対して、Fluidの計算をしてるわけ。仮にグリッド無しでsetPixelしようとすると90000の処理になっっちゃう。

    さらにその各グリッドの持つのXY方向のベクトル値を算出するために、隣接する６個のグリッドの値を使うのだけど、その取得にはまたその2次元配列を使うことになるわけで・・・。

    その計算をEnterFrameで行っているわけだから、処理も遅くなる。

     

    Fluidの計算自体は Glen Murphy氏のFluidコードのほぼそのまま。超省略な画像を置いておくので、これ見ながらソースを見た方が早いと思います。

    必要なのはX方向とY方向の移動量（xVelとyVel）。それをDisplacementMapの色設定に使って、グリッドのサイズでマップ用のBitmapDataを作ってあげる。（色のFadeOutは強制的に色の値を変えちゃってるけど）

    CalcPressure.as の「0.20」のところをGlen Murphy氏のFluidコードの通りに「0.25」にしてやると、波紋？な揺れが際立つよ。

     

    ソースは前回と同じ。

    ソース1：FluidSample.zip
    ソース2：FluidSample_param.zip

     

    Related posts