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 のソースパスの通ったフォルダに配置します。


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.実際にコードを書く

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

このデモのソースコードは以下の通りとなります。「使い方」の 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行ぐらいありますが実質のスクリプトはそんなになく、シンプルにパーティクルのスクリプトを書けることが分かります。

考察

ソースコードから、パーティクル演出のカスタマイズの鍵は「イニシャライザー」と「アクション」にあることが分かります。Stardust には豊富なイニシャライザーとアクションが用意されており、それらを利用することで自由度の高いパーティクル演出を作成することができます。

次回のチュートリアルではイニシャライザーとアクションがどのような役割を果たしているか説明していきます。

続く…

関連記事

投稿者 : 池田 泰延

BookMark

いかがでしたでしょうか、ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加

Comment/Trackback %件