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

時間 2019-12-28

標籤 egret 建立項目搭建底層框架简体版

原文原文鏈接

1、官網下載白鷺引擎：html

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

2、安裝後打開並下載最新版引擎web

3、建立項目json

4、打開項目我用的是WebStrom開發異步

AssetAdapter類主要是項目內解析資源。編輯器

LoadingUI類是初次進入時加載的等待界面。函數

Main類是遊戲的主入口。。一切邏輯都今後類開始。ui

Platform類遊戲發佈須要接入的平臺類，官方封裝，能夠忽略。this

ThemeAdapter類是解析EUI製做的皮膚資源管理類。es5

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

5、打開Main類內部已有詳細註釋。。勇於刪除代碼運行。這樣才學的快

一、createChildren函數是皮膚初次建立時調用

二、異步函數runGame 此函數主要加載資源與主入口函數同步進行

三、異步函數loadResource 次函數主要加載eui內的皮膚與資源

四、createGameScene 此函數爲主入口。能夠將函數裏的內容所有刪除。並將相關的也刪除

6、開始建立底層代碼建立一個文件夾 common。建立2個基類分別爲BaseEuiComp視圖基類、EventProxy發佈事件基類、

一、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);
    }
}

二、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);
    }
}

三、開始上手寫代碼建立一個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 = "哇哇哇，我被改變了"
    }
}