Egret 小游戏适配文档

# Egret 小游戏适配文档

# 一、说明

由于运行时的不同，Egret引擎开发的游戏并不能直接运行在连尚小游戏环境中，

因此需要开发者做一些适配工作才可以正确的运行在连尚小游戏中。

# 二、`Egret` 小游戏打包连尚小游戏步骤

简单来说，就是先将 Egret 小游戏导出为HTML5版本，然后经过适配步骤修改代码，最后打包成小游戏的 cpk 格式。

一个简单的示例

# 1、新建 Egret 项目

# 2、发布项目为 `HTML5` 平台

# 3、新建一个 `egret-cpk` 目录，将打包后的 `js`、`resource` 目录复制到该目录下

# 4、代码适配

由于我们需要修改Egret引擎代码以完成适配，⽽导出web版本的引擎代码是压缩版，难以修改，

因此我们需要使⽤⾮压缩版本的Egret代码替换。

使⽤ egret.js和 egret.web.js 替换对应的压缩版本。

提醒

非压缩版本文件在项目目录下的libs/modules/egret目录
替换egret-demo/js目录下的压缩版本文件

# 5、新建cocos小游戏的入口文件`main.js`

需参照文件manifest.json、index.html引入对应的资源

最终结果如下：

require("runtime-adapter.js");
require("js/egret.js"); // 完整版, 便于修改适配代码
require("js/egret.web.js"); // 完整版, 便于修改适配代码
require("js/game.min_45aa06f6.js");
require("js/tween.min_6c5a88f9.js");
require("js/assetsmanager.min_70d22011.js");
require("js/promise.min_83a6a5d.js");
require("js/main.min_ace4f3cb.js");

setTimeout(() => {
    egret.runEgret({
        renderMode: "webgl",
        audioType: 0,
        calculateCanvasScaleFactor: function(context) {
            var backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        }
    });
}, 0);

runtime-adapter.js下载地址

# 6、由于⼩游戏平台的XMLHttpRequest不⽀持读取本地⽂件，因此需要修改引擎代码，截获读取本地⽂件的请求进⾏处理

// egret.web.js
// 第一处
WebHttpRequest.prototype.send = function (data) {
  if (this._responseType != null) {
    this._xhr.responseType = this._responseType;
  }
  if (this._withCredentials != null) {
    this._xhr.withCredentials = this._withCredentials;
  }
  if (this.headerObj) {
      for (var key in this.headerObj) {
        this._xhr.setRequestHeader(key, this.headerObj[key]);
      }
  }
  // 添加适配代码开始 ↓↓↓
  if (typeof loadRuntime !== 'undefined' && !this._url.startsWith("http")) {
      console.log('WebHttpRequest.prototype.send 添加适配代码开始');
      let rt = loadRuntime();
      let that = this;
      setTimeout(() => {
          var response;
          if (that.responseType === 'arraybuffer') {
              response = rt.getFileSystemManager().readFileSync(that._url);
              that.localResponse = response;
          }
          else if (that.responseType === 'blob') {
              response = rt.getFileSystemManager().readFileSync(that._url);
              that.localResponse = new Blob([response]);
          } else {
              response = rt.getFileSystemManager().readFileSync(that._url, "utf8");
              that.localResponse = response;
          }
          that.dispatchEventWith(egret.Event.COMPLETE);
      }, 0);
      return; // 这里记得 return;
  }
  // 添加适配代码结束 ↑↑↑
  this._xhr.timeout = this.timeout;
  this._xhr.send(data);
};

// 第二处
Object.defineProperty(WebHttpRequest.prototype, "response", {
  /**
   * @private
   * 本次请求返回的数据，数据类型根据responseType设置的值确定。
   */
  get: function () {
      // 添加适配代码开始 ↓↓↓
      if (typeof loadRuntime !== 'undefined' && !this._url.startsWith("http")) {
        return this.localResponse;
      }
      // 添加适配代码结束 ↑↑↑
      if (!this._xhr) {
          return null;
      }
      if (this._xhr.response != undefined) {
          return this._xhr.response;
      }
      if (this._responseType == "text") {
          return this._xhr.responseText;
      }
      if (this._responseType == "arraybuffer" && /msie 9.0/i.test(navigator.userAgent)) {
          var w = window;
          return w.convertResponseBodyToText(this._xhr["responseBody"]);
      }
      if (this._responseType == "document") {
          return this._xhr.responseXML;
      }
      /*if (this._xhr.responseXML) {
          return this._xhr.responseXML;
      }
      if (this._xhr.responseText != undefined) {
          return this._xhr.responseText;
      }*/
      return null;
  },
  enumerable: true,
  configurable: true
});

# 7、H5游戏启动时，会读取index.html中的数据，因此，我们需要处理这些数据，保证游戏可以正确启动运⾏

适配前代码如图 egret.web.js ：

参照 index.html 代码：

适配后的代码如图：

特别注意的是，scaleMode需要固定为'fixedHeight',frameRate固定为60

适配后的代码：

// egret.web.js
WebPlayer.prototype.init = function (container, options) {
  console.log("Egret Engine Version:", egret.Capabilities.engineVersion);
  // 添加适配代码开始 ↓↓↓
  // var option = this.readOption(container, options);
  var option;
  if (typeof loadRuntime !== 'undefined') {
      option = JSON.parse(
      `{  "entryClassName": "Main",
          "scaleMode": "fixedHeight",
          "frameRate": 60,
          "contentWidth": 640,
          "contentHeight": 1136,
          "orientation": "auto",
          "maxTouches": 2,
          "textureScaleFactor": 1,
          "showPaintRect": false,
          "showFPS": true,
          "fpsStyles": {
              "x": "0",
              "y": "0",
              "size": "12",
              "textColor": "0xffffff",
              "bgAlpha": "0.9"
          },
          "showLog": false,
          "logFilter": null
      }`);
  } else {
      option = this.readOption(container, options);
  }
  // 添加适配代码结束 ↑↑↑
  // ……
  // 以下为egret原来的代码，省略
  // ……
};

# 8、右键选择 `egret-cpk` ⽬录内的⽂件（不包括 `egret-cpk` ⽬录本⾝），右键压缩为zip包，然后重命名为 `XXX.cpk`，该 `cpk`即可运⾏在⼩游戏平台上。

egret-cpk目录结构为：

# demo 下载

egret-cpk-demo 下载地址

← Laya 打包