今天，我們將要了解如何製作使用者介面 (GUI)，以及各項屬性的應用，並且做出一個讓使用者按下UI就可將特定UI關閉的介面應用。

1. StarterGui與PlayerGui

如果我們要新增一項UI到玩家的介面上，我們要先新增一個叫做ScreenGui的物件，這項物件可以將我們放在裡面的物件呈現在玩家的介面上，而至於要將ScreenGui放在哪個服務裡，在不同的情境會放在不同的服務。

假設這項UI是要在玩家一開始進入遊戲後就載入出來 (但不一定要顯示)，可以直接放在StarterGui這項服務裡，如果要對UI做後續的更改或在後續新增 (例如使用腳本進行更改)，則要在玩家的PlayerGui裡更改。

好的，講了這麼多，現在該來看看要如何做UI的新增與更改。

首先，在StarterGui裡新增一個ScreenGui

然後在ScreenGui裡新增你想放置的UI元件，由於這些元件的使用方法跟他的名稱基本來講是一模一樣，所以我就不一一列舉了，這邊以一個Frame做為範例。

接下來，我們就可以到屬性頁面去更改屬性，例如更改背景顏色、位置、大小等。

有些比較常用的屬性如下
Visible: 控制這個UI是否顯示
BackgroundTransparency: 控制這個UI的透明度為何
Interactable: 控制這個UI是否可以被玩家互動，多用在按鈕類型的UI (名稱裡帶有Button的)
Position、Size: 這個我不解釋你們也懂

值得注意的是，由於UI是一項在2D世界運行的物件，所以其位置與大小、旋轉資訊都無法被CFrame或Vector3控制，取而代之的是一項叫做UDim2的函式。

2. UDim2

這項函式可以控制的是UI的X軸與Y軸的offset、scale值。

那什麼是offset與scale值呢? 你可以想成是offset會依照我們製作這項UI的當下的螢幕大小去進行位置的計算，而當我們的螢幕大小改變後，他並不會因為螢幕大小的縮放而去做比例上的更動，通常情況下不使用，而scale就相反，scale可以更改自身的縮放比例 (旋轉比例不討論，因為說真的誰會去旋轉螢幕)，用下面這幾張示意圖會更好了解:

假設現在有兩個螢幕，裡面都有一個Frame (紅色方塊)

現在，我們將螢幕的大小變大，這時就可以發現到兩者的差別了

對我知道我畫得很醜，我的美術成績一直都很差

但是我們在新增一項UI物件時，他所預設的UDim值都是offset，那我該如何做更改呢?

通常更改的辦法有兩種，一種是把offset值歸零，然後再輸入scale值 (隨意數值都行)，最後再透過在畫面上拖拉UI物件進行位置與大小的變更；而第二種是使用外掛插件，關於插件的安裝也非常簡單，如下

先到ToolBox搜尋: autoscale lite

點開該項結果，然後點擊安裝 (我已經裝了所以會顯示已安裝)

安裝好以後，只需要將要轉換的UI選取，並開啟Unit Conversion，再將Position與Size皆更改為Scale就完成了。

在腳本裡面更改物件的位置與大小的方法也與Vector3大同小異

local Frame = game.Players.LocalPlayer.PlayerGui.ScreenGui.Frame --本地玩家的PlayerGui的ScreenGui的Frame (你應該很熟了啦)
Frame.Position = UDim2.new(1, 0, 1, 0) --(XScale, XOffset, YScale, YOffset)，Size的方法也相同

3. 應用

在今天的最後，我們將要製作出像以下動畫所呈現的UI開關

首先先建立UI物件，不會建立的去看前面的章節，並且在ScreenGui新增一項腳本 (一般或LocalScript都行)

接下來進入腳本，我們首先先定義出按鈕物件

local TextButton = script.Parent.TextButton

然後將事件被觸發時連接到自訂函式，該事件名稱為MouseButton1Click

local TextButton = script.Parent.TextButton

TextButton.MouseButton1Click:Connect(function()

end)

在函式裡填入將UI的Visible屬性值設為否

local TextButton = script.Parent.TextButton

TextButton.MouseButton1Click:Connect(function()
	TextButton.Visible = false
end)

最後進入遊戲裡測試就完成了。

如果你在做有關於將UI全螢幕的相關應用，你可能會遇到這樣的情況

可以看到，UI的最上面被系統UI給往下移了，我們肯定不希望UI長這樣，所以解決的方法也很簡單

選取你的ScreenGui，看到屬性頁面，將IgnoreGuilnset的屬性值設為是就解決了

氣貫長虹