Antarmuka pengguna | Dokumentasi - Pusat Kreator Roblox

Kami ingin menambahkan antarmuka peta interaktif untuk memungkinkan pengguna mengonsumsi informasi di stasiun luar angkasa yang terlihat dan terasa seperti hidup di dunia ini. Kami memutuskan untuk membangun peta di dalam ruang 3D alih-alih di layar yang menutupi pengalaman. Jenis visualisasi diegetik ini memungkinkan imersi yang lebih dalam dengan dunia daripada merasa bahwa itu adalah pengalaman yang sepenuhnya terpisah.

Rancang peta

Untuk merancang peta:

Kami membuat mockup UI di aplikasi eksternal dan mendapatkan ide kasar tentang bagaimana kami ingin tampilannya.
Kami mengekspor bagian-bagian individu dari peta sebagai .png dan mengimpornya ke dalam Studio.

Bangun peta

Membangun peta di dalam Studio melibatkan penggunaan Parts dan SurfaceGuis.

Untuk elemen non-interaktif, yang perlu kami lakukan adalah menambahkan objek SurfaceGui ke bagian tersebut.
Untuk elemen interaktif, SurfaceGui juga perlu berada di dalam kontainer StarterGui, dengan properti Adornee yang terhubung ke bagian yang sesuai di ruang kerja 3D. Melakukannya memungkinkan Anda untuk menambahkan event tombol.
Untuk mencapai efek paralaks, kami menggunakan tiga instance ScreenGui terpisah yang ditugaskan ke tiga Parts unik dengan nilai X yang berbeda.
Kami kemudian menambahkan efek cahaya dengan properti SurfaceGui.LightInfluence. Jika Anda mengatur nilai properti ke apa pun yang kurang dari 1, itu mengaktifkan properti SurfaceGui.Brightness. Dengan menyesuaikan kecerahan, Anda dapat meningkatkan cahaya yang dipancarkan dari gambar.
Untuk memungkinkan pengguna mengubah tampilan peta, kami menggunakan ProximityPrompt yang kami lampirkan ke model 3D. Ini adalah cara mudah untuk memungkinkan interaksi pengguna dengan elemen dunia.

Akhirnya, dengan menggunakan skrip Modul UITweenModule di dalam ReplicatedStorage, kami menganimasi menyembunyikan dan menampilkan UI dengan TweenService dan sedikit logika untuk menentukan keadaan. Dengan melacak apa yang diklik pengguna, kami dapat menyembunyikan dan menunjukkan elemen dengan tweening berbagai properti seperti alpha, posisi, dan ukuran.

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

-- untuk memudarkan gambar
function UITween.fadePart(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Waktu
		Enum.EasingStyle.Quad, --GayaEasing
		Enum.EasingDirection.Out, --ArahEasing
		0, --Jumlah pengulangan
		false, --Kembali jika true
		delay --Waktu tunda
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Waktu
		Enum.EasingStyle.Quad, --GayaEasing
		Enum.EasingDirection.Out, --ArahEasing
		0, --Jumlah pengulangan
		false, --Kembali jika true
		delay --Waktu tunda
	)

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

-- untuk memudarkan gambar
function UITween.fadeBackground(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Waktu
		Enum.EasingStyle.Quad, --GayaEasing
		Enum.EasingDirection.Out, --ArahEasing
		0, --Jumlah pengulangan
		false, --Kembali jika true
		delay --Waktu tunda
	)

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

-- untuk memudarkan teks
function UITween.fadeText(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Waktu
		Enum.EasingStyle.Quad, --GayaEasing
		Enum.EasingDirection.Out, --ArahEasing
		0, --Jumlah pengulangan
		false, --Kembali jika true
		delay --Waktu tunda
	)

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

-- untuk memindahkan teks dan gambar
function UITween.move(object, position, time, delay)

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

-- untuk mengubah ukuran
function UITween.size(object, size, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --Waktu
		Enum.EasingStyle.Quint, --GayaEasing
		Enum.EasingDirection.Out, --ArahEasing
		0, --Jumlah pengulangan
		false, --Kembali jika true
		delay, --Waktu tunda
		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, --Waktu
		Enum.EasingStyle.Quint, --GayaEasing
		Enum.EasingDirection.Out, --ArahEasing
		0, --Jumlah pengulangan
		false, --Kembali jika true
		delay, --Waktu tunda
		override,
		callback
	)

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

-- untuk memburamkan kamera permainan
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

-- untuk menyalakan cahaya
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

Menerapkan UI Tween pada Objek
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Tambahkan Modul UITween
local UITween = require(ReplicatedStorage.UITweenModule)

-- Temukan Guis pemain dan objek UI
local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
local mapUIFrameFill = screenGuiMapUIFrame.FrameFill

-- Ukuran yang digunakan untuk 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)

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

Berikut adalah hasil akhir dari peta interaktif: