Interfaz de usuario

Queríamos agregar una interfaz de usuario interactiva para que los usuarios consuman información en la estación espacial que se vea y se sienta como si viviera en este mundo.Decidimos construir el mapa dentro del espacio 3D en lugar de en una pantalla que sobrepone la experiencia.Este tipo de visualización didáctica permite una mayor inmersión con el mundo en comparación con sentirse como una experiencia completamente separada.

Diseñar el mapa

Para diseñar el mapa:

Burlamos 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 a Studio.

Construir el mapa

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

Para los elementos no interactivos, todo lo que necesitábamos hacer era agregar un objeto SurfaceGui a la parte.
Para elementos interactivos, el SurfaceGui también debe estar dentro del contenedor StarterGui, con la propiedad Adornee vinculada a la parte apropiada en el espacio de trabajo 3D.Hacerlo te permite agregar eventos de botón.
Para lograr un efecto de paralaje, usamos tres instancias separadas ScreenGui asignadas a tres únicos Parts con diferentes valores de X .
Luego agregamos un efecto de resplandor con la propiedad SurfaceGui.LightInfluence.Si estableces el valor de la propiedad a cualquier cosa menos de 1, habilita la propiedad SurfaceGui.Brightness.Ajustando el brillo, puedes aumentar la luz que emite la imagen.
Para permitir que los usuarios alternen la visualización del mapa, usamos un ProximityPrompt que adjuntamos a un aplicación de modelado3D.Esta es una manera fácil de permitir la interacción del usuario con los elementos del mundo.

Por último, usando un UITweenModule ModuleScript dentro de ReplicatedStorage, animamos a 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 al pasar por diferentes propiedades como alfa, posición y tamaño.

UITweenModule Guión de módulo
local TweenService = game:GetService("TweenService")
local UITween = {}

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

	local tweenAlpha = TweenInfo.new(
		time, --Tiempo
		Enum.EasingStyle.Quad, --Estilo de facilitación
		Enum.EasingDirection.Out, --Dirección de alivio
		0, --Repetir recuento
		false, --Se invierte 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 facilitación
		Enum.EasingDirection.Out, --Dirección de alivio
		0, --Repetir recuento
		false, --Se invierte si es verdad
		delay --Tiempo de retraso
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Tiempo
		Enum.EasingStyle.Quad, --Estilo de facilitación
		Enum.EasingDirection.Out, --Dirección de alivio
		0, --Repetir recuento
		false, --Se invierte 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 facilitación
		Enum.EasingDirection.Out, --Dirección de alivio
		0, --Repetir recuento
		false, --Se invierte 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 facilitación
		Enum.EasingDirection.Out, --Dirección de alivio
		0, --Repetir recuento
		false, --Se invierte 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 facilitación
		Enum.EasingDirection.Out, --Dirección de alivio
		0, --Repetir recuento
		false, --Se invierte si es verdad
		delay, --Tiempo de retraso
		override,
		callback
	)

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

-- para difuminar 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 difuminar 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

Aplicar UI Tween a objetos
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

-- Encuentra objetos de interfaz de usuario y guis de 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 utilizados para el preadolescente
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:

Diseñar el mapa

Construir el mapa

En esta página