Interface de usuário

Queríamos adicionar uma interface de mapa interativa para permitir que os usuários consumissem informações na estação espacial que parecia e se sentia como se vivesse neste mundo.Decidimos construir o mapa dentro do espaço 3D em vez de em uma tela que sobrepõe a experiência.Este tipo de visualização didática permite mais imersão com o mundo em oposição a se sentir como se fosse uma experiência completamente separada.

Designar o mapa

Para projetar o mapa:

Nós zombamos da interface de usuário em um aplicativo externo e chegamos a uma idéia aproximada de como queríamos que ela parecesse.
Nós exportamos as peças individuais do mapa como .png e as importamos no Studio.

Construir o mapa

Construir o mapa dentro do Studio envolveu usar Parts e SurfaceGuis.

Para elementos não interativos, tudo o que precisávamos fazer era adicionar um objeto SurfaceGui à parte.
Para elementos interativos, o SurfaceGui também precisa estar dentro do contêiner StarterGui, com a propriedade Adornee ligada à parte apropriada no espaço de trabalho 3D.Fazer isso permite que você adicione eventos de botão.
Para alcançar um efeito de paralama, usamos três instâncias separadas ScreenGui atribuídas a três únicas Parts com diferentes valores de X .
Em seguida, adicionamos um efeito de brilho com a propriedade SurfaceGui.LightInfluence.Se você definir o valor da propriedade para qualquer coisa menos que 1, habilita a propriedade SurfaceGui.Brightness.Ajustando o brilho, você pode aumentar o brilho emitido pela imagem.
Para permitir que os usuários alternem a exibição do mapa, usamos um ProximityPrompt que anexamos a um modelo 3D.Esta é uma maneira fácil de permitir a interação do usuário com elementos do mundo.

Finalmente, usando um UITweenModule ModuleScript dentro do ReplicatedStorage, animamos a esconder e mostrar a interface com o TweenService e um pouco de lógica para determinar o estado.Ao rastrear o que o usuário clicou, poderíamos ocultar e mostrar elementos ao longo de uma transição de várias propriedades, como alfa, posição e tamanho.

UITweenModule ModuleScript
local TweenService = game:GetService("TweenService")
local UITween = {}

-- para imagens desaparecendo
function UITween.fadePart(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Estilo de Facilitação
		Enum.EasingDirection.Out, --Direção de Facilitação
		0, --Repetir contagem
		false, --Reversifica se for verdadeiro
		delay --Atrasar o tempo
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Estilo de Facilitação
		Enum.EasingDirection.Out, --Direção de Facilitação
		0, --Repetir contagem
		false, --Reversifica se for verdadeiro
		delay --Atrasar o tempo
	)

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

-- para imagens desaparecendo
function UITween.fadeBackground(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Estilo de Facilitação
		Enum.EasingDirection.Out, --Direção de Facilitação
		0, --Repetir contagem
		false, --Reversifica se for verdadeiro
		delay --Atrasar o tempo
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Estilo de Facilitação
		Enum.EasingDirection.Out, --Direção de Facilitação
		0, --Repetir contagem
		false, --Reversifica se for verdadeiro
		delay --Atrasar o tempo
	)

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

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

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

-- para alterar o tamanho
function UITween.size(object, size, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quint, --Estilo de Facilitação
		Enum.EasingDirection.Out, --Direção de Facilitação
		0, --Repetir contagem
		false, --Reversifica se for verdadeiro
		delay, --Atrasar o tempo
		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, --Tempo
		Enum.EasingStyle.Quint, --Estilo de Facilitação
		Enum.EasingDirection.Out, --Direção de Facilitação
		0, --Repetir contagem
		false, --Reversifica se for verdadeiro
		delay, --Atrasar o tempo
		override,
		callback
	)

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

-- para desfocar a câmerado jogo
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 desfocar a câmerado jogo
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")

-- Adicionar Módulo UITween
local UITween = require(ReplicatedStorage.UITweenModule)

-- Encontre objetos de gui e de interface do usuário do jogador
local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
local mapUIFrameFill = screenGuiMapUIFrame.FrameFill

-- Tamanhos usados para tweening
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)

-- Exemplo 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)

Aqui está o resultado final do mapa interativo:

Designar o mapa

Construir o mapa

Nesta página