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;