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 熱更新命令

點擊按鈕後可以看效果了

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

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

sql多重查詢的嵌套語句

CSP201803-4棋局評估

推薦幾款遠程桌面連接工具

Redis的各個數據的類型基本命令

px4飛控調參筆記

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結