Kecuali objek UI berada di bawah kendali struktur tata letak atau modifikasi/kontra ukuran, Anda memiliki kontrol penuh atas posisi dan ukuran mereka. Anda juga dapat mengatur urutan layering Z‑index di mana objek saling tumpang tindih.
Properti inti
Semua GuiObjects berbagi seperangkat properti inti untuk memposisikan, ukuran, titik jangkar, dan layer mereka dalam wadah di layar atau dalam permainan.
Posisi
Properti Position adalah set koordinat UDim2 yang memposisikan objek di sepanjang sumbu X dan Y. UDim2 diwakili oleh nilai Scale dan Offset untuk setiap sumbu:
Untuk mengedit posisi GuiObject yang dipilih, klik bidang Posisi di jendela Properti dan masukkan set koordinat UDim2 baru.
Tanda kurung dan spasi adalah opsional saat memasukkan UDim2 di Studio — Anda dapat langsung memasukkan empat nilai yang dipisahkan oleh koma, misalnya 0.25,40,0.1,20, dan Studio akan menyimpulkan set nilai yang dimaksud.
Studio juga menyimpulkan set nilai yang dimaksud ketika satu angka dimasukkan. Misalnya, memasukkan hanya 0.5 akan diubah menjadi {0.5, 0},{0.5, 0} karena 0.5 kemungkinan adalah nilai Scale sebesar 50%. Sebaliknya, memasukkan 20 akan diubah menjadi {0, 20},{0, 20} karena 20 kemungkinan adalah nilai Offset sebesar 20 piksel dan bukan skala 2000%.
Ukuran
Properti Size adalah set koordinat UDim2 yang mengukur objek di sepanjang sumbu X dan Y. UDim2 diwakili oleh nilai Scale dan Offset untuk setiap sumbu:
- Scale — Nilai yang mewakili persentase dari ukuran wadah di sepanjang sumbu yang sesuai, ditambahkan dengan nilai Offset apa pun.
- Offset — Nilai yang mewakili ukuran piksel objek di sepanjang sumbu yang sesuai, ditambahkan dengan nilai Scale apa pun.
Untuk mengedit ukuran GuiObject yang dipilih, klik bidang Ukuran di jendela Properti dan masukkan set koordinat UDim2 baru.
Tanda kurung dan spasi adalah opsional saat memasukkan UDim2 di Studio — Anda dapat langsung memasukkan empat nilai yang dipisahkan oleh koma, misalnya 0.75,0,0.25,0, dan Studio akan menyimpulkan set nilai yang dimaksud.
Studio juga menyimpulkan set nilai yang dimaksud ketika satu angka dimasukkan. Misalnya, memasukkan hanya 0.5 akan diubah menjadi {0.5, 0},{0.5, 0} karena 0.5 kemungkinan adalah nilai Scale sebesar 50%. Sebaliknya, memasukkan 20 akan diubah menjadi {0, 20},{0, 20} karena 20 kemungkinan adalah nilai Offset sebesar 20 piksel dan bukan skala 2000%.
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%) objek baik secara horizontal maupun vertikal, dan setiap perubahan pada posisi atau ukuran akan bergerak dan skala keluar dari titik ini.
Untuk melihat dan mengedit titik jangkar dari GuiObject yang dipilih:
Di jendela Properti, klik di dalam bidang AnchorPoint.
Masukkan koordinat Vector2 baru dan tekan Enter.
Studio menyimpulkan pasangan nilai yang dimaksud ketika satu angka dimasukkan. Misalnya, memasukkan hanya 0.5 akan diubah menjadi 0.5, 0.5 untuk titik jangkar tengah.
ZIndex
Properti ZIndex mendefinisikan urutan layer di mana GuiObjects dirender dan saling tumpang tindih. Jika Anda ingin membuat layer rendering baru, Anda harus mengatur properti ZIndex ke nilai integer positif atau negatif yang berbeda untuk setiap objek.
Untuk wadah UI seperti ScreenGui, perilaku default ZIndexBehavior selalu merender anak di atas orang tua mereka, dan ZIndex setiap anak digunakan untuk memutuskan urutan di mana ia dirender di atas yang lain.
Untuk mengedit ZIndex objek, temukan ZIndex di jendela Properti dan masukkan nilai integer baru.
Struktur tata letak
Struktur tata letak memungkinkan Anda dengan cepat mengatur dan menampilkan GuiObjects, misalnya dalam daftar horizontal atau vertikal, grid ubin yang memiliki ukuran seragam, urutan halaman, dan lainnya. Tata letak biasanya menimpa atau mempengaruhi posisi/ukuran objek di bawah kendali mereka.
| Tata Letak | Deskripsi |
|---|---|
| Daftar | UIListLayout memposisikan saudara GuiObjects ke dalam baris horizontal atau kolom vertikal dalam wadah induk mereka. |
| Grid | UIGridLayout memposisikan saudara GuiObjects dalam grid sel seragam dengan ukuran yang sama dalam wadah induk mereka. |
| Tabel | UITableLayout memposisikan saudara GuiObjects dan anak-anak mereka dalam format tabel. |
| Halaman | UIPageLayout mengatur saudara GuiObjects ke dalam halaman unik yang dapat Anda transisikan melalui scripting. |
Faktor lintas platform
Roblox secara inheren lintas platform, karena pemain dapat menemukan dan bergabung dengan permainan di ponsel atau tablet mereka, kemudian melanjutkan dari tempat mereka tinggalkan di PC atau konsol mereka. Anda harus merancang permainan Roblox Anda agar dapat diakses dan menyenangkan di semua platform yang Anda pilih untuk didukung, alih-alih mengoptimalkan untuk satu platform dan mengabaikan yang lain.
Zona yang Dipesan
Di perangkat seluler, kontrol default menempati sebagian dari sudut kiri bawah dan kanan bawah layar. Ketika Anda merancang UI permainan, hindari menempatkan informasi penting atau tombol virtual di zona ini.
Zona Jempol
Sebagian besar pemain seluler menggunakan dua jempol — satu di stik jempol virtual dan satu di tombol lompat. Tergantung pada ukuran fisik 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. Tombol yang ditempatkan 40% di bawah tepi atas layar dapat 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 di kedua ponsel dan tablet adalah penempatan tombol kustom yang relatif dekat dengan 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.
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!")
endUI berbasis konteks
Ruang layar terbatas di perangkat seluler, jadi Anda harus hanya menampilkan informasi yang paling penting selama gameplay aktif. Misalnya, jika permainan Anda mencakup aksi input khusus untuk membuka pintu dan peti harta karun, tidak masuk akal untuk terus-menerus menampilkan tombol "buka" di layar. Sebagai gantinya, gunakan proximity prompt atau metode serupa untuk menerima input hanya ketika karakter mendekati pintu atau peti.
