最近、中途で入社しました シマダ コウショウ です。

KAYACのFLASHチームには、もう一人シマダさんがいるので名前の方で呼ばれています。
今後ともよろしくお願いします。

-------------------------------------

記念すべき初投稿は、タイムライン派のお手軽スクリプト第1弾
個人的に大好きな「DisplacementMapFilter」について。

FLASH8(as2)から利用できるようになったフィルタなので
ネタとしてはちょっと古いですが、 先日AS2案件で使うことがあったので
その仕組みから、マップの描き方まであらためてまとめてみたいと思います。

「DisplacementMapFilter」については、以前日高さんまとめた記事もあるので
ぜひそちらも合わせてお読みください。

-------------------------------------

そもそも「DisplacementMapFilter」って何?

画像やMovieClipなどの表示オブジェクトにかけるフィルターのひとつで、
うまく使うと画像やムービークリップを任意の形に変形させることができます。

台形変形や球面マッピングなどの擬似3D的な使い方や
水面のようなぐんにょりした変形でよく使われるようです。
 

「DisplacementMapFilter」に必要なもの

■フィルタを適用する表示オブジェクト
変形させたいMovieClipやSprite、画像など

091001_source.png



■ディスプレイスメントマップ
どのように変形させるかを決めるための画像(マップ)

各ピクセルの移動量をdx=5,dy=10というふうに、文字で指定するとなると
100x100の画像でも1万ピクセル分の指定が必要になり、かなりめんどくさいので
その移動量を色の要素(XとYなので、赤緑青のうちの二つだけ使います)に置き換えて
ひとつのピクセルにします。
それを全ピクセル分集めて画像にしちゃったのがDisplacementMapです。

091001_map.png


■スクリプト
例(AS3)

target.filters = new Array(new DisplacementMapFilter(new MapImage(0,0), new Point(0, 0), BitmapDataChannel.RED, BitmapDataChannel.GREEN, 100, 100, "color", 0, 0));

target… 変形させたい表示オブジェクトのインスタンス名
MapImage…マップ画像のリンケージ書き出しのクラス名
 

[ 出来上がり ]

091001_displaceImage.gif

 

「DisplacementMapFilter」の仕組み

わかりやすくスクリプトを展開すると

//フィルタ設定用
var _map:BitmapData = new MapImage(0,0); //マップ用画像
var _mapPoint:Point = new Point(0, 0); //ソースに対してマップをどれだけずらすか
var _componentX:uint = BitmapDataChannel.RED; //Xの変位に使う色
var _componentY:uint = BitmapDataChannel.GREEN; //Yの変位に使う色
var _scaleX:Number = 100; //色の変化に対してX座標をどれだけ移動させるか
var _scaleY:Number = 100; //色の変化に対してY座標をどれだけ移動させるか

//フィルタを作る
var my_filter:DisplacementMapFilter = new DisplacementMapFilter(_map, _mapPoint, _componentX, _componentY, _scaleX, _scaleY, "color", 0, 0);

//ターゲットにフィルタを適用
target.filters = new Array(my_filter)

 

[ イメージ図 ]

091001_dmf1.jpg


今回は、DisplacementMapFilterの設定時に
赤の強さをXの変化量に割り当て、
緑の強さをYの変化量に割り当てています。

細かい理屈(※)を書くとわかりにくくなりがちなので、ざっくりまとめると
マップの赤成分が強いほど元画像のピクセルは左に移動し、弱いほど右に移動します。
マップの緑成分が強いほど元画像のピクセルは上に移動し、弱いほど下に移動します。

これをうまく利用することで、画像を変形させています。

もうお気づきかと思いますが、このフィルタの肝はマップ画像の制作にあります。
次回は実際にマップを描いていきたいと思います!(Fireworksで)



-----------------------

※ 以下、細かい説明です。興味のある方はどうぞ。

DisplacementMapFilterは、画像の各ピクセルを他の場所のピクセルで置き換えるフィルターで、
マップはその置き換えるピクセルの座標を表すものになります。

そのためマップの色が強ければ強いほど、置き換えに使うピクセルの座標が大きくなり
結果的に、フィルタ適用後の画像のピクセルは負の方向に移動して見えることになります。


実際にどの位置のピクセルで置き換えるかは下記のように求めることができます。

マップ画像の対応するピクセル ( 同じ座標のピクセル ) の色が「#E7D680」の場合、
赤の強さはE7( = 231)、緑の強さはD6( = 214)です。

AdobeのliveDocsを見ると、置き換えるピクセルの位置は

dstPixel[x, y] = srcPixel[x + ((componentX(x, y) - 128) * scaleX) / 256, y + ((componentY(x, y) - 128) *scaleY) / 256)

 で求められるようですので、出力画像のピクセル(x, y)の色は、
元画像のピクセル(x + 40, y + 33)の色になるってことですね。

-------------------------

HTML5飯