サイトトップ
Director Flash 書籍 業務内容 プロフィール

Adobe Flash非公式テクニカルノート

Starlingフレームワークを使う

ID: FN1201003 Product: Flash CS5 and above Platform: All Version: 11 and above/ActionScript 3.0

「Starling」は、Flash Player 11の新しい描画機能Stage3Dにもとづいてつくられた2次元の描画用フレームワークです。本稿では、Flash Professional CS5.5による使い方を簡単にご紹介します(CS5でもほぼ同様)。予めつぎのふたつの準備を済ませてください。

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

01 Starlingフレームワークで何からつくり始めるか
Starlingフレームワークで表示されるオブジェクトは、Flashコンテンツの表示リストとは別のStage3Dの画面に描かれます。そして、Stage3DのレイヤーはFlashのステージの背面です。Starlingフレームワークは、このStage3Dのレイヤーに表示リストの階層をつくります。したがって、Starlingのコンテンツは、すべてFlashコンテンツの後ろに置かれることになります(図001)。

図001■StarlingコンテンツはFlashのステージの背面に置かれる
図001

Starlingフレームワークの表示リストを組立てるには、まずFlashコンテンツのメインタイムラインに当たる最上位の表示オブジェクトをつくらなければなりません。そして、Flashのメインタイムラインと違ってフレームアクションは書けませんから、スクリプトはクラスとして定めます。つまり、Flashのドキュメントクラスに当たるStarlingフレームワークのクラスを定義します。ここでは、Starlingフレームワークの「ルートクラス」と呼ぶことにします。

Flashのドキュメントクラスは、Spriteクラスを継承させることが多いでしょう。けれど、Starlingフレームワークの表示リストには、Starlingの表示オブジェクトしか加えられません。もっとも、Starlingフレームワークには、あえてFlashと同じ名前のクラスがいくつも備えられています。Spriteクラスもそのひとつで、Starlingのルートクラスにスーパークラスとして定められます。ただし、フルネーム(完全修飾名)はstarling.display.Spriteで、flash.display.Spriteとは異なるクラスであることにご注意ください。


02 Starlingフレームワークのルートクラスを定める
それでは、starling.display.Spriteクラスを継承したStarlingフレームワークのルートクラス(MySprite)を定めましょう[*1]。

package {
  import starling.display.Sprite;
  public class MySprite extends Sprite {
    public function MySprite() {
      // 処理内容
    }
  }
}

Starlingフレームワークのクラスを継承したという以外、Flashのクラス定義ととくに違う点はありません。このクラス(MySprite)は、このままルートクラスとして使えます。もっとも、画面には何も表れません。そこで、正方形をひとつ描いてみます。

実は、starling.display.Spriteクラスは、FlashのSpriteクラスと比べて、使い途がかなり絞り込まれています。具体的には、表示リストに子の表示オブジェクトをもつことに徹し、インスタンス自身には直接描画できないのです。

そこで、矩形が描けるstarling.display.Quadクラスのインスタンスをつくって、子として表示リストに加えます。コンストラクタメソッドの引数には、幅と高さ、およびRGBカラーを渡します。ちなみに、Quadオブジェクトは逆に、子インスタンスはもてません。

new Quad(幅, 高さ, RGBカラー)

つぎのスクリプト001に定めたStarlingルートクラスは、50×50ピクセルの青い矩形をQuadオブジェクトでつくり、子として表示リストに加えて座標(50, 50)の位置に表示します。

スクリプト001■青い正方形を含むStarlingルートクラスの定義
    // ActionScript 3.0クラス定義ファイル: MySprite.as
  1. package {
  2.   import starling.display.Sprite;
  3.   import starling.display.Quad;
  4.   public class MySprite extends Sprite {
  5.     private var square:Quad;
  6.     private var nUnit:Number = 50;
  7.     public function MySprite() {
  8.       square = new Quad(nUnit, nUnit, 0x0000FF);
  9.       addChild(square);
  10.       square.x = nUnit;
  11.       square.y = nUnit;
  12.     }
  13.   }
  14. }

子インスタンスを表示リストに加えるaddChild()メソッドが備わっていたりしますので、Quadクラスとimport宣言のパッケージ(starling.display)以外Starlingフレームワークだからという違いは感じないのではないでしょうか。

[*1] クラスの定義の仕方については「ActionScript 3.0で始めるオブジェクト指向スクリプティング」第18回「カスタムクラスを定義する」、また継承の定めは同第22回「MovieClipシンボルにクラスを定義する」をお読みください。

03 Starlingフレームワークの初期化
新たなStarlingフレームワークのオブジェクトをつくり、そこにルートクラスのインスタンスを加えるのがstarling.core.Starlingクラスです。Starlingクラスのコンストラクタメソッドに、引数としてルートクラスとFlashのStageオブジェクトを渡して呼出します。

var myStarling:Starling = new Starling(Starlingのルートクラス, FlashのStageオブジェクト);

そして、インスタンスに対するStarling.start()メソッドの呼出しにより、Starlingフレームワークの描画が始まります。

myStarling.start();

このStarlingフレームワークの初期化は、FLAファイルの側から行います。今回は、つぎのスクリプト001をフレームアクションとして書くことにしましょう。なお、ルートクラス(MySprite)のASファイルは、FLAファイルと同じ場所に置きます。

スクリプト002■Starlingフレームワークを新たにつくって描画する
    // フレームアクション: メインタイムライン
  1. import starling.core.Starling;
  2. var myStarling:Starling = new Starling(MySprite, stage);
  3. myStarling.start();

[ブラウザプレビュー]すると、Starlingフレームワークが新たにつくられ、座標(50, 50)の位置に50ピクセル四方の青い正方形が描かれます(図002)。

図002■画面に青い正方形が描かれる
図002

StarlingフレームワークによりせっかくStage3Dの力が使えるのに、動かない画像ではつまりません。つぎは、この正方形を回してみましょう。


04 Starlingフレームワークのアニメーション
Starlingフレームワークでは、enterFrameイベント(定数Event.ENTER_FRAME)をリスナーに送れます。したがって、アニメーションはこのイベントで扱います。もちろん、イベントリスナーは、addEventListener()メソッドで加えます。青い正方形を描く前掲スクリプト001のルートクラス(MySprite)に、回転するアニメーションの処理を加えたのがつぎのスクリプト003です。

スクリプト003■青い正方形を回転するStarlingルートクラスの定義
    // ActionScript 3.0クラス定義ファイル: MySprite.as
  1. package {
  2.   import starling.display.Sprite;
  3.   import starling.display.Quad;
  4.   import starling.events.Event;
  5.   public class MySprite extends Sprite {
  6.     private var square:Quad;
  7.     private var nUnit:Number = 50;
  8.     public function MySprite() {
  9.       square = new Quad(nUnit, nUnit, 0x0000FF);
  10.       addChild(square);
  11.       square.x = nUnit;
  12.       square.y = nUnit;
  13.       addEventListener(Event.ENTER_FRAME, rotate);
  14.     }
  15.     private function rotate(eventObject:Event):void {
  16.       square.rotation += 0.1;
  17.     }
  18.   }
  19. }

一見したところでは、ActionScript 3.0で書くおなじみの回転のアニメーションです。ただ、注意するところがふたつあります。

第1に、Stage3Dの描画はフレームベースでは行われません。つまり、Event.ENTER_FRAMEイベントは、Starlingフレームワークがわざわざ用意してくれたものです。そのため、import宣言に加わったイベントクラスは、starling.events.Eventになっています。

第2は、少し細かいですが、rotationプロパティの単位です。Flashの(flash.display.)DisplayObject.rotationプロパティと異なり、度数でなくラジアンで定めます。Starlingフレームワークでは、角度はラジアンに統一されています。

[パブリッシュプレビュー]でアニメーションを確かめると、青い正方形のQuadインスタンスが回ります。ただし、もちろん左上角の基準点が中心になります(図003)。

図003■Quadインスタンスが左上角の基準点を中心にして回る
図003

Flashであれば、Spriteインスタンスに入れ子にして子インスタンスの位置をずらすか、Matrixクラスにより座標変換をかけるところでしょう。けれど、Starlingフレームワークでは変形の原点がずらせます。

QuadインスタンスのpivotX/pivotYプロパティで、回転の原点を正方形の中心にずらしたのが、つぎのスクリプト004です。なお、初期化のステートメントが増えてきましたので、そのためのメソッド(initialize())を別に設けました。

スクリプト004■青い正方形を中心から回転するStarlingルートクラスの定義
    // ActionScript 3.0クラス定義ファイル: MySprite.as
  1. package {
  2.   import starling.display.Sprite;
  3.   import starling.display.Quad;
  4.   import starling.events.Event;
  5.   public class MySprite extends Sprite {
  6.     private var square:Quad;
  7.     private var nUnit:Number = 50;
  8.     public function MySprite() {
  9.       initialize();
  10.     }
  11.     private function initialize():void {
  12.       square = new Quad(nUnit, nUnit, 0x0000FF);
  13.       addChild(square);
  14.       square.x = nUnit;
  15.       square.y = nUnit;
  16.       square.pivotX = nUnit / 2;
  17.       square.pivotY = nUnit / 2;
  18.       addEventListener(Event.ENTER_FRAME, rotate);
  19.     }
  20.     private function rotate(eventObject:Event):void {
  21.       square.rotation += 0.1;
  22.     }
  23.   }
  24. }

[パブリッシュプレビュー]を確かめれば、青い正方形のQuadインスタンスが中心を原点として回ります(図004)。

図004■Quadインスタンスがその中心を原点にして回る
図004


05 StarlingのStageオブジェクトを参照する
Starlingフレームワークの表示オブジェクトは、01「Starlingフレームワークで何からつくり始めるか」に述べたとおり、Flashのステージとは別のレイヤーに描かれます。しかし、starling.display.Stageクラスが備わっており、Starlingフレームワークはそのオブジェクトを自動的につくり、表示リストの頂点に置きます。

Stage.stageWidth/Stage.stageHeightプロパティでStageオブジェクトの大きさがわかりますので、Quadインスタンスを中央に置くことにします。Stageオブジェクトは、インスタンスのstageプロパティで参照します。けれど、初期化のメソッド(initialize())の中でつぎのようにこれらのプロパティを使うと、「nullのオブジェクト参照」だというエラーが示されます(図005)。

public function MySprite() {
  initialize();
}
private function initialize():void {
  square = new Quad(nUnit, nUnit, 0x0000FF);
  addChild(square);
  square.x = stage.stageWidth / 2;
  square.y = stage.stageHeight / 2;
  square.pivotX = nUnit / 2;
  square.pivotY = nUnit / 2;
  addEventListener(Event.ENTER_FRAME, rotate);
}

図005■「nullのオブジェクト参照」だというエラーが示される
図005

ルートクラスのコンストラクタメソッドが呼出されるとき、インスタンスはまだStageオブジェクトを頂点とする表示リストには加えられていません。そのため、stageプロパティの値がnullになってしまうのです。

しかし、ここでもStarlingフレームワークには、addedToStage(定数Event.ADDED_TO_STAGE)という見覚えのあるイベントが用意されています。このイベントを待って初期化すれば、Stageオブジェクトも正しく参照できます。初期化のメソッド(initialize())をaddedToStageイベントのリスナーに加えたのが、つぎのスクリプト005です。

スクリプト005■青い正方形をステージの中心に置いて回転するStarlingルートクラスの定義
    // ActionScript 3.0クラス定義ファイル: MySprite.as
  1. package {
  2.   import starling.display.Sprite;
  3.   import starling.display.Stage;
  4.   import starling.display.Quad;
  5.   import starling.events.Event;
  6.   public class MySprite extends Sprite {
  7.     private var square:Quad;
  8.     private var nUnit:Number = 50;
  9.     public function MySprite() {
          // initialize();
  10.       addEventListener(Event.ADDED_TO_STAGE, initialize);
  11.     }
        // private function initialize():void {
  12.     private function initialize(eventObject:Event):void {
  13.       square = new Quad(nUnit, nUnit, 0x0000FF);
  14.       addChild(square);
  15.       square.x = stage.stageWidth / 2;
  16.       square.y = stage.stageHeight / 2;
  17.       square.pivotX = nUnit / 2;
  18.       square.pivotY = nUnit / 2;
  19.       addEventListener(Event.ENTER_FRAME, rotate);
  20.     }
  21.     private function rotate(eventObject:Event):void {
  22.       square.rotation += 0.1;
  23.     }
  24.   }
  25. }

[パブリッシュプレビュー]を確かめると、青い正方形のQuadインスタンスがステージの中央で回ります(図006)。

図006■Quadインスタンスがステージの中央で回る
図006

このようにStarlingは、ほとんど違う言語ともいえるStage3Dの処理を、表示リストやなじみのあるイベントで扱えるようにした、使い勝手のよいフレームワークなのです。

作成者: 野中文雄
更新日: 2012年1月21日 pivotX/pivotYプロパティについての記述を訂正。
作成日: 2012年1月15日
Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.