跳到主要内容

交互

Tinoe 的交互事件非常符合前端开发者习惯，使用也非常简单。

示例​

尝试点击、长按、拖拽角色，以及空白区域左右上下滑动吧

使用​

Tinoe 默认开启交互能力，默认使用内置的射线拾取方式完成目标拾取：

Tinoe 内部会启用对 canvas 事件的监听，你可以为你想监听的节点添加对应事件及回调：

mesh.on(TinoeEventType.CLICK, (ev: TinoeEvent) => {
  // ev.target为对应拾取到的mesh
  if (ev.target) {
    ev.target.material.diffuseColor = new Color().setFrom255(
      Math.random() * 255,
      Math.random() * 255,
      Math.random() * 255,
    );
  }
});

回调函数的入参详情可以查看 TEvent

事件​

Tinoe 内部事件基于PointerEvent，一方面能够做到双端统一，另一方面为了方便开发者使用，我们提供了大量常用的内置事件，比如拖拽、点击、滑动、碰撞等：

mesh.on(TinoeEventType.DRAG, () => {}); // 拖拽
mesh.on(TinoeEventType.IN, () => {}); // 移入
mesh.on(TinoeEventType.OUT, () => {}); // 移出
mesh.on(TinoeEventType.CLICK, () => {}); // 点击
mesh.on(TinoeEventType.LONG_PRESS, () => {}); // 长按
mesh.on(TinoeEventType.DOWN, () => {}); // 按下
mesh.on(TinoeEventType.UP, () => {}); // 抬起
mesh.on(TinoeEventType.SWIPE_UP, () => {}); // 上滑
mesh.on(TinoeEventType.SWIPE_DOWN, () => {}); // 下滑
mesh.on(TinoeEventType.SWIPE_LEFT, () => {}); // 左滑
mesh.on(TinoeEventType.SWIPE_RIGHT, () => {}); // 右滑
mesh.on(TinoeEventType.COLLISION_ENTER, () => {}); // 碰撞开始
mesh.on(TinoeEventType.COLLISION_STAY, () => {}); // 碰撞维持
mesh.on(TinoeEventType.COLLISION_EXIT, () => {}); // 碰撞结束

Tinoe 内部的事件默认会向上冒泡到 Scene，阻止冒泡方式和 DOM API 保持一致

mesh.on(TinoeEventType.CLICK, ev => {
  ev.stopPropagation();
});

脚本​

我们提供了和 dom 事件一致的 API，但对于游戏场景其实更推荐使用脚本来完成逻辑编写，具体可以参考示例-查看源码 关于脚本详见 这里

Q&A​