Interfejs użytkownika

Chcieliśmy dodać interaktywny interfejs mapy, aby użytkownicy mogli konsumować informacje na stacji kosmicznej, które wyglądały i czuły się jakby żyły w tym świecie.Zdecydowaliśmy się zbudować mapę w przestrzeni 3D zamiast na ekranie, który pokrywa doświadczenie.Tego typu wizualizacja diegetyczna pozwala na większe zanurzenie się w świecie w porównaniu do poczucia, że jest to zupełnie odrębne doświadczenie.

Zaprojektuj mapę

Aby zaprojektować mapę:

1. Pokpiśmy z interfejsu użytkownika w aplikacji zewnętrznej i wymyśliliśmy ogólny pomysł na to, jak chcemy, aby wyglądał.

   

2. Eksportowaliśmy poszczególne części mapy jako .png i importowaliśmy je do Studio.

   

Zbuduj mapę

Budowanie mapy wewnątrz Studio wiązało się z użyciem Parts i SurfaceGuis.

1. W przypadku elementów nieinteraktywnych wszystko, co musieliśmy zrobić, to dodać obiekt SurfaceGui do części.

2. Dla elementów interaktywnych SurfaceGui również musi znajdować się w ramach kontenera StarterGui, z właściwością Adornee powiązaną z odpowiednią częścią w środowisku 3D.Pozwala to dodać wydarzenia przycisków.

3. Aby osiągnąć efekt paralaksu, użyliśmy trzech oddzielnych instancji ScreenGui przydzielonych do trzech unikalnych Parts z różnymi wartościami X .

   

4. Następnie dodaliśmy efekt świetlny za pomocą właściwości SurfaceGui.LightInfluence.Jeśli ustawisz wartość właściwości na mniej niż 1, włącza właściwość SurfaceGui.Brightness.Dostosowując jasność, możesz zwiększyć rozświetlenie emitowane z obrazu.

5. Aby umożliwić użytkownikom przełączanie wyświetlania mapy, użyliśmy ProximityPrompt, które przymocowaliśmy do modelu 3D.To łatwy sposób na umożliwienie interakcji użytkownika z elementami świata.

   

6. Wreszcie, używając skryptu modułu UITweenModule w ReplicatedStorage, animowaliśmy ukrywanie i pokazywanie interfejsu z pomocą TweenService i trochę logiki do określenia stanu.Śledząc to, co użytkownik kliknął, możemy ukrywać i pokazywać elementy, przeglądając różne właściwości, takie jak alfa, pozycja i rozmiar.

   

   Skrypt modułu UITweenModule
   local TweenService = game:GetService("TweenService")
   local UITween = {}
   
   -- dla znikających obrazów
   function UITween.fadePart(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Czas
   		Enum.EasingStyle.Quad, --Styl ułatwiania
   		Enum.EasingDirection.Out, --Łatwienie kierunku
   		0, --Powtórz liczbę
   		false, --Odwraca się, jeśli jest prawda
   		delay --Opóźnij czas
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {Transparency = amount})
   	tween:Play()
   end
   
   function UITween.fade(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Czas
   		Enum.EasingStyle.Quad, --Styl ułatwiania
   		Enum.EasingDirection.Out, --Łatwienie kierunku
   		0, --Powtórz liczbę
   		false, --Odwraca się, jeśli jest prawda
   		delay --Opóźnij czas
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})
   	tween:Play()
   end
   
   -- dla znikających obrazów
   function UITween.fadeBackground(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Czas
   		Enum.EasingStyle.Quad, --Styl ułatwiania
   		Enum.EasingDirection.Out, --Łatwienie kierunku
   		0, --Powtórz liczbę
   		false, --Odwraca się, jeśli jest prawda
   		delay --Opóźnij czas
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})
   	tween:Play()
   end
   
   -- dla znikającego tekstu
   function UITween.fadeText(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Czas
   		Enum.EasingStyle.Quad, --Styl ułatwiania
   		Enum.EasingDirection.Out, --Łatwienie kierunku
   		0, --Powtórz liczbę
   		false, --Odwraca się, jeśli jest prawda
   		delay --Opóźnij czas
   	)
   
   	local tween1 = TweenService:Create(object, tweenAlpha, {TextTransparency = amount})
   	tween1:Play()
   end
   
   -- do przesuwania tekstu i obrazów
   function UITween.move(object, position, time, delay)
   
   	task.wait(delay)
   	object:TweenPosition(position, Enum.EasingDirection.Out, Enum.EasingStyle.Quint, time)
   end
   
   -- dla zmiany rozmiaru
   function UITween.size(object, size, time, delay, override, callback)
   
   	local tweenSize = TweenInfo.new(
   		time, --Czas
   		Enum.EasingStyle.Quint, --Styl ułatwiania
   		Enum.EasingDirection.Out, --Łatwienie kierunku
   		0, --Powtórz liczbę
   		false, --Odwraca się, jeśli jest prawda
   		delay, --Opóźnij czas
   		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, --Czas
   		Enum.EasingStyle.Quint, --Styl ułatwiania
   		Enum.EasingDirection.Out, --Łatwienie kierunku
   		0, --Powtórz liczbę
   		false, --Odwraca się, jeśli jest prawda
   		delay, --Opóźnij czas
   		override,
   		callback
   	)
   
   	local tween = TweenService:Create(object, tweenSize, {Rotation = rotation})
   	tween:Play()
   end
   
   -- dla rozmycia kamery gry
   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
   
   -- dla rozmycia kamery gry
   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

   Stosowanie UI Tween do obiektów
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Dodaj moduł UITween
   local UITween = require(ReplicatedStorage.UITweenModule)
   
   -- Znajdź obiekty menu i interfejsu użytkownika gracza
   local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
   local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
   local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
   local mapUIFrameFill = screenGuiMapUIFrame.FrameFill
   
   -- Rozmiary używane do przełączania
   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)
   
   -- Przykład tweeningu
   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)

Oto ostateczny wynik interaktywnej mapy: