导语

本文将从 iOS 工程角度出发，简要介绍 iOS 软件应该如何从 0 到 1 实现内嵌小游戏功能。

效果展示

方案选型

经过前期的调研，主流的方案有微信小游戏、Canvas、Cocos2d，下面逐个分析一下这几个方案：

微信小游戏：微信小游戏是闭源的，没有公开 SDK，直接 Pass；
Canvas：Canvas 方案对应 Cocos Creator 的发布到 Web 平台章节。本质上就是将游戏跑在浏览器上。这个方案可以说是最完善的方案，可以对游戏的全过程拥有更为完整的把控，但是需要 web 同事的协同开发，而且 web 同事的开发工作会成为最长路径，所以 Canvas 方案比较适合大公司且有足够的需求开发时间的情况下选择；
Cocos2d：Cocos2d 方案对应 Cocos Creator 的打包发布原生平台章节。底层是用原生平台调用 OpenGL 进行渲染的（cocos2d-x v4 已经支持了 Metal 渲染）。Cocos2d 有现成的解决方案，基本上只需要客户端即可完成，不需要 web 同事的参与，同时原生渲染性能比较好，比较适合人手不充足或者需要快速上线验证收益的情况；

我们根据自己的实际情况最终选定了 Cocos2d 方案。

整体流程

当我们点击一个小游戏的时候，会有以下几个主要步骤：

对该小游戏进行预处理，预处理主要是当前游戏状态的检查（未在游戏状态则直接进入下一步、正在游戏状态则需要先关闭当前游戏再进入新的游戏等），预处理都通过则进入步骤 2；
展示小游戏加载页，同时从服务端拉取游戏信息 gameInfo，拉取游戏信息成功进入步骤 3；
根据游戏唯一标识 appId 为 key 查找游戏包缓存，如果游戏包已经缓存则进入步骤 5；
根据服务端下发的下载链接下载指定版本的游戏包，同时回调下载进度到加载页进行展示，下载成功后对游戏包进行 md5 校验，校验通过则进入步骤 5；
传入游戏包地址调用 Cocos2d 启动游戏，等 Cocos2d 渲染好第一帧画面然后将游戏控制器推入视图堆栈，并将状态切换为游戏中。

工程结构

主工程

主工程也即是业务层，和小游戏模块是需要完全解耦的，游戏的状态转换不应该依赖业务层，业务层也不应该知晓过多的游戏内部细节。两者的交互只会发生在 MiniGameManager 类，MiniGameManager 需要做到低耦合、高内聚，下面先看一下 MiniGameManager 的主要接口：

#pragma mark - 小游戏相关通知
 
MiniGameWillStart       // 小游戏即将启动通知
MiniGameStartFailed     // 小游戏启动失败通知
MiniGameDidStart        // 小游戏启动成功通知
MiniGameWillEnd         // 小游戏即将结束通知
MiniGameDidEnd          // 小游戏结束通知
 
@interface MiniGameManager : NSObject
 
- (instancetype)sharedManager;
 
/// 游戏状态
@property (nonatomic, assign, readonly) MiniGameStatus gameStatus;
 
/// 启动游戏
/// @param gameAppid 游戏 appId
- (void)startGame:(NSString *_Nonnull)gameAppid;
 
/// 结束游戏，清理游戏相关资源
- (void)endGame;
 
@end

启动游戏：理论上只需要传入游戏 appId 就能启动对应的小游戏，其他诸如视图堆栈处理、游戏状态处理、资源包下载解压、游戏运行等都由小游戏模块内部处理。
结束游戏：只需要调用 endGame 方法即可，游戏相关资源的清理、视图堆栈处理等都由小游戏模块内部处理。

为了更好的解耦，主工程（业务层）只会通过通知的方式得知小游戏的状态转换，从而进行对应的处理，比如启动游戏时停止音频的播放、关闭有冲突的其他业务等。

MiniGame

MiniGame 是负责业务层和小游戏底层交互的中间层，囊括了游戏账号体系、生命周期、资源包管理、网络请求、支付、广告、分享、心跳、上报等模块。

