基于Egret的VIVO小游戏接入

vivo的接入很曲折，搞了两天才把微信小游戏移植到vivo上，没有IDE，官方提供的chrome调试又没作用，所以每次找问题都需要借助console，将步骤一步一步输出，然后定位到问题，每次都要经历：编译，起服，真机扫描，logcat日志查看。找出问题和修复问题效率很低。

目前除了字体的问题，游戏已经能正常运行了，记录一下接入过程，音乐、字体 问题后续有解决方案再补上

参考文档：

• vivo小游戏开发者文档
• 如何将egret的helloworld项目转成vivo小游戏 建议保存一下，因为这个链接竟然不在开发者文档的目录中

接入前准备

• 按照官方提供的 环境搭建 将开发和调试环境准备好
• 下载vivo-egret打包教程附件 强烈建议拿demo工程来修改，遇到不清楚的再查vivo的教程。

开始接入

如果还没接入，直接跳转到5-17号的补充内容， 用微信项目来修改，理论上也是可以参考补充内容来解决音乐字体问题

我是使用demo的微信项目来修改的，vivo官方教程只提供为egret 5.2.7版本。我没有最新 egret.js egret.wxgame.js 去覆盖这两个库了，担心会有很多兼容性问题，后续抽空再替换到5.2.18版本的。其他库，我都更新到最新的5.2.18版本上。

• 从游戏的发布目录realease/js目录将项目所需要的库，复制到 engine/js 目录。修改 manifest.js 将库文件导入

  require("js/egret.js")
  require("js/assetsmanager.js")
  require("js/game.js")
  require("js/socket.min.js")
  require("js/dragonBones.min.js")
  require("js/tween.js")
  require("js/jszip.min.js") 
  

• 将游戏程序文件 main.min.js 复制到 engine 目录下
• main.min.js 文件已经超过4M了，所以在微信小游戏中，采用分包加载的机制，所以我写了一个小加载界面 LoadMain.js 去等待加载分包。为了后续vivo的分包扩展性，将这个文件也移植到了 engine 目录下
• 修改 config/webpack.config.js 打包配置，将 engine 下新增的 js 文件打包到发布目录，engine/js 目录下的不需要处理，脚本会将整个子目录拷贝
• 修改vivo小游戏的配置。找到src/manifest.json 对应着修改，注意 package 的值修改为你申请的小游戏的包名，否则vivo的sdk登录会失败，获取不到appid
• 修改vivo的入口 src/game.js。

  window.wx = qg; // 因为是微信移植的，所以将命名空间重定向
  require('qgame-adapter.js');
  if (window.mainCanvas) {
      window['canvas'] = window.mainCanvas;
  }
  window["shareCanvas"] = {};
  require('manifest.js');
  require('egret.wxgame.js');
  require('LoadMain.js');
  require('SGPlatform.js');
  
  wx.exitMiniProgram = qg.exitApplication;
  

  由于我的主程序 main.min.js 是后续 require的，入口文件是 LoadMain.js ，所以需要对启动参数做修改：

  var runOptions = {
      entryClassName: "LoadMain",
      orientation: "auto",
      frameRate: 30,
      scaleMode: "fixedWidth",
      contentWidth: 480,
      contentHeight: 800,
      showFPS: false,
      fpsStyles: "x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9",
      showLog: false,
      maxTouches: 2,
      //----auto option end----
      renderMode: 'webgl',
      audioType: 2,
      calculateCanvasScaleFactor: function(context) {
          var backingStore = context.backingStorePixelRatio ||
              context.webkitBackingStorePixelRatio ||
              context.mozBackingStorePixelRatio ||
              context.msBackingStorePixelRatio ||
              context.oBackingStorePixelRatio ||
              context.backingStorePixelRatio || 1;
          return (window.devicePixelRatio || 1) / backingStore;
      }
  }
  

开始修复兼容性问题

• vivo的网络请求 qg.request，返回的数据类型字段是dataType， 而微信是responseType，所以修改 egret.wxgame.js 的 wx.request 方法参数，将 responseType 修改为 dataType，否则二进制文件将加载不了，会出现以下错误

  java.lang.RuntimeException: (see stack)Uncaught SyntaxError: Unexpected token j in JSON at position 0[0]xhr.onreadystatechange@@assets/game_native.js:2735
  

