Stardustを使ってAS3のパーティクル表現を学ぶ Vol.01

2010年01月05日 (火)
Tweet

Stardustを使ってAS3のパーティクル表現を学ぶ Vol.01

ActionScript 3.0 のパーティクルエンジンである Stardust (スターダスト)についてチュートリアル記事を書いていこうと思います。

以前、さらっと概要を紹介しましたが、Stardust は MIT ライセンスで公開されているため個人・商用利用ともに扱いやすい AS3 のライブラリです。Stardust はカスタマイズしやすいように設計されたライブラリでもあり、本家サイトではバリエーション豊富で魅力的なサンプルがいくつも紹介されています。(開発者のブログはこちら「CJ’s Blog」)

第1回のチュートリアルでは Stardust を動かすに当たり、最小限のソースコードで動作する使い方を説明します。

1.ライブラリの導入

Google Code からライブラリをダウンロードします。今回はソースファイルが格納されている rar ファイル「Stardust 1.1.132 Beta.rar」をダウンロードし解凍します。src フォルダに含まれているソースファイルがライブラリなので、これを fla のソースパスの通ったフォルダに配置します。

stardust-particle-engine – Project Hosting on Google Code

flaと同じ階層にStardustが格納されている「idv」フォルダを設置すると良いでしょう。

※Main.asは本記事中で説明するソースコードを記述したクラスファイルです。

2.ライブラリの使い方

ライブラリは次の 7 ステップで動作させます。

1.Clock を作る
2.エミッターを作る(1の clock を引数に使う)
3.レンダラーを作る
4.レンダラーの addEmitter() メソッドを使って、エミッターを追加する
5.エミッターの addInitializer() メソッドを使って、イニシャライザーを登録する
6.エミッターの addAction() メソッドを使って、アクションを登録する
7.Event.ENTER_EVENT イベントとかで、エミッターの step() メソッドを呼び出し、表示を更新する

この7ステップは作法的なものなので、公式 Manual に書かかれている内容を翻訳したものとなります。

ちなみにエミッターの作り方は以下の 2 種類あります。

Emitter2D クラスのインスタンスをadd系メソッドを使って拡張
Emitter クラスを extends (拡張)して内側からadd系メソッドを使って拡張

今回は説明が簡単な後者の方法でソースコードを解説します。どちらも大差のある話ではないので、慣れてきたら自分にあった使い方を使うと良いでしょう。

3.実際にコードを書く

パーティクルが画面中央から噴出するデモを試してみましょう。まずは、完成したデモはこちらになります。

Stardust デモ

このデモのソースコードは以下の通りとなります。「使い方」の 7 つのステップをコメントに記述していますので、順にステップを確認するとわかりやすいと思います。

// ドキュメントクラス Main.as
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.emitters.*;
  import idv.cjcat.stardust.twoD.initializers.*;
  import idv.cjcat.stardust.twoD.zones.*;
  import idv.cjcat.stardust.twoD.renderers.*;

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

    // コンストラクタ
    public function Main() {

      // パーティクルを格納するムービークリップを作成
      var mc:MovieClip = new MovieClip();
      mc.x = mc.y = 200;
      addChild(mc);

      //-- パーティクルシステムの構築
      // [1]clockを作成
      // 1ステップに発生させたい数値を指定
      var clock: SteadyClock = new SteadyClock(1);
      // [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(1, 0)));
      // パーティクルのライフ(生存)を指定
      emitter.addInitializer(new Life(new UniformRandom(50, 0)));

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

      // エンターフレームイベントの登録
      addEventListener(Event.ENTER_FRAME, loop);
    }

    // エンターフレームイベント
    private function loop(e:Event):void {
      emitter.step(); // [7] エミッター更新
    }
  }
}

// 円 (プライベートクラス)
import flash.display.*;
class MyCircle extends Sprite {
  public function MyCircle() {
    graphics.beginFill(0xCC0000); //赤色
    graphics.drawCircle(0, 0, 10); // 円を描く
  }
}

コメントを一行一行入れているので70行ぐらいありますが実質のスクリプトはそんなになく、シンプルにパーティクルのスクリプトを書けることが分かります。