以游戏账号体系为例简述这一层的职责，我们会接收到来自下一层 Interface 层的事件回调，事件回调通过 delegate 的方式进行解耦。以下是账号体系相关 delegate 的部分代码：

@protocol CocosAccountProtocol <NSObject>
 
@required
 
// 登录回调
- (void)login:(int)timeout success:(SuccessCallBack)successBlock fail:(FailureCallBack)failureBlock;
 
// 获取用户信息回调
- (void)getUserInfoWithSuccess:(nonnull GetUserInfoSuccessCallBack)successBlock fail:(nonnull FailureCallBack)failureBlock;
 
@end

当接收到 Interface 层的事件回调时，我们校验对应的参数，然后由客户端向服务端发起对应请求，请求成功则调用 successBlock 回调给游戏侧成功回调事件，否则调用 failureBlock 进行失败回调。其他的模块对应的处理不外如是。

Interface

Interface 主要分为两部分：

CocosRootViewController 负责提供承载游戏的视图（CCEAGLView），这部分是 iOS 独有的；
接收到游戏侧发出的 JS 事件，通过 BussinessManagerFactory 区分 iOS、Android 平台进行事件分发，iOS 端会分发到 BusinessiOSImpl 类，BusinessiOSImpl 再往上抛给 MiniGame 层进行实际的事件处理，处理完成后会通过回调把结果传回给游戏侧。示意可以参考下图：

Interface

Cocos2d

游戏引擎选择的是 Cocos2d，Cocos2d 是一个开源的跨平台游戏框架，也是目前最流行的游戏引擎之一。Cocos2d 适配了 iOS、Android、Windows 和 Mac 系统，功能侧重于原生移动平台。

我们目前使用的其实是 Cocos2d 的简化版 cocos-2d-lite
，cocos2d-x-lite 移除了 3D 特性、Linux 平台支持、摄像头等，更加小巧。

我们在 Cocos2d 层的开发工作，是为小游戏提供扩展能力，包括账号、生命周期、支付、广告、分享等。扩展能力的接口设计主要参考的是微信小游戏。

说回代码，Cocos2d 层我们所做的事情比较机械，主要就是绑定 JS 事件然后往 Interface 层抛。值得一提的是，这一层的代码是两端共用的，纯 C++，。下面贴一下绑定分发 JS 事件的代码，其他接口可以按这种方式快速完成：


// 绑定 login 事件
SE_DECLARE_FUNC(js_login);
 
// 定义 login 事件的处理
static bool js_login(se::State &s)
{
    const auto &args = s.args();
    if (args.size() != 1) {
        SE_REPORT_ERROR("wrong number of argument: %d", (int)args.size());
        return false;
    }
 
    if (!args[0].isObject()) {
        SE_REPORT_ERROR("wrong type of argument: %d", (int)args[0].getType());
        return false;
    }
 
    auto obj = args[0].toObject();
    auto param = std::make_shared<LoginParam>(obj, s.thisObject());
    // 往上抛到 BusinessFactory 进行事件分发
    BusinessFactory::get()->login(param->getTimeout(),
                                  std::static_pointer_cast<LoginCallback>(param));
    return true;
}
SE_BIND_FUNC(js_login)

结语

Cocos2d 方案相比起其他方案而言更加适合我们，使我们得以快速上线验证。但是在实际的测试过程中，我们也发现 Cocos2d 官方其实并没有支持游戏重入，也就是游戏大厅的功能是不支持的，会导致游戏重入的时候会有一些内存泄漏问题和 crash，我们也花了相当一部分时间去解决这些问题。这也更加提醒我们，在方案选型的阶段应该更加细致，应该做出一个 demo 包实际的测试帧率、内存、CPU、GPU 等性能数据，才可以尽可能早地暴露问题并解决。

以上

从 0 到 1：iOS 软件集成小游戏功能

从 0 到 1：iOS 软件集成小游戏功能

导语

效果展示

方案选型

整体流程

工程结构

主工程

MiniGame

Interface

Cocos2d

结语