Egret创建项目+搭建底层框架

时间：2019-12-27 23:49:31 阅读：211 评论：0 收藏：0 [点我收藏+]

一、官网下载白鹭引擎：

https://www.egret.com/products/engine.html

技术分享图片

二、安装后打开并下载最新版引擎

技术分享图片

三、创建项目技术分享图片

四、打开项目我用的是WebStrom开发

技术分享图片

AssetAdapter类主要是项目内解析资源。

LoadingUI类是初次进入时加载的等待界面。

Main类是游戏的主入口。。一切逻辑都从此类开始。

Platform类游戏发布需要接入的平台类，官方封装，可以忽略。

ThemeAdapter类是解析EUI制作的皮肤资源管理类。

egretProperties.json是管理引擎版本，引入的库等等。

manifest.json 游戏项目需要用TypeScript语法写逻辑。游览器不支持ts语法。只支持js语法。所以这个是每个类压缩后的js文件。包括eui制作的游戏界面也会压缩在这里。

tsconfig.json 是项目所支持的语法。默认为es5，部分游览器内核不兼容es6语法。所以项目内所编译的都会转化为es5，如果项目所需，可以将es5改为es6，然后编译一下就可以支持es6语法。

wingProperties.json 是管理eui所需的资源。都压缩在一个default.thm,json。

index.html内属性介绍：

data-entry-class：文件类名称。
data-orientation：旋转模式。
data-scale-mode：适配模式。
data-frame-rate：帧频数。
data-content-width：游戏内舞台的宽。
data-content-height：游戏内舞台的高。
data-multi-fingered：多指最大数量。
data-show-fps：是否显示 fps 帧频信息。
data-show-log：是否显示 egret.log 的输出信息。
data-show-fps-style：fps面板的样式。支持5种属性，x:0, y:0, size:30, textColor:0xffffff, bgAlpha:0.9

五、打开Main类内部已有详细注释。。敢于删除代码运行。这样才学的快

1、createChildren函数是皮肤初次创建时调用

2、异步函数runGame 此函数主要加载资源与主入口函数同步进行

3、异步函数loadResource 次函数主要加载eui内的皮肤与资源

4、createGameScene 此函数为主入口。可以将函数里的内容全部删除。并将相关的也删除

技术分享图片

六、开始创建底层代码创建一个文件夹 common。创建2个基类分别为BaseEuiComp视图基类、EventProxy发布事件基类、

1、BaseEuiComp视图基类

/**
 * eui组件基类,需要设置皮肤才用到
 * @author DuckKing
 */
class BaseEuiComp extends eui.Component
{
    /** 是否监听舞台变更,监听的话会设置自身宽度 **/
    protected _listenResize:boolean = false;

    /** 用于自动判断添加还是移除监听 **/
    protected _onStage: boolean;

    public dispose():void
    {
        if(this.parent)
            this.parent.removeChild(this);
    }

    public move(x: number, y: number): void
    {
        this.x = x;
        this.y = y;
    }

    /**
     * 设置监听（建议在onStageChanged方法内使用)
     * @param {string} type
     * @param {egret.IEventDispatcher} target
     * @param {Function} listener
     * @param {boolean} useCapture
     * @param {number} priority
     */
    protected listen(type: string, target: egret.IEventDispatcher, listener: Function, useCapture?: boolean, priority?: number): void {
        if (this._onStage)
            target.addEventListener(type, listener, this, useCapture, priority);
        else
            target.removeEventListener(type, listener, this, useCapture);
    }

    /**
     * 设置触碰监听（建议在onStageChanged方法内使用)
     * @param {egret.IEventDispatcher} target
     * @param {Function} listener
     * @param {boolean} useCapture
     * @param {number} priority
     */
    protected listenTouch(target: egret.IEventDispatcher, listener: Function, useCapture?: boolean, priority?: number): void {
        if (this._onStage)
            target.addEventListener(egret.TouchEvent.TOUCH_TAP, listener, this, useCapture, priority);
        else
            target.removeEventListener(egret.TouchEvent.TOUCH_TAP, listener, this);
    }

    /**
     * 设置EventProxy的监听（建议在onStageChanged方法内使用)
     * @param {Function} type
     * @param {Function} func
     */
    protected listenEvent(type: string, func: Function): void {
        if (this._onStage)
            EventProxy.add(type, func, this);
        else
            EventProxy.remove(type, func, this);
    }

    /**
     * 舞台变更
     * @param {boolean} inStage
     */
    protected onStageChanged(inStage: boolean): void {
        if(this._listenResize)
        {
            if(inStage)
            {
                
            }
        }
    }

    /**
     * 当界面添加到舞台时
     * @param stage
     * @param nestLevel
     */
    $onAddToStage(stage: egret.Stage, nestLevel: number): void 
    {
        this._onStage = true;
        super.$onAddToStage(stage, nestLevel);
        this.onStageChanged(true);
    }

    /**
     * 当界面离开舞台时
     */
    $onRemoveFromStage(): void 
    {
        super.$onRemoveFromStage();
        this._onStage = false;
        this.onStageChanged(false);
    }
}

2、EventProxy发布事件基类

/**
 * 事件代理器,用于全局收发事件
 * @author DuckKing
 */
class EventProxy
{

    private static dispatcher: egret.EventDispatcher = new egret.EventDispatcher();

    /**
     * 监听事件
     * @param type 定义一个标识字符串
     * @param listener 调用的函数
     * @param thisObject 调用者本身
     * @param useCapture 设置为 true， 则侦听器只在捕获阶段处理事件，而不在冒泡阶段处理事件
     */
    public static add(type: string, listener: Function, thisObject: any, useCapture: boolean = false): void
    {
        this.dispatcher.addEventListener(type, listener, thisObject, useCapture);
    }

    /**
     * 移除事件
     * @param type 移除的事件标识
     * @param listener 移除的监听函数
     * @param thisObject 移除监听对象
     * @param useCapture 
     */
    public static remove(type: string, listener: Function, thisObject: any, useCapture: boolean = false): void
    {
        this.dispatcher.removeEventListener(type, listener, thisObject, useCapture);
    }

    /** 事件的对象池*/
    private static _eventPool:Object = {};

    /**
     * 发布一个事件
     * @param type 事件标识
     * @param data 是否带参数
     */
    public static disWith(type:string, data:any = null): Boolean
    {
        if(data)
        {
            if (this.dispatcher.hasEventListener(type)) 
            {
                let event = this._eventPool[type];
                if(!event)
                {
                    event = new egret.Event(type);
                    this._eventPool[type] = event;
                }
                event.data = data;
                return this.dispatcher.dispatchEvent(event);
            }
        }
        return this.dispatcher.dispatchEventWith(type,false,data);
    }
}

3、开始上手写代码创建一个GameScene类

/**
 * 游戏主界面类
 * @author DuckKing
 */
class GameScene extends BaseEuiComp
{
    /** 如果在皮肤里面制作过按钮 并赋予id（即btn_Level）可以直接在此声明调用public btn_Level: eui.Button*/
    /** 我目前并没有做eui界面 所以可以在代码里创建*/
    public btn_Level: eui.Button;

    public txt_name: eui.Label;

    public constructor()
    {
        super();

        //皮肤名 若在Eui里创造过皮肤 直接将皮肤名写入下面字符串处 以下我所创建的组件均可以在eui里制作。
        this.skinName = "";

        //创造一个按钮  用代码实现
        this.btn_Level = new eui.Button();
        this.btn_Level.width = 100;
        this.btn_Level.height = 100;
        this.btn_Level.icon = ""; //按钮皮肤
        this.btn_Level.label = "按钮";
        this.addChild(this.btn_Level);

        //创建一个文本
        this.txt_name = new eui.Label();
        this.txt_name.x = 200;
        this.txt_name.y = 300;
        this.txt_name.text = "HelloWorld";
        this.addChild(this.txt_name);
    }

    /**
     * 皮肤第一次创建时调用
     */
    protected childrenCreated(): void
    {
        super.childrenCreated();
    }

    /**
     * 监听函数都在此进行
     * @param inStage
     */
    protected onStageChanged(inStage: boolean): void
    {
        super.onStageChanged(inStage);

        //假设我要监听一个按钮的点击
        this.listenTouch(this.btn_Level, this.onTouch);

        //此处监听一个事件
        this.listenEvent("changeText", this.changeText);

        if(inStage)
        {
            //此处可以写  当舞台存在时的逻辑
        }
    }

    private onTouch(event: egret.Event): void
    {
        console.log("被点击了");

        //发布一个事件改变文本的内容
        EventProxy.disWith("changeText");
    }

    private changeText(): void
    {
        this.txt_name.text = "哇哇哇，我被改变了"
    }
}