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

Starlingフレームワーク1.3の新しい機能

2013年1月14日にStarlingフレームワーク1.3が公開されました。強力な機能が加わるとともに、最適化もさらに進められました。そのおもな内容を同日づけのblog記事「Starling 1.3」にもとづいてご紹介します。

01 フィルタ

starling.filtersパッケージが加わり、ぼかし(BlurFilter)とカラーマトリクス(ColorMatrixFilter)のフィルタが備わりました(図001)。なお、FragmentFilterは基本クラスとしてフィルタの各クラスに継承され、FragmentFilterModeクラスはフィルタのモードを定めます。

図001■starling.filtersパッケージのクラス

フィルタの数はまだ多くありません。ただし、BlurFilterクラスの静的メソッドBlurFilter.createDropShadow()とBlurFilter.createGlow()で、それぞれドロップシャドウとグロー(光彩)が加えられます。下図002の上段がBlurFilter、下段はColorMatrixFilterを適用した例です。

図002■BlurFilterとColorMatrixFilterの適用例

[出典]「Starling 1.3」

オブジェクトにフィルタを適用するには、DisplayObject.filterプロパティにフィルタのインスタンスを与えます。定義済みActionScript 3.0(DisplayObject.filtersプロパティ)と違い、プロパティ名が単数形です。つまり、フィルタのオブジェクトを配列には入れず、直に定めることにご注意ください。

DisplayObjectオブジェクト.filter = フィルタオブジェクト

ColorMatrixFilterクラスには次表001のメソッドが備わっていて、色相・彩度・明度・コントラストを変えたり、カラーを反転できます。

02 Tweenの強化

Tweenクラスはトゥイーンするプロパティの演算を担い、Jugglerクラスがそれをアニメーションとして描きます。この役割分けは設計として優れているものの、Tweenインスタンスをつくって、設定を行い、Jugglerオブジェクトに加えるという手間が煩わしく感じられることもありました。

そこで、JugglerクラスにJuggler.tween()メソッドが新たに備えられたのです。このメソッドで定められたトゥイーンは、自動的にJugglerオブジェクトに加わります。また、トゥイーンの設定は、Objectインスタンスにまとめて引数で与えられます。しかも、Tweenオブジェクトは内部的に使い回してくれます。とても手軽でお得なメッドといえます。

たとえば、「StarlingフレームワークのTweenクラスを使ったアニメーション」のスクリプト002では、つぎのようにトゥイーンを定めました。Tween()コンストラクタでインスタンスをつくってから、トゥイーンを定め、Juggler.add()メソッドでインスタンスをJugglerオブジェクトに加えています。

var myTween:Tween = new Tween(myQuad, duration, myTransition); myTween.moveTo(positionX, myQuad.y); Starling.juggler.add(myTween); myTween.onComplete = nextTween;

Juggler.tween()メソッドを使うと、同じトゥイーンがつぎのように定められます。Juggler.add()メソッドは呼出すことなく、トゥイーンの設定もObjectインスタンスにプロパティを必要なだけ加えて、メソッドの引数に渡せば済みます。

Starling.juggler.tween(myQuad, duration, {   transition:myTransition,   x:positionX,   y:myQuad.y,   onComplete:nextTween });

Tweenクラスには、Tween.repeatCountとTween.nextTweenのふたつのプロパティが加わりました。前者はトゥイーンの繰返し回数を定め、後者にはつぎに行うTweenインスタンスが与えられます。なお、Tween.reverseプロパティをtrueにすると、トゥイーンを繰返すとき、変化する方向が正逆交互に切り替わります(いわゆるyo-yoスタイル)。

03 AssetManagerクラスによるアセットの管理

アプリケーションでは、テクスチャやサウンド、あるいはビットマップフォントなどさまざまなオブジェクトがアセット(素材)として使われます。それらのアセットは、アプリケーションに埋込めますし、またパスを参照して読込むこともできます。PCであれば前者が手っ取り早く、モバイルは後者の方がRAMを費やしません。

アセットの参照の仕方がまちまちですと、アクセス方法は統一しにくくなります。AssetManagerクラスを用いれば、さまざまなアセットにも簡単にアクセスできます。AssetManagerクラスの使い方は、Starling Wiki「Asset Management」に解説されています。また、Starling 1.3の「samples」フォルダに含まれるデモが、実際のスクリプトサンプルを示します。

04 Starlingコンテンツの描画領域をステージの伸縮に合わせる

通常のFlashコンテンツでは、ステージの伸縮に合わせてコンテンツの描画領域を変えるStage.scaleModeプロパティが使えます。Starlingフレームワークでも、モードを切換えてステージの伸縮に合わせたコンテンツの描画ができるようになりました。Starlingの描画領域は、Starling.viewPortプロパティにRectangleオブジェクトで定めます。

静的メソッドRectangleUtil.fit()メソッドは、第1引数の矩形領域を第2引数の矩形領域に、縦横比は変えずに納めるためのRectangleオブジェクトを返します。第1および第2引数は、Rectangleオブジェクトです。そして、第3引数には、ScaleModeクラスの定数で伸縮モードが渡せます(表002)。

RectangleUtil.fit(矩形領域,, 対象矩形領域, 伸縮モード)

たとえば、ステージサイズが変わったとき、縦横比は変えず、上下または左右が切れないようにコンテンツを描画([すべて表示]に設定)するには、StageオブジェクトのStage.resizeイベント(定数Event.RESIZE)につぎのようなリスナーメソッド(onResize())を定めます。なお、Stage.resizeイベントのリスナーメソッド(onResize())は第2引数に、サイズが変わった後のFlash Playerの幅と高さをPointオブジェクトで受取ります。

private function onResize(event:Event, size:Point):void {   Starling.current.viewPort = RectangleUtil.fit(     new Rectangle(0, 0, stage.stageWidth, stage.stageHeight),     new Rectangle(0, 0, size.x, size.y),     ScaleMode.SHOW_ALL); }

作成者: 野中文雄
更新日: 2013年1月21日 01と02の参照リンクを一部本サイトのリファレンスに変更。
作成日: 2013年1月15日