F-site

[AS3] Starlingはじめました [Edit]

「Starling」は、Flash Player 11の新しい描画機能「Stage3D」にもとづいてつくられた2次元の描画用フレームワークです。Flash Professional CS5.5でStarlingフレームワークを使ってみたい方のために、いくつか解説を書き始めました。これまでのまとめをご紹介します。詳しくは、それぞれの記事をお読みください。

01 まずはインストール

Starlingフレームワークは、Flash Player 11の新しい描画機能Stage3Dにもとづきます。したがって、Flash Player 11の書出しができなければなりません。Flash Player 11は、次期バージョンのFlash CS6から正規サポートされる予定です。それまでの暫定処置として、AdobeからFlash CS5/CS5.5でFlash Player 11のSWFを書出す機能拡張(MXP)が提供されました(図001)。そして、Starlingはオープンソースのフレームワークです。

これらをダウンロードしてインストールする手順は、つぎのノートで説明しています。

• Flash CS5/CS5.5でFlash Player 11のSWFを書出す
• Starlingフレームワークをインストールする

図001■MXPをインストールすると[パブリッシュ設定]に[Flash Player 11]が加わる

02 とにかくStarlingフレームワークを使ってみる

Stage3Dは文法こそActionScript 3.0にしたがうものの、プログラミングの考え方はアセンブラとほぼ変わらない、新しい言語といってもよいです。表示リストの階層もなければ、フレームベースのアニメーションも備わっていません。Starlingには、SpriteやMovieClipといったクラスがあり、addChild()メソッドも使えます。また、addEventListner()メソッドでENTER_FRAMEイベントのリスナーを加えることもできます。これまでのActionScript 3.0と似た感覚でStage3Dによる2次元の描画を扱えるのがStarlingフレームワークなのです。

手始めとして、Starlingフレームワークで描いた矩形に、回転のアニメーションを加えてみます(図002)。

• Starlingフレームワークを使う

図002■正方形のインスタンスをステージの中央で回す

さらに、Quadインスタンスの頂点ごとに異なるカラーやアルファを定めて、グラデーションで塗ります(図003)。

• StarlingフレームワークのQuadインスタンスをグラデーションで塗る

図003■Quadインスタンスの4頂点に異なるカラーとアルファを定める

03 Starlingフレームワークで物理演算エンジンを試す

CPUの負荷が上がりやすい物理演算は、Stage3Dを試したい処理のひとつです。そこで、ふたつの物理演算エンジンを試します。

まず、使いやすさで注目されている「Nape」をStarlingフレームワークです。ビットマップのボールをStarlingフレームワークに置くことから始めます。つぎに、そのボールをNapeの物理演算で自然落下させます。そして、100個のボールを落として、床および互いの間でバウンドさせるムービーをつくります(図004)。

• Starlingフレームワークで物理演算エンジンNapeを使う

図004■ランダムに落とした100個のボールを互いにバウンドさせる

*クリックでサンプルSWFのページが開きます。

つぎに、C++から移植された物理エンジンBox2DFlashです。まずは、矩形のQuadインスタンスを落下させます。それを画面の下に置いた床に弾ませることができたら、矩形のインスタンスを50個まとめて落としてみます(図005)。

• StarlingStarlingフレームワークで物理演算エンジンBox2Dを使う

図005■50個の矩形をランダムに床に落とす

04 Starlingフレームワークでトゥイーンアニメーション

Starlingフレームワークにはstarling.animation.Tweenクラスが備わっています。ただし、Flashにもともとあるfl.transitions.Tweenクラスとは少し使い勝手が違います。StarlingフレームワークのTweenクラスを用いたアニメーションについてご説明します。

• StarlingフレームワークのTweenクラスを使ったアニメーション

05 Starlingフレームワークのリファレンス

Starlingフレームワークのリファレンスは、英文で情報もあまり詳しくありません。解説記事で触れたプロパティやメソッドを少しずつ加えていくつもりです。

• starling.core.Starlingクラス
• starling.textures.Textureクラス
• starling.display.Quadクラス

図006■Stage3D(Starling)とFlashのステージの関係

---

[追記2012/02/08]「starling.display.Quadクラス」と「StarlingフレームワークのQuadインスタンスをグラデーションで塗る」を、それぞれ本文04と02に加えました。

[追記2012/02/15]「StarlingフレームワークのTweenクラスを使ったアニメーション」を本文04に加え、「Starlingフレームワークのリファレンス」の項目番号を05としました。

• [AS3] Starlingはじめました
• [AS3] テキストが入ったAIファイルを読込むと − パンドラの箱
• [AS3] Text Layout Framework(TLF)で悩みがちなこと
• [AS3] 間違いだらけ(？)のMatrix3Dクラスのドキュメント
• [AS3] 外部から読込んだSWFをメモリから消し去るには
• [AS3] Flash Player 11でMovieClipクラスに唯一備わったプロパティMovieClip.isPlaying
• [AS3] Flash Player 11でビットマップのサイズ制限がなくなる
• [AS3] BitmapData.setPixel()とBitmapData.setVector()メソッドでピクセルを塗る
• [AS3] Flash CS5に潜む謎のクラスWorld II − 内緒の物理エンジン
• [AS3] 三角関数で座標を回転するふたつの計算方法