VueUEEventBus

VueUEEventBus 是一个用于在 Vue 与 Unreal Engine (UE) 之间建立事件通信机制的工具。它允许你在 Vue 和 Unreal Engine 之间相互触发并监听事件，简化了两者之间的交互。

特性

• 事件通信：在 Vue 和 Unreal Engine 之间发送和接收事件。
• 类型安全：通过 TypeScript 的类型检查，确保仅注册已声明的事件，避免错误调用未定义的事件。
• 调试面板：可启用一个调试面板，帮助开发者查看和管理与 Unreal Engine 的事件交互。
• 透明事件穿透：支持 DOM 事件穿透特定的 CSS 类元素，以允许事件传递到 Unreal Engine。

安装

通过 npm 安装：

npm install @amaoaaaaa/vue-ue-event-bus

使用示例

1. 配置 VueToUEEventMap 和 UEToVueEventMap

首先，你需要定义从 Vue 到 Unreal Engine 和从 Unreal Engine 到 Vue 的事件映射。

注意：内置了一些通用的 Vue 到 UE 的事件 InternalVueToUEEventMap，在定义 interface VueToUEEventMap 时不能覆盖他们

interface VueToUEEventMap {
  PlayerMove: [number, number]; // 事件名为 'PlayerMove'，参数为 (x, y) 坐标
}

interface UEToVueEventMap {
  HealthUpdate: [number]; // 事件名为 'HealthUpdate'，参数为血量值
}

InternalVueToUEEventMap

/**
 * 内部调用的 Vue 发送到 Unreal Engine 的事件映射
 */
type InternalVueToUEEventMap = {
    /**
     * 点击事件，传递鼠标点击位置的 x 和 y 坐标（归一化）。
     */
    Click: [x: number, y: number];

    /**
     * 鼠标左键按下事件，传递鼠标左键按下时的 x 和 y 坐标（归一化）。
     */
    LeftMouseButtonDown: [x: number, y: number];

    /**
     * 鼠标右键按下事件，传递鼠标右键按下时的 x 和 y 坐标（归一化）。
     */
    RightMouseButtonDown: [x: number, y: number];

    /**
     * 鼠标左键抬起事件，传递鼠标左键抬起时的 x 和 y 坐标（归一化）、是否穿透目标元素。
     */
    LeftMouseButtonUp: [x: number, y: number, isTransparency: boolean];

    /**
     * 鼠标右键抬起事件，传递鼠标右键抬起时的 x 和 y 坐标（归一化）、是否穿透目标元素。
     */
    RightMouseButtonUp: [x: number, y: number, isTransparency: boolean];

    /**
     * 鼠标移动事件，传递鼠标移动时的 x 和 y 坐标（归一化）、是否穿透目标元素。
     */
    MouseMove: [x: number, y: number, isTransparency: boolean];

    /**
     * 鼠标滚轮事件，传递滚动的标准化值（数字：1 或 -1）、是否穿透目标元素。
     */
    MouseWheel: [number, isTransparency: boolean];

    /**
     * 加载完成事件，不传递任何参数。
     */
    loaded: [];
};

2. 实例化 VueUEEventBus

然后，实例化 VueUEEventBus，并传入事件映射类型。

import { VueUEEventBus } from '@amaoaaaaa/vue-ue-event-bus';

const ueEventBus = new VueUEEventBus<VueToUEEventMap, UEToVueEventMap>();

3. 向 Unreal Engine 发送事件

你可以使用 emit 方法向 Unreal Engine 发送事件。

ueEventBus.emit('PlayerMove', [10, 20]);

4. 监听 Unreal Engine 事件

你也可以监听从 Unreal Engine 触发的事件。

ueEventBus.on('HealthUpdate', (health: number) => {
  console.log('Health Updated:', health);
});

API 文档

VueUEEventBus 类是核心事件总线，提供了以下方法和属性：

构造函数

constructor(options?: VueUEEventBusOptions)

• options: 可选的配置项，包含以下字段：
  • debug (boolean): 是否启用调试面板，默认为 false。
  • transparencyClass (string[]): 允许事件穿透到 Unreal Engine 中的 DOM 元素的 CSS 类。
  • maxLogCount (number): 日志保存的最大条数，默认为 30。

方法

emit(eventName, ...args)

向 Unreal Engine 发送事件。

参数：

• eventName (string): 事件名称，必须是 VueToUEEventMap 中的键。
• args (array): 事件参数，具体参数类型由 VueToUEEventMap 中定义。

示例：

ueEventBus.emit('PlayerMove', [10, 20]);

on(eventName, listener, testParams?)

监听 Unreal Engine 触发的事件。

参数：

• eventName (string): 事件名称，必须是 UEToVueEventMap 中的键。
• listener (function): 事件监听器，处理接收到的事件参数。
• testParams (any[], 可选): 用于验证监听器接收到的事件参数。

示例：

ueEventBus.on('HealthUpdate', (health: number) => {
  console.log('Health Updated:', health);
});

log(message, color?)

输出日志到调试面板。

参数：

• message (string): 日志内容。
• color (string, 可选): 日志的颜色。如果未提供，则使用默认颜色。

示例：

ueEventBus.log('This is a debug message', 'blue');

showDebugPanel()

显示调试面板。

调用此方法可以显示调试面板，以便查看与 Unreal Engine 之间的事件交互情况。

示例：

ueEventBus.showDebugPanel();

hideDebugPanel()

隐藏调试面板。

调用此方法可以隐藏调试面板，通常用于清理 UI 或关闭调试时的展示。

示例：

ueEventBus.hideDebugPanel();

属性

• isLinked: boolean

  获取当前是否已与 Unreal Engine 建立连接。

调试面板

VueUEEventBus 提供了一个调试面板，允许你查看和管理与 Unreal Engine 的事件交互。

• 启用调试面板：调用 showDebugPanel() 来显示调试面板。
• 关闭调试面板：调用 hideDebugPanel() 来隐藏调试面板。
• 日志输出：使用 log() 方法将日志输出到调试面板。

类型安全

为了确保事件的类型安全，所有事件名称和参数类型都通过 TypeScript 强制执行。事件映射必须在实例化 VueUEEventBus 时明确提供，且事件名称和参数类型必须匹配。

贡献

欢迎提交 Pull Requests 和 Issues。如果你有任何问题或建议，欢迎在 GitHub 上提问或报告。

License

MIT License.