スポンサーサイト

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

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

沸き立つ湯気

湯気がたってるような表現をするサンプルです。






やってることはFlash CS3で水面ぽい画像表示と似たようなカンジで、ENTER_FRAMEでフレーム毎にオフセット値を変えながらBitmapData#perinNoiseでパーリンノイズを生成してます。ただしDisplacementMapFilterを使うんじゃなくて、白いスプライトのマスクとして生成したビットマップを設定しています。ソイツをお好み焼きの画像に重ねてマス。

今回はBitmapクラスを継承して湯気を描画するSteamクラス(Steam.as)を作ってみました。

package {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.geom.Point;
import flash.events.Event;
/**
* 湯気を表現するクラス。
*/
public class Steam extends Bitmap {
/** オクターブ数 */
private var _octave:uint = 0;
/** オフセット位置の配列 */
private var _offsetArray:Array;
/** 変化速度の配列 */
private var _speedArray:Array;
/** x方向の周波数の係数 */
private var _baseXScale:Number = 0.7;
/** y方向の周波数の係数 */
private var _baseYScale:Number = 0.7;
/** 乱数シード */
private var _rndSeed:int = 0;
/** 上昇速度係数 */
private var _speedY:Number = 2;
/** ゆらぎ係数 */
private var _speedX:Number = 4;
/**
* コンストラクタ。
* @param width 描画領域の幅
* @param height 描画領域の高さ
* @param octave オクターブ数
*/
public function Steam(width:uint, height:uint, octave:uint = 3) {
_octave = octave;
_offsetArray = new Array();
_speedArray = new Array();
for (var i:uint = 0; i < octave; i++) {
_offsetArray.push(new Point(0, 0));
_speedArray.push(new Point(Math.random(),
Math.random() * _speedY + _speedY));
}
_rndSeed = Math.floor(Math.random() * 65536);
// ビットマップデータ
var bd:BitmapData = new BitmapData(width, height);
super(bd);
// フレームイベントリスナの登録
addEventListener(Event.ENTER_FRAME, doEnterFrame);
}
/**
* フレームイベントハンドラ
* @param e イベントオブジェクト
*/
private function doEnterFrame(e:Event):void {
// オフセット位置の更新
for (var i:uint = 0; i < _octave; i++) {
var offset:Point = _offsetArray[i];
var speed:Point = _speedArray[i];
// x方向のゆらぎ
if (speed.x < 0.5) {
speed.x += speed.x * speed.x * 2;
} else {
speed.x -= (1 - speed.x) * (1 - speed.x) * 2;
}
offset.x = (speed.x - 0.5) * _speedX;
// 上昇
offset.y += speed.y;
}
// パーリンノイズ生成
bitmapData.perlinNoise(bitmapData.width * _baseXScale,
bitmapData.height * _baseYScale,
_octave,
_rndSeed,
false,
true,
BitmapDataChannel.ALPHA,
true,
_offsetArray);
}
}
}
コンストラクタで指定したサイズのBitmapDataを作ってます。_offsetArrayはオクターブ毎のオフセット値を保存する配列で、_speedArrayはオクターブ毎の変化速度に関する係数を保存する配列デス。また、doEnterFrameメソッドをハンドラとしてENTER_FRAMEイベントリスナの登録もしてます。

doEnterFrameメソッドでは、_speedArray配列にしたがってオクターブ毎のオフセット値を更新してパーリンノイズを再生成しています。y方向のオフセットは単純にコンストラクタ時に決めた乱数ぶんずらしてマス。x方向は間欠カオスというのを使ってゆらぎを表現してるツモリですが、効果のほどはビミョウです。

サンプルのflaファイルのフレームアクションはこんなカンジです。
// サイズ
var sw:Number = 320;
var sh:Number = 240;
// 位置
var sx:Number = (stage.stageWidth - sw) / 2;
var sy:Number = (stage.stageHeight - sh) / 2;
// 湯気の色
var sColor:uint = 0xFFFFFF;
// 湯気
var steam:Sprite = new Sprite();
steam.graphics.beginFill(sColor);
steam.graphics.drawRect(0, 0, sw, sh);
steam.graphics.endFill();
steam.x = sx;
steam.y = sy;
steam.cacheAsBitmap = true;
addChild(steam);
// 湯気マスク
var steamMask:Steam = new Steam(sw, sh);
steamMask.cacheAsBitmap = true;
addChild(steamMask);
steamMask.x = sx;
steamMask.y = sy;
steam.mask = steamMask;
画像と同じサイズの白いスプライトsteamを生成して、お好み焼きの画像に重ねてマス。ソイツと同じ位置/サイズでSteamクラスのインスタンスを生成してsteamのマスクにしてます。

ちょっと重いですかねー。

追記
最初は生成したSteamインスタンスはお好み焼きのマスクにしてたんですが、やっぱり考え直して白いスプライトを生成してSteamインスタンスはソイツのマスクにしました。
スポンサーサイト

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

2008.01.28 | | Comments(0) | Trackback(0) | Flash CS3

コメント

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

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

ブログ内検索


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