初識Egret白鷺引擎 之 建立舞臺

簡述

    隨着Html5遊戲的逐漸普及，瞭解一款開發引擎，對於開發者是頗有幫助的。目前國內比較流行的html5遊戲引擎有:cocosCreator、Egret、Laya.今天就給你們詳細介紹下當前比較流行的Egret引擎。
提示:閱讀這篇文章須要有必定的編程知識。

    瞭解一款引擎首先從Mian函數講起。網頁遊戲啓動是加載index.html開始，因此引擎入口在index.hmlt中開始調用的。首先建立一個Demo,用白鷺自帶的EgretWing編輯器打開.
    

1. index.html加載流程

打開Index.html文件。在index.hmlt解析完畢後，會執行<script>標籤包裹的腳本代碼。主要有如下三個步驟：

1. 加載manifest.json文件
2. 加載腳本代碼
3. 初始化引擎
4. 首先會請求服務器下載manifest.json文件。
   它包含了遊戲中的js庫腳本和遊戲邏輯腳本。以下圖
5. 下載資源
       資源下載完畢後，會動態建立script對象，並將每一個個js文件異步加載到遊戲中。
6. 執行egret.runEgret方法啓動遊戲。
7. 啓動並遊戲
       遊戲啓動後畫面會顯示在網頁 div class="egret-player" 位置處。 該div存放動態建立的canvas對象，即遊戲視口。簡單瞭解下對應參數:

<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         data-entry-class="Main"  //入口類完整類名
         data-orientation="auto"  //控制橫豎屏，默認自動
         data-scale-mode="showAll" //屏幕縮放模式   
         data-frame-rate="30"     //遊戲幀率
         data-content-width="640"  //顯示寬度
         data-content-height="1136" //顯示高度
         data-multi-fingered="2"   //多點觸控，最大觸摸數
         data-show-fps="false" data-show-log="false" //是否顯示fps
         data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9"> //fps屏幕顯示樣式
    </div>

2. egret.runEgret參數介紹

1. renderMode 渲染模式 分別爲:canvas 和 webgl
2. audioType 音效類型 建議使用類型2:webaudio模式，使用0:default會有跨域問題。
3. calculateCanvasScaleFactor 是一個回調方法,能夠控制Canvas的縮放係數

3. 運行egret.runEgret

    資源加載完完畢沒有異常，就開始執行引擎的Mian方法了。用vscode編輯器打開源代碼，定位到EgretWeb.ts:runEgret方法。今天主要講解webView平臺，Native是android和Ios平臺，因爲源代碼沒有開放就先跳過。

1. 初始化Html5兼容配置
2. 設置渲染模式
   • 初始化WebGLRenderer WebGL渲染器
   • 初始化CanvasRenderer Canvas渲染器
   • 建立渲染緩衝CanvasRenderingContext2D(能夠在Canvas上繪製圖片的html對象)。

//CanvasRenderingContext2D 對象獲取方法
   let CanvasRenderingContext2D = canvas.getContext("2d")

 /**
   * 設置渲染模式。"auto","webgl","canvas"
   * @param renderMode
   */
  function setRenderMode(renderMode: string): void
  {
   //....
    if (renderMode == "webgl" && WebGLUtils.checkCanUseWebGL()) {
      sys.RenderBuffer = web.WebGLRenderBuffer;
      sys.systemRenderer = new WebGLRenderer();
      sys.canvasRenderer = new CanvasRenderer();
      //Canvas2D渲染緩衝
      sys.customHitTestBuffer = new WebGLRenderBuffer(3, 3);
      //
      sys.canvasHitTestBuffer = new CanvasRenderBuffer(3, 3);
      Capabilities["renderMode" + ""] = "webgl";
    }
    //...
  }

3. startTicker 啓動心跳。
       作個一個定時器，每60毫秒執行一次。SystemTicker是引擎的心臟，控制引擎每一幀數據刷新。也能夠空遊戲暫停與恢復以及設置幀率等功能。

/**
   * @private
   * 啓動心跳計時器。
   */
  function startTicker(ticker: egret.sys.SystemTicker): void
  {
    //.....

    if (!requestAnimationFrame) {
      requestAnimationFrame = function (callback)
      {
        return window.setTimeout(callback, 1000 / 60);
      };
    }
    
    requestAnimationFrame(onTick);
    function onTick(): void
    {
      ticker.update();
      requestAnimationFrame(onTick);
    }
  }

4. 初始化屏幕適配器
   egret.sys.screenAdapter = new egret.sys.DefaultScreenAdapter(); 開發能夠自定義適配器，在遊戲啓動調用runEgret方法時設置options.screenAdapter便可。
5. 建立WebPlayer

• 根據Index.html中Class數量來建立有如下幾個功能:
  1. 初始化引擎配置** 主要是前方介紹的index.html中egret-player div相關參數
  2. 建立渲染緩衝區webGL或者Canvas根據系統而定
  3. 並將緩衝區的canvas附加到DIV容器中
  4. 註冊WebTouchHandler
  5. 建立播放器對象egret.sys.Player
  6. updateMaxTouches 刷新屏幕大小
  7. updateMaxTouches 更新觸摸數量
  8. 啓動播放器
  • 啓動播放器主要是建立Main對象，並將其加入舞臺，做爲Stage孩子節點。是否建立Main對象是由Index.hmtl中的data-entry-class屬性決定的。並在心跳計時器中註冊播放器對象。 ticker.$addPlayer(this) 最終在SystemTicker.ts中每幀調用渲染函數

SystemTicker.ts
        /**
         * @private
         * 執行一次屏幕渲染
         */
        private render(triggerByFrame: boolean, costTicker: number): void {
            let playerList = this.playerList;
            let length = playerList.length;
            if (length == 0) {
                return;
            }
            this.callLaters();
            if ($invalidateRenderFlag) {
                this.broadcastRender();
                $invalidateRenderFlag = false;
            }
            for (let i = 0; i < length; i++) {
                playerList[i].$render(triggerByFrame, costTicker);
            }
            $requestRenderingFlag = false;
        }

到如今爲止Main節點已經建立好了，心跳計時器每60毫秒執行一次Update. Egret.player.Render在每次update時從新渲染屏幕