Cocos2d 小程序平台适配（微信/支付宝小游戏）【玩转华为云】

引言

技术背景

• Cocos2d 系列：Cocos2d-x（C++）、Cocos Creator（JS/TS）是主流 2D 游戏引擎，支持多平台发布。
• 小程序平台限制：
  • 微信小游戏：基于浏览器内核，支持部分 HTML5 Canvas 与 WebGL，但有包体大小、API 白名单限制。
  • 支付宝小游戏：类似微信，底层也是浏览器环境，但有自己的 JSAPI 和生命周期。
• 适配思路：
  1. 使用 Cocos Creator 发布 Web Mobile​ 版本。
  2. 将生成的 HTML/JS/CSS 文件封装成小程序可加载的资源。
  3. 编写平台适配层（JS），桥接 Cocos 渲染环境与小程序 API（文件系统、触摸事件、网络请求等）。
  4. 打包上传至微信/支付宝开发者工具。

应用使用场景

1. 休闲益智类小游戏：如消除、拼图、塔防，可直接移植 Web 版 Cocos 游戏。
2. 品牌营销互动游戏：品牌活动页嵌入 Cocos 动画与交互，提高用户停留时长。
3. 教育类小游戏：寓教于乐的学习游戏，利用 Cocos 动画优势呈现教学内容。

核心特性

• 跨平台复用：一次开发，可同时发布微信、支付宝小游戏。
• 轻量包体控制：通过资源分包与按需加载减少首包体积。
• 平台 API 桥接：统一接口访问不同小程序的本地存储、分享、广告等功能。
• 触摸与渲染兼容：利用小程序提供的 Canvas 上下文对接 Cocos WebGL 渲染。

原理流程图与原理解释

流程图

graph TD  
    A[Cocos Creator 工程] --> B[发布 Web Mobile 版本]  
    B --> C[生成 index.html + main.js + 资源目录]  
    C --> D[编写平台适配层 js_adapter.js]  
    D --> E[封装为微信/支付宝小游戏项目结构]  
    E --> F[在开发者工具中调试与打包]  
    F --> G[上线小游戏平台]

原理解释

1. 发布 Web 版：Cocos Creator 导出标准 HTML5 游戏，包含 Canvas 渲染与 JS 逻辑。
2. 平台适配层作用：
   • 替换浏览器全局对象（如 window、document）在小程序环境中的实现。
   • 将小程序的触摸事件转发给 Cocos 的输入系统。
   • 替换 Cocos 的文件系统与网络请求为小程序对应 API（wx.request、my.httpRequest）。
3. Canvas 对接：小程序 <canvas>标签类型设为 webgl，并将 Cocos 渲染目标绑定到该 Canvas。

环境准备

• 开发工具：
  • Cocos Creator 2.4+ 或 3.x（建议 2.4.x 对微信小游戏适配更成熟）
  • 微信开发者工具（稳定版）
  • 支付宝小程序开发者工具
• Node.js（用于构建与资源管理）
• 项目结构示例：

project_root/
├─ build/web-mobile/       # Cocos 导出的 Web 版
│  ├─ index.html
│  ├─ main.js
│  └─ res/...               # 游戏资源
├─ adapter/
│  ├─ wx_adapter.js         # 微信适配器
│  └─ my_adapter.js         # 支付宝适配器
└─ game.js                  # 小程序入口文件

实际详细应用代码示例实现

1. Cocos Creator 发布设置

• 在 Cocos Creator 构建发布面板选择 Web Mobile。
• 关闭压缩混淆以便调试，发布路径指向 build/web-mobile。

2. 微信小游戏适配器（adapter/wx_adapter.js）

// 模拟浏览器 window/document 基础对象
const fakeWindow = {
    requestAnimationFrame: wx.requestAnimationFrame.bind(wx),
    cancelAnimationFrame: wx.cancelAnimationFrame.bind(wx),
    setTimeout,
    clearTimeout,
    location: { href: '' },
    navigator: { userAgent: 'WeChat Game' }
};
global.window = fakeWindow;
global.document = {
    createElement: (type) => {
        if (type === 'canvas') {
            return wx.createCanvas();
        }
        return {};
    },
    body: {}
};

// 重写 Cocos 需要的全局函数
global.Image = wx.createImage();

// 网络请求桥接
const originalXHR = XMLHttpRequest;
XMLHttpRequest = function () {
    const xhr = new originalXHR();
    // 这里简单包装，复杂场景需完全重写 open/send
    return xhr;
};
// 更简单的方式：让 Cocos 直接使用 wx.request
window.wx_request = (options) => {
    wx.request({
        url: options.url,
        method: options.method || 'GET',
        data: options.body || options.data,
        success(res) { options.success && options.success(res.data); },
        fail(err) { options.fail && options.fail(err); }
    });
};

// 触摸事件转发
const canvas = wx.createCanvas();
canvas.addEventListener('touchstart', (e) => {
    // 转换为 Cocos 所需的 Touch 事件格式
    const touch = e.touches[0];
    // 分发到 Cocos 的 input manager
    if (typeof cc !== 'undefined' && cc.inputManager) {
        cc.inputManager.handleTouchStart([{
            x: touch.clientX,
            y: touch.clientY
        }]);
    }
});
canvas.addEventListener('touchend', (e) => {
    const touch = e.changedTouches[0];
    if (cc && cc.inputManager) {
        cc.inputManager.handleTouchEnd([{
            x: touch.clientX,
            y: touch.clientY
        }]);
    }
});
canvas.addEventListener('touchmove', (e) => {
    const touch = e.touches[0];
    if (cc && cc.inputManager) {
        cc.inputManager.handleTouchMove([{
            x: touch.clientX,
            y: touch.clientY
        }]);
    }
});

3. 支付宝小游戏适配器（adapter/my_adapter.js）

const fakeWindow = {
    requestAnimationFrame: my.requestAnimationFrame.bind(my),
    cancelAnimationFrame: my.cancelAnimationFrame.bind(my),
    setTimeout,
    clearTimeout,
    location: { href: '' },
    navigator: { userAgent: 'Alipay MiniGame' }
};
global.window = fakeWindow;
global.document = {
    createElement: (type) => {
        if (type === 'canvas') return my.createCanvas();
        return {};
    },
    body: {}
};
global.Image = my.createImage();

// 网络请求
window.my_request = (options) => {
    my.httpRequest({
        url: options.url,
        method: options.method || 'GET',
        data: options.body || options.data,
        success(res) { options.success && options.success(res.data); },
        fail(err) { options.fail && options.fail(err); }
    });
};

// 触摸事件
const canvas = my.createCanvas();
canvas.addEventListener('touchstart', (e) => {
    const touch = e.touches[0];
    if (cc && cc.inputManager) {
        cc.inputManager.handleTouchStart([{ x: touch.clientX, y: touch.clientY }]);
    }
});
// touchend/touchmove 类似上面微信代码

4. 小程序入口文件（game.js）

// 根据平台加载不同适配器
if (typeof wx !== 'undefined') {
    require('./adapter/wx_adapter.js');
} else if (typeof my !== 'undefined') {
    require('./adapter/my_adapter.js');
}

// 加载 Cocos 游戏入口
const cocosScript = document.createElement('script');
cocosScript.src = './main.js'; // 来自 build/web-mobile
document.body.appendChild(cocosScript);

// 启动游戏
window.boot = function () {
    // Cocos 会在 main.js 中调用 cc.game.run()
};

5. 微信小游戏项目结构配置（game.json）

{
  "deviceOrientation": "portrait",
  "showStatusBar": false,
  "networkTimeout": {
    "request": 5000,
    "connectSocket": 5000,
    "uploadFile": 5000,
    "downloadFile": 5000
  },
  "subpackages": []
}

运行结果

• 在微信/支付宝开发者工具中打开项目，看到 Cocos 游戏正常渲染。
• 触摸、按钮、动画与 Web 版表现一致。
• 可通过 console.log查看平台 API 调用情况。

测试步骤

1. 使用 Cocos Creator 构建 Web Mobile 版本。
2. 按上述结构放置适配器与入口文件。
3. 在微信/支付宝开发者工具新建项目，指向根目录。
4. 预览并调试，检查渲染、输入、网络是否正常。
5. 调整资源分包与缓存策略，优化加载速度。

部署场景

• 社交裂变游戏：依托微信/支付宝社交链分享获客。
• 线下门店互动：扫码进入小游戏获取优惠券。
• 品牌曝光活动：嵌入品牌元素的小游戏提升用户参与度。

疑难解答

• Canvas 黑屏：检查 webgl支持，确保 <canvas type="webgl">并设置尺寸。
• 触摸无响应：确认适配器事件绑定到正确的 Canvas 实例。
• 资源加载失败：小游戏域名白名单限制，需在后台配置合法域名。

未来展望

• Cocos Creator 官方小游戏发布插件：简化适配流程。
• 原生性能优化：通过 WASM 或平台原生渲染接口提升帧率。
• 多端同构：一套代码同时发布微信、支付宝、抖音小游戏。

技术趋势与挑战

• 趋势：小游戏平台越来越开放 GPU 能力，支持更复杂的 2D/3D 游戏。
• 挑战：包体限制、平台 API 差异、性能调优需针对不同平台单独处理。

总结