Antarmuka Pengguna | Dokumentasi - Pusat Kreator Roblox

Kami ingin menambahkan UI map interaktif untuk memungkinkan pengguna mengkonsumsi informasi di stasiun ruang angkasa yang terlihat dan terasa seperti berada di dunia ini. Kami memutuskan untuk membangun map di dalam ruang 3D alih-alih di layar yang menggabungkan pengalaman. Jenis visualisasi diegetik ini memungkinkan lebih banyak imersi dengan dunia daripada merasa seperti pengalaman yang benar-benar ter

Mendesain Peta

Untuk mendesain peta:

Kami menggandakan UI dalam aplikasi eksternal dan datang dengan ide kasar tentang bagaimana kami ingin tampil.
Kami mengekspor setiap bagian dari peta sebagai .png dan mengimpor mereka ke Studio.

Membangun peta

Membangun peta di dalam Studio menggunakan Parts dan SurfaceGuis.

Untuk elemen non-interaktif, yang perlu kita lakukan hanyalah menambahkan objek SurfaceGui ke bagian.
Untuk elemen interaktif, SurfaceGui juga perlu berada di dalam konten StarterGui , dengan property Adornee yang terhubung ke bagian yang sesuai dalam ruang kerja 3D. Melakukan ini memungkinkan Anda untuk menambahkan acara tombol.
Untuk mencapai efek paralaks, kami menggunakan tiga instans ScreenGui yang berbeda ditugaskan ke tiga Parts dengan berbagai nilai X .
Kemudian kami menambahkan efek cahaya dengan property SurfaceGui.LightInfluence . Jika Anda menetapkan nilai propinsi ke nomor kurang dari 1, itu mengaktifkan propinsi SurfaceGui.Brightness. Dengan menyesuaikan kecerahan, Anda dapat meningkatkan emisi cahaya dari gambar.
Untuk memungkinkan pengguna untuk menyesuaikan tampilan peta, kami menggunakan ProximityPrompt yang kami lampirkan ke model 3D. Ini adalah cara yang mudah untuk memungkinkan interaksi pengguna dengan elemen dunia.

Akhirnya, menggunakan UITweenModuleModuleScript di dalam ReplicatedStorage, kami menyembunyikan dan menunjukkan UI dengan TweenService dan sedikit logika untuk menentukan status. Dengan melacak apa yang diklik pengguna, kami bisa menyembunyikan dan menunjukkan elemen dengan tweening berbagai property seperti alpha, posisi, dan ukuran.

Script Modul UITweet
local TweenService = game:GetService("TweenService")
local UITween = {}

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

	local tweenAlpha = TweenInfo.new(
		time, --Waktu
		Enum.EasingStyle.Quad, --Gaya Meredakan
		Enum.EasingDirection.Out, --Arah Mudah
		0, --Ulangi jumlah
		false, --Mengembalikan jika benar
		delay --Waktu tertinggal
	)

	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, --Gaya Meredakan
		Enum.EasingDirection.Out, --Arah Mudah
		0, --Ulangi jumlah
		false, --Mengembalikan jika benar
		delay --Waktu tertinggal
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Waktu
		Enum.EasingStyle.Quad, --Gaya Meredakan
		Enum.EasingDirection.Out, --Arah Mudah
		0, --Ulangi jumlah
		false, --Mengembalikan jika benar
		delay --Waktu tertinggal
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --Waktu
		Enum.EasingStyle.Quad, --Gaya Meredakan
		Enum.EasingDirection.Out, --Arah Mudah
		0, --Ulangi jumlah
		false, --Mengembalikan jika benar
		delay --Waktu tertinggal
	)

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

-- untuk pindahkan 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, --Gaya Meredakan
		Enum.EasingDirection.Out, --Arah Mudah
		0, --Ulangi jumlah
		false, --Mengembalikan jika benar
		delay, --Waktu tertinggal
		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, --Gaya Meredakan
		Enum.EasingDirection.Out, --Arah Mudah
		0, --Ulangi jumlah
		false, --Mengembalikan jika benar
		delay, --Waktu tertinggal
		override,
		callback
	)

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

-- untuk menyurutkan 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 menyurutkan kamera permainan
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 ke Objek
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

-- Temukan objek Guis dan UI pemain
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)

Inilah hasil akhir dari peta interaktif: