今回からStarling Framework(以下、starling)についてご紹介します。
FlashPlayer11からStage3Dという新しいAPIが追加されました。
Stage3Dは、Flashから直接GPUを活用することで従来よりはるかに高速なレンダリング(※1)を可能としたFlash(ActionScript)のAPIなのですが、プログラミングがアセンブラ(機械語)に近いうえにシェーダプログラミングの知識も必要なため、Flash開発者が使用するには少々扱いづらいものとなっていました。
※1.2D/3D両方の描画を行うことが出来る
そこで登場したのが、starlingです。
starlingは従来の”表示リスト”のような記載で、Stage3Dでの高速な2D描画を可能としたオープンソースのActionScriptフレームワークになります。
Flashでは対応していないスプライトシート(テクスチャアトラス)やビットマップフォントを使用出来たり、前回・前々回の記事で紹介したパーティクルも拡張機能として用意されています。
starlingのオブジェクトを含む全てのStage3Dオブジェクトは、表示リストとは別のステージに描画され、Stage3D用のレイヤーは表示リストより奥に配置されており、奥から順に下記のようになっています。
- stage video
- Stage3D
- 表示リスト
各オブジェクトは、それぞれ別のレイヤーに貼付けることが出来ないため、表示リストとstarlingのオブジェクトを同時に使用する場合は、必ず表示リストの方が手前に描画されることになるので少し注意が必要になります。
それでは、starlingについての説明はこれぐらいにして
実際にFlash Professional CCでstarlingを使用するために環境設定を行っていきましょう。
【 Starling Framework環境構築手順 】
１．starlingのダウンロード
公式サイト内の[ Download ]をクリックし、遷移先にある[ Download Starling 1.4.1 ](※1)からstarling本体をダウンロードすることができます。
※1.本記事執筆時点でのバージョン
ダウンロードしたファイルを展開すると、「starling」というフォルダがあり、今回使用するのは更にその中にある「bin」と「src」フォルダになります。
２．starlingを使用するプロジェクトの作成
Flash Professional CCのツールバーから[ ファイル ]→[ 新規 ]で新規ドキュメントを開きます。
[ ActionScript 3.0 ]を選択し、ステージサイズやフレームレートを設定して[ OK ]から flaファイル を作成します。
Flash Professional CCのツールバーから[ ファイル ]→[ 新規 ]で新規ドキュメントを開きます。
[ ActionScript 3.0 クラス ]を選択し、クラス名を設定して[ OK ]から asファイル を作成します。
starlingの「bin」「src」及び、flaファイル・asファイルが用意できましたら、プロジェクトの管理を行いやすくするためにプロジェクト用のフォルダを作成します。
尚、こちらの作業は任意ですので必要のない方は読み飛ばしていただいて構いません。
その場合は、手順４にお進みください。
３．プロジェクト管理用フォルダの用意
ルートとなるフォルダを用意し、その中に「library」「source」の２つのフォルダを作成します。
各フォルダの役割は下記のようになっています。
- library ⇒ ライブラリファイルを管理するフォルダ。
- source ⇒ 「～.fla」や「～.as」等のソースファイルを管理するフォルダ。
上記フォルダを作成後、更に「source」内に「as」フォルダを作成します。
これでフォルダの作成は終了となりますので、実際に用意したファイルを配置していきます。
４．用意したファイルの配置
ここから先の手順は、プロジェクト管理用フォルダを作成した上での手順となりますので、飛ばした方はご自身の環境に合わせて読み替えてください。
用意したファイルを下記のように配置してください。
- starlingの「bin」を、手順３で作成した「library」内に配置
- starlingの「src」を、手順３で作成した「library」内に配置
- flaファイルを、手順３で作成した「source」内に配置
- asファイルを、手順３で作成した「as」内に配置
上記のように配置できましたら、flaファイルの設定に入ります。
５．flaファイルの設定
flaファイルをFlash Professional CCで開きます。
まず初めに、Flash Professional CCのツールバーから[ ファイル ]→[ ActionScript 設定 ]でActionScript 3.0 の詳細設定を開きます。
ドキュメントクラスに、作成した asファイル のクラス名を入力します。
[ ソースパス ]を選択し、「as」フォルダと「library」に配置した「src」フォルダまでのパスを設定します。
[ ライブラリパス ]を選択し、「library」に配置した「bin」フォルダまでのパスを設定します。
パスの記述は、絶対パス・相対パスのどちらでも構いません。
ActionScript 3.0 の詳細設定・パブリッシュ設定ウィンドウのフォルダマークからファイル選択画面を開くことができ、選択したファイルまでの絶対パスが自動的に設定されます。
次に、Flash Professional CCのツールバーから[ ファイル ]→[ パブリッシュ 設定 ]でパブリッシュ設定を開きます。
[ ターゲット ]を Flash Player 11.0 以上に設定します。
[ ハードウェアアクセラレーション ]を レベル1-ダイレクト に設定します。
以上で、starlingを使用するための環境構築は終了です。
環境が正しく設定できているか実際にswfを書き出して見ましょう。
作成した asファイルを下記の内容に変更します。
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import starling.core.Starling;
[SWF(backgroundColor="#000000", width="600", height="400", frameRate="60")]
public class StarlingTest extends Sprite
{
public function StarlingTest()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
var star:Starling = new Starling(StarlingTestMain, stage);
star.showStatsAt("left", "top", 2);
star.start();
}
}
}
import starling.display.Sprite;
import starling.events.Event;
internal class StarlingTestMain extends Sprite
{
public function StarlingTestMain(){
super();
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event){
//処理を記載していく
}
}
ソースコードの説明は次回以降でご紹介しますので今回は省略させていただきます。
asファイルの変更後、flaファイルを開いている状態で、ツールバーから[ デバッグ ]→[ デバッグ ]を選択し
下記のように表示されれば環境構築は無事終了となります。
＜次回の更新について＞
次回からは、starlingのオブジェクトの表示についてご紹介します。
1 comment for “Starling Frameworkを使う”