Egret 滾動背景圖的實現

最終的示例:

實現思路就是兩張圖的一個循環調換位置的過程

A/B其中一張超出視圖區域就立刻調轉位置

 向左側移動

 

 

 

A向后移動

 

 

 

對於timer和幀事件的選擇:

TimerEvent.TIMER，從Timer的參數就可以看出來，當一個函數執行完成后再Delay多久。

所以如果針對每一幀進行操作的話，最好用Event.ENTER_FRAME，否則用TimerEvent.TIMER

使用ENTER_FRAME:

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

 嘗試了一下用for循環去處理圖片 , 沒有報錯 , 但是UI界面沒有成功繪制

namespace ui {
    export class GameSenceBg extends eui.Component {
        constructor() {
            super();
            this.addEventListener(eui.UIEvent.ADDED_TO_STAGE, this.BgInit, this)
        }
        private BgInit() {
            this.addEventListener(egret.Event.ENTER_FRAME, () => {
                this.BG1.$children[0].x -= 5
                this.BG1.$children[1].x -= 5
                if (this.BG1.$children[0].x <= -640) {
                    this.BG1.$children[0].x = 640
                }
                if (this.BG1.$children[1].x <= -640) {
                    this.BG1.$children[1].x = 640
                }
                this.BG2.$children[0].x -= 2
                this.BG2.$children[1].x -= 2
                if (this.BG2.$children[0].x <= -640) {
                    this.BG2.$children[0].x = 640
                }
                if (this.BG2.$children[1].x <= -640) {
                    this.BG2.$children[1].x = 640
                }
                this.BG3.$children[0].x -= 1
                this.BG3.$children[1].x -= 1
                if (this.BG3.$children[0].x <= -640) {
                    this.BG3.$children[0].x = 640
                }
                if (this.BG3.$children[1].x <= -640) {
                    this.BG3.$children[1].x = 640
                }
            }, this);
        }
        private BG1: eui.Group;
        private BG2: eui.Group;
        private BG3: eui.Group;
    }
}