初识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时从新渲染屏幕