互动按钮

*此内容使用人工智能（Beta）翻译，可能包含错误。若要查看英文页面，请点按 此处。

本教程向您展示如何在屏幕上为菜单、界面操作和更多其他内容创建按钮。

按钮类型

在您的用户界面设计中，您可以使用两种类型的按钮对象：

文本按钮

图像按钮

一个 TextButton 与一个 TextLabel 类似，但玩家可以通过单击/点击激活它。它还共享许多相同的视觉属性 — 字体、背景颜色、stroke 颜色等。

一个 ImageButton 是一个与互动版 ImageLabel 对象相似的对象。它还共享了大多数与非按钮对象相同的属性。

创建按钮

下面的步骤显示如何将 ImageButton 添加到屏幕，并在玩家交互中使其在三个外观之间翻转。

  1. 在 Explorer 窗口中，将鼠标悬停在 StarterGui 对象上，单击 + 按钮，并插入一个 ScreenGui 。

  2. 选择新的 ScreenGUI 对象，并在类似的方式中插入一个 图像按钮 。

    这将添加一个空图像按钮到游戏查看图的角落。

  3. 为了最佳实践，请根据其目的命名新按钮，例如 MapButton 。

大小

为了在各个设备和屏幕上按钮可以动态调整大小，最好使用 缩放 属性。

  1. 在 属性 窗口中，找到 大小 属性，然后单击箭头扩展其树。

  2. 设置以下大小属性：

  3. 通过将 Size限制 设置为 相对 YY 来限制按钮。

缩放

当前大小在手机上应该很好工作，但是 X/Y 的缩放为 0.15 (15%) 可能会在电脑屏幕上显示太大。要解决这个问题，您可以添加一个 UISizeConstraint 。

  1. 将鼠标悬停在 MapButton 对象上，并插入一个 UISizeConstraint 。

  2. 选择新的尺寸限制对象，并将其 最大尺寸 属性设置为 90, 90 。

位置

按钮通常应该在移动到玩家的拇指范围内移动，例如屏幕的下右区域。

  1. 将 AnchorPoint 属性改为 0.5, 1 ，以便位置在其底部中心点的周围。

  2. 扩展按钮的 位置 树，并设置以下属性值。这将将按钮靠近默认跳转按钮，显示在手机/平板电脑上。

图像

此按钮需要三个自定义图像 - 它在屏幕上的正常外观、悬停过的外观和玩家按下它时的最终图像。

普通

悬停

按下了

设置这些外观可以通过 图像 、 悬停图像 和 按下图像 属性来实现。

  1. 找到按钮的 图像 属性，然后将其粘贴在 rbxassetid://6025368017 或 使用您自己的资产 。

  2. 对于 HoverImage 属性，请在 rbxassetid://6025452347 中粘贴。

  3. 对于 PressedImage 属性，请在 rbxassetid://6025454897 中粘贴。

样式

为了确定屏幕上的按钮的外观，请进行以下调整：

  1. 将 背景透明度 设置为 1 使背景透明。

  2. 将按钮稍微旋转，将旋转设置为-5。

按钮功能

最后的任务是将基本按钮功能插件。

  1. 在 Explorer 窗口中，将鼠标悬停在 地图按钮 对象上，并插入一个 本地脚本 。

  2. 在脚本中，复制并粘贴以下新行：

    local button = script.Parent

    

    local function onButtonActivated()

    	print("Button activated!")

    	-- 在这里执行期望的按钮操动作

    end

    

    button.Activated:Connect(onButtonActivated)

此简单的按钮脚本如下工作：

  • 第一行设置一个变量按钮，告诉脚本它指向哪个特定对象。在这个例子中，它指向 ImageButton，脚本的父级。
  • onButtonActivated 函数处理按钮的激活。里面，您应该执行打开游戏主菜单的预期操作。
  • 最后一行 连接按钮到 onButtonActivated 函数，用 Class.GuiButton.Activated|Activated 事件来启动按钮。 这将使函数在玩家激活按钮在游戏中时运行。

排障

如果按钮不如预期般工作，请检查以下方面：

  • 请确保您使用了客户端 LocalScript，而不是服务器端 Script。
  • 确保 LocalScript 是按钮对象的直接子对象（不是 Class.ScreenGui 容器的子对象）。
  • 确认您的按钮的 图像 、 悬停图像 和 按下图像 属性设置为适当的图像资产。