Starling は Stage3D を利用した高速な 2D 描画の実現を目指したフレームワークです。以前の記事 (Starling (ActionScript 3 の 2D フレームワーク) のご紹介のつづき) で概要と簡単な使い方を紹介しました。
Starlig では、アニメーションに 3 種類の方法が使えます。今回から、何回かに分けて、それぞれの書き方を紹介します。従来の表示リストのアニメーションと比較してみて下さい。
開発環境の準備
Starling の開発環境は、Flash Player 11 と AIR 3 への対応が前提です。現時点では、唯一サポートされた環境である Flash Builer 4.6 の利用をお勧めします。
Flash Professional CS5 もしくは CS5.5 を使う場合は、以下の記事で紹介した機能拡張が便利です。
それから、Starling フレームワークは github から入手できます。
上記リンクからダウンロードした ZIP に含まれている SWC ファイルをパスに追加すると、Starling アプリを開発できるようになります。
また、描画モードに direct を指定しないと、パブリッシュに成功しても画面には表示されません。
ですので、SWF であれば、wmode=direct を、AIR であれば、<renderMode>direct</renderMode> の指定を忘れないようにしましょう。
Starling インスタンスの生成
Starling で描画をするには、まず Starling のインスタンスを生成し、次に start() メソッドを呼びます。
この箇所は、どのような Starling コンテンツでも、ほぼそのまま再利用できます。下が、その (たぶん) 最も単純な例ですので、コピペして使ってみてください。Flash Professional の場合は、Fla ファイルのドキュメントクラスにするのが楽だと思います。
import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import starling.core.Starling; [SWF(width="320",height="480",frameRate="60",backgroundColor="#000000")] public class StartStarling extends Sprite { private var myStarling:Starling; public function StartStarling() { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // Starlingのインスタンスを生成 myStarling = new Starling(MyStarlingSprite, stage); // 描画処理を開始 myStarling.start(); } }
Starling のコンストラクタの第 1 引数は、Starling の Sprite です。この Sprite の内容が実際の画面描画に使われます。描画情報は、Flash Player の Sprite と同様に、子オブジェクトのリスト構造として保持されます。第 2 引数は、表示オブジェクトを描画する stage です。
Starling のコンストラクタは 5 つの引数を持ちますが、3 つ目以降はデフォルト値を持つため、通常、指定は不要です。
明示的にソフトウェアでの 3D 描画を指定したい場合には、5 つの引数を記述することになります。最後の引数が描画モードの指定です。
// 5つ目めの引数で描画モードを指定 myStarling = new Starling(Game, stage, null, null, Context3DRenderMode.SOFTWARE);
これで、どの環境でも GPU の描画機能はオフになります。
もし、実行中に、ソフトウェア描画にフォールバックしているかを知りたければ、Starling インスタンスの context.driverInfo 属性から確認できます。
以下は、context3DCreate イベントを使って、Stage3D の初期化後に、ソフトウェア描画であれば、フレームレートを半分に設定するという例です。
stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onContext3DCreate); private function onContext3DCreate(event:Event):void { if(Starling.context.driverInfo.toLowerCase().indexOf("software")!=-1) { Starling.current.nativeStage.frameRate = 30; } }
Starling 実行時のエラーチェックを行いたいときは、start() を呼ぶ前に、以下の設定を追加します。
myStarling.enableErrorChecking = true;
ただし、エラーチェックを行うとパフォーマンスへの影響が大きいので、デバッグ時以外は設定しない方が良さそうです。
その他、Starling クラスの機能は、別の機会に紹介する予定です。とりあえず、オンラインのドキュメントはこちらです。 (Starling@Starling Framework Reference)
カスタム Sprite の作成
(注:これ以降、Sprite などのクラス名は全て、特に説明が無い限り Starling フレームワークのクラスを指します。慣れるまで間違えやすいので、注意してください)
さて、次は、Starling のコンストラクタの第 1 引数に指定するための Sprite のカスタムクラスを作成します。
作成手順は、表示用のオブジェクトを作成して Sprite に addChild() メソッドで追加する、という、従来の表示リストと同様の手順です。
Stage3D の描画の単位は 3 角形でしたが、Starling では、3 角形を 2 つ合わせた矩形が基本になります。
そこで、矩形に対応する Quad クラスのインスタンスを表示する例からはじめます。下は、そのサンプルです。
このサンプルと、記事の最初のサンプルがあれば、とりあえず画面に矩形を表示するところまではできるはず、です。
import starling.display.Quad; import starling.display.Sprite; public class MyStarlingSprite extends Sprite { private var myQuad:Quad; public function MyStarlingSprite() { // Quadのインスタンスを生成 myQuad = new Quad(200, 200); // とりあえず塗りの色を指定 myQuad.color = 0xABCDEF; // SpriteにQuadのインスタンスを追加 addChild(myQuad); } }
上のコードを実行すると、矩形が画面左上に描画されます。矩形を画面中央に表示するには、以下のように Quad の座標を設定します。
myQuad.x = stage.stageWidth - myQuad.width >> 1; myQuad.y = stage.stageHeight - myQuad.height >> 1;
ただ、上のコードは、stage 属性へのアクセスを含みます。そのため、カスタム Sprite の初期化が終わる前に実行されるとエラーになってしまいます。
そこで、addedToStage イベントを利用することにします。この addedToStage イベントは Starling のイベントですが、Flash Player の addedToStage イベントと同じように Stage が利用可能になったことを通知してくれます。
import starling.events.Event; public class MyStarlingSprite extends Sprite { private var myQuad:Quad; public function MyStarlingSprite() { // addedToStageイベントに対するリスナを追加 addEventListener(Event.ADDED_TO_STAGE, onAddedToStage); } private function onAddedToStage(e:Event):void { // Quadのインスタンスを生成 myQuad = new Quad(200, 200); myQuad.color = 0xABCDEF; myQuad.x = stage.stageWidth - myQuad.width >> 1; myQuad.y = stage.stageHeight - myQuad.height >> 1; // SpriteにQuadのインスタンスを追加 addChild(myQuad); } }
ということで、無事 Starling を使った表示はできたでしょうか?
次回は、矩形を動かす方法その 1 をご紹介する予定です。
コメントする