Posted on 2 Comments

Starling的Display Objects介紹(四)

上一篇:Starling的Display Objects介紹(三)
下一篇:Starling的Display Objects介紹(五)

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

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

下面是產生寬高各為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]

2 thoughts on “Starling的Display Objects介紹(四)

  1. […] 上一篇:Starling的Display Objects介紹(四) […]

  2. […] 上一篇:Starling的Display Objects介紹(二) 下一篇:Starling的Display Objects介紹(四) […]

Comments are closed.