Starling-用setTexCoords-製做無接縫延伸背景圖

在上一篇Starling-用setTexCoords-裁切圖片中有講到了一些UV坐標的概念

這次要繼續使用Image的setTexCoords的方法來產生無接縫延伸背景圖

這邊先分享一個線上製做無接縫圖片的地方

http://www.patterncooler.com/index.php

這邊有很多現成的素材可以下載，另外也可以利用他線上的編輯器去編輯

素材的顏色等等 . . .

之後就可以下載png圖檔下來，下載png是不用付費的，功能很簡單應該

就不用再另外教學了，隨便摸一摸應該就會了

無接縫的素材做好了後就可以把素材Embed到程式了

不過我這邊先不用無接縫的素材，因為如果用了就看不出來到底拼接了幾個出來了

為了好了解我這邊還是先用上個範例的鳥~

程式碼如下

//原圖為256*256，因為要讓圖片小一點所以設置作後一個參數2，使圖片縮小為原尺寸的1/2，BirdClass為Embed的圖片Class
var birdTexure:Texture = Texture.fromBitmap(new BirdClass(), true, false, 2);
//設置Texture為重複
birdTex.repeat = true;
var birdBackground:Image = new Image(birdTex);
//把Image的寬和高設置為跟螢幕一樣大
birdBackground.width = this.stage.stageWidth;
birdBackground.height = this.stage.stageHeight;
//橫向重複數量
var horizontalSize:int = 8;
//直向重複數量
var verticalSize:int = 8

birdBackground.setTexCoords(1, new Point(horizontalSize, 0));
birdBackground.setTexCoords(2, new Point(0, verticalSize));
birdBackground.setTexCoords(3, new Point(horizontalSize, verticalSize));
addChild(birdBackground);

這邊其實我也不是很懂其原理，只知道這樣做可以達到無接縫拼貼的效果

當然每個位置的的值也不一定要像我上面寫的一樣，自己可以隨便填個值看看效果

也許會產生出很奇特的形狀貼圖