• promise报错处理，错误信息：

  Unhandled promise rejection [object Object]
  

  出现这个错误，一般是 promise 的 then 中出错了，而没有 catch。我出现这个问题也查了很久，后来定位到是有部分的 json 文件解析失败。在 assetsmanager.js，JSON.parse 对文本转换失败了

  processor_1.JsonProcessor = {
          onLoadStart: function (host, resource) {
              return host.load(resource, 'text').then(function (text) {
                  var data = JSON.parse(text);
                  return data;
              });
          },
          onRemoveStart: function (host, request) {
          }
      };
  

  通过console将text的内容输出，也没看出什么问题。由于console日志输出，文件太长，在logcat中显示是会被裁剪的，所以不清楚是本身文本加载不正常，还是在logcat被裁剪了，才导致转json失败。
  想了想，我将text的字符长度输出，如果logcat显示问题，文本长度应该是正常的。增加console输出，文本长度正常，确定是logcat显示裁剪而已，然后也发现了另外一个问题：异常的文本，文本长度比真实长度大1。
  这是大致可以确定问题了，JSON文件在加载回来是，头部或者尾部存在非显示字符，导致JSON转换失败了，最后定位到确实是头部存在一个特殊字符，将那个字符删除，JSON转换正常。

终于进入游戏了！！

5-17 补充：音乐和字体问题的修复

字体问题反馈给vivo后，给的尝试方案是用web项目来修改，而不要用微信项目来修改，我重新用web项目修改后，字体问题还是没法解决，再次反馈给vivo技术后，过了两天，问他们结果，vivo给的答复是还没找到问题。 可能本身他们对快游戏定位就是为了别人有，所以我也要有，没想过将他做的很完善。想想还是自己动手吧，经过这两天的研究，终于将音乐和字体问题修复了。

由于要对引擎修改，所以我还是选择的web项目来做修改，一方面代码没有min化，好修改，另外一方面后续要升级引擎的时候，也容易修改。

• 字体问题分为两个问题：

1. vivo 对字体库的支持不好，虽然有提供加载外部字库，但根本不生效，出来不生效之外还会有个副作用：没有字体样式了，比如加粗，所以会导致字体怎么调整都是不对的。建议统一字体为 'Arial’。
2. 字体行距和居中问题
   这个是他们到目前为止3天了，还没给反馈的问题。这个问题现在回头想想，其实是一个很容易发现和处理的问题。根据官网提供的教程，有一个 字体渲染修改建议 的修改。vivo对白鹭的字体样式做了放大处理，但这个函数只是对字体的渲染做了放大处理，对于字体的宽度计算并没做处理，所以才会导致字体行距和居中的问题，找到根节所在，就很好修改了：

找到字体宽度计算的位置 egret.web.js 文件中的 measureText 方法

function measureText(text, fontFamily, fontSize, bold, italic) {
            if (!context) {
                createContext();
            }
            var font = "";
            if (italic)
                font += "italic ";
            if (bold)
                font += "bold ";
            if (qg) {
                var canvasScaleX = egret.sys.DisplayList.$canvasScaleX;
                var canvasScaleY = egret.sys.DisplayList.$canvasScaleY;
                var scale = canvasScaleX >= canvasScaleY ? canvasScaleX : canvasScaleY;
                font += parseInt(fontSize * scale) + 'px ' + fontFamily;
            } else {
                font += fontSize + 'px ' + fontFamily;
            }

            context.font = font;
            return context.measureText(text).width;
}

• 声音问题
  vivo的声音api，不支持网络音乐地址，不支持重复播放，就意味着，只能先将音乐文件下载到本地，然后在播放，每次播放完毕就销毁掉（置null，清事件），按照这个思路，重写白鹭引擎的 HtmlSound 类和 HtmlSoundChannel 类
• 网络加载问题
  vivo提供了 qg.request 方法，所以要重写 WebHttpRequest 类
• 网络请求问题
  vivo 提供的 qg.request 方法，如果参数有中文，是需要做 encodeURI 处理，否则得不到任何返回。

OK，现在游戏终于完整的跑起来了。

最后，吐槽一下vivo的快游戏团队，既然你们推出了这个平台，就应该将整个平台完善好，出现常见问题都应该有基本的解决方案。白鹭虽然第三方的引擎公司，你可以说出了问题是他们的引擎的问题，但他不是一个小众的引擎，基本的适配还是要做支持的吧。官方的API是开发者遵循的依据，不完善的api，要么就不要公布，要么备注一下beta版本，还不够完善。像微信也提供了自定义字体的接口，但最初版本的时候，api上就明确说部分版本不支持。提供一个字体适配，竟然是个半成本。

没有一颗追求完美的心，就不要做平台