今回は、Quad メソッドを使い、簡単な四角形を表示したいと思います。最近、Webやツール系のアプリケーションは、フラットデザインが流行っているため意外とQuadメソッドは役に立ちます。

まず、Starlingを起動するために前準備として、初期設定を行います。

Main.as

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageDisplayState;
	import flash.display.StageScaleMode;
	import starling.core.Starling;
	
	[SWF(frameRate="60", backgroundColor="#FFFFFF")]
	
	public class Main extends Sprite
	{
		private var starling:Starling;
		
		//コンストラクタ
		public function Main()
		{
			//初期設定
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
			stage.displayState = StageDisplayState.NORMAL;

			// 最初に表示するクラス, stageを指定
			starling = new Starling(MainState, stage);
			
			// 描画を開始
			starling.start();
		}
	}
}

MainState.as で、Quadメソッドを使い四角形を描きます。ここでは単純に、Quad(縦幅, 横幅, 色) を指定します。

new Quad(200, 200,0xFFFCC);

MainState.as

package
{
	import starling.display.Quad;
	import starling.display.Sprite;

	public class MainState extends Sprite
	{
		public var square:Quad;
	
		public function MainState()
		{

			square = new Quad(200, 200,0xFFFCC);
			addChild(square);

		}
	}
}

また、下記のようなパラメータを加えることで、表示位置など変えることができます。
square.x = 100;
square.y = 100;
square.alpha = 0.1;

さて、これをAIRシミュレーターで実行すると、縦横200pxの四角形がこのように表示されます。



ここでAIRシミュレーターとスマートフォン（Xperia UL）の表示を重ね比べてみると同じ200pxでも、だいぶ差があることが分かります。これは縦横のステージサイズと画素密度の差からくるものです。PCでFlashを表示するときは、ほとんど気にする必要はありませんでしたが、スマートフォンでは端末により縦横のサイズ、画素密度がバラバラのため、このような違いがでてくるため工夫が必要になります。



この違いの解決の仕方については別の機会に触れようと思います。