在 建立分數條 Part.2 圖片與文字 ，你打造了一個基礎的 GUI 以顯示資訊。在這堂課，你將學到如何創造一個螢幕上的按鈕，這一般用於介面.行動介面等等...

https://developer.roblox.com/assets/blt89c6a3a3d00ce398/d6443e72e77293aab2f91481feb6ed78.jpg

按鈕類型

有兩種類型的按鈕物件能用於你的 GUI 設計：

TextButton

ImageButton

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6161e8aa-bef7-43ff-8a6d-4bf99995a617/Untitled.png

一個 TextButton 非常類似 TextLabel，除了它可以和玩家進行互動，透過點擊這類的操作。它也擁有許多類似的視覺屬性-文字.背景色.線條顏色等等

建立一個按鈕

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e0be6f04-dd14-4c93-beac-57a794448982/Untitled.png

一個 ImageButton 就像是一個互動版本的 ImageLabel 物件。它也同樣擁有 ImageLabel 的大部分相同屬性

以下的步驟將說明如何加入一個 ImageButton 到畫面上，並根據使用者的操作來切換三種外觀

  1. 在 Explorer 視窗，滑鼠指標指向 StarterGui 物件，點擊加號按鈕，並加入 ScreenGui

https://developer.roblox.com/assets/bltd31592ade95ff536/929cfb63733d5e2241968d172ea7149d.png

  1. 選擇一個新的 ScreenGui 物件，並以相同的做法，插入一個 ImageButton

https://developer.roblox.com/assets/bltfc7d720e44c6dda8/9b943e59ca6355116cc8170ca90b877e.png

這將會將入一個空的圖片按鈕到遊戲視窗的角落

https://developer.roblox.com/assets/blt71d17f6a2580fd22/eabf0343ae892b8917123ecc9a9b1ed4.jpg

  1. 可以的話，根據你的目的來修改新按鈕的名稱，比如 MapButton

https://developer.roblox.com/assets/blt622522346b23ebbd/95f8b26bea82b1190d26a60417ae3e12.png

大小(Size)

為了讓按鈕的動態的根據不同的裝置和螢幕來調整大小。最好能使用 Scale 屬性

  1. 在屬性視窗，找到 Size 屬性，按下箭頭來展開它

https://developer.roblox.com/assets/blt26ea73d58bbea631/19b2330e4d35f86aba53a4bc39ff4700.png