Starling-用setTexCoords-裁切圖片

在starling的教學範例Hungry Hero裡，遊戲下方的街景以及遊戲背景的滾動方式是用

兩張圖片不斷的輪流交替來產生背景滾動的效果，不過要滾動背景的話其實還有

另一種方式是改變圖片的頂點位置以及紋理的UV坐標，在starling中預設的DisplayObject

都是四邊形，圖形的UV作標點分別為下圖所示

0  ─ ─ ─ 1

│            │

│            │

│            │

2  ─ ─ ─ 3

設置頂點位置以及紋理的UV坐標可以達到許多效果，例如上述所說的滾動視圖達到

橫向捲軸遊戲裡的無限延伸背景的效果，另外也可以拿來作裁切圖片和無接縫圖片的

背景延伸等等等 . . . .下面就來示範一下怎麼分別達成這些效果

1.裁切圖片

下面這邊有一張圖

如果要裁切這張圖片的右下角1/4的圖的話要怎麼做呢?

我們可以用Image裡的setTexCoords方法裁切

var image:Image = new Image(texture);
addChild(image);
var point:Point = new Point();

//第一個點
point.x = 0.5;
point.y = 0.5;
image.setTexCoords(0, point);

//第二個點
point.x = 1;
point.y = 0.5;
image.setTexCoords(1, point);

//第三個點
point.x = 0.5;
point.y = 1;
image.setTexCoords(2, point);

//第四個點
point.x =1;
point.y = 1;
image.setTexCoords(3, point);

解釋一下上面程式碼的意思

假設圖片的四邊長分別都為1

那要裁切圖片的1/4右下角的話

第一個點當然是圖片的正中心拉

假設圖片的四邊長分別都為1

最左上角坐標為(0,0)，右上角坐標為(1,0)，左下角坐標為(0,1)，右下角坐標為(1,1)，

那要裁切圖片的1/4右下角的話第一個點當然是圖片的正中心拉

所以會看到第一個點是設在(0.5,0.5)的位置上，第二個點就會在(1,0.5)

以此類推就會推出上面所設的座標位置拉

裁切出來之後你應該會發現裁切出來的部分被放大成原圖片的大小，以上圖為例

圖片為256*256裁切出來的右下角應該要是128*128，可是卻被放大為256*256了

因此會變得有點模糊，所以如果要裁切後不被放大的話就手動把圖片縮回來就好了

image.width = image.width >> 1;
image.height = image.height >> 1;

//

設置