用户界面

我们想要添加一个互动式地图用户界面，让用户在空间站中查看那看起来像它来自这个世界的信息。我们决定在 3D 空间中构建地图，而不是在屏幕上重叠体验。 这种类型的数字化视觉允许更多身临其境的体验，而不是完全分离的体验。

设计地图

要设计地图：

1. 我们在外部应用中模拟了 UI，并来出了一个粗糙的想法，我们想让它看起来。

   

2. 我们将地图上的个别部分导出为 .png 并将其导入到 Studio。

   

建立地图

在 Studio 中使用 Parts 和 SurfaceGuis 来构建地图。

1. 对于非互动元素，我们需要做的就是将 SurfaceGui 对象添加到零件。

2. 对于交互元素，SurfaceGui 还需要位于 StarterGui 容器内，其中 Adornee 属性指向 3D 工作区中的相应部分。通过这样做，您可以添加按钮事件。

3. 要实现 parallax 效果，我们使用了三个单独的 ScreenGui 实例，分配给三个独特的 Parts ，具有不同的 X 值。

   

4. 我们还添加了一个发光效果，使用 SurfaceGui.LightInfluence 属性。如果您将属性值设置为小于 1，它就会启用 SurfaceGui.Brightness 属性。通过调整亮度，您可以增加图像的发光。

5. 要让用户切换地图显示，我们使用了一个 ProximityPrompt 我们附加到 3D 模型。这是一个容易允许用户与世界元素交互的方法。

   

6. 最后，使用 ReplicatedStorage 中的 UITweenModule 模块脚本，我们动画隐藏和显示 UI 使用 TweenService 和一些逻辑为确定状态。通过跟踪用户点击的内容，我们可以隐藏和显示元素通过 tween 各种属性如 alpha、位置和大小。

   

   UITwenModule 模块脚本
   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)
   
   -- 查找玩家 Guis 和 UI 对象
   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)

这是互动地图的最终结果：