用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;
    }
}

 

今天先到这里。