Flash Player 11の新機能Stage3Dですが、上条さんのブログでも紹介されているとおりStage3Dは3Dだけでなく2DでもGPUを使って描画できます。2DにおいてはStarling(スターリン)というフレームワークが存在し、これを使うことで2次元表現でもGPUの圧倒的なパフォーマンスを得ることができます。Adobe MAX 2011で受講したセッションのまとめでも紹介しましたが、Starling FrameworkはAdobe側もフィーチャーしており、今後が期待できるフレームワークの一つと考えて間違いなさそうです。ちなみStarlingについては次の記事が参考になります。
※本記事は2013年9月8日にライブラリのアップデートにあわせて更新しました。
前置きが長くなりましたが、私もStarling Frameworkを使って2点のデモを作ってみました。ソースコードも公開しているので、よかったら参考にしてみてくださいませ。
gotoAndLearn().で紹介されている方法で作ったのですが、スクリプトの分量もかなり短くて簡単に作ることができました。以下、作り方を紹介します。
まずはonline particle editor (無料)もしくはParticle Designer を使ってパーティクルを生成します。どちらのアプリも画面の設定項目を弄るだけで自由にパーティクル表現が作れるので、触っていて夢中になってしまいます。最終的にはどちらもXMLで記載されたパーティクル情報ファイル(pexファイル)を出力できるので、それを書きだしておきます。
▼online particle editorはGUIでパーティクルを作ることのできるオンラインサービス
次にStarlingフレームワークとエクステンションのソースファイルを用意しておきます。
一応テンプレートとなるコードを用意したので、こちらを参考にドキュメントクラスを作っておきます。
上記のGUIエディターで作成したpexファイルとテクスチャをActionScriptに埋め込みます。
[Embed(source = "texture.png")]private static var ParticleImage:Class;[Embed(source = "particle.pex", mimeType = "application/octet-stream")]private static var ParticleData:Class;
パーティクルを自動生成するStarlingエクステンションのPDParticleSystemクラスを使って次のコードを記述します。
particles = new PDParticleSystem(XML(new ParticleData()),Texture.fromBitmap(new ParticleImage()));particles.start();Starling.juggler.add(particles);addChild(particles);
以上のたったこれだけの手順でクールなパーティクルを作ることができました。
Particle Designerを使えば他にも様々な表現のパーティクルがそのままStarling Frameworkで使えるので色々試してみても楽しいと思います。
▼Particle DesignerはiOS用のパーティクル生成ソフト。このデータがそのままStarling Frameworkにも使える。
パーティクルは従来の方法(BitmapDataを使う方法)でもさまざまな高速化手法が存在しましたが、Stage3Dを使うとさらにCPUの使用率を下げることができるのが嬉しいポイントです。これからはStage3Dを使ったパーティクル表現が生まれてくるだろうと思うので、今後が楽しみです。
▼パーティクルデモのCPU使用率はたった20%程度
投稿者 :池田 泰延
ブックマークはこちらからどうぞ。
シャア大佐 より:ソースコード大感謝です。ソースがあると学習速度が通常の3倍早くなるので助かります。
それにしてもパーティクル滑らかに動きますね。そしてCPU使用率が低いのは開発者にとって嬉しいですな。
今までパーティクル表現はAEで作ってFlashに読み込んでいたのですが、これからはFlash単体でも結構いけそうですね。
Adobeのフレームワークの実力とやらを見せてもらった気がします。
ゐるゑ らくがき星系 » クリスマスツリー より:[…] ★メモhttp://www.adobe.com/jp/joc/devnet/flash/articles/stage3d.htmlhttp://clockmaker.jp/blog/2011/11/starling-framework/ […]
