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
对文本转换失败了
通过console将text的内容输出,也没看出什么问题。由于console日志输出,文件太长,在logcat中显示是会被裁剪的,所以不清楚是本身文本加载不正常,还是在logcat被裁剪了,才导致转json失败。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) { } };
想了想,我将text的字符长度输出,如果logcat显示问题,文本长度应该是正常的。增加console输出,文本长度正常,确定是logcat显示裁剪而已,然后也发现了另外一个问题:异常的文本,文本长度比真实长度大1。
这是大致可以确定问题了,JSON文件在加载回来是,头部或者尾部存在非显示字符,导致JSON转换失败了,最后定位到确实是头部存在一个特殊字符,将那个字符删除,JSON转换正常。
终于进入游戏了!!
5-17 补充:音乐和字体问题的修复
字体问题反馈给vivo后,给的尝试方案是用web项目来修改,而不要用微信项目来修改,我重新用web项目修改后,字体问题还是没法解决,再次反馈给vivo技术后,过了两天,问他们结果,vivo给的答复是还没找到问题。 可能本身他们对快游戏定位就是为了别人有,所以我也要有,没想过将他做的很完善。想想还是自己动手吧,经过这两天的研究,终于将音乐和字体问题修复了。
由于要对引擎修改,所以我还是选择的web项目来做修改,一方面代码没有min化,好修改,另外一方面后续要升级引擎的时候,也容易修改。
- 字体问题分为两个问题:
- vivo 对字体库的支持不好,虽然有提供加载外部字库,但根本不生效,出来不生效之外还会有个副作用:没有字体样式了,比如加粗,所以会导致字体怎么调整都是不对的。建议统一字体为 'Arial’。
- 字体行距和居中问题
这个是他们到目前为止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上就明确说部分版本不支持。提供一个字体适配,竟然是个半成本。
没有一颗追求完美的心,就不要做平台