Bedieneroberfläche | Dokumentation

Wir wollten eine interaktive KartengUI hinzufügen, damit Benutzer Informationen in der Raumstation konsumieren können, die wie in dieser Welt leben. Wir haben uns entschieden, die Karte in den 3D-Raum zu bauen, anstatt auf einem Bildschirm, das die Erlebnisüberlays. Dieser Typ von diegetischen Visualisierungen ermöglicht mehr Immersion mit der Welt, als das Gefühl, dass es sich um eine komplett separate Erlebnishandelt.

Entwerfen der Karte

Um die Karte zu entwerfen:

Wir haben die UI in einer externen Anwendung simuliert und eine grobe Idee von dem, wie wir sie aussehen lassen wollten.
Wir haben die einzelnen Teile der Karte als .png exportiert und in Studio importiert.

Bauen Sie die Karte

Die Karte innerhalb von Studio mit Parts und SurfaceGuis aufzubauen.

Für nicht-interaktive Elemente mussten wir nur ein SurfaceGui Objekt zum Teil hinzufügen.
Für interaktive Elemente muss der SurfaceGui auch innerhalb des StarterGui Containers mit dem Adornee-Eigenschaft, die mit dem entsprechenden Teil im 3D-Werkzeugraum verknüpft ist, sein. Wenn Sie dies tun, können Sie Button-Ereignisse hinzufügen.
Um einen Parallax-Effekt zu erreichen, haben wir drei separate ScreenGui Instanzen mit jeweils drei einzigartigen Parts mit verschiedenen X -Werten verwendet.
Wir fügten dann einen Glow-Effekt mit der Class.SurfaceGui.LightInfluenceEigenschaftenhinzu. Wenn Sie den Eigenschaftswert auf etwas weniger als 1 einstellen, aktiviert die Eigenschaften Class.SurfaceGui.Brightness. Indem Sie die Helligkeit anpassen, können Sie die Glow-Emission des Bildes erhöhen.
Um Benutzern die Anzeige der Karte umzuschalten, verwendeten wir ein ProximityPrompt, das wir an ein 3D-Modell angehängt haben. Dies ist ein einfacher Weg, Benutzereingaben mit Welt-Elementen zu ermöglichen.

Schließlich verwenden wir ein UITweenModule-ModuleScript innerhalb von ReplicatedStorage, um die Benutzeroberfläche mit TweenService und ein wenig Logik zum Anzeigen und Verbergen der Benutzeroberfläche zu animieren. Indem wir verfolgen, was der Benutzer klickt, konnten wir Elemente durch Tweening verschiedener Eigenschaften wie Alpha, Position und Größe anzeigen und ausblenden.

UITweetModule-ModulScript
local TweenService = game:GetService("TweenService")
local UITween = {}

-- für verblasende bilder
function UITween.fadePart(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Zeit
		Enum.EasingStyle.Quad, --Stil einfahren
		Enum.EasingDirection.Out, --Richtung leiten
		0, --Count wiederholen
		false, --Wird zurückgegeben, wenn wahr
		delay --Verzögerungszeit
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Zeit
		Enum.EasingStyle.Quad, --Stil einfahren
		Enum.EasingDirection.Out, --Richtung leiten
		0, --Count wiederholen
		false, --Wird zurückgegeben, wenn wahr
		delay --Verzögerungszeit
	)

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

-- für verblasende bilder
function UITween.fadeBackground(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Zeit
		Enum.EasingStyle.Quad, --Stil einfahren
		Enum.EasingDirection.Out, --Richtung leiten
		0, --Count wiederholen
		false, --Wird zurückgegeben, wenn wahr
		delay --Verzögerungszeit
	)

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

-- für verblassenden text
function UITween.fadeText(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Zeit
		Enum.EasingStyle.Quad, --Stil einfahren
		Enum.EasingDirection.Out, --Richtung leiten
		0, --Count wiederholen
		false, --Wird zurückgegeben, wenn wahr
		delay --Verzögerungszeit
	)

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

-- zum bewegen von text und bildern
function UITween.move(object, position, time, delay)

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

-- zum ändern der größe
function UITween.size(object, size, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --Zeit
		Enum.EasingStyle.Quint, --Stil einfahren
		Enum.EasingDirection.Out, --Richtung leiten
		0, --Count wiederholen
		false, --Wird zurückgegeben, wenn wahr
		delay, --Verzögerungszeit
		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, --Zeit
		Enum.EasingStyle.Quint, --Stil einfahren
		Enum.EasingDirection.Out, --Richtung leiten
		0, --Count wiederholen
		false, --Wird zurückgegeben, wenn wahr
		delay, --Verzögerungszeit
		override,
		callback
	)

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

-- zum verwischen der kamera
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

-- zum verwischen der kamera
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

UI-Anpassung auf Objekte anwenden
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- UI-Modul hinzufügen
local UITween = require(ReplicatedStorage.UITweenModule)

-- Finden Sie Spieler Guis und UI-Objekte
local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
local mapUIFrameFill = screenGuiMapUIFrame.FrameFill

-- Größen für das 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)

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

Hier ist das endgültige Ergebnis der interaktiven Karte: