スポンサーサイト

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

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

気泡っぽいパーティクル

粒子がつぎつぎと沸いてくるタイプのサンプルです。






ステージ中央からマウスカーソルと逆の方向に向かって移動する粒子がつぎつぎと生成されます。粒子はだんだん大きくかつ透明度が低くなって、その後だんだん小さく透明度が高くなって最後には消えます。

このサンプルでは、パーティクルとしてスプライトを継承したクラス(Particle)を作りました。フレームイベントで、パーティクルの表示領域となるスプライトを生成しステージに配置、表示領域となるスプライトにパーティクルを配置、マウスの位置から表示領域となるスプライトを回転。という風にしています。

パーティクルは白い円にグローフィルタをかけたもので、y軸方向にゆらぎながらx軸方向に進みます。フレームイベントで透明度やサイズを変更しています。

パーティクルのソースコード(Particle.as)はこんなカンジです。

package {
import flash.display.Sprite;
import flash.display.Graphics;
import flash.filters.GlowFilter;
import flash.events.Event;
/**
* スプライトを拡張したパーティクル
*/
public class Particle extends Sprite {
/** 大きさ */
private var _size:Number;
/** 周期速度 */
private var _span:Number;
/** 周期角度 */
private var _spanRad:Number;
/** 移動速度 */
private var _speed:Number;
/** ゆらぎ係数 */
private var _quiverScale:Number;
/** ゆらぎ値 */
private var _quiver:Number;
/**
* コンストラクタ。
* @param size 大きさ
* @param span 周期速度
* @param speed 移動速度
* @param quiver ゆらぎ係数
*/
public function Particle(size:Number, span:Number, speed:Number, quiverScale:Number) {
_size = size;
_span = span;
_speed = speed;
_quiverScale = quiverScale;
// 初期処理
init();
}
/**
* 初期処理。
*/
private function init():void {
// 白い円
var g:Graphics = graphics;
g.beginFill(0xFFFFFF);
g.drawCircle(0, 0, _size);
g.endFill();
// グローフィルタ
var filter:GlowFilter = new GlowFilter(0xFFFFFF, 1.0, 8, 8, 3, 3);
filters = [filter];
// ゆらぎの初期値
_quiver = Math.random();
// 周期角度の初期値
_spanRad = 0;
alpha = Math.sin(_spanRad);
}
/**
* フレームイベントハンドラ。
*/
private function doEnterFrame(e:Event):void {
var sin:Number = Math.sin(_spanRad);
// アルファ値
alpha = sin;
// サイズ
scaleX = scaleY = sin;
// 移動
x += _speed;
// ゆらぎ
if (_quiver < 0.5) {
_quiver += _quiver * _quiver * 2;
} else {
_quiver -= (1 - _quiver) * (1 - _quiver) * 2;
}
y += (_quiver - 0.5) * _quiverScale;
// 角度を進める
_spanRad += _span;
}
/**
* ふるまいを開始します。
*/
public function start():void {
addEventListener(Event.ENTER_FRAME, doEnterFrame);
}
/**
* ふるまいを停止します。
*/
public function stop():void {
removeEventListener(Event.ENTER_FRAME, doEnterFrame);
}
/**
* 周期角度を戻します。
* @return 周期角度
*/
public function get spanRad():Number {
return _spanRad;
}
}
}
ParticleクラスはSpriteを継承したクラスで、コンストラクタで4つのパラメータをとります。パラメータはそれぞれパーティクルの大きさ/変化速度/移動速度/ゆらぎの大きさデス。

コンストラクタではinitメソッドを実行して、イロイロと初期処理をしています。まずgraphicsプロパティを使って白い円を描画して、グローフィルタをかけてます。ゆらぎには間欠カオスというのを使ってるのでソレ用のパラメータの初期化、変化の進行度合いのパラメータの初期化もしてます。

startメソッドを実行するとフレームイベントハンドラのdoEnterFrameメソッドが登録され、stopメソッドで解除されます。そうすることで粒子の振る舞いの開始/停止を制御しています。

doEnterFrameメソッドでは、変化度合いのパラメータ_spanRadを用いてalpha/scaleX/scaleYを設定しています。_spanRadの正弦をソレゾレにセットしてるので、最初は透明/スケール0で、だんだんはっきり大きくなってまた小さく透明になるというカンジに変化します。

移動は、x軸方向はフレーム毎にコンストラクタで指定した分だけ移動します。y軸方向は間欠カオスを使ってゆらがせてマス。

フラッシュ側のフレームアクションでこのParticleクラスのインスタンスを生成することで、パーティクルを描画しています。フレームアクションはこんなカンジです。
// 発生頻度
var rate:Number = 0.8;
// 気泡の最小サイズ
var sizeMin:Number = 3.0;
// 気泡の最大サイズ
var sizeMax:Number = 4.6;
// 最小周期速度
var spanMin:Number = 0.06;
// 最大周期速度
var spanMax:Number = 0.12;
// 最小速度
var speedMin:Number = -4.5;
// 最大速度
var speedMax:Number = -3.5;
// フレームイベント
addEventListener(Event.ENTER_FRAME,
function (e:Event):void {
// 発生頻度に応じて気泡を生成
if (Math.random() < rate) {
createBubble();
}
});

// 気泡を生成します。
function createBubble():void {
// 表示領域
var box:Sprite = new Sprite();
box.x = stage.stageWidth / 2;
box.y = stage.stageHeight/ 2;
addChild(box);
// サイズ
var size:Number = Math.random() * (sizeMax - sizeMin) + sizeMin;
// 周期速度
var span:Number = Math.random() * (spanMax - spanMin) + spanMin;
// 速度
var speed:Number = Math.random() * (speedMax - speedMin) + speedMin;
// 気泡生成
var bubble:Particle = new Particle(size, span, speed, 2);
box.addChild(bubble);
// フレームイベント
var boxFrameHandler:Function = function (e:Event):void {
if (bubble.spanRad > Math.PI) {
bubble.stop();
box.removeEventListener(Event.ENTER_FRAME, boxFrameHandler);
box.parent.removeChild(box);
}
};
box.addEventListener(Event.ENTER_FRAME, boxFrameHandler);
// 進行角度
box.rotation = Math.atan2(mouseY - box.y, mouseX - box.x) * 180 / Math.PI;
bubble.start();
}
フレームイベントリスナでは、設定した発生頻度に応じてパーティクルを生成します。このサンプルでは発生頻度は8割デス。

createBubbleメソッドが、パーティクルを生成するメソッドです。表示領域用のSpriteインスタンス(box)を生成してステージ中央に設置して、乱数を使ってパラメータを作成してPartibleインスタンス(bubble)を生成してboxにaddChildしています。

そのままだとbubbleはx軸方向に進むので、boxのrotationプロパティを設定することでマウスカーソルとは逆の方向に進むようにしています。

また、boxのフレームイベントハンドラで表示しているbubbleの進行状態を調べて、180度に達していたら消滅させています。これによってサイズ小/透明→サイズ大/不透明→サイズ小/透明と変化して消滅するという風になります。

スポンサーサイト

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

2008.04.26 | | Comments(1) | Trackback(0) | Flash CS3

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

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

ブログ内検索


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