Benutzeroberfläche

Wir wollten eine interaktive Karten-Benutzeroberfläche hinzufügen, damit Benutzer Informationen in der Raumstation konsumieren können, die sich wie in dieser Welt anfühlten und aussahen.Wir haben beschlossen, die Karte im 3D-Raum zu erstellen, anstatt auf einem Bildschirm, der die Erlebnisüberliert.Diese Art der didaktischen Visualisierung ermöglicht mehr Immersion mit der Welt im Gegensatz zu dem Gefühl, als wäre es eine völlig separate Erlebnis.

Entwerfen der Karte

Um die Karte zu entwerfen:

1. Wir haben die UI in einer externen Anwendung verspottet und kamen mit einer groben Idee, wie sie aussehen sollte.

   

2. Wir haben die einzelnen Teile der Karte als .png exportiert und sie in Studio importiert.

   

Baue die Karte auf

Das Erstellen der Karte innerhalb von Studio erfordert die Verwendung von Parts und SurfaceGuis.

1. Für nicht interaktive Elemente mussten wir nur ein SurfaceGui-Objekt zum Teil hinzufügen.

2. Für interaktive Elemente muss der SurfaceGui auch innerhalb des StarterGui Containers sein, mit der Adornee Eigenschaft, die mit der entsprechenden Teil in der 3D-Arbeitsumgebung verknüpft ist.Dadurch kannst du Knopfereignisse hinzufügen.

3. Um einen Parallaxeneffekt zu erzielen, verwendeten wir drei separate ScreenGui, die drei einzigartigen Parts mit unterschiedlichen X -Werten zugewiesen wurden.

   

4. Wir fügten dann einen Glüh效ekt mit der EigenschaftenSurfaceGui.LightInfluence hinzu.Wenn du den Eigenschaftswert auf weniger als 1 festlegst, aktiviert es die EigenschaftenSurfaceGui.Brightness.Durch Anpassung der Helligkeit kannst du die Glanzemission aus dem Bild erhöhen.

5. Um Benutzern zu ermöglichen, die Anzeige der Karte umzuschalten, verwendeten wir ein ProximityPrompt, das wir an ein 3D-Modell anfügten.Dies ist eine einfache Möglichkeit, die Interaktion eines Benutzers mit Welt元en zu ermöglichen.

   

6. Schließlich verwenden wir ein UITweenModule-Module-Skript innerhalb von ReplicatedStorage, um die UI mit TweenService und ein bisschen Logik zum Feststellen des Zustands zu animieren.Durch das Verfolgen, was der Benutzer angeklickt hat, konnten wir Elemente ausblenden und anzeigen, indem wir verschiedene Eigenschaften wie Alpha, Position und Größe durchschalten.

   

   UITweenModule-Skriptmodul
   local TweenService = game:GetService("TweenService")
   local UITween = {}
   
   -- für verschwindende bilder
   function UITween.fadePart(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Zeit
   		Enum.EasingStyle.Quad, --Entspannungsstil
   		Enum.EasingDirection.Out, --Entlastungsrichtung
   		0, --Zählen wiederholen
   		false, --Revertiert, 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, --Entspannungsstil
   		Enum.EasingDirection.Out, --Entlastungsrichtung
   		0, --Zählen wiederholen
   		false, --Revertiert, wenn wahr
   		delay --Verzögerungszeit
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})
   	tween:Play()
   end
   
   -- für verschwindende bilder
   function UITween.fadeBackground(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Zeit
   		Enum.EasingStyle.Quad, --Entspannungsstil
   		Enum.EasingDirection.Out, --Entlastungsrichtung
   		0, --Zählen wiederholen
   		false, --Revertiert, wenn wahr
   		delay --Verzögerungszeit
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})
   	tween:Play()
   end
   
   -- für verschwindenden text
   function UITween.fadeText(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Zeit
   		Enum.EasingStyle.Quad, --Entspannungsstil
   		Enum.EasingDirection.Out, --Entlastungsrichtung
   		0, --Zählen wiederholen
   		false, --Revertiert, 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
   
   -- zur größenänderung
   function UITween.size(object, size, time, delay, override, callback)
   
   	local tweenSize = TweenInfo.new(
   		time, --Zeit
   		Enum.EasingStyle.Quint, --Entspannungsstil
   		Enum.EasingDirection.Out, --Entlastungsrichtung
   		0, --Zählen wiederholen
   		false, --Revertiert, 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, --Entspannungsstil
   		Enum.EasingDirection.Out, --Entlastungsrichtung
   		0, --Zählen wiederholen
   		false, --Revertiert, 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-Tween auf Objekte anwenden
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- UITween-Modul ergänzen
   local UITween = require(ReplicatedStorage.UITweenModule)
   
   -- Spieler-Guis und UI-Objekte finden
   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 verwendet
   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: