Cocos/Laya/Egret引擎适配

概述

TapTap 小游戏是一个不同于浏览器的 JavaScript 运行环境，没有 BOM 和 DOM API。然而几乎所有基于 HTML5 的游戏引擎都是依赖浏览器提供的 BOM 和 DOM API ，所以如果要在小游戏中使用游戏引擎进行开发，需要关注引擎本身是否对 TapTap 小游戏进行适配。

::: warning 版本要求 Cocos Creator 插件仅支持 3.8.x 及以上版本。 :::

Cocos Creator 适配

1. 导入插件

1. 打开 Cocos Creator 编辑器
2. 点击菜单栏 扩展 → 扩展管理器
3. 点击右上角 导入本地扩展 按钮

4. 选择 tap-minigame-ts.zip 文件

版本	下载
1.2.2	下载 (opens new window)

5. 等待导入完成

2. 启用插件

1. 在扩展管理器的 已安装扩展 标签页中
2. 找到 taptap-minigame-tools 插件
3. 点击 启用 按钮
4. 等待插件加载完成
5. 看到控制台输出 [Tap小游戏] 扩展已加载 即为成功

3. 配置构建选项

1. 点击菜单栏 项目 → 构建发布
2. 在构建发布面板中，选择平台：微信小游戏
3. 配置微信小游戏的基本选项（AppID、初始场景等）
4. 向下滚动，找到 转换为Tap小游戏 复选框
5. ☑️ 勾选 转换为Tap小游戏
6. 填写 Tap小游戏AppID

4. 开始构建

1. 点击构建面板底部的 构建 按钮
2. 等待构建过程完成

构建过程：

• 第一阶段：构建微信小游戏（Cocos标准流程）
• 第二阶段：自动转换为Tap小游戏（10个步骤）

5. 查看构建结果

构建完成后，在项目根目录下查看：

微信小游戏输出

路径：build/wechatgame-001/（或其他名称）

Tap小游戏输出

• 游戏目录：build/TapBuild/game/
• ZIP包：build/TapBuild/game.zip ⭐

最终产物

build/TapBuild/game.zip 即为可上传到Tap小游戏平台的最终文件。

常见问题

构建完成但没有生成Tap小游戏

• 检查是否勾选了 转换为Tap小游戏 复选框
• 查看开发者工具的Console日志，确认是否有错误信息

首次使用提示缺少依赖

• 在扩展目录执行 npm install 安装依赖
• 或在扩展管理器中点击 安装依赖 按钮（如果有的话）

查看详细转换日志

1. 打开 开发者 → 开发者工具
2. 切换到 Console 标签
3. 查找 [Tap小游戏] 开头的日志

支持的 Cocos Creator 版本

• 3.8.x 及以上

Laya/Egret 引擎适配

Laya、Egret 引擎适配，参考转换工具使用文档 请通过开发者工单联系我们获取支持 (opens new window)

适配原理

基于 HTML5 的游戏引擎会依赖浏览器提供的能力实现游戏画面的绘制，游戏音频的播放等功能，而就如概述所说， TapTap 小游戏的运行环境不同于浏览器，一方面并不提供 BOM 和 DOM API，另一方面额外提供了 FileSystem 这类浏览器不具备的 API。

为了让基于 HTML5 的游戏引擎开发的游戏能够运行在 TapTap 小游戏的环境下，需要在引擎层面进行 BOM 和 DOM API 的抹平，并利用 TapTap 小游戏提供的 FileSystem 进行文件读写等操作，我们称之为 Adapter，可能不同的引擎的 Adapter 实现方案不同，但原理大致相同。

以 HTML5 createElement 为例，创建画布和图片需要使用 DOM API，依赖 document：

var canvas = document.createElement('canvas');
var img = ducument.createElement('img');

为了抹平这里的差异，引擎会构造一个 document，使用 TapTap 小游戏提供的 API 来实现对应的功能，比如 tap.createCanvas 和 tap.createImage 等。

// document
var document = {
    // ...
    createElement: function createElement(tagName) {
        if (tagName === 'canvas') {
          return new _Canvas["default"]();
        } else if (tagName === 'audio') {
          return new _Audio["default"]();
        } else if (tagName === 'img') {
          return new _Image["default"]();
        } else if (tagName === 'video') {
          return new _HTMLVideoElement["default"]();
        }
        return new _HTMLElement["default"](tagName);
    },
    // ...
}

// canvas
function Canvas() {
  var canvas = tap.createCanvas();
  canvas.type = 'canvas';
  // ...
  return canvas;
}

除 createElement 外，引擎会抹平差异的差异还有很多：

• touch 事件
• 缓存
• 音频
• 图片
• socket
• request
• ......

后续新增的基础能力平台也会和引擎协作使开发者低成本的接入，不过平台提供的开放能力（比如广告，支付）还是需要开发者主动通过 tap api 的方式接入。