Starling的Display Objects介紹（四）

上一篇：Starling的Display Objects介紹（三）
下一篇：Starling的Display Objects介紹（五）

這篇會介紹下圖裡的starling.display.Quad以及starling.display.Image

Quad物件介紹

官方手冊在此：http://doc.starling-framework.org/core/starling/display/Quad.html

A Quad represents a rectangle with a uniform color or a color gradient.

每一個端點都可以設定一個顏色，會呈現線性漸層。要顯示一個線性的漸變色，需要把一個色值設置給頂點0和頂點1，然後另一個顏色給頂點2和頂點3。

頂點位置是這樣安排的：:

      0 - 1
      | / |
      2 - 3

0 - 1

| / |

2 - 3

在這個物件裡面，可以看到一個叫做mVertexData的屬性。在Starling Framework簡介的地方曾經說過，Starling是基於Stage3D而建的，關於3D渲染基礎原理請見此：3D渲染基礎原理，VertexData官方介紹。所謂3D其實是一組3維的坐標，經由矩陣轉換，將之投影到2D螢幕上，計算其在2D畫面上的2D坐標，如下圖所示：

在Starling裡面，因為是2D遊戲，則是使用正交投影的方式，直接去掉z軸的值，來將頂點坐標從3維轉至2維。但操作原理不變，這邊的則是要輸入四邊型的頂點數據。正交投影示意如下圖：

下面是產生寬高各為200,200的方塊的簡單範例：

package {
	import starling.display.Quad;
	import starling.display.Sprite;
	import starling.events.Event;
	public class Game extends Sprite {
		private var q:Quad;
		public function Game() {
			addEventListener(Event.ADDED_TO_STAGE, onAdded);
		}
		private function onAdded ( e:Event ):void {
			q = new Quad(200, 200);
			q.color = 0x00FF00;
			q.x = stage.stageWidth - q.width >> 1;
			q.y = stage.stageHeight - q.height >> 1;
			addChild ( q );
		}
	}
}

package {

import starling.display.Quad;

import starling.display.Sprite;

import starling.events.Event;

public class Game extends Sprite {

private var q:Quad;

public function Game() {

addEventListener(Event.ADDED_TO_STAGE, onAdded);

}

private function onAdded ( e:Event ):void {

q = new Quad(200, 200);

q.color = 0x00FF00;

q.x = stage.stageWidth - q.width >> 1;

q.y = stage.stageHeight - q.height >> 1;

addChild ( q );

}

Image物件介紹

官方手冊在此：http://doc.starling-framework.org/core/starling/display/Image.html

一個圖片（Image）其實就是一個四邊形上面映射了一個紋理（Texture），以下圖來說，兩個三角形是Quad的範圍，而Texture就是藍色衣服的娃娃的PNG圖檔，代表貼圖的材質。

螢幕快照 2014-02-11 下午4.32.05
Image相當於Flash的Bitmap類的Starling版本。但是Starling是用Texture來代替BitmapData來為圖像提供像素數據。要顯示一個Texture，需要把它映射到一個四邊形上，而這就是Image這個類所實現的功能。

一個”Image”是繼承自”Quad”的，我們可以在Quad上設置顏色，對於每個像素來說，最終的顏色是根據紋理的顏色和四邊形的顏色相乘而來的。這樣您就可以很容易用Quad的顏色改變一個紋理的色調。您還可以在不改變任何四邊形的頂點坐標的情況下，在一個圖片的內部移動紋理。用此功能，可以以一個非常有效的方式，創建一個矩形遮罩。

下面是一個簡單的Image使用範例：

package {
	import flash.display.Bitmap;
	import starling.display.Image;
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.textures.Texture;
	import starling.utils.deg2rad;
	public class Game2 extends Sprite {
		private var sausagesVector:Vector.<image> = new Vector.<image>(NUM_SAUSAGES, true);
		private const NUM_SAUSAGES:uint = 400;

		[Embed(source = "boy.png")]
		private static const Sausage:Class;

		public function Game2() {
			addEventListener(Event.ADDED_TO_STAGE, onAdded);
		}

		private function onAdded (e:Event):void {
			// create a Bitmap object out of the embedded image
			var sausageBitmap:Bitmap = new Sausage();
			// create a Texture object to feed the Image object
			var texture:Texture = Texture.fromBitmap(sausageBitmap);
			for (var i:int = 0; i < NUM_SAUSAGES; i++) {
				// create a Image object with our one texture
				var image:Image = new Image(texture);
				// set a random alpha, position, rotation
				image.alpha = Math.random();
				// define a random initial position
				image.x = Math.random()*stage.stageWidth
				image.y = Math.random()*stage.stageHeight
				image.rotation = deg2rad(Math.random()*360);
				// show it
				addChild(image);
				// store references for later
				sausagesVector[i] = image;
			}
		}
	}
}

package {

import flash.display.Bitmap;

import starling.display.Image;

import starling.display.Sprite;

import starling.events.Event;

import starling.textures.Texture;

import starling.utils.deg2rad;

public class Game2 extends Sprite {

private var sausagesVector:Vector.<image> = new Vector.<image>(NUM_SAUSAGES, true);

private const NUM_SAUSAGES:uint = 400;

[Embed(source = "boy.png")]

private static const Sausage:Class;

public function Game2() {

addEventListener(Event.ADDED_TO_STAGE, onAdded);

}

private function onAdded (e:Event):void {

// create a Bitmap object out of the embedded image

var sausageBitmap:Bitmap = new Sausage();

// create a Texture object to feed the Image object

var texture:Texture = Texture.fromBitmap(sausageBitmap);

for (var i:int = 0; i < NUM_SAUSAGES; i++) {

// create a Image object with our one texture

var image:Image = new Image(texture);

// set a random alpha, position, rotation

image.alpha = Math.random();

// define a random initial position

image.x = Math.random()*stage.stageWidth

image.y = Math.random()*stage.stageHeight

image.rotation = deg2rad(Math.random()*360);

// show it

addChild(image);

// store references for later

sausagesVector[i] = image;

}

Claire's Blog

Starling的Display Objects介紹（四）

Quad物件介紹

Image物件介紹

2 Replies to “Starling的Display Objects介紹（四）”