使用者介面

我們想要添加一個互動地圖 UI，讓使用者能在太空站中以一種看起來像是生活在這個世界中的方式來消耗資訊。我們決定在 3D 空間中建立地圖，而不是在覆蓋體驗的螢幕上。這種自叙式的視覺化讓玩家能更加沉浸於這個世界，而不是感覺這是一種完全獨立的體驗。

設計地圖

要設計地圖：

1. 我們在外部應用程式中模擬了 UI，並想出了一個粗略的外觀概念。

   

2. 我們將地圖的各個部分導出為 .png，並將其匯入 Studio。

   

建立地圖

在 Studio 中建立地圖涉及使用 Parts 和 SurfaceGuis。

1. 對於非互動元素，我們需要做的只是將 SurfaceGui 物件添加到部分中。

2. 對於互動元素，SurfaceGui 也需要位於 StarterGui 容器內，並且 Adornee 屬性必須鏈接到 3D 工作區中的適當部分。這樣可以讓您添加按鈕事件。

3. 為了實現視差效果，我們使用了三個分開的 ScreenGui 實例，分配給三個具有不同 X 值的獨特 Parts。

   

4. 然後，我們使用 SurfaceGui.LightInfluence 屬性添加了發光效果。如果您將屬性值設置為 1 以下，則可以啟用 SurfaceGui.Brightness 屬性。通過調整亮度，您可以增加從圖像發出的光暈。

5. 為了讓使用者切換地圖的顯示，我們使用了附加到 3D 模型的 ProximityPrompt。這是一種允許使用者與世界元素互動的簡單方法。

   

6. 最後，使用 ReplicatedStorage 中的 UITweenModule ModuleScript，我們用 TweenService 和一些邏輯來動畫化 UI 的隱藏和顯示。通過追蹤使用者點擊的內容，我們可以透過動畫化各種屬性（如透明度、位置和大小）來隱藏和顯示元素。

   

   UITweenModule 模組腳本
   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, --如果為 true，則反轉
   		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, --如果為 true，則反轉
   		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, --如果為 true，則反轉
   		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, --如果為 true，則反轉
   		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, --如果為 true，則反轉
   		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, --如果為 true，則反轉
   		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 Tween 應用於物件
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- 添加 UITween 模組
   local UITween = require(ReplicatedStorage.UITweenModule)
   
   -- 找到玩家 Guis 和 UI 物件
   local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
   local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
   local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
   local mapUIFrameFill = screenGuiMapUIFrame.FrameFill
   
   -- 用於 tween 的大小
   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)
   
   -- 範例 Tween
   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)

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