ActionScript 3.0で始めるオブジェクト指向スクリプティング

第61回 StarlingフレームワークでStage3Dを試す

この記事を読むのに必要な時間:およそ 7 分

QuadオブジェクトをStage3Dで表示する

StarlingフレームワークのSpriteクラスは,FlashのActionScript 3.0定義済みクラスと違って,使い途がかなり絞り込まれている。具体的には,表示リストに子の表示オブジェクトをもつことに徹し,Spriteインスタンスそのものには直接描画できない。

そこで,矩形として描かれるStarlingのQuadオブジェクトをつくって,Spriteを継承したルートクラスのインスタンスの表示リストに子として加える。Quadクラスのコンストラクタメソッドには,引数として幅と高さ,およびRGBカラーの数値を渡す。ちなみに,QuadオブジェクトはSpriteとは逆に,子インスタンスはもてない。

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

つぎのスクリプト2に定めたStarlingルートクラス(MySprite)は,50×50ピクセルの青い矩形をQuadオブジェクトでつくり,子として表示リストに加えたうえで座標(50, 50)の位置に表示する図2⁠。Quadという新しいクラスさえ知れば,スクリプトの説明は要らないだろう。

スクリプト2 青い矩形のQuadインスタンスを表示するStarlingルートクラスの定義

// ActionScript 3.0クラス定義ファイル: MySprite.as
package  {
  import starling.display.Sprite;
  import starling.display.Quad;
  public class MySprite extends Sprite {
    private var nUnit:Number = 50;
    private var nColor:uint = 0x0000FF;
    private var instance:Quad;
    public function MySprite() {
      instance = new Quad(nUnit, nUnit, nColor);
      addChild(instance);
      instance.x = nUnit;
      instance.y = nUnit;
    }
  }
}

図2 青い矩形のインスタンスが表示される

図2 青い矩形のインスタンスが表示される

Flash Professional CS6で[ムービープレビュー]を見るには,前述のとおりStarlingフレームワークが正しくインストールされていなければならない(前出Starlingフレームワークをインストールする参照⁠⁠。⁠ActionScript 3.0の詳細設定]のほか,⁠ハードウェアアクセラレーション]も見落としがちなので注意してほしい図3。なお,筆者の環境は最新のFlash Player 11.3に対応させている。その方法についてはFlash Professional CS6でFlash Player 11.3のSWFを書出すをご覧いただきたい⁠⁠。

図3 ⁠パブリッシュ設定][ハードウェアアクセラレーション]を定める

図3 [パブリッシュ設定]で[ハードウェアアクセラレーション]を定める

Quadオブジェクトをアニメーションで回す

Stage3Dを静止画で見ても意味がない。Quadオブジェクトを回すアニメーションにしてみよう。加えるスクリプトは,ほぼ想像どおりだろう。書替えたStarlingルートクラス(MySprite)の定義が,つぎのスクリプト3だ。

スクリプト3 青い矩形のQuadインスタンスを回転するStarlingルートクラスの定義

// ActionScript 3.0クラス定義ファイル: MySprite.as
package  {
  import starling.display.Sprite;
  import starling.display.Quad;
  import starling.events.Event;
  public class MySprite extends Sprite{
    private var nUnit:Number = 50;
    private var nColor:uint = 0x0000FF;
    private var instance:Quad;
    public function MySprite() {
      instance = new Quad(nUnit, nUnit, nColor);
      addChild(instance);
      instance.x = nUnit;
      instance.y = nUnit;
      addEventListener(Event.ENTER_FRAME, rotate);
    }
    private function rotate(eventObject:Event):void {
      instance.rotation += 0.1;
    }
  }
}

2つ注意しておこう。第1は,Eventクラスがstarling.eventsパッケージに属していることである。ここでも,StarlingフレームワークによるStage3Dへの通訳が働いている。Stage3Dにはもともとない,フレームレートによる描画の更新というイベントを,Starlingが独自につくっているのだ。

第2は,DisplayObject.rotationプロパティの単位だ。DisplayObjectはもちろんstarling.displayパッケージのクラスで,ActionScript 3.0定義済み(flash.display.DisplayObject)とは異なり,角度をラジアンで定めている。Starlingフレームワークは,角度の単位をラジアンに統一しているのだ。

さて,アニメーションを確かめると,確かにQuadインスタンスが回る。ただし,オブジェクトの左上角の基準点が回転の中心になっている図4⁠。これをオブジェクトの中心で回るように改めたい。

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

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

Flashの定義済みActionScript 3.0であれば,Spriteインスタンスに入れ子にして子インスタンスの位置をずらすか,Matrixクラスで座標変換をかけるところだ。けれど,Starlingフレームワークではプロパティで変形の中心点が動かせる。

QuadインスタンスのDisplayObject.pivotXDisplayObject.pivotYプロパティで,回転の中心をQuadインスタンスの矩形の真ん中にずらしたのが,つぎのスクリプト4だ。なお,クラスのコンストラクタメソッドに直接書き加えた初期化のステートメントも増えてきたので,初期化のメソッド(initialize())として別に設けた。⁠ムービープレビュー]を確かめると,Quadインスタンスはその真ん中を中心点にして,アニメーションで回る図5⁠。

スクリプト4 青い矩形のQuadインスタンスを中心で回転するStarlingルートクラスの定義

// ActionScript 3.0クラス定義ファイル: MySprite.as
package  {
  import starling.display.Sprite;
  import starling.display.Quad;
  import starling.events.Event;
  public class MySprite extends Sprite{
    private var nUnit:Number = 50;
    private var nColor:uint = 0x0000FF;
    private var instance:Quad;
    public function MySprite() {
      initialize();
    }
    private function initialize():void {
      instance = new Quad(nUnit, nUnit, nColor);
      addChild(instance);
      instance.x = nUnit;
      instance.y = nUnit;
      instance.pivotX = instance.width / 2;
      instance.pivotY = instance.height / 2;
      addEventListener(Event.ENTER_FRAME, rotate);
    }
    private function rotate(eventObject:Event):void {
      instance.rotation += 0.1;
    }
  }
}

図5 Quadインスタンスが真ん中を中心点にして回る

図5 Quadインスタンスが真ん中を中心点にして回る

前掲スクリプト4は,新しいプロパティを使ったことを除けば,いつもどおりのActionScript 3.0の書き方だ。しかし,そのおなじみのプロパティやメソッドは,Starlingフレームワークで同じ名前のクラスに備わる別ものだということを改めて確かめておこう。つぎの表1には,スクリプト4で用いたおもなプロパティやメソッドが定められたStarlingのクラスを掲げた。

表1 ActionScript 3.0とStarlingフレームワークで名前は同じでも異なるプロパティやメソッドなど

プロパティや
メソッドなど
クラス
ActionScript 3.0定義済みStarlingフレームワーク
x/y/width/height/
stageプロパティ
flash.display.DisplayObject starling.display.DisplayObject
addChild()メソッド flash.display.DisplayObjectContainer starling.display.DisplayObjectContainer
addEventListener()
メソッド
flash.events.EventDispatcher starling.events.EventDispatcher
enterFrameイベント flash.display.DisplayObject starling.display.DisplayObject
ENTER_FRAME定数 flash.events.Event starling.events.Event

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書