基于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化,好修改,另外一方面后续要升级引擎的时候,也容易修改。
- 字体问题分为两个问题:
- 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上就明确说部分版本不支持。提供一个字体适配,竟然是个半成本。
没有一颗追求完美的心,就不要做平台
基于Egret的VIVO小游戏接入相关推荐
- 基于Egret的OPPO小游戏接入
参考文档:OPPO小游戏打包官方文档 前提 安装了 node 环境,建议安装 8.x 稳定版本 [node官网:https://nodejs.org/en/] 开发 Cocos Creator 游戏, ...
- 帮你抢小游戏流量红利——vivo小游戏接入指南
vivo小游戏接入指南 一.平台介绍 VIVO小游戏运行在VIVO手机自带的游戏中心,活跃用户接近上亿,目前小游戏产品接入需要商务审核,审核通过后方可上线. 开放平台:https://dev.vivo ...
- 基于Egret的微信小游戏H5项目总结
H5 puremvc框架 View 与 Mediator 组合模式 View 上Button Image scrollView的事件在Mediator中实现,View仅仅是皮肤.是界面. 修改界面布局 ...
- LayaAir已支持vivo小游戏适配与IDE内一键发布!
6月底,我们本该发个引擎版本,由于计划搞点大动作.所以很抱歉,我们跳票了. 引擎语言从AS3全面转向TS,这个动静有点大,很多引擎小细节变了(不影响API),不止是代码迁移的工作量,还有各种测试. 为 ...
- OPPO、vivo 小游戏正式上线,Cocos 率先支持
OPPO .vivo 小游戏平台正式发布 在近期举办的 Cocos 开发者沙龙上,OPPO 和 vivo 小游戏商务负责人向与会开发者详细介绍了其小游戏的业务规划.用户属性.产品需求.合作方式.变现能 ...
- 上线游戏 400+ 款,OPPO、vivo 小游戏厚积薄发
截止今日,OPPO 小游戏上线数量接近 300 款,采用 Cocos 引擎开发的占比 80%:vivo 小游戏上线数量接近 100 款,其中 Cocos 引擎占比 60%:两个平台已上线总和超过 40 ...
- 微信小游戏接入遇到的坑
微信小游戏接入遇到的坑 1.微信web开发工具必须安装到C盘,才能被egret wing自动调取. 2.exml文件不能放在src文件夹,必现放在resource文件夹 3.egret Launche ...
- 帮你抢小游戏流量红利——360小游戏接入指南
360小游戏是指360 PC浏览器打开的桌面小程序运行平台 接入平台请戳这里 接入文档请戳这里 (本文根据2019年10月 360平台api和sdk版本总结,后续360平台做了很多优化) 接入不方便的 ...
- cocos creator vivo 小游戏 mac电脑
cocos creator vivo 小游戏 mac电脑 接入文档 文档链接 vivo调试 调试文档浏览器真机调试 1:使用cocos creator 进行打包 要勾选调试模式 生成了com.exma ...
最新文章
- 我要一颗原子弹 -- 开发者思维
- Unity的学习笔记(鼠标移动控制视角移动)
- 实战SSM_O2O商铺_46【Redis缓存】头条信息+商铺目录Service层加入缓存
- JPA 2 | EntityManagers,事务及其周围的一切
- ubuntu 启动图形界面命令_Windows 10 远程连接 Ubuntu 18.04 Server图形界面
- C\C++中声明与定义的区别
- MPEG文件中什么是GOP
- js ajax上传file文件上传,使用ajaxfileupload.js实现上传文件功能
- “似乎不能再叫闵大荒了。”
- csgo开箱网站有哪些?NEW
- java云闪付,第三方支付-银联云闪付开发教程
- 2018 拼多多校招贪心算法题
- 最好玩的steam游戏例举,看看都有那些?
- 离线语音智能家居控制
- 计算机网络-IP和子网掩码及网络划分
- [创业-4]:强大企业九大要素圆模型案例1-阿里
- android 科技动画,android开发ViewFlipper触摸动画
- 随想011:关于编程
- 集成学习:让算法和算法赛跑
- 融云 IM SDK 发送语音消息