Egret 紋理、計時器

1. 九宮切

　　典型例子就是圓角矩形的拉伸問題。

　　先去P一張綠色的圓角矩形。

    private createGameScene():void {
        var box:egret.Bitmap = new egret.Bitmap();
        box.texture = RES.getRes("box_png");
        //拉伸
        box.width *= 2;     //矢量繪圖是 Shape/Sprite 的 graphics 有的功能，才有自身的 width/height 與 所繪圖形的 width/height
        this.addChild(box);

        var box9:egret.Bitmap = new egret.Bitmap(RES.getRes("box_png"));
        var rect9:egret.Rectangle = new egret.Rectangle(40, 40, 80, 80);
        box9.scale9Grid = rect9;
        box9.width *= 2;
        box9.y = 200;
        this.addChild(box9);
    }

　　看下兩者的區別：

 

2. 紋理集

• 不用每次為一張圖片執行一次HTTP請求；
• 引擎渲染時減少IO的次數；

　　主要是在配置與資源調用上進行微調即可：

• 合圖並生成 json 配置文件；
• 資源類型為 sheet: {"name":"dogs","type":"sheet","url":"assets/dogs.json"}
• 調用時：RES.getRes( "dogs.dog1" )

 3. Timer

class myTimer extends egret.DisplayObjectContainer
{
    public constructor()
    {
        super();
        var timer:egret.Timer = new egret.Timer(500, 5);    //500ms執行1次，一共執行5次
        timer.addEventListener(egret.TimerEvent.TIMER, ()=>{ 
            myTimer.count ++;
            console.log("count:" + myTimer.count);
        }, this);
        timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, ()=>{ console.log("end")}, this);
        timer.start();
    }

    public static count:number = 0;
}

 

4. Tick： 

    private createGameScene():void {
        var heroTicks = new startTickerTest();

        //要添加到舞台才會觸發 egret.Event.ADDED_TO_STAGE 事件，但 Main 這個容器是由 egret 自己添加到舞台的，看不到 addChild
        this.addChild(heroTicks);
    }

class startTickerTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();

        //容器被添加到舞台顯示列表時調用
        this.once(egret.Event.ADDED_TO_STAGE, this.onLoad, this);   
    }

    private hero:egret.Bitmap;
    private speed:number = 0.05;
    private time:number = 0;

    private onLoad(event:egret.Event) {
        var hero:egret.Bitmap = new egret.Bitmap(RES.getRes("hero1_png"));
        this.addChild(hero);
        this.hero = hero;
        this.time = egret.getTimer();
        //不與幀率掛鈎的每秒60次回調
        egret.startTick(this.moveStar, this);
    }

    //egret 在執行 startTick 的回調時，會給予參數 timeStamp(當前時間戳)
    private moveStar(timeStamp:number):boolean {
        var now = timeStamp;
        var time = this.time;
        var pass = now - time;   //平均時間間隔=1000ms/60=16.67ms
        console.log("moveStar: ",(1000 / pass).toFixed(5));
        this.hero.x += this.speed * pass;
        if(this.hero.x >= 300)
            egret.stopTick(this.moveStar, this);
        this.time = now;
        return false;
    }
}

 

5. 幀事件：

    private createGameScene():void {
        var heroTicks = new startTickerTest();
        this.addChild(heroTicks);
    }

class startTickerTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE,this.onLoad,this);
    }

    private hero:egret.Bitmap;
    private timeOnEnterFrame:number = 0;
    private speed:number = 0.5;

    private onLoad(event:egret.Event) {
        var hero:egret.Bitmap = new egret.Bitmap(RES.getRes("hero1_png"));
        this.addChild(hero);
        this.hero = hero;
        //監聽幀事件
        this.addEventListener(egret.Event.ENTER_FRAME,this.onEnterFrame,this);      
        this.timeOnEnterFrame = egret.getTimer();
    }

    private  onEnterFrame(e:egret.Event){  
        var now = egret.getTimer();
        var time = this.timeOnEnterFrame;
        var pass = now - time;
        console.log("onEnterFrame: ", (1000 / pass).toFixed(5));
        this.hero.x += this.speed * pass;
        if(this.hero.x > 300)
            this.removeEventListener(egret.Event.ENTER_FRAME,this.onEnterFrame,this);
        this.timeOnEnterFrame = egret.getTimer();
    }
}

 

　　基礎構成看的差不多了，剩下的知識在實際項目應用中邊學邊用了！