Cocos/Laya/Egret引擎适配

概述

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

引擎适配

Cocos、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 的方式接入。