用egret制作一款跑酷類游戲（一）

游戲源地址:http://static.egret-labs.org/h5game/62/v20/index.html

本demo素材全是引用該地址的素材。

游戲使用egret引擎制作

關於egret   http://www.egret-labs.org/

動畫是基於starlingswf制作的，關於starlingswf  http://xyliu.sinaapp.com/?p=1

 

一.滑動的背景。

    創建一個GameMainView.ts文件，游戲的主場景是建立在該類下的。

 

class GameMainView extends BaseUI {
     
    private background:Background;

    constructor() {
        super();
    }
     
    public initUI():void {
        this.background = new Background();
        this.background.setData("fight1Bg");
        this.addChild(this.background);
    }

    public startGame():void {
        egret.Ticker.getInstance().register(this.gameLoop, this);
    }

    private gameLoop(_advancedTime):void {

        var second = _advancedTime / 1000;
        var movePerFrame = second * this.loopSpeed;
        this.background.run(movePerFrame);

    }

}

 

　　在startGame方法里在時間軸里建立游戲循環，每幀都會調用gameLoop方法。

　　egret.Ticker.getInstance().register(this.gameLoop, this);這樣使得gameLoop方法每幀執行。

　　游戲背景會根據每幀的時間以一定速度往下運動。我們可以看到里面引用了一個Background對象，這就是游戲的背景圖運動的對象。

 

　　再看一下Background.ts

　　

class Background extends GameObject {

    private bmp1:egret.Bitmap;

    private bmp2:egret.Bitmap;

    private bgHeight:number;

    constructor() {
        super();

        this.bmp1 = new egret.Bitmap();
        this.addChild(this.bmp1);

        this.bmp2 = new egret.Bitmap();
        this.addChild(this.bmp2);
    }

    /**
     * 初始化數據
     * @param name
     */
    public setData(name:string):void {
        var texture = RES.getRes(name);
        this.bmp1.texture = texture;
        this.bmp2.texture = texture;

        this.bgHeight = this.bmp1.height;

        this.bmp1.y = 0;
        this.bmp2.y = -this.bgHeight;

    }

    /**
     * 每幀執行
     */
    public run(_moveNum):void {
        if(this.bmp1.y > this.bgHeight) {
            this.bmp1.y = this.bmp2.y - this.bgHeight;
        }

        if(this.bmp2.y > this.bgHeight) {
            this.bmp2.y = this.bmp1.y - this.bgHeight;
        }

        this.bmp1.y += _moveNum;

        this.bmp2.y += _moveNum;
    }
}

 

今天先到這里。