Keep your place in this quest

Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.

在本课中,您将学习如何检测用户与 Cave Engine 中的 UI 元素 的交互。

我们将看到如何识别鼠标光标何时悬停在 UI 元素上以及何时点击该元素。通过这些事件,您可以使您的界面在游戏中对玩家作出响应。

这些交互对于创建按钮、菜单、设置屏幕、库存界面、暂停菜单、对话选项以及许多其他 UI 系统至关重要。

根据这些事件,您可以执行 Python 逻辑、创建交互行为、打开菜单、改变 UI 元素、播放声音、开始游戏、关闭窗口或触发您的界面所需的任何其他功能。

1. 允许悬停

要检测鼠标光标何时悬停在 UI 元素上,选择所需的 UI 元素,然后在 行为 标签中启用 允许悬停 选项。

image.png

预览 中,您可以可视化 UI 元素的外观,而无需运行游戏。

启用 允许悬停 后,将鼠标光标移动到预览区域以观察正常状态与悬停状态之间的视觉变化。

这在开发界面时非常有用,因为您可以快速测试元素是否如预期那样在视觉上作出反应。

例如,您可以使用悬停状态使按钮更亮、改变其颜色、增加其不透明度,或给玩家一个清晰的指示,表明该元素可以进行交互。

image.png

image.png

2. 允许点击

启用 允许点击 选项,以允许 UI 元素检测用户何时单击它。

image.png

允许悬停 一样,允许点击 的行为也可以直接在 预览 中进行测试。

这使您能够验证元素在按压时的外观,而无需不断运行游戏仅测试小的视觉调整。

image.png

3. 执行逻辑

要从 UI 交互中执行逻辑,请单击 允许悬停允许点击 选项左侧的箭头图标。

image.png

在这里,我们可以使用 回调

回调允许您访问与 UI 元素交互相关的事件,从而使您能够添加自定义行为,当光标进入该元素、离开该元素、单击该元素或释放单击时。

要编辑将在这些事件中执行的逻辑,请单击铅笔图标。

image.png

image.png

要测试悬停回调,让我们在每个事件中添加一个简单的打印消息。

On Hover In Callback 中,当光标检测到悬停在 UI 元素上时,添加一条打印消息以确认交互已被检测到。

image.png

然后,在 On Hover Out Callback 中,添加另一条打印消息以验证何时检测到该退出事件。

这样,我们可以在控制台中看到光标何时进入和离开 UI 元素区域。

image.png

现在运行游戏,并通过将鼠标光标移动到 UI 元素上,然后再移开它,与 UI 元素进行交互。

查看 控制台 以验证打印消息何时显示。

这是调试 UI 交互逻辑的最简单方法之一,因为它确认事件是否被正确调用。

image.png

回调旁边的红色图标表示它不是空的。换句话说,有逻辑或脚本配置为需要由该事件执行。

该指示符使得更容易直观识别哪些事件已经有行为关联。

随着您的界面增长,这会变得非常有用,因为您可以快速查看哪些 UI 元素已经配置了交互逻辑。

image.png

现在让我们添加打印消息以验证 UI 元素的点击事件。

On Click In Callback 中,添加一条打印消息以标识何时检测到对该元素的点击。

然后使用 On Click Out Callback 添加另一条打印消息,以便您可以验证何时点击结束,即何时释放鼠标按钮。

这一区别很重要,因为某些 UI 行为应该在按钮第一次按下时发生,而其他行为则应该只在点击释放时发生。

例如,您可能希望在 Click In 时视觉上按下按钮,但在 Click Out 时才确认操作。

image.png

运行游戏并在与元素交互时观察 控制台

当您悬停、点击、释放以及将鼠标移开 UI 元素时,相应的回调应该被执行,并且其打印消息应该出现在控制台中。

image.png

到此为止,您已经知道如何在 Cave Engine 中检测最基本的 UI 交互。

通过结合 允许悬停允许点击 和回调,您可以开始创建真正的交互界面,例如打开菜单的按钮、设置滑块、确认窗口、暂停菜单,以及您的游戏所需的任何其他 UI 行为。