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

在這個物件裡面，可以看到一個叫做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 );
		}
	}
}

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. = new Vector.(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; } } } }[/code]

Claire's Blog