Egret學習筆記 (Egret打飛機-3.實現背景循環滾動)

游戲背景里面的豬腳飛機看起來是一直在向前飛，但是實際上只是一個視覺差而已。

豬腳是出於不動的狀態，背景從上到下滾動，然后讓玩家覺得飛機在不停的往前飛。（當然這只是其中一種實現思路）

差不多就是這樣，然后兩張圖片一直滾動，上面的圖，滾動到最底下，馬上又跑到最上面去，一直循環，就有了一個滾動的效果

然后我導入了一張背景圖

然后重新打開我們的BgContent.ts文件，把里面的黑色背景的代碼×掉，然后改為

        bgbitmap1: egret.Bitmap;
	bgbitmap2: egret.Bitmap;

	public Init(): void {

		var bg = RES.getRes("background_png");
		this.bgbitmap1 = new egret.Bitmap(bg);
		this.bgbitmap1.width = GameConfig.SceneW;
		this.bgbitmap1.height = GameConfig.SceneH;
		this.addChild(this.bgbitmap1)

		this.bgbitmap2 = new egret.Bitmap(bg);
		this.bgbitmap2.width = GameConfig.SceneW;
		this.bgbitmap2.height = GameConfig.SceneH;
		this.addChild(this.bgbitmap2)
	}

-走到這一步，點擊運行，可以看到屏幕背景成為了上邊的那個背景圖，然后，我們再來實現背景滾動
-首先我們先監聽一下幀事件，在圖片添加完成后監聽

    this.addEventListener(egret.Event.ENTER_FRAME,()=>{

		},this)

-設置兩張圖片的位置，一張恰好顯示到屏幕，一張就放到屏幕的上方，坐標為X為0Y為（0-屏幕的高度）

                this.bgbitmap1.x = 0;
		this.bgbitmap1.y = 0;
		this.bgbitmap2.x = 0;
		this.bgbitmap2.y = - GameConfig.SceneH;

-然后我們開始我們的背景滾動，在ENTER_FRAME事件里面，我們每一幀都移動一下背景圖的坐標，然后背景圖的坐標高於屏幕的坐標，那么就把圖的坐標移動到(0,0-屏幕高度)的位置

this.bgbitmap1.y += this.bgSpeed;
			if (this.bgbitmap1.y > GameConfig.SceneH) {
				this.bgbitmap1.y = (0 - GameConfig.SceneH)

			}
			this.bgbitmap2.y += this.bgSpeed;
			if (this.bgbitmap2.y > GameConfig.SceneH) {
				this.bgbitmap2.y = (0 - GameConfig.SceneH)

			}

然后點擊運行，就可以看到如下的效果了

運行是能運行了，但是好像有一條礙眼的線偶爾會橫着。。。我找了半天也不知道啥原因。。

最后我把背景圖的高度設置長點。。。好像就沒這個問題了

var bg = RES.getRes("background_png");
		this.bgbitmap1 = new egret.Bitmap(bg);
		this.bgbitmap1.width = GameConfig.SceneW;
		this.bgbitmap1.height = GameConfig.SceneH+10;
		this.addChild(this.bgbitmap1)

		this.bgbitmap2 = new egret.Bitmap(bg);
		this.bgbitmap2.width = GameConfig.SceneW;
		this.bgbitmap2.height = GameConfig.SceneH;
		this.addChild(this.bgbitmap2)
		this.bgbitmap1.x = 0;
		this.bgbitmap1.y = 0;
		this.bgbitmap2.x = 0;
		this.bgbitmap2.y = - GameConfig.SceneH+10;