白鷺引擎egret學(xué)習(xí)總結(jié)

創(chuàng)建類

class MyScene extends egret.Sprite {
    public constructor() {
        super();
        MyScene.SEX = "男";
        this.addEventListener(egret.Event.ADDED_TO_STAGE,function(){
            // 當(dāng)當(dāng)前容器添加到舞臺后再執(zhí)行
        },this)
        
        
    }
    public name;//公開屬性
    private age;//私有屬性，不允許在實例化對象中調(diào)用，只可以在myScene類的內(nèi)部使用
}

封裝的方法

//繪制圖片容器
function createImg(imgName){
    let myImg = new egret.Bitmap();
    myImg.texture = RES.getRes(imgName);
    return myImg;
}

、、繪制文本域
function createText(text,size=30,color=0x000000,textAlign="center",verticalAlign="MIDDLE"){
    let myText = new egret.TextField();
    myText.text = text;
    myText.size = size;
    myText.textColor = color;
    myText.textAlign = textAlign;
    myText.verticalAlign = verticalAlign;
    return myText;
}

//繪制矩形
function createRect(width:number,height:number,bgColor=0x000000,alpha=1,lineWidth=0,lineColor=0x000000){
    let myRect = new egret.Shape();
    myRect.graphics.beginFill(bgColor,alpha);
    myRect.graphics.lineStyle(lineWidth,lineColor);
    myRect.graphics.drawRect(0,0,width,height);
    myRect.graphics.endFill();
    return myRect;
}

//繪制按鈕
function createBtn(text,width,height,callback=function(){},bgColor=0xffff00,hoverBgColor=0xff4500,textSize=60,textColor=0xffffff,hoverTextColor=0x234567){
    let myBtn = new egret.Sprite();
    // 按鈕里面的文字
    let myText = new egret.TextField();
    myText.text = text;
    myText.width = width;
    myText.height = height;
    myText.textAlign = egret.HorizontalAlign.CENTER;
    myText.verticalAlign = egret.VerticalAlign.MIDDLE;
    myText.textColor = textColor;
    myText.size = textSize;

    // 繪制按鈕的矩形
    myBtn.graphics.beginFill(bgColor);
    myBtn.graphics.drawRect(0,0,width,height);
    myBtn.graphics.endFill();
    myBtn.addChild(myText);

    // 添加點擊事件
    myBtn.touchEnabled = true;
    myBtn.addEventListener(egret.TouchEvent.TOUCH_BEGIN,function(){
        myBtn.graphics.clear();
        myBtn.graphics.beginFill(hoverBgColor);
        myBtn.graphics.drawRect(0,0,width,height);
        myBtn.graphics.endFill();
        myText.textColor = hoverTextColor;
    },null)
    
    // 執(zhí)行按鈕的點擊事件
    myBtn.addEventListener(egret.TouchEvent.TOUCH_END,function(){
        myBtn.graphics.clear();
        myBtn.graphics.beginFill(bgColor);
        myBtn.graphics.drawRect(0,0,width,height);
        myBtn.graphics.endFill();
        myText.textColor = textColor;
        callback();
    },null)

    

    return myBtn;
}

// 繪制一個圓角矩形
function createRoundRect(width:number,height:number,eclipW,eclipH){
    let myRoundRect = new egret.Shape();
    myRoundRect.graphics.lineStyle(8,0xffff00);
    myRoundRect.graphics.drawRoundRect(0,0,width,height,eclipW,eclipH);
    return myRoundRect;
}

自定義進(jìn)度條事例

//進(jìn)度條部分
class progressBar extends egret.Sprite{

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,function(){
            this.pW = this.stage.stageWidth*.8;
            this.drawBorder();
            
        },this);
    }
    
    public pW:number;
    public pH:number = 40;

    // 畫出邊框
    public drawBorder(){
        this.graphics.clear();
        this.graphics.beginFill(0xffffff,0);
        this.graphics.lineStyle(4,0x00ff00);
        this.graphics.drawRoundRect(0,0,this.pW,this.pH,10,10);
        this.graphics.endFill();
        this.anchorOffsetX = this.pW*.5;
        this.anchorOffsetY = this.pH*.5;
    }

    private bgR:egret.Shape = new egret.Shape();

    // 畫出進(jìn)度條
    public drawBg(width){
        width = width>=this.pW-4?this.pW-4:width;
        this.bgR.graphics.clear();
        this.bgR.graphics.beginFill(0xeb6616);
        this.bgR.graphics.drawRect(2,2,width,this.pH-4);
        this.bgR.graphics.endFill();
        this.addChild(this.bgR);
    }

}

//LoadingUI
class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,function(){
            this.proB = new progressBar();
            this.proB.x = this.stage.stageWidth*.5;
            this.proB.y = this.stage.stageHeight*.5;
            this.addChild(this.proB);
        },this)
    }

    private proB:progressBar;

    public onProgress(current: number, total: number): void {
        let curW:number = this.proB.pW*current/total;
        this.proB.drawBg(curW);
    }
}

加載資源的方法

//同步獲取資源，這種方式只能獲取緩存過的資源
RES.getRES(name:string)

//異步獲取資源,這種方式可以獲取配置中的所有資源項。如果緩存中存在則直接調(diào)用回調(diào)函數(shù)
RES.getRESAsync(name:string,compFunc:function,thisObject)

//通過url獲取不在配置中的資源，通常不建議使用這個接口，只在獲取其他服務(wù)器的資源時使用
RES.getResByUrl(url:string,compFunc:function,thisObject,type:string = "")

加載資源組

private async loadResource(){//加載資源組
    //實例化進(jìn)度條
    let loadingView = new LoadingUI();
    this.addChild(loadingView);
    //加載資源組，第一個參數(shù)為資源組名稱，第二個參數(shù)為優(yōu)先級，第三個參數(shù)為loadingUI
    await RES.loadGroup("player",0,loadingView);
    //加載完成后移除進(jìn)度條
    this.removeChild(loadingView);
    this.createGameScene();
}

播放音樂

//獲取音樂sound對象
let sound = RES.getRes("music");
//通過sound.play創(chuàng)建soundChannel對象，用來控制聲音播放
soundC = sound.play();

計時器的使用

Timer

//第一個參數(shù)為播放的間隔時間，第二個參數(shù)為執(zhí)行次數(shù)，若為0則重復(fù)執(zhí)行
  let timer = new egret.Timer(100,1);

//每次到達(dá)間隔時間時調(diào)用
timer.addEventListener(egret.TimerEvent.TIMER,function(){
    console.log("timer");
},this);

//當(dāng)計時器到達(dá)重復(fù)次數(shù)后調(diào)用
timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,function(){
    console.log("timer執(zhí)行完畢");
},this)

ticker

//startTick全局函數(shù)將以 60 幀速率回調(diào)函數(shù)
private function tickerC(){
    console.log("我是ticker");
    return false;
}
//第一個參數(shù)為回調(diào)函數(shù)，第二個參數(shù)為this的指向
egret.startTick(this.tickerC,this);
egret.stopTick(this.tickerC,this);

幀事件

//幀事件的回調(diào)與幀率的相同
this.addEventListener(egret.Event.ENTER_FRAME,function(){
    console.log("我是幀事件");
},this)

場景管理類事例

class SceneManager {
    //通過單例模式生產(chǎn)管理類
    static obj:SceneManager;
    static createObj(_stage){
        if(!SceneManager.obj){
            SceneManager.obj = new SceneManager(_stage);
        }
        return SceneManager.obj;
    }
    /*
        1、能夠幫我們快速加載資源
        2、能夠幫我們快速切換場景
    */ 

    public constructor(_stage) {
        this._stage = _stage;
    }

    private _stage;
    private curScene;

    public async loadScene(sceneName,NextScene){
        // 功能一：加載資源
        let loadingView = new LoadingUI();
        this._stage.addChild(loadingView);
        await RES.loadGroup(sceneName,0,loadingView);
        this._stage.removeChild(loadingView);

        // 功能二：切換場景
        let nextScene = new NextScene();
        this._stage.addChild(nextScene);
        nextScene.x = this._stage.stage.stageWidth;
        egret.Tween.get(nextScene).to({x:0},400,egret.Ease.backInOut).call(()=>{
            if(this.curScene && this._stage.contains(this.curScene)){
                this._stage.removeChild(this.curScene);
            }
            this.curScene = nextScene
        })
    }
}

// 調(diào)用場景管理類來加載場景
SceneManager.createObj(this.stage).loadScene("welcome",welcome);

創(chuàng)建幀動畫

//第一步：實例化一個movieClipData的工廠
//第一個參數(shù)為MovieClip數(shù)據(jù)集，該數(shù)據(jù)集必須由Egret官方工具生成，第二個參數(shù)為紋理
let mcDataFactory = new egret.MovieClipDataFactory(RES.getRes("default_json"),RES.getRes("default_png"));
// 第二步：通過mcDataFactory得到movieClipData，接收一個動作參數(shù)，由json文件獲取到
let mcData = mcDataFactory.generateMovieClipData("move");
// 第三步：實例化出來一個movieClip
let mc = new egret.MovieClip(mcData);
this.addChild(mc);
// 第四步，播放mc動畫
//可傳入number,<1為無限播放，大于1則指定播放次數(shù)
mc.play(-1);
//跳到指定幀播放
mc.gotoAndPlay("move2",-1);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,632評論 1贊 32
  • 書寫的很好，翻譯的也棒！感謝譯者，感謝感謝！ iOS-Core-Animation-Advanced-Techni...
    錢噓噓閱讀 2,429評論 0贊 6
  • 1，NSObject中description屬性的意義，它可以重寫嗎?答案：每當(dāng) NSLog(@"")函數(shù)中出現(xiàn) ...
    eightzg閱讀 4,336評論 2贊 19
  • 相信大家寫移動端的時候都會碰到這個問題，當(dāng)寫活動規(guī)則彈窗的時候如果頁面過長了，即使規(guī)則是100%高度覆蓋全屏但是如...
    橙色流年閱讀 7,922評論 3贊 3
  • 1.PM首先是用戶 2.站在用戶的角度看待問題 3.用戶體驗是一個完整的過程 4.追求效果，不做沒用的東西 5.發(fā)...
    陳?閱讀 844評論 0贊 0

友情鏈接更多精彩內(nèi)容