白鹭引擎egret学习总结

创建类

class MyScene extends egret.Sprite {
    public constructor() {
        super();
        MyScene.SEX = "男";
        this.addEventListener(egret.Event.ADDED_TO_STAGE,function(){
            // 当当前容器添加到舞台后再执行
        },this)
        
        
    }
    public name;//公开属性
    private age;//私有属性，不允许在实例化对象中调用，只可以在myScene类的内部使用
}

封装的方法

//绘制图片容器
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)
    
    // 执行按钮的点击事件
    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;
}

自定义进度条事例

//进度条部分
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();

    // 画出进度条
    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)

//异步获取资源,这种方式可以获取配置中的所有资源项。如果缓存中存在则直接调用回调函数
RES.getRESAsync(name:string,compFunc:function,thisObject)

//通过url获取不在配置中的资源，通常不建议使用这个接口，只在获取其他服务器的资源时使用
RES.getResByUrl(url:string,compFunc:function,thisObject,type:string = "")

加载资源组

private async loadResource(){//加载资源组
    //实例化进度条
    let loadingView = new LoadingUI();
    this.addChild(loadingView);
    //加载资源组，第一个参数为资源组名称，第二个参数为优先级，第三个参数为loadingUI
    await RES.loadGroup("player",0,loadingView);
    //加载完成后移除进度条
    this.removeChild(loadingView);
    this.createGameScene();
}

播放音乐

//获取音乐sound对象
let sound = RES.getRes("music");
//通过sound.play创建soundChannel对象，用来控制声音播放
soundC = sound.play();

计时器的使用

Timer

//第一个参数为播放的间隔时间，第二个参数为执行次数，若为0则重复执行
  let timer = new egret.Timer(100,1);

//每次到达间隔时间时调用
timer.addEventListener(egret.TimerEvent.TIMER,function(){
    console.log("timer");
},this);

//当计时器到达重复次数后调用
timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,function(){
    console.log("timer执行完毕");
},this)

ticker

//startTick全局函数将以 60 帧速率回调函数
private function tickerC(){
    console.log("我是ticker");
    return false;
}
//第一个参数为回调函数，第二个参数为this的指向
egret.startTick(this.tickerC,this);
egret.stopTick(this.tickerC,this);

帧事件

//帧事件的回调与帧率的相同
this.addEventListener(egret.Event.ENTER_FRAME,function(){
    console.log("我是帧事件");
},this)

场景管理类事例

class SceneManager {
    //通过单例模式生产管理类
    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
        })
    }
}

// 调用场景管理类来加载场景
SceneManager.createObj(this.stage).loadScene("welcome",welcome);

创建帧动画

//第一步：实例化一个movieClipData的工厂
//第一个参数为MovieClip数据集，该数据集必须由Egret官方工具生成，第二个参数为纹理
let mcDataFactory = new egret.MovieClipDataFactory(RES.getRes("default_json"),RES.getRes("default_png"));
// 第二步：通过mcDataFactory得到movieClipData，接收一个动作参数，由json文件获取到
let mcData = mcDataFactory.generateMovieClipData("move");
// 第三步：实例化出来一个movieClip
let mc = new egret.MovieClip(mcData);
this.addChild(mc);
// 第四步，播放mc动画
//可传入number,<1为无限播放，大于1则指定播放次数
mc.play(-1);
//跳到指定帧播放
mc.gotoAndPlay("move2",-1);