互動按鈕

這個教學會顯示你如何在屏幕上按一些按鈕來控制選單、界面動作和更多。

按鈕類型

有兩種類型的按鈕對象，您可以在您的 UI 設計中使用：

文字按鈕	圖像按鈕
Class.TextButton 與 TextLabel 相似， except 玩家可以啟動它，點擊/點擊。它也分享許多相同的視覺屬性 — 字體、背景顏色、塗線顏色等。	Class.ImageButton 是一個互動版本的 ImageLabel 對物件。它也與其非按鈕對應的部分分享了相同的屬性。

創建按鈕

下列步驟顯示如何將 ImageButton 添加到屏幕，並在玩家交互中翻轉。

1. 在 Explorer 窗口中，將鼠標指针指向 新手導覽器 對物件，按一下 + 按鈕，並插入一個 ScreenGui 。

   

2. 選擇新的 ScreenGUI 對象，並且，在類似的方式中，插入 ImageButton 。

   

   這會在遊戲檢視窗的角落添加空白圖像按鈕。

3. 為了最佳實踐，請按一下新按鈕的名稱，例如 MapButton 。

   

大小

要求按鈕在各種設備和屏幕上動態重新設定時，最好使用 鱗 縮 尺寸 屬性。

1. 在 屬性 視窗中，找到 大小 屬性，然後按一下箭頭擴展其樹。

   

2. 設定以下尺寸：

   

3. 將按鈕限制在方形定位盒中，設定 Size限制 為 相對 YY 。

   

縮放

目前尺寸在手機上很好運行，但X/Y的尺寸為0.15 (15%) 可能會在電腦屏幕上顯示太大。要解決此問題，您可以添加UISizeConstraint。

1. 將鼠標指针指向 MapButton 對象，並插入 UISizeConstraint 。

   

2. 選擇新的尺寸限制對象，並將其 最大尺寸 屬性設置為 90, 90 。

   

位置

按鈕通常應該在玩家的手指範圍內移動，例如畫面右下角的區域。

1. 將按鈕的 錨點 屬性變更為 0.5, 1 ，以便位置基於它的底部中心點。

   

2. 將按鈕的 位置 樹拡展並設定以下屬性值。這會將按鈕靠近預期的跳躍按鈕，顯示在電話/平板電腦上。

   

圖像

此按鈕需要三張自訂圖像：它在屏幕上的正常外觀、一個吊鉤外觀和一張玩家按下它時的最終圖像。

普通

懸停

按下了

設置這些外觀可以通過 圖像 、 懸浮圖像 和 按下圖像 屬性來執行。

1. 找到按鈕的 圖像 屬性，然後將其 rbxassetid://6025368017 或 使用您自己的資產。

   

2. 對於 HoverImage 屬性，請在 rbxassetid://6025452347 中輸入。

   

3. 對於 按下圖像 屬性，請在 rbxassetid://6025454897 中輸入。

   

風格

為了確認按鈕在屏幕上的外觀，請做出以下調整：

1. 將 背景透明度 設為 1 以使背景透明。

   

2. 將按鈕稍微旋轉 旋轉 設為 -5 。

   

按鈕功能性

最後一個任務是連接基本按鈕功能。

1. 在 Explorer 窗口中，將鼠標指针指向 地圖按鈕 對象，並插入 本地腳本 。

   

2. 在指令碼中，複製並粘貼這些新的線：

   local button = script.Parent
   
   local function onButtonActivated()
   	print("Button activated!")
   	-- 在此執行預期的按鈕動作(s)
   end
   
   button.Activated:Connect(onButtonActivated)

此簡單的按鈕指令碼作業為：

• 第一行設定變量按鈕，告訴指定對象。 在此情況下，它是指向 ImageButton ，指向 Class.ImageButton 的父級。
• onButtonActivated 函數處理按鈕的啟動。你在內部應該執行打開遊戲主選單的預期行動。
• 最後一行 連接 按鈕到 onButtonActivated 功能，並且使用 Activated 事件來啟動按鈕。這會導致功能每次玩家啟動按鈕時執行。

排障

如果按鈕無法正常工作，請檢查以下方面：

• 確認您使用了一個客戶端 LocalScript，而不是一個伺服器 Script。
• 確認 LocalScript 是按鈕對象的 直接子女 (不是 ScreenGui 容器的子女)。
• 確認按鈕的 圖像 、 暫停圖像 和 按下圖像 屬性設置為適當的圖像資產。