Posisi dan ukuran objek UI

Kecuali objek UI berada di bawah kendali sebuah struktur tata letak atau modifikasi/kontra ukuran, Anda memiliki kontrol penuh atas posisi dan ukuran mereka. Anda juga dapat mengatur urutan peningkatan Z‑index di mana objek saling tumpang tindih.

Properti inti

Semua GuiObjects berbagi seperangkat properti inti untuk posisi, ukuran, poin jangkar, dan lapisan mereka dalam kontainer di layar atau dalam pengalaman.

Posisi

Properti Position adalah set koordinat UDim2 yang menempatkan objek sepanjang sumbu X dan Y. UDim2 diwakili oleh nilai Scale dan Offset untuk masing-masing sumbu:

• Nilai Scale mewakili persentase dari ukuran kontainer sepanjang sumbu yang sesuai, ditambahkan dari nilai Offset mana pun.
• Nilai Offset mewakili berapa piksel untuk menggeser objek pada sumbu yang sesuai, ditambahkan dari nilai Scale mana pun.

Untuk mengedit posisi GuiObject yang dipilih, klik kolom Position di jendela Properties dan masukkan set koordinat UDim2 baru.

Ukuran

Properti Size adalah set koordinat UDim2 yang mengukur objek sepanjang sumbu X dan Y. UDim2 diwakili oleh nilai Scale dan Offset untuk masing-masing sumbu:

• Scale — Nilai yang mewakili persentase dari ukuran kontainer sepanjang sumbu yang sesuai, ditambahkan pada nilai Offset mana pun.
• Offset — Nilai yang mewakili ukuran piksel objek sepanjang sumbu yang sesuai, ditambahkan pada nilai Scale mana pun.

Untuk mengedit ukuran GuiObject yang dipilih, klik kolom Size di jendela Properties dan masukkan set koordinat UDim2 baru.

AnchorPoint

Properti AnchorPoint mendefinisikan titik asal dari mana objek mengubah posisi dan ukuran. Nilai default AnchorPoint adalah (0, 0) yang menempatkan jangkar di sudut kiri atas objek.

Nilai AnchorPoint adalah fraksi dari 0 hingga 1, relatif terhadap ukuran objek, yang berarti objek dengan nilai AnchorPoint (0.5, 0.5) menempatkan titik jangkar di tengah (50%) melalui objek baik secara horizontal maupun vertikal, dan setiap perubahan pada posisi atau ukuran akan bergerak dan menskalakan keluar dari titik ini.

Untuk melihat dan mengedit titik jangkar dari GuiObject yang dipilih:

1. Di jendela Properties, klik di dalam kolom AnchorPoint.

   

2. Masukkan koordinat Vector2 baru dan tekan Enter.

   Studio menyimpulkan pasangan nilai yang dimaksud saat satu angka dimasukkan. Misalnya, memasukkan hanya 0.5 akan diubah menjadi 0.5, 0.5 untuk titik jangkar di tengah.

ZIndex

Properti ZIndex mendefinisikan urutan lapisan di mana GuiObjects dirender dan saling tumpang tindih. Jika Anda ingin membuat lapisan rendering baru, Anda harus mengatur properti ZIndex ke nilai bilangan bulat positif atau negatif yang berbeda untuk setiap objek.

Untuk kontainer UI seperti ScreenGui, ZIndexBehavior default selalu merender anak di atas orang tua mereka, dan ZIndex masing-masing anak digunakan untuk menentukan urutan di mana ia dirender di atas yang lain.

Untuk mengedit ZIndex objek, temukan ZIndex di jendela Properties dan masukkan nilai bilangan bulat baru.

Struktur tata letak

Struktur tata letak memungkinkan Anda untuk dengan cepat mengatur dan menampilkan GuiObjects, misalnya ke dalam daftar horizontal atau vertikal, sebuah grid dari ubin berukuran sama, sebuah urutan halaman, dan banyak lagi. Tata letak biasanya menimpa atau memengaruhi posisi/ukuran objek yang berada di bawah kendali mereka.

Faktor lintas platform

Roblox secara inheren lintas platform, karena pemain dapat menemukan dan bergabung dalam pengalaman di ponsel atau tablet mereka, kemudian melanjutkan di mana mereka tinggalkan di PC atau konsol mereka. Anda harus merancang pengalaman Roblox Anda agar dapat diakses dan dinikmati di semua platform yang Anda pilih untuk didukung, bukan hanya mengoptimalkan untuk satu platform dan mengabaikan yang lain.

Zona yang Dipesan

Pada perangkat mobile, kontrol default menempati sebagian dari sudut kiri bawah dan kanan bawah layar. Ketika Anda merancang UI pengalaman, hindari menempatkan informasi penting atau tombol virtual di zona-zona ini.

Zona Jempol

Sebagian besar pemain mobile menggunakan dua jempol — satu pada thumbstick virtual dan satu pada tombol lompat. Tergantung pada ukuran fisik dari perangkat dan tangan pemain, menjangkau terlalu jauh dari sudut bawah menjadi tidak nyaman atau tidak mungkin, jadi Anda harus menghindari menempatkan tombol yang sering digunakan di luar zona yang mudah dijangkau.

Tombol nyaman dijangkau oleh jempol kanan pemain

Tombol sulit dijangkau kecuali pemain meregangkan tangan atau jempol

Ingat bahwa zona jempol yang nyaman berbeda antara ponsel dan tablet karena tablet memiliki layar yang lebih besar. Sebuah tombol yang ditempatkan 40% di bawah tepi atas layar nyaman dijangkau di ponsel tetapi hampir tidak dapat dijangkau di tablet.

Tombol 40% dari tepi atas ponsel, dalam jangkauan jempol pemain

Tombol 40% dari tepi atas tablet, sulit dijangkau tanpa meregang

Pendekatan yang dapat diandalkan pada kedua ponsel dan tablet adalah penempatan tombol kustom secara relatif dekat kontrol yang sering digunakan seperti tombol lompat default, menempatkannya dalam jangkauan yang mudah.

Kode berikut, yang ditempatkan dalam skrip sisi klien di dalam StarterPlayerScripts, mengambil posisi tombol lompat dan membuat placeholder tombol 20 piksel di sebelah kiri.

Client Script - Custom Button Near Jump Button
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

if UserInputService.TouchEnabled then
	-- Tunggu tombol lompat sepenuhnya dimuat
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Tempatkan tombol kustom baru di sebelah kiri tombol lompat
	local customButton = Instance.new("ImageButton")
	customButton.AnchorPoint = Vector2.new(1, 1)
	customButton.Size = UDim2.fromOffset(jumpButton.Size.X.Offset * 0.8, jumpButton.Size.Y.Offset * 0.8)
	customButton.Position = jumpButton.Position + UDim2.fromOffset(-20, jumpButton.Size.Y.Offset)
	customButton.Parent = jumpButton.Parent
else
	warn("Perangkat tidak mendukung sentuhan atau Studio tidak meniru perangkat yang mendukung sentuhan!")
end

UI Berdasarkan Konteks

Ruang layar terbatas pada perangkat mobile, jadi Anda hanya harus menunjukkan informasi yang paling penting selama permainan aktif. Misalnya, jika pengalaman Anda mencakup tindakan input khusus untuk membuka pintu dan peti harta karun, tidak masuk akal untuk terus menunjukkan tombol "buka" di layar. Sebaliknya, gunakan proximity prompt atau metode serupa untuk menerima input hanya ketika karakter mendekati pintu atau peti.