常见问题

以下是开发者在使用 Tiny.js 做游戏开发过程遇到的一些常见问题,如何解决及规避的总结。 首先,请确保使用最新版本的 Tiny.js。

一、渲染内核

1-1 渲染模式请使用 canvas

Tiny.js 支持 WebGL 和 Canvas 两种模式来渲染。但 WebGL 渲染会导致以下问题:

  • iOS 设备 crash 概率增加(与不使用 WebGL 渲染对比)
  • Android 设备有一定概率渲染异常 因此需要禁用 WebGL 渲染。

1-2 iOS 设备请开启 WKWebview

iOS 设备使用 UIWebview 进行渲染时,canvas 区域会有小概率出现蓝屏问题。需要在可以开启 WKWebview 的设备上尽量开启这一特性。

二、绘制性能

2-1. 避免使用 Tiny.Graphics

Tiny.Graphics 底层使用的是 canvas API 来绘制图形,每一帧进行贴图都会进行计算并绘制。如非必要,请尽量使用图片材质。

2-2. 帧绘制时无需清理 canvas

如果绘制区域的背景非透明,则可以设置 renderOptions.transparent: false 这一启动参数,这样在每一帧绘制时渲染引擎无需清理 canvas,可以节省一定的 CPU 开销。具体配置请参考启动参数

2-3. 合理选择帧率来平衡性能与体验

Tiny.js 引擎在 1.1.7 版本增加了帧率设置启动参数。在不明显影响体验的基础上,可以通过降低帧率,即设置 fps 启动参数,来有效减少 CPU 性能开销。具体配置请参考启动参数

2-4. 使用 ParticleContainer 来优化绘制性能

对于一些重复精灵、大量重复运动的场景,可以使用 ParticleContaier 来优化渲染性能。具体可参考:ParticleContainer

三、内存优化

3-1. 清理 actions

如果 Tiny 对象重复或循环执行一些特定的 action,那么在执行动画动作前,需要调用 Tiny.Action.cleanup,来清理 Tiny 对象上残留的 Tween 实例引用,避免造成内存泄漏。

// noteLeft 是一个 Tiny.Sprite 实例
const flyLeft = Tiny.MoveTo(3000, Tiny.point(-10, -10));
const fadeOutLeft = Tiny.FadeOut(3000);
Tiny.Action.cleanup(noteLeft);
noteLeft.runAction(flyLeft, fadeOutLeft);

3-2. 清理骨骼显示对象

如果使用了骨骼动画,那么在移除骨骼动画时,请调用骨骼显示对象的 dispose 方法来销毁骨骼。

armatureDisplay.dispose();

3-3. 开发粒子特效注意内存回收

在手动开发粒子特性动画时,注意循环利用或者在不用时销毁动画对象,来避免造成内存无限增长。

particle () {
  // 每个例子都会执行该方法来绘制运动轨迹
  const snowflake = new Tiny.Sprite(Tiny.TextureCache['snow']);
  snowflake.setScale(random(0.8, 1.2));
  snowflake.setOpacity(random(0.8, 1));
  const fallAction = Tiny.MoveTo(1e3, Tiny.point(0, 100));

  fallAction.onComplete = () => {
    container.removeChild(snowflake); // 运动结束后移除 snowflake 对象
  };

  container.addChild(snowflake);
  snowflake.runAction(fallAction);
}

3-4. 减少加载 JSON 文件的 xhr 请求

可以通过将材质数据以 JSON 对象的形式内联进 js,而不是构建成单个 JSON 文件。这样可以直接使用 Tiny.loaders.Loader 加载 JSON 对象(需传入 metadata.JSONObject),来有效减少加载 JSON 文件产生的 xhr 请求。

四、图片拼叠

4-1. 需注意 TilingSprite 平铺图片的像素

使用 TilingSprite 绘制纯色或者渐变背景时,如果重复的图片宽度(或者高度)大于 1,在某些特定的像素值上,在部分 iOS 设备上,会导致 webview 卡死。

4-2. 不要使用 TilingSprite 平铺雪碧图的图片

使用 TilingSprite 平铺图片时,请确保使用的是单张图片,不要将图片合成到雪碧图中。否则会造成平铺的颜色产出半透明的渐变。

4-3. NinePatch 九宫格渲染间隙规避

使用 NinePatch 绘制九宫格时,通过 canvasPadding: 1 来规避 canvas 渲染间隙问题。(tinyjs-plugin-ui 默认已经规避了这一问题,请确保不要手动改动这一参数)。

4-4. Mesh 网格的渲染间隙规避

使用 canvas 渲染模式,需要设置网格(tinyjs-plugin-meshtinyjs-plugin-drangonbones)的 canvasDrawTimes 为一个合理值(1到10),来来规避 canvas 渲染间隙

五、文字相关

5-1. 避免重复创建 Tiny.Text 实例

每次使用 Tiny.Text 创建文字实例时,Tiny.js 引擎都会创建一个离屏 canvas 的 DOM 节点,来进行一些文字测量的相关计算。因此要注意不要循环重复创建实例,要尽量重复利用已创建 Tiny.Text 实例。否则会引发内存泄漏。

5-2. canvas 无法支持特定字号的 emoji 字符

Tiny.Text 实例中的文字如果含有 emoji 表情,特定 fontSize 下,可能会无法展示 emoji 字符,这是由于 canvas 的底层绘制引起,无法解决,但可以通过尝试调整到特定字号(一般是减少字号)来规避。

5-3. 正确截断含有 emoji 字符的文字

如果在 emoji 字符的中间位置进行截断,可能会导致文字中的截断位置以前的其他字符被截掉,影响展现。所以需要在 emoji 字符开始或者结束的位置进行截断。可以通过 encodeURIComponent 方法来判断是否在正确的位置进行了截断:

try {
  encodeURIComponent(text); // 截断不完整的 emoji 会报错
} catch (e) {}

六、其他

6-1. 避免使用客户端时间

涉及时间获取的逻辑请尽量使用服务端时间。避免使用 new Date()Date.now() 来获取时间。也可以 Tiny.getTime() 方法来获取时间,但在 iOS 8.X 系统上底层还是依赖于 Date 对象实现,需要特殊处理。