「技术分享」：iOS、Android、H5三端通版本常见问题及解决方案

幼麟棋牌从一开始就选择了 Cocos Creator 作为唯一客户端引擎。 从 Cocos Creator v1.2 正式版本开始，到现在的 v1.4.2（由于项目太多，无法逐一升级。目前大部分项目保留在了 v1.4.2版本。 少量项目进行了 v1.6.1 尝试）。

幼麟棋牌从一开始就设定了一个目标：做 iOS、Android、H5 均可互通的棋牌。这其中，也遇上了不少坑，在此分享给大家，以供探讨。

1

游戏中语音通话问题

棋牌开发，目前实时语音消息已经是标配了。

如果单纯做 APP，可以接入各种 SDK。当然也可以像幼麟一样，自己写一个语音SDK，小巧耐用。 如果单纯做H5，可以直接使用微信提供的语音接口。

但这两类语音接口，所提供的数据格式是不一样的。

1、比较直接的方式，就是 iOS 和 Android 互通，H5 和 H5 互通。 
2、比较绕的方式，就是 iOS 和 Android 接入腾讯语音 SDK，并使用 SDK 的文字识别功能。 这样 H5 平台虽然听不到，但可以看到发言者说的内容，而 H5 这边也是如此，可以让 iOS 和 Android 平台看到文字。这种方式，把地方方言给带的风生水起。

3、服务器转码，强转为三端都可以识别的音频格式。

之所以不能互通的原因，是因为语音格式在不同平台上都不一样。 我们可以克服 iOS 和 Android 的不互通，但无法解决 H5 问题。所以，只有利用另一个中间格式来做支持，比如 MP3。 三个平台的录音发送到服务器，服务器进行强制转码，生成像 MP3 这样的音效文件。 再将这个 MP3 文件存储到云上并广播云地址。 其它平台将这个 MP3 文件当普通的音效文件播放即可。

这个方案的缺点是很明显的：

1、需要消耗服务器大量的 CPU 资源； 

2、对服务器行带宽要求高； 

3、MP3 格式始终比语音格式的文件大，对玩家的带宽要求高。

上面的方式，就看各位客官自己怎么想了。

2

屏幕适配问题

屏幕适配问题一般有两个：宽高自适应，横竖屏切换。

1、宽高自适应
在这里比较推荐的是长边优先。 如果是横屏游戏，优先选择 fixed width，如果是竖屏模式，优先选择 fixed height。

我们以横屏为例。IPAD 为最宽的设备，iPhone 8 为最长的设备。如果这个设备在微信中访问，那么横屏的时候就更远远小于 2：1 了。

因此，我们选择了定宽模式后，在高度适应上要反复测试，尽量在不同的分辨率上都有较好的展现效果。

值得一提的是， 在 IPAD 上玩棋牌的比例远远小于手机上的玩家人数。

因此，确保手机玩家的效果最优，并能够让 IPAD 这类设备显示不出错即可。

2、横竖屏切换
大部分情况是用不上的。但假如你是一个平台性的游戏，并且想以轻量级玩法为主，比如， 牛牛、金花、德州等，竖屏为主。捕鱼、麻将、斗地主等，横屏为主。这个时候就需要用到横竖屏切换了。

Cocos Creator 提供了 cc.view.setOrientation 来进行切换，但仅针对 H5 有效。iOS 和 Android 上，需要自行处理横竖事件，并设置对应的 VIEW 参数。

3

网络机制不统一的问题

socket.io 的 emit 和 on，在 iOS 下都会自动进行 JSON 到 OBJECT 的映射。比如，你可以直接 emit 一个 obj。 服务器那边会自动收到（我们服务器是NODEJS+SOCKET.IO）。

服务器 emit 一个 obj，H5 客户端也会自动收到并转换为 obj。

但在 iOS 和 Android Native上面，就不会自动做这个转换。 如果客户端要强行 emit 一个 obj 给服务器，会挂掉的。

因此解决的办法，就是不管是 H5 还是 Native，都做好 string -> obj 以及 obj->string 的手动转换。

目前的版本中，Native 环境下是收不到 socket.io 断线事件的。 因此需要自行在上层做心跳，并鉴定是否网络超时。

4

微信分享机制不统一的问题

微信分享在 H5 中，只能是点系统的菜单，然后触发对应的回调。 因此，在 H5 中我们需要先设置好对应的 share 信息，以供微信回调。而在 Native 中，则是直接将需要分享的信息发送到分享接口。这两个是截然不同的操作。 因此需要针对 Native 和 H5 的情况，做好界面按钮的事件处理。 

方案无非就两个

1、H5 中分享按钮不显示
2、H5 中点击分享按钮的时候，界面提示玩家点击微信系统菜单中的分享。

5

微信开放平台与公众号互通问题

同一个玩家使用不同的开放平台账号和公众号登陆，拿到的 openid 是不一样的。因此，如果我们使用了 openid 作为玩家账号，是无法做到 H5 与 Native 互通。

基于这个需求，微信提供了 unionid。

普通的开放平台账号和服务号是没有这个 unionid 的。 要想让玩家登陆的时候带有 unionid，需要将公众号梆定到对应的开放平台账号下。

6

加载体验问题

加载体验一般就是指界面部分。 在 H5 中，我们第一次打开一个界面的时间较长，因此会做一个 loading 提示界面。 但在 Native 是不需要的，因为一闪就过了，体验感非常不好。

因此需要鉴别平台，并做好开关。

另外，说到这里。就需要说一下，不管是 Native 还是 H5，都尽量保证场景树上的资源足够少，否则切换场景的体验会非常不好。

7

贴图格式问题

如果要在不同的平台使用不同的纹理格式和压缩比例，最好的策略是在 build 后，执行相应的脚本，然后再进行构建。具体的工作流就由各团队自行研究了。普通的 PNG 压缩，一般使用 pngquat 命令行；PVRTC 压缩，一般使用 PowerVR 官方提供的纹理压缩工具；ETC 压缩，Mali 的工具挺不错。

8

跨域加载头像问题

服务器中转一次就好。值得注意的是，微信头像是不带后缀的，如果我们在地址中拼上 .jpg，也会导致加载失败。

如果我们强制指定 {type:'jpg'} 或者 {type:'png'} 也会有部分玩家加载不出来。 而如果我们不加后缀， cc.loader 又不会把我们加载的数据视为 Texture2D。

解决办法就是， 我们用把地址拼上 .jpg，交以 HTTP 的方式给我们的游戏服务器，游戏服务器去掉 .jpg 后，向微信 API 服务器请求数据加载。游戏服务器再将加载一的数据，以 HTTP 方式返回给客户端，客户端就能正常显示所有的玩家头像了。

9

微信滑动返回问题

在微信中，向右滑动即可关闭微信浏览器。

当我们锁定了手机旋转功能，玩横屏麻将时，如果你要从底部滑动出牌，有可能就会把微信浏览器关了。

解决这个问题的办法就是让它旋转180度，这个在论坛中有同学发过的。

终于整理完成。虽然处理办法简洁了当，但只有当大家在实际项目中真正遇到坑，才能找到一对一找具体的解决方法。问题整理稍显简陋，如果大佬有更深层次的见解，欢迎补充，共同体验「让游戏开发更简单」的处理方式。