Starling-用setTexCoords-位移圖片UV

在Starling-用setTexCoords-製做無接縫延伸背景圖這篇實現了無接縫的拼接背景

現在要再多一點變化讓背景圖片可以作無限的延伸，圖片一樣是拿那隻鳥來素材

一樣先把無接縫拼貼的部分先完成

//原圖為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);

之後在加上兩個全域變數

private var bird:Image;
//紀錄滑鼠作標位置
private var mMousePos:Point = new Point();

以及enterFrame跟Touch事件的監聽

addEventListener(Event.ENTER_FRAME, loop);
addEventListener(TouchEvent.TOUCH, onTouch)


 private function onTouch(event:TouchEvent):void
 {
        //這裡用滑鼠的全域作標-圖片的一半寬和一半高是為了讓滑鼠坐標以圖片中心當(0,0)的位置           
         mMousePos.x = event.getTouch(this).globalX - ( this.stage.stageWidth >> 1);
           mMousePos.y = event.getTouch(this).globalY - (this.stage.stageHeight >> 1);
      
}
  
private function loop(e:Event):void 
{
       //迴圈跑UV的四個頂點
        for (var i:int = 0; i < 4; i++) {
           //用getTexCoords方法取得每個UV點的Point
           var p:Point = bird.getTexCoords(i);
           //在改變每個UV點的位置的X、Y
           p.x += mMousePos.x * .00002
           p.y += mMousePos.y * .00002
           //最後用setTexCoords方法設置圖片的頂點以及坐標位置
            bird.setTexCoords(i, p);
       }


}

這樣移動滑鼠時就會看到圖片會跟著滑鼠的移動無限制的延伸背景

參考資料
Best way to do a scroll background

http://www.cnblogs.com/sevenyuan/archive/2013/01/22/2871634.html

Starling框架——UV坐标控制纹理贴图滚动

UV Scrolling in Starling


Starling中实现形状不规则的卷轴地图滚动