反射表現クラス：com.trick7.effects.Reflection.as

昨日の記事の手法をベースに、床面に対して鏡面反射表現ができるクラス、Reflection.as を作り直しました。

まず、Flashで反射表現を実現させるために、３つのアプローチがありました。

1. 反射部分を透明度で表現する
   一番最初に思いついた方法です。もとの画像を反転コピーして、グラデーション画像と copyChannel 合成して、画像のアルファを100から0にフェードアウトする手法。しかし、反射したオブジェクト同士が重なった時に、後ろ側の反射が透けるのは不自然なので却下。
2. “Active Blur” を使って表現する
   透明度表現で行き詰まった時に、muta様にご提供いただいたアイデア。反射部分は同様にフェードアウトで表現しますが、その透明レイヤーの下に、床面の画像を敷くことで、透過を防げます。
   Active Blurを使って、床面となる背景画像をキャプチャし、エフェクトをかけるMCの座標に応じて、キャプチャ画像を毎フレーム位置補正して、反射部分の下地にします。メリットとしては、背景（床）が画像でも対応できる点。その際、onEnterFrameを使えば、毎フレーム、ダイナミックに反射を描画できます。
   ただ、背景となるムービークリップ全体をキャプチャするため、再描画領域が大きくなってしまうのと、Sandy で distort させる時に指定する頂点座標の取得が難しくって、今回作りたい表現にはオーバースペックだったので、このアプローチは選びませんでした。
3. 反射部分に透明→背景色の矩形をかぶせる
   もとの画像を反転コピー。その上にアルファ0→100（背景色）の矩形を重ねる手法。反転画像自体は不透明なので、下地が透ける問題はなし。使用状況が、背景が単色ベタ塗りの場合に限定されてしまいますが、処理の軽さとコントロールのしやすさを考慮して、今回はこのアプローチに決定しました。

３のアプローチで制作したのが、今回の Reflection.as です。コードの内容はダウンロードファイルを見ていただければ理解できると思います。

reflectionNoTransparent.zip(145KB): flash8形式

1. コンストラクタ関数の引数として、反射させたいMCのインスタンス名, 反射の度合い, 背景色（※オプション：未指定の場合は 0×000000）の３引数を受け取る。
2. MCの反転画像を bitmapData に draw する。
3. 上に被せるグラデーション画像をコードから生成。先程の bitmapData に上書きdraw すると、前回のエントリのように、フェードアウトを擬似的に表現できる。
4. それを新規ムービークリップ “reflection” に attachBitmap し、reflection を元画像の下端に移動して完成。

fla ファイル側の設定ですが、一番簡単な設定は、ステージ上にムービークリップを配置して、

import com.trick7.effects.Reflection; //クラスをimport
var ref:Reflection = new Reflection(mc, 2.5); //引数は、( インスタンス名, 反射画像の高さ, 背景色 )

以上で、背景色が黒の場合の反射表現の出来上がりです。

エントリのトップ画像の場合は、ステージ上にインスタンス名 “paint（ごにゃごにゃしたMC）” を追加で配置し、

import com.trick7.effects.Reflection;
var ref:Reflection = new Reflection(mc, 2.5);
var ref2:Reflection = new Reflection(paint, 3);

となります。反射画像の高さは、元画像の高さを、第2引数で割った値となるので、元画像が150pxの時、最大値の1なら、150pxの反射画像、逆に5ぐらいにすると30pxの反射になります。これによって再描画領域をぎりぎりまで狭めることができました。

また、反射画像の高さと背景色は個別に設定できるので、背景が透明な場合、

import com.trick7.effects.Reflection;
var ref:Reflection = new Reflection(mc, 2.5, 0xff0000);
var ref2:Reflection = new Reflection(paint, 3, 0x00ffff);

で、次のような画像になります。まぁこういう使い方はしないでしょうけど。

バグがあったらおもさげながんす。