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;
posted @ 2018-01-01 21:54  天府三街第一帅  阅读(...)  评论(... 编辑 收藏