上一篇: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。
頂點位置是這樣安排的::
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的方塊的簡單範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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圖檔,代表貼圖的材質。
Image相當於Flash的Bitmap類的Starling版本。但是Starling是用Texture來代替BitmapData來為圖像提供像素數據。 要顯示一個Texture,需要把它映射到一個四邊形上,而這就是Image這個類所實現的功能。
一個”Image”是繼承自”Quad”的,我們可以在Quad上設置顏色,對於每個像素來說,最終的顏色是根據紋理的顏色和四邊形的顏色相乘而來的。 這樣您就可以很容易用Quad的顏色改變一個紋理的色調。您還可以在不改變任何四邊形的頂點坐標的情況下,在一個圖片的內部移動紋理。用此功能,可以以一個非常有效的方式,創建一個矩形遮罩。
下面是一個簡單的Image使用範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
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; } } } } |
2 Replies to “Starling的Display Objects介紹(四)”
Comments are closed.