Interfaccia utente | Documentazione

Volevamo aggiungere un'interfaccia utente della mappa interattiva per consentire agli utenti di consumare informazioni nella stazione spaziale che sembrava e si sentiva come se fosse in questo Mondo. Decidemmo di costruire la mappa all'interno dello spazio 3D invece che su uno schermo che sovrappone l'esperienza. Questo tipo di visualizzazione diegetica consente più coinvolgimento con il mondo invece di sentirsi un'esperienza completamente separata.

Progettazione della mappa

Per progettare la mappa:

Abbiamo simulato l'interfaccia utente in un'applicazione esterna e abbiamo ideato un'idea approssimativa di come volevamo che fosse.
Abbiamo esportato le singole parti della mappa come .png e le abbiamo importate in Studio.

Costruisci la mappa

Costruire la mappa all'interno di Studio utilizzando Parts e SurfaceGuis .

Per gli elementi non interattabili, tutto ciò che abbiamo fatto è aggiungere un oggetto SurfaceGui alla parte.
Per gli elementi interattivi, il SurfaceGui deve anche essere all'interno del contenitore StarterGui, con la proprietà Adornee che è legata alla parte appropriata nello spazio di lavoro 3D. Fare questo ti consente di aggiungere eventi di pulsante.
Per ottenere un effetto parallassi, abbiamo utilizzato tre singoli ScreenGui istanze assegnate a tre singoli Parts con diversi valori X .
Abbiamo quindi aggiunto un effetto di luce con la ProprietàSurfaceGui.LightInfluence. Se impostate il valore della proprietà a qualsiasi valore inferiore a 1, si attiva la ProprietàSurfaceGui.Brightness. Adattando il valore della luce, si può aumentare l'efficienza dell'illuminazione.
Per consentire agli utenti di attivare o disattivare la visualizzazione della mappa, abbiamo utilizzato un ProximityPrompt che abbiamo attaccato a un modello 3D. Questo è un modo facile per consentire l'interazione dell'utente con gli elementi del mondo.

Infine, usando un UITweenModuleModuleScript all'interno di ReplicatedStorage, abbiamo animato nascita e mostra l'interfaccia utente con TweenService e un po 'di logica per determinare lo stato. Tracciando ciò che l'utente ha cliccato, potremmo nascondere e mostrare gli elementi tweenando varie proprietà come alfa, posizione e dimensioni.

UITwenModule ModuloScript
local TweenService = game:GetService("TweenService")
local UITween = {}

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

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Stile di facilezza
		Enum.EasingDirection.Out, --Direzione di facilezza
		0, --Ripetere il conteggio
		false, --Ripristina se vero
		delay --Tempo di ritardo
	)

	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 facilezza
		Enum.EasingDirection.Out, --Direzione di facilezza
		0, --Ripetere il conteggio
		false, --Ripristina se vero
		delay --Tempo di ritardo
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Stile di facilezza
		Enum.EasingDirection.Out, --Direzione di facilezza
		0, --Ripetere il conteggio
		false, --Ripristina se vero
		delay --Tempo di ritardo
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Stile di facilezza
		Enum.EasingDirection.Out, --Direzione di facilezza
		0, --Ripetere il conteggio
		false, --Ripristina se vero
		delay --Tempo di ritardo
	)

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

-- per spostare 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 la modifica della dimensione
function UITween.size(object, size, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quint, --Stile di facilezza
		Enum.EasingDirection.Out, --Direzione di facilezza
		0, --Ripetere il conteggio
		false, --Ripristina se vero
		delay, --Tempo di ritardo
		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 facilezza
		Enum.EasingDirection.Out, --Direzione di facilezza
		0, --Ripetere il conteggio
		false, --Ripristina se vero
		delay, --Tempo di ritardo
		override,
		callback
	)

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

-- per sfocare la telecameradi 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 sfocare la telecameradi 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 UI Tween agli oggetti
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

-- Trova oggetti Guis e 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

-- Taglie 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 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: