スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

Flash CS3で水面ぽい画像表示

Flash CS3が届いたということもあり、以前エントリしたDisplacementMapFilterを使った水面ぽい画像表示をCS3で書き直してみました。





某オブジェの写真がゆらゆら揺れます。速度/変化量に数値を入れて「設定」ボタンを押すと揺れ方が変わります。また、画像の上にマウスを持ってくとDisplacementMapFilterで使用している置き換えマップ画像が表示されます。

今回は、水面ぽく表示する表示オブジェクトのクラスを作ることにしました。せっかくCS3だし。作ったクラスのインスタンスにaddChildすることで、任意の表示オブジェクトを水面ぽく表示できるという寸法デス。

クラスはWaterSurfaceという名前でWaterSurface.asというファイル名デス。ソースはこんなカンジです。

package {
import flash.display.*;
import flash.geom.*;
import flash.events.*;
import flash.filters.*;
/**
* 水面処理をして描画するスプライト。
*/
public class WaterSurface extends Sprite {
/** 変化速度 */
private var _speed:Number;
/** 変化量 */
private var _scale:Number;
/** オクターブ数 */
private var _octave:uint;
/** 乱数シード */
private var _rndSeed:int;
/** オフセット値の配列 */
private var _offset_array:Array;
/** 変化速度の配列 */
private var _speed_array:Array;
/** 置き換えフィルタ */
private var _filter:DisplacementMapFilter;
/** 置き換えビットマップ */
private var _bitmapData:BitmapData = null;
/**
* コンストラクタ。
* @param speed 変化速度
* @param scale 変化量
* @param octave オクターブ数
*/
public function WaterSurface(speed:Number = 8,
scale:Number = 8,
octave:uint = 3) {
_speed = speed;
_scale = scale;
_octave = octave;
_rndSeed = Math.floor(Math.random() * 65536);
// フィルタの生成
_filter = new DisplacementMapFilter(null,
new Point(0, 0),
2,
4,
scale,
scale);
this.speed = speed;
// onEnterFrameイベントをリッスンする
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
/**
* 変化速度を設定します。
* @param val 変化速度
*/
public function set speed(val:Number):void {
// 配列の初期化
_offset_array = new Array();
_speed_array = new Array();
for (var i:int = 0; i < _octave; i++) {
_offset_array.push(new Point(0, 0));
_speed_array.push(new Point(
val * (Math.floor(Math.random() * 2) == 0 ? -1 : 1),
val * (Math.floor(Math.random() * 2) == 0 ? -1 : 1)));
}
}
/**
* 変化量を設定します。
* @param val 変化量
*/
public function set scale(val:Number):void {
_filter.scaleX = val;
_filter.scaleY = val;
}
/**
* フレーム毎の処理
* @param evt イベントオブジェクト
*/
private function onEnterFrame(evt:Event):void {
// オフセット位置の更新
for (var i:int = 0; i < _octave; i++) {
_offset_array[i].x += _speed_array[i].x;
_offset_array[i].y += _speed_array[i].y;
}
// フィルタのクリア
if (_filter.mapBitmap) {
_filter.mapBitmap.dispose();
}
// パーリンノイズビットマップ生成
var w:Number = width;
var h:Number = height;
if (w > 0 && h > 0) {
_bitmapData = new BitmapData(w, h);
_bitmapData.perlinNoise(w,
h,
_octave,
_rndSeed,
false,
true,
2 | 4,
false,
_offset_array);
// 置き換えフィルタにビットマップをセットする
_filter.mapBitmap = _bitmapData;
}
filters = [_filter];
}
/**
* 置き換えフィルタに使用しているビットマップデータを
* 戻します。
* @return ビットマップデータ
*/
public function get bitmapData():BitmapData {
return _bitmapData;
}
}
}
WaterSurfaceはSpriteを継承したクラスで、自身のEnterFrameイベントでパーリンノイズ画像を作ってDisplacementMapFilterに反映させる処理をします。あと、変化速度/変化量を設定するためのプロパティと置き換え画像のBitmapDataを取得するためのプロパティを追加してあります。

そんでコレを使うフレームアクションのほーはこんなカンジです。
// 水面処理スプライトを生成する。
var waterSurface:WaterSurface = new WaterSurface();
addChild(waterSurface);
// 水面処理したい表示オブジェクトをセット
var ix:Number = image_mc.x;
var iy:Number = image_mc.y;
image_mc.x = 0;
image_mc.y = 0;
waterSurface.addChild(image_mc);
waterSurface.x = ix;
waterSurface.y = iy;
// マウスオーバーで置き換えビットマップを表示
waterSurface.addEventListener(MouseEvent.ROLL_OVER,
function(evt:Event) {
addEventListener(Event.ENTER_FRAME, doShowBitmap);
});
waterSurface.addEventListener(MouseEvent.ROLL_OUT,
function(evt:Event) {
removeEventListener(Event.ENTER_FRAME, doShowBitmap);
hideBitmap();
});
var bitmap:Bitmap = new Bitmap();
addChild(bitmap);
bitmap.x = waterSurface.x;
bitmap.y = waterSurface.y;
function doShowBitmap(evt:Event) {
hideBitmap();
bitmap.bitmapData = waterSurface.bitmapData;
}
function hideBitmap() {
if (bitmap.bitmapData) {
bitmap.bitmapData.dispose();
}
}
// 設定ボタン
setting_mc.addEventListener(MouseEvent.CLICK,
function(evt:Event) {
waterSurface.speed = Number(speed_txt.text);
waterSurface.scale = Number(scale_txt.text);
});
image_mcというのが画像のインスタンスです。WaterSurfaceのインスタンスを作ってimage_mcをaddChildすることでimage_mcを揺らしています。

WaterSurfaceのインスタンスにはロールオーバー/ロールアウトのイベントリスナを追加しています。置き換え画像をWaterSurfaceのインスタンスから取得して表示するEnterFrameイベントハンドラをつけたり外したりします。

setting_mcは「設定」ボタンで、クリックしたらWaterSurfaceのspeed/scaleプロパティに入力値を設定してます。
スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2007.06.24 | | Comments(4) | Trackback(0) | Flash CS3

コメント

8,64くらいに設定してうまいことやったら、風にたなびく旗のようなものもできそうですね。
すご。

2007-07-10 火 08:53:17 | URL | #- [ 編集]

コメントありがとうございます。

速度と変化量をうまいこと設定してやるとオモシロイ動きしそうですねえ。
あと、サンプルではオフセット値の変化をランダムでやってるんですが、このへんも工夫の余地がありそうデス。

2007-07-10 火 14:24:24 | URL | HundredthMonkey #SFo5/nok [ 編集]

こちらでも水面表現やってます。

http://cgi.mediamix.ne.jp/~t3726/game_hunter/ffv_water.htm

2010-05-25 火 09:44:32 | URL | ジュノ #dNm2mw72 [ 編集]

ありがとうございます

>ジュノさん

コレはおもしろいですね。
教えてくれてありがとうございます。

2010-05-26 水 17:21:16 | URL | HundredthMonkey #GCA3nAmE [ 編集]

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。