[ Starling Framework ] オブジェクトの表示 – Quad –

前回の記事で、Starling Framework(以下、starling)を使用するための環境構築についてご紹介しました。
今回から、オブジェクトの表示やイベントを使用する方法をご紹介します。

初めに、starlingを使用する上での基本となる形についての説明です。
下記をご覧ください。

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, addedToStage);
	}
	
	private function addedToStage(e:Event)
	{
		trace("addedToStage");
	}
}

StarlingTestクラスのコンストラクタの中で、starlingインスタンスを生成しています。
第一引数に描画内容を記述しているクラス(※1)、第二引数には描画するstageを指定します。
※1.正確にはstarlingのSpriteを継承したクラス

showStatsAt関数は、starlingのパフォーマンスを確認するためのもので、フレームレート・メモリ使用量・描画回数の３つが表示されます。
デフォルトではfalseが設定されており表示されませんが、この関数の実行もしくは、starlingクラスが持っているshowStatsプロパティを自らtrueにすることで表示することが出来ます。

star.showStats = ture;
もしくは
star.showStatsAt();

showStatsAt関数の引数は全部で３つです。
第一引数から順に
水平位置、垂直位置、表示領域の大きさ
を指定する事になり、各引数はデフォルトで left, top, 1の値を持っているので
何も指定せずにshowStatsAt関数を実行すると
左上に等倍の大きさで表示されることになります。

showStatsAt関数を実行後、start関数にて描画を開始しています。

上記からわかるようにstarlingを使用するために必要な最低限の実装は下記の２点です。

• starlingのインスタンス生成
• start関数の実行

それでは次に、starlingのコンストラクタの第一引数に渡すクラスの実装についての説明です。
２９行目のinternal class StarlingTestMain～の部分となります。
描画内容を担当するクラスはSpriteを継承する必要があり、更に継承するSpriteはstarlingのSpriteである必要があります。
その為、starling.display.Spriteのインポートを忘れずに記載しましょう。

starlingインスタンスのstart関数が実行されることにより、StarlingTestMainのインスタンス生成が行われます。
StarlingTestMainのコンストラクタでは、ADDED_TO_STAGEイベントをリスナーに追加しており、ここで使用しているADDED_TO_STAGEはstarlingのイベントなので、starling.events.Eventのインポートも行います。
FlashのADDED_TO_STAGEと同じようにstageの準備が整った際に通知されるイベントなので、このイベントのコールバックに描画を開始する関数を指定します。

以上が、starlingを使用する際の基本形となります。

それでは、starlingの使用方法がわかったところでオブジェクトを表示させてみましょう。

使用するのは矩形を描画するQuadクラスです。
インポートは starling.display.Quadになります。
インスタンスの生成は下記の通りです。

	//インスタンスを生成( width, height )
	var quad:Quad = new Quad( 100, 100 );
	//x座標を指定
	quad.x = 200;
	//x座標を指定
	quad.y = 200;
	//追加
	this.addChild( quad );
　　　　

矩形の色を指定するには２種類の方法があります。

	//インスタンス生成時に色を指定
	var quad:Quad = new Quad( 100, 100, 0x0000ff );
	
	//インスタンス生成後にプロパティで指定
	quad.color = 0x0000ff;	
	

また、左上・右上・左下・右下の４点に色を指定することで矩形にグラデーションをつけることも可能です。

	//左上
	quad.setVertexColor(0, 0xffff00);
	//右上
	quad.setVertexColor(1, 0x00ffff);
	//左下
	quad.setVertexColor(2, 0xff00ff);
	//右下
	quad.setVertexColor(3, 0xffffff);
　　　　

starlingオブジェクトのデフォルトのアンカーポイント(※2)は左上です。
アプリケーションを作成していく上で、左上では都合が悪かったりする場合が出てくると思いますが
そんな時は、アンカーポイントを変更しましょう。
下記は、アンカーポイントを真ん中に設定しています。
※2.オブジェクトの基点

	//x軸のアンカーポイントを変更
	quad.pivotX = quad.width * 0.5;
	//y軸のアンカーポイントを変更
	quad.pivotY = quad.height * 0.5;
　　　　

どうですか？　正常に矩形が表示できたでしょうか。
簡単なQuadクラスの紹介をさせていただいたところで本記事は終了となります。

最後まで御覧いただきありがとうございました。

	/** StarlingTestクラスは省略 */

import starling.display.Sprite;
import starling.events.Event;
import starling.display.Quad;

internal class StarlingTestMain extends Sprite
{
	public function StarlingTestMain()
	{
		super();
		addEventListener(Event.ADDED_TO_STAGE, addedToStage);
	}
	
	private function addedToStage(e:Event)
	{
        removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
	
		//ステージサイズの矩形を生成
		var bg:Quad = new Quad( stage.stageWidth, stage.stageHeight );
		//左上
		bg.setVertexColor(0, 0xffff00);
		//右上
		bg.setVertexColor(1, 0x00ffff);
		//左下
		bg.setVertexColor(2, 0xff00ff);
		//右下
		bg.setVertexColor(3, 0xffffff);			
		//追加
		this.addChild( bg );
		
		//青色の矩形を生成
		var blue:Quad = new Quad( 200, 200, 0x0000ff );
		//x座標を指定(stageの真ん中)
		blue.x = stage.stageWidth * 0.5;
		//y座標を指定(stageの真ん中)
		blue.y = stage.stageHeight * 0.5;
		//追加
		this.addChild( blue );
		
		//赤色の矩形を生成
		var red:Quad = new Quad( 200, 200, 0xff0000 );
		//x座標を指定(stageの真ん中)
		red.x = stage.stageWidth * 0.5;
		//y座標を指定(stageの真ん中)
		red.y = stage.stageHeight * 0.5;
		//x軸のアンカーポイントを指定
		red.pivotX = red.width * 0.5;
		//y軸のアンカーポイントを指定
		red.pivotY = red.height * 0.5;			
		//追加
		this.addChild( red );	
	}
}
　　　　

＜次回の更新について＞
次回からは、starlingのテクスチャを使用したオブジェクトの表示についてご紹介します。