使用者介面

我們想要新增一個互動式地圖使用者可以在太空站內（看起來像它是這個世界的一個延伸）消耗資訊的方法。我們決定在 3D 空間內建造地圖，而不是在屏幕上重疊體驗。這種死get視覺化允許與世界相對而言更多的身體感，而不是完全分離的體驗。

設計地圖

要設計地圖：

1. 我們在外部應用程式上模擬 UI，並且來出一個粗糙的想法，我們想要它看起來。

   

2. 我們將地圖個別項目出口為 .png 並將它們匯入到 Studio。

   

建立地圖

使用 Parts 和 SurfaceGuis 建造地圖。

1. 對於非互動元素，我們只需要添加一個 SurfaceGui 對象到零件。

2. 對於互動元素，SurfaceGui 也需要位於 StarterGui 容器內，其中 Adornee 屬性與 3D 工作區中的相應位置有鏈接。這樣可以允許您添加按鈕事件。

3. 要達到平移效果，我們使用了三個單獨的 ScreenGui 實例，分配給三個獨特的 Parts 使用不同的 X 值。

   

4. 我們接著添加了一個發光效果，使用 SurfaceGui.LightInfluence 屬性。如果您將屬性值設為 1 以下，就會啟用 SurfaceGui.Brightness 屬性。通過調整亮度，您可以增加圖像的發光。

5. 要讓使用者切換地圖顯示，我們使用了 ProximityPrompt ，這是一種簡單的方法來允許使用者與世界元素交互。

   

6. 最後，使用 ReplicatedStorage 中的 UITweenModule 模組指令碼，我們會在 TweenService 中動畫隱藏和顯示 UI，並且在確定狀態的時候，會使用一些程式碼來決定要顯示的內容。追蹤使用者點擊的各種狀態，我們就可以在 TweenService 中動畫和顯示元素。

   

   UI 模組脚本
   local TweenService = game:GetService("TweenService")
   local UITween = {}
   
   -- 對於漸漸消失的圖像
   function UITween.fadePart(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --時間
   		Enum.EasingStyle.Quad, --減輕風格
   		Enum.EasingDirection.Out, --方向
   		0, --重複伺服器
   		false, --如果是真的，則會反轉
   		delay --延遲時間
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {Transparency = amount})
   	tween:Play()
   end
   
   function UITween.fade(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --時間
   		Enum.EasingStyle.Quad, --減輕風格
   		Enum.EasingDirection.Out, --方向
   		0, --重複伺服器
   		false, --如果是真的，則會反轉
   		delay --延遲時間
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})
   	tween:Play()
   end
   
   -- 對於漸漸消失的圖像
   function UITween.fadeBackground(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --時間
   		Enum.EasingStyle.Quad, --減輕風格
   		Enum.EasingDirection.Out, --方向
   		0, --重複伺服器
   		false, --如果是真的，則會反轉
   		delay --延遲時間
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})
   	tween:Play()
   end
   
   -- 對於漸漸消失的文字
   function UITween.fadeText(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --時間
   		Enum.EasingStyle.Quad, --減輕風格
   		Enum.EasingDirection.Out, --方向
   		0, --重複伺服器
   		false, --如果是真的，則會反轉
   		delay --延遲時間
   	)
   
   	local tween1 = TweenService:Create(object, tweenAlpha, {TextTransparency = amount})
   	tween1:Play()
   end
   
   -- 移動文字和圖像
   function UITween.move(object, position, time, delay)
   
   	task.wait(delay)
   	object:TweenPosition(position, Enum.EasingDirection.Out, Enum.EasingStyle.Quint, time)
   end
   
   -- 變更尺寸
   function UITween.size(object, size, time, delay, override, callback)
   
   	local tweenSize = TweenInfo.new(
   		time, --時間
   		Enum.EasingStyle.Quint, --減輕風格
   		Enum.EasingDirection.Out, --方向
   		0, --重複伺服器
   		false, --如果是真的，則會反轉
   		delay, --延遲時間
   		override,
   		callback
   	)
   
   	local tween = TweenService:Create(object, tweenSize, {Size = size})
   	tween:Play()
   end
   
   function UITween.rotate(object, rotation, time, delay, override, callback)
   
   	local tweenSize = TweenInfo.new(
   		time, --時間
   		Enum.EasingStyle.Quint, --減輕風格
   		Enum.EasingDirection.Out, --方向
   		0, --重複伺服器
   		false, --如果是真的，則會反轉
   		delay, --延遲時間
   		override,
   		callback
   	)
   
   	local tween = TweenService:Create(object, tweenSize, {Rotation = rotation})
   	tween:Play()
   end
   
   -- 以模糊遊戲攝影機
   function UITween.blur(object, amount, time)
   
   	local tweenInfo = TweenInfo.new(time, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0)
   	local tween = TweenService:Create(object, tweenInfo, {Size = amount})
   	tween:Play()
   end
   
   -- 以模糊遊戲攝影機
   function UITween.turnOn(object, amount, time)
   
   	local tweenInfo = TweenInfo.new(time, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0)
   	local tween = TweenService:Create(object, tweenInfo, {Brightness = amount})
   	tween:Play()
   end
   
   return UITween

   將 UI 暫時變更應用到物件
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- 添加 UI 模組
   local UITween = require(ReplicatedStorage.UITweenModule)
   
   -- 尋找玩家GUI和用戶界面對象
   local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
   local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
   local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
   local mapUIFrameFill = screenGuiMapUIFrame.FrameFill
   
   -- 用於調整大小的尺寸
   local frameSizeStart = UDim2.new(0, 0, 0, 0)
   local frameSizeMid = UDim2.new(1, 0, 0.05, 0)
   local frameSizeEnd = UDim2.new(1, 0, 1, 0)
   
   -- 擷取範例
   UITween.fade(mapUIFrameStroke, 0, 2, 0)
   UITween.size(mapUIFrameStroke, frameSizeMid, 0.4, 0)
   UITween.fade(mapUIFrameFill, 0, 2, 0.5)
   UITween.size(mapUIFrameFill, frameSizeEnd, 0.4, 0.25)
   task.wait(0.25)
   UITween.size(mapUIFrameStroke, frameSizeMid, 0.4, 0)
   UITween.size(mapUIFrameFill, frameSizeMid, 0.4, 0.25)
   task.wait(0.25)
   UITween.size(mapUIFrameStroke, frameSizeEnd, 0.4, 0)
   UITween.size(mapUIFrameFill, frameSizeEnd, 0.4, 0.25)

這是互動式地圖的最終結果：