AS3のオープンソースライブラリ「stardust」でパーティクルをお勉強(1)

2010年01月12日  投稿者:ハセガワ
パーティクルって何?というレベルの筆者がわからないなりにどうにかこうにかAS3を勉強しようとする特集
ブックマークする:

進行状況

→第6回:何か作りたい(1):よくあるきらきらしたやつ(ソースあり)
→第5回:Classの中身(2):Emitter2Dクラス(調査中)
→第4回:Classの中身(1):Clockクラス(調査中)
→第3回:お勉強(3):パーティクルがよける…Deflectorクラスで障害物
→第2回:お勉強(2):マウスで作る、やめる…Emitter.active
→第1回:お勉強(1):とりあえず何か出来た

パーティクルを生成する手順(2D)

stardustを使ってパーティクルを作るための基本的な順番は、公式マニュアルによると

(1)Clockを作る…パーティクル発生の頻度
(2)Emitterを作ってclockをセット…エミッターって発生装置みたいなもの(?)
(3)Rendererを作る…画面表示用オブジェクト(?)
(4)Renderer.addEmitter( Emitter )でエミッターをレンダラーにセット
(5)Emitter.addInitializer( 発生場所とか発生させるspiteとか )でエミッターを初期設定
(6)Emitter.addAction( 寿命の長さとか重力とか )で実際の動きを設定
(7)Event.ENTER_FRAMEやTimerEvent.TIMERに、Emitter.step()を関連づけて表示を更新

となっている。

ハセガワです。ここ2年ほど地味かつルーティンなお仕事に忙殺され、
新しいことに全く手をつけていなかったのですが、何かパーティクルというのが面白そうなのでやってみる。

筆者環境とAS3レベル

WindowsXP SP3 / Adobe FlashCS4 10.0.2
辞書があれば、巷に流れるソースファイルの内容の半分くらいは何書いてあるか理解できる程度
相変わらずお仕事はAS2どまり。

パーティクルとは

こんなん(wonderfl:liquid10000)です。
ASCII.jpデジタル用語辞典では、

3Dグラフィックのモデリング技法のひとつ。自然界に存在する複雑で不規則な形状をしている火、煙、雲、霧、草、髪などを表現するために考案された。このようなポリゴンや曲面だけでは表現し切れない形状を、微小な粒子の集まりとして記述し、それが動き回る様を確率モデルとして処理する。

とあります。

「stardust」とは

オープンソースのAS3用パーティクル生成ライブラリです。(公式ページ)
私はこの記事(ClockMaker.jp:パーティクル表現のためのAS3ライブラリ「Stardust」)で初めて知りました。
インストールやサンプル作成も、この記事(ClockMaker.jp:Stardustを使ってAS3のパーティクル表現を学ぶ Vol.01)を参考にさせていただきました。
インストールなどは、そちらの記事を読まれた方が大変わかりやすいと思います。

とりあえず何か作りたいので

寒波が来たから、横殴りの吹雪を作ってみよう。

FlashPlayerをインストールするか、JavaScriptをONにしてください。
サンプルソース(上記の記事中のソースをちょっといじっただけ)
 
package {
	import flash.display.*;
	import flash.events.*;
	import idv.cjcat.stardust.common.actions.*;
	import idv.cjcat.stardust.common.clocks.*;
	import idv.cjcat.stardust.common.emitters.*;
	import idv.cjcat.stardust.common.renderers.*;
	import idv.cjcat.stardust.common.initializers.*;
	import idv.cjcat.stardust.common.math.*;
	import idv.cjcat.stardust.twoD.actions.*;
	import idv.cjcat.stardust.twoD.fields.*;
	import idv.cjcat.stardust.twoD.emitters.*;
	import idv.cjcat.stardust.twoD.initializers.*;
	import idv.cjcat.stardust.twoD.zones.*;
	import idv.cjcat.stardust.twoD.renderers.*;

	public class Raindrops extends Sprite {
		private var emitter:Emitter2D;// エミッター
		private var renderer:Renderer;// レンダラー

		// コンストラクタ
		public function Raindrops() {
			// パーティクルを格納するムービークリップを作成
			var mc:MovieClip = new MovieClip();
			mc.x=mc.y=0;
			addChild(mc);

			//-- パーティクルシステムの構築
			// [1]clockを作成
			// 1ステップに発生させたい数値を指定
			var clock:SteadyClock=new SteadyClock(3);
			// [2]エミッターを作成
			emitter=new Emitter2D(clock);
			// [3]レンダラーを作成 (MCを指定)
			renderer=new DisplayObjectRenderer(mc);
			// [4]レンダラーにエミッターを追加
			renderer.addEmitter(emitter);

			// [5]イニシャライザーを登録
			// パーティクルのアイテムを指定
			emitter.addInitializer(new DisplayObjectClass(MyCircle));
			// パーティクルにかかる力を指定
			emitter.addInitializer(new Velocity(new LazySectorZone(0.01, 0)));
			// パーティクルのライフ(生存)を指定
			emitter.addInitializer(new Life(new UniformRandom(100, 5)));
			emitter.addInitializer(new Position(new Line( -100, 600, 0, 0 )));

			// [6]アクションを登録
			emitter.addAction(new Age());// 寿命を有効化
			emitter.addAction(new DeathLife());// 消えるを有効化
			emitter.addAction(new Accelerate(0.2));// 加速を有効化
			emitter.addAction(new Move());// 移動を有効化

			emitter.addAction(new ScaleCurve(1,7));

			var bmpField :BitmapField = new BitmapField();
			bmpField.max=0.1;
			bmpField.massless=false;
			bmpField.scaleX=bmpField.scaleY=10;

			var gravity:Gravity = new Gravity();
			gravity.addField(bmpField);
			gravity.addField(new UniformField( 0.2, 0.1));

			emitter.addAction(gravity);// 重力

			stage.addEventListener(MouseEvent.CLICK, startParticle);

		}
		private function startParticle( e:MouseEvent ):void {
			addEventListener(Event.ENTER_FRAME, loop);
		}
		// エンターフレームイベント
		private function loop(e:Event):void {
			emitter.step();// [7] エミッター更新
		}
	}
}
import flash.display.*;
// 円 (プライベートクラス)
class MyCircle extends Sprite {
	public function MyCircle() {
		var colorType:uint=0xffffff;
		var snowSize:int=Math.random()*2+1;
		graphics.beginFill( colorType , 1 );//赤色
		graphics.drawCircle(snowSize,snowSize,snowSize);// 円を描く
	}
}
できなかったこと、やりたいこと。

・パーティクル生成中にステージクリックでパーティクル生成ストップ(stopとかあるかと思ってたけどなかった)できたっぽい
傘を表示させて、それにあたると雪が跳ね返る(deflect?)まあ、できたような

僕が買った、もしくは買う予定の参考書
ブックマークする
FlaTech+を購読する
  • 全記事を含むRSSfeed
  • このページをブックマーク: