Egret創建項目+搭建底層框架

一、官網下載白鷺引擎：

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 = "哇哇哇，我被改變了"
    }
}

 

在Main類里面的createGameScene函數里面添加到舞台

 

 好了 可以用Egret Wing編輯器編譯運行  也可以在webStrom里面的命令行輸入 egret run -a  熱更新命令

 

 

 

 點擊按鈕后可以看效果了

 

 

項目構建與底層代碼搭建到這里了。。這個基類是我用過最好的一套