[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
