Interfaccia utente | Documentazione

Volevamo aggiungere un'interfaccia mappa interattiva per consentire agli utenti di fruire delle informazioni nella stazione spaziale in modo che sembrasse e si sentisse come se vivesse in questo mondo. Abbiamo deciso di costruire la mappa all'interno dello spazio 3D anziché su uno schermo che sovrappone l'esperienza. Questo tipo di visualizzazione diegetica consente una maggiore immersione nel mondo, piuttosto che sembrare un'esperienza completamente separata.

Progetta la mappa

Per progettare la mappa:

Abbiamo creato un mockup dell'interfaccia in un'applicazione esterna e abbiamo elaborato un'idea approssimativa di come volevamo che apparisse.
Abbiamo esportato i singoli pezzi della mappa come .png e li abbiamo importati nello Studio.

Costruisci la mappa

Costruire la mappa all'interno dello Studio ha comportato l'uso di Parts e SurfaceGuis.

Per gli elementi non interattivi, tutto ciò che dovevamo fare era aggiungere un oggetto SurfaceGui al parte.
Per gli elementi interattivi, il SurfaceGui deve trovarsi anche all'interno del contenitore StarterGui, con la proprietà Adornee collegata alla parte appropriata nello spazio 3D. In questo modo è possibile aggiungere eventi ai pulsanti.
Per ottenere un effetto parallasse, abbiamo utilizzato tre istanze separate di ScreenGui assegnate a tre Parts unici con diversi valori di X.
Abbiamo poi aggiunto un effetto di luminosità con la proprietà SurfaceGui.LightInfluence. Se imposti il valore della proprietà a meno di 1, attiva la proprietà SurfaceGui.Brightness. Regolando la luminosità, puoi aumentare il bagliore emesso dall'immagine.
Per consentire agli utenti di attivare e disattivare la visualizzazione della mappa, abbiamo utilizzato un ProximityPrompt che abbiamo attaccato a un modello 3D. Questo è un modo semplice per consentire l'interazione dell'utente con gli elementi del mondo.

Infine, utilizzando uno script ModuleScript UITweenModule all'interno di ReplicatedStorage, abbiamo animato la scomparsa e la comparsa dell'interfaccia con TweenService e un po' di logica per determinare lo stato. Monitorando ciò che l'utente ha cliccato, potevamo nascondere e mostrare elementi animando varie proprietà come l'alfa, la posizione e la dimensione.

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

-- per sfumare le immagini
function UITween.fadePart(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Stile di Easing
		Enum.EasingDirection.Out, --Direzione di Easing
		0, --Conteggio di ripetizioni
		false, --Inverte se vero
		delay --Tempo di attesa
	)

	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, --Stile di Easing
		Enum.EasingDirection.Out, --Direzione di Easing
		0, --Conteggio di ripetizioni
		false, --Inverte se vero
		delay --Tempo di attesa
	)

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

-- per sfumare le immagini
function UITween.fadeBackground(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Stile di Easing
		Enum.EasingDirection.Out, --Direzione di Easing
		0, --Conteggio di ripetizioni
		false, --Inverte se vero
		delay --Tempo di attesa
	)

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

-- per sfumare il testo
function UITween.fadeText(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Stile di Easing
		Enum.EasingDirection.Out, --Direzione di Easing
		0, --Conteggio di ripetizioni
		false, --Inverte se vero
		delay --Tempo di attesa
	)

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

-- per muovere testo e immagini
function UITween.move(object, position, time, delay)

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

-- per cambiare dimensione
function UITween.size(object, size, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quint, --Stile di Easing
		Enum.EasingDirection.Out, --Direzione di Easing
		0, --Conteggio di ripetizioni
		false, --Inverte se vero
		delay, --Tempo di attesa
		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, --Stile di Easing
		Enum.EasingDirection.Out, --Direzione di Easing
		0, --Conteggio di ripetizioni
		false, --Inverte se vero
		delay, --Tempo di attesa
		override,
		callback
	)

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

-- per sfocare la camera del gioco
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

-- per accendere la luminosità della camera del gioco
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

Applicare il Tween UI agli oggetti
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Aggiungi il Modulo UITween
local UITween = require(ReplicatedStorage.UITweenModule)

-- Trova Guis e oggetti UI del giocatore
local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
local mapUIFrameFill = screenGuiMapUIFrame.FrameFill

-- Dimensioni utilizzate per il 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)

-- Esempio di 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)

Ecco il risultato finale della mappa interattiva: