Interfaccia utente

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

Progetta la mappa

Per progettare la mappa:

Abbiamo deriso l'interfaccia utente in un'applicazione esterna e abbiamo trovato 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 ha coinvolto l'uso di Parts e SurfaceGuis .

Per gli elementi non interattivi, tutto ciò che dovevamo fare era aggiungere un oggetto SurfaceGui non interattivo alla parte.
Per gli elementi interattivi, il SurfaceGui deve anche essere all'interno del container StarterGui, con la proprietà Adornee collegata alla parte appropriata nell'area di lavoro 3D.Farlo ti consente di aggiungere eventi di pulsante.
Per ottenere un effetto parallasse, abbiamo utilizzato tre istanze separate ScreenGui assegnate a tre uniche Parts con diversi valori X .
Abbiamo quindi aggiunto un effetto luce con la ProprietàSurfaceGui.LightInfluence.Se impostate il valore della proprietà a qualcosa di inferiore a 1, attiva la ProprietàSurfaceGui.Brightness.Regolando la luminosità, puoi aumentare la luce emessa dall'immagine.
Per consentire agli utenti di attivare/disattivare la visualizzazione della mappa, abbiamo utilizzato un ProximityPrompt che abbiamo allegato a un modello 3D.Questo è un modo semplice per consentire l'interazione dell'utente con gli elementi del mondo.

Infine, utilizzando uno script del modulo UITweenModule all'interno di ReplicatedStorage, abbiamo animato la nascondimento e mostrato 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 passando attraverso diverse proprietà come alfa, posizione e dimensioni.

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Stile di facilitazione
		Enum.EasingDirection.Out, --Direzione di facilitazione
		0, --Ripeti il conteggio
		false, --Si inverte 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 facilitazione
		Enum.EasingDirection.Out, --Direzione di facilitazione
		0, --Ripeti il conteggio
		false, --Si inverte se vero
		delay --Tempo di ritardo
	)

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

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

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

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Tempo
		Enum.EasingStyle.Quad, --Stile di facilitazione
		Enum.EasingDirection.Out, --Direzione di facilitazione
		0, --Ripeti il conteggio
		false, --Si inverte 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 cambiare dimensione
function UITween.size(object, size, time, delay, override, callback)

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

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

-- per sfocare la telecameradel 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 telecameradel 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

Applicazione di UI Tween agli oggetti
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Aggiungi modulo UITween
local UITween = require(ReplicatedStorage.UITweenModule)

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

-- Dimensione utilizzata 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:

Progetta la mappa

Costruisci la mappa

Su questa pagina