Interfaz de usuario | Documentación del Centro de creación de Roblox

Queríamos agregar una interfaz de usuario de mapa interactivo para permitir que los usuarios consuman información en la estación espacial que se veía y se sentía como si estuviera en este mundo. Decidimos construir el mapa dentro del espacio 3D en lugar de en una pantalla que superpone la experiencia. Esta tipo de visualización de diegética permite una mayor inmersión con el mundo en lugar de sentir que es una experiencia completamente separada.

Diseñando el Mapa

Para diseñar el mapa:

Simulamos la interfaz de usuario en una aplicación externa y llegamos a una idea aproximada de cómo queríamos que se vea.
Exportamos las piezas individuales del mapa como .png y las importamos en Studio.

Construyendo el mapa

Construir el mapa dentro de Studio implicó el uso de Parts y SurfaceGuis .

Para los elementos no interactivos, todo lo que necesitábamos era añadir un objeto SurfaceGui a la parte.
Para los elementos interactivos, el SurfaceGui también necesita estar dentro del contenedor StarterGui con la propiedad Adornee que está vinculada a la parte adecuada en el espacio de trabajo 3D. Al hacerlo, puede agregar eventos de botón.
Para lograr un efecto de paralaxia, usamos tres instancias ScreenGui separadas asignadas a tres únicas instancias Parts con diferentes valores de X .
Luego agregamos un efecto de iluminación con la propiedad SurfaceGui.LightInfluence. Si estableces el valor de la propiedad a cualquier valor menor que 1, se activa el propio valor de la propiedad SurfaceGui.Brightness. Al ajustar el brillo, puede aumentar el brillo que emite la imagen.
Para permitir a los usuarios alternar la visualización del mapa, usamos un ProximityPrompt que creamos para un aplicación de modelado3D. Esta es una manera fácil de permitir la interacción del usuario con elementos del mundo.

Finalmente, utilizando un UITwenModuleModuleScript dentro de ReplicatedStorage, animamos ocultar y mostrar la interfaz de usuario con TweenService y un poco de lógica para determinar el estado. Al rastrear lo que el usuario hizo clic, podríamos ocultar y mostrar elementos haciendo que varias propiedades como alpha, posición y tamaño sean tópicas.

Módulo de script de módulo de UITweet
local TweenService = game:GetService("TweenService")
local UITween = {}

-- para imágenes que desaparecen
function UITween.fadePart(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Tiempo
		Enum.EasingStyle.Quad, --Estilo de alivio
		Enum.EasingDirection.Out, --EasingDirection
		0, --Repetir recuento
		false, --Se replica si es verdad
		delay --Tiempo de retraso
	)

	local tween = TweenService:Create(object, tweenAlpha, {Transparency = amount})
	tween:Play()
end

function UITween.fade(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Tiempo
		Enum.EasingStyle.Quad, --Estilo de alivio
		Enum.EasingDirection.Out, --EasingDirection
		0, --Repetir recuento
		false, --Se replica si es verdad
		delay --Tiempo de retraso
	)

	local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})
	tween:Play()
end

-- para imágenes que desaparecen
function UITween.fadeBackground(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Tiempo
		Enum.EasingStyle.Quad, --Estilo de alivio
		Enum.EasingDirection.Out, --EasingDirection
		0, --Repetir recuento
		false, --Se replica si es verdad
		delay --Tiempo de retraso
	)

	local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})
	tween:Play()
end

-- para texto desapariciendo
function UITween.fadeText(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Tiempo
		Enum.EasingStyle.Quad, --Estilo de alivio
		Enum.EasingDirection.Out, --EasingDirection
		0, --Repetir recuento
		false, --Se replica si es verdad
		delay --Tiempo de retraso
	)

	local tween1 = TweenService:Create(object, tweenAlpha, {TextTransparency = amount})
	tween1:Play()
end

-- para mover texto e imágenes
function UITween.move(object, position, time, delay)

	task.wait(delay)
	object:TweenPosition(position, Enum.EasingDirection.Out, Enum.EasingStyle.Quint, time)
end

-- para cambiar el tamaño
function UITween.size(object, size, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --Tiempo
		Enum.EasingStyle.Quint, --Estilo de alivio
		Enum.EasingDirection.Out, --EasingDirection
		0, --Repetir recuento
		false, --Se replica si es verdad
		delay, --Tiempo de retraso
		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, --Tiempo
		Enum.EasingStyle.Quint, --Estilo de alivio
		Enum.EasingDirection.Out, --EasingDirection
		0, --Repetir recuento
		false, --Se replica si es verdad
		delay, --Tiempo de retraso
		override,
		callback
	)

	local tween = TweenService:Create(object, tweenSize, {Rotation = rotation})
	tween:Play()
end

-- para desenfocar la cámara del juego
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

-- para desenfocar la cámara del juego
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

Aplicando UI Tween a Objetos
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Añadir módulo UITwen
local UITween = require(ReplicatedStorage.UITweenModule)

-- Encuentra objetos de Guis y UI del jugador
local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
local mapUIFrameFill = screenGuiMapUIFrame.FrameFill

-- Tamaños usados para dibujar
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)

-- Ejemplo de Tweening
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)

Aquí está el resultado final del mapa interactivo: