使用者介面

我們想添加互動地圖用戶介面，讓使用者在空間站中消費看起來和感覺像生活在這個世界的資訊。我們決定在 3D 空間內建立地圖，而不是在覆蓋體驗的螢幕上。這種類型的沉浸式視覺可以讓您更深入地與世界接觸，而不是讓您感覺像是完全分開的體驗。

設計地圖

要設計地圖：

我們在外部應用程式嘲諷了介面，並提出了我們希望它看起來的大概想法。
我們將地圖的個別部分輸出為 .png 並匯入到 Studio。

建立地圖

在 Studio 內建立地圖需要使用 Parts 和 SurfaceGuis 。

對於非互動元素，我們只需要將 SurfaceGui 對象添加到零件即可。
對於互動元素，SurfaceGui 也需要在 StarterGui 容器內，並將 Adornee 屬性鏈接到 3D 工作區中的相應部分。這樣做可讓您添加按鈕事件。
為了達到平移效果，我們使用了三個獨立的 ScreenGui 實例，分配給三個獨特的 Parts 與不同的 X 值。
我們然後添加了 SurfaceGui.LightInfluence 屬性的發光效果。如果您將屬性值設為少於 1 的任何值，它會啟用 SurfaceGui.Brightness 屬性。通過調整亮度，您可以增加圖像發出的輝光。
要讓使用者切換地圖顯示，我們使用了一個 ProximityPrompt 我們附加到 3D 模型上的顯示。這是一個讓用戶與世界元素互動的簡單方法。

最後，使用 ReplicatedStorage 內的 UITweenModuleModuleScript 模組腳本動畫隱藏和顯示用戶介面，並使用 TweenService 和一點邏輯來確定狀態。通過追蹤使用者點擊了哪些元素，我們可以透過漸變各種屬性，例如Alpha、位置和尺寸來隱藏和顯示元素。

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, --如果真實，反轉
		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")

-- 添加 UITween 模組
local UITween = require(ReplicatedStorage.UITweenModule)

-- 尋找玩家介面和使用者介面對象
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)

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

設計地圖

建立地圖

此頁面