Starling を使った Flash コンテンツ表示の基本

それから、Starling フレームワークは github から入手できます。

• PrimaryFeather/Starling-Framework/zipball

上記リンクからダウンロードした 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 をご紹介する予定です。