Interfejs użytkownika | Dokumentacja – Centrum twórców Roblox

Chcieliśmy dodać interaktywną mapę UI, aby użytkownicy mogli konsumować informacje w stacji kosmicznej, która wyglądała i czuła się jakby żyła w tym świecie. Zdecydowaliśmy się na budowę mapy w przestrzeni 3D zamiast na ekranie, który przeplata się z doświadczeniem. Ta rodzina interaktywnej wizualizacji umożliwia większą immersję z światem, zamiast czując, że jest

Projektowanie Mapy

Aby zaprojektować mapę:

Mokowaliśmy UI w aplikacji zewnętrznej i stworzyliśmy ogólny pomysł, jak chcemy, aby wyglądało.
Ekportowaliśmy poszczególne elementy mapy jako .png i zaimportowaliśmy je do Studio.

Budowanie mapy

Budowanie mapy w Studio za pomocą Parts i SurfaceGuis.

Dla niesinteraktywnych elementów wszystko, co musieliśmy zrobić, to dodać obiekt SurfaceGui do części.
Dla elementów interaktywnych SurfaceGui musi być również w środku StarterGui kontenera, z właściwością Adornee powiązaną z odpowiednim elementem w przestrzeni 3D. Dzięki temu możesz dodać przyciskowe wydarzenia.
Aby uzyskać efekt paralaks, użyliśmy trzech osobnych instancji ScreenGui przydzielonych do trzech unikalnych Parts z różnymi wartościami X.
Następnie dodaliśmy efekt świecenia z właściwością SurfaceGui.LightInfluence. Jeśli ustawisz wartość właściwości na mniej niż 1, włącza się właściwość SurfaceGui.Brightness. Przez dostosowanie jasności możesz zwiększyć promieniowanie pochodzące z obrazu.
Aby umożliwić użytkownikom przełączanie wyglądu mapy, użyliśmy ProximityPrompt, którego załączyliśmy z modelem 3D. Jest to łatwy sposób na umożliwienie interakcji z elementami świata.

W końcu, używając UITweenModuleModuleScript w ReplicatedStorage, animowaliśmy ukrywanie i pokazywanie UI za pomocą TweenService i trochę logiki do określenia stanu. Śledząc to, co użytkownik kliknął, mogliśmy ukryć i pokazać elementy poprzez tęczenie różnych właściwości, takich jak alpha, pozycja i rozmiar.

UITweenModule ModułScript
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, --Łatwiejszy styl
		Enum.EasingDirection.Out, --Łatwiejsze kierunki
		0, --Powtórz liczbę
		false, --Przywraca prawdziwy przypadek
		delay --Czas opóźnienia
	)

	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, --Łatwiejszy styl
		Enum.EasingDirection.Out, --Łatwiejsze kierunki
		0, --Powtórz liczbę
		false, --Przywraca prawdziwy przypadek
		delay --Czas opóźnienia
	)

	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, --Łatwiejszy styl
		Enum.EasingDirection.Out, --Łatwiejsze kierunki
		0, --Powtórz liczbę
		false, --Przywraca prawdziwy przypadek
		delay --Czas opóźnienia
	)

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

-- dla tekstu znikającego
function UITween.fadeText(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Czas
		Enum.EasingStyle.Quad, --Łatwiejszy styl
		Enum.EasingDirection.Out, --Łatwiejsze kierunki
		0, --Powtórz liczbę
		false, --Przywraca prawdziwy przypadek
		delay --Czas opóźnienia
	)

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

-- dla 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, --Łatwiejszy styl
		Enum.EasingDirection.Out, --Łatwiejsze kierunki
		0, --Powtórz liczbę
		false, --Przywraca prawdziwy przypadek
		delay, --Czas opóźnienia
		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, --Łatwiejszy styl
		Enum.EasingDirection.Out, --Łatwiejsze kierunki
		0, --Powtórz liczbę
		false, --Przywraca prawdziwy przypadek
		delay, --Czas opóźnienia
		override,
		callback
	)

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

-- dla rozmywania 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 rozmywania 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

Używanie interfejsu Tween do obiektów
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Dodaj moduł UITweet
local UITween = require(ReplicatedStorage.UITweenModule)

-- Znajdź obiekty Guis i UI
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 tweeningu
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 rezultat interaktywnej mapy: