Posisi dan ukuran objek UI

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

Properti utama

Semua GuiObjects berbagi satu set properti utama ke posisi , ukuran , anker , dan lapisan mereka dalam wadah layar atau pengalaman.

Posisi

Properti Position adalah set koordinat UDim2 yang menempatkan objek di sepanjang sumbu X dan Y .A UDim2 diwakili oleh kedua nilai Scale dan Offset untuk setiap sumbu:

Scale nilai mewakili persentase dari ukuran wadah di sepanjang sumbu yang sesuai, tambahan dari nilai apa pun Offset .
Offset nilai mewakili berapa banyak piksel untuk bergeser objek pada sumbu yang sesuai, tambahan dari setiap nilai Scale.

Untuk mengedit posisi GuiObject yang dipilih, klik bidang Posisi di jendela Properti dan masukkan aturkoordinat baru UDim2.

Pelat dan spasi adalah opsional saat memasukkan UDim2 di Studio - Anda dapat hanya memasukkan empat nilai yang dipisahkan oleh koma, misalnya 0.25,40,0.1,20 , dan Studio akan menyimpulkan nilai yang atur.

Studio juga menyimpulkan nilai set yang ditentukan saat satu nomor dimasukkan.Sebagai contoh, memasukkan hanya akan dikonversi menjadi karena kemungkinan adalah nilai Skala 50%.Sebaliknya, memasukkan akan dikonversi menjadi karena kemungkinan adalah nilai Offset 20 piksel dan bukan skala 2000%.

Ukuran

Properti Size adalah set koordinat UDim2 yang menentukan ukuran objek di sepanjang sumbu X dan Y .A UDim2 diwakili oleh kedua nilai Scale dan Offset untuk setiap sumbu:

Skala — Nilai yang mewakili persentase dari ukuran wadah di sepanjang sumbu yang sesuai, tambahan kepada nilai Offset apa pun.
Offset — Nilai yang mewakili ukuran piksel objek di sepanjang sumbu yang sesuai, tambahan untuk nilai Skala apa pun.

Untuk mengedit ukuran GuiObject yang dipilih, klik bidang Ukuran di jendela Properti dan masukkan aturkoordinat baru UDim2.

Pelat dan spasi adalah opsional saat memasukkan UDim2 di Studio - Anda dapat hanya memasukkan empat nilai yang dipisahkan oleh koma, misalnya 0.75,0,0.25,0 , dan Studio akan menyimpulkan nilai yang atur.

Titik Anchor

Properti AnchorPoint mendefinisikan titik asal dari mana objek berubah posisi dan ukuran.Nilai default adalah yang menempatkan anchor di sudut kiri atas objek.

nilai adalah sebuah fraksi dari ke , relatif terhadap ukuran objek , berarti objek dengan nilai dari ke menempatkan titik pengait di pertengahan (50%) melalui objek baik secara horizontal maupun vertikal, dan setiap perubahan pada posisi atau ukuran objeknya bergerak dan skala keluar dari titik ini.

Untuk melihat dan mengedit titik anker dari seleksi GuiObject yang dipilih:

Di jendela Properti, klik di dalam bidang Titik Anker .
Masukkan koordinat baru Vector2 dan tekan Enter .

Studio menyimpulkan pas nilai yang dimaksud saat satu nomor dimasukkan.Sebagai contoh, memasukkan hanya akan dikonversi menjadi untuk titik pengait tengah.

ZIndex

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

Untuk wadah UI seperti ScreenGui , default ZIndexBehavior selalu menampilkan anak di atas orangtuanya, dan setiap anak ZIndex digunakan untuk memutuskan urutan di mana ia menampilkan lebih dari yang lain.

Untuk mengedit objek ZIndex , temukan ZIndex di jendela Properti dan masukkan nilai integer baru.

Struktur tatanan

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

Desain	Deskripsi
Daftar	UIListLayout posisi saudara GuiObjects ke dalam baris horizontal atau kolom vertikal dalam wadah orang tua mereka.
Jaringan	UIGridLayout posisi saudara GuiObjects dalam grid sel seragam dari ukuran yang sama di dalam wadah orang tua mereka.
Meja	UITableLayout posisi saudara GuiObjects dan anak-anak mereka ke dalam format tabel.
Halaman	UIPageLayout mengatur saudara perempuannya GuiObjects ke halaman unik yang dapat anda transisi melalui scripting.

Faktor antar platform

Roblox secara inheren menyeberang platform , karena pemain dapat menemukan dan bergabung dengan pengalaman di PC atau konsol, lalu kemudian mengambil telepon mereka dan melanjutkan di tempat mereka mati.Anda harus merancang pengalaman Roblox Anda untuk dapat diakses dan menyenangkan di semua platform yang Anda pilih untuk didukung, bukan mengoptimalkan untuk satu platform dan mengabaikan yang lain.

Zona terjadwal

Pada perangkat seluler, kontrol default mengisi bagian dari sudut kiri bawah dan kanan bawah layar.Saat Anda merancang UI pengalaman, hindari menempatkan informasi penting atau tombol virtual di zona ini.

Jika pengalaman Anda menggunakan pengaturan kontrol default dari DevTouchMovementMode.UserChoice , pemain di perangkat seluler akan dapat memilih input mereka dari Dynamic Thumbstick , Thumbstick Klasik , atau Tap untuk Pindahkan , yang akan menyebabkan kontrol dan zona yang disimpan berbeda sedikit.Ingatlah untuk merancang UI Anda di sekitar kemungkinan ini.

Zona jari kelingi

Kebanyakan pemain seluler menggunakan dua jari - satu pada joystick virtual dan satu pada tombol lompat.Tergantung pada ukuran fisik perangkat dan tangan pemain, mencapai 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 dalam jangkauan jari kanan pemain

Tombol sulit dijangkau kecuali pemain menggeser tangan atau jari

Ingat bahwa zona jari yang nyaman berbeda antara ponsel dan tablet karena tablet memiliki layar yang lebih besar.Tombol yang ditempatkan 40% di bawah ujung atas layar dapat diakses di telepon tetapi hampir tidak dapat diakses di tablet.

Tombol 40% dari ujung atas telepon, dalam jangkauan jari pemain

Tombol 40% dari ujung atas tablet, sulit untuk dicapai tanpa melenting

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

kodeberikut, ditempatkan dalam skrip sisi klien dalam StarterPlayerScripts , mengambil posisi tombol lompat dan membuat tombol placeholder 20 piksel ke kirinya.

Skrip Klien - Tombol Kustom Dekat Tombol Lompat
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 terisi penuh
	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 ke 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("Device is not touch-enabled or Studio is not emulating a touch-enabled device!")
end

UI berdasarkan konteks

Ruang layar terbatas pada perangkat seluler, jadi Anda harus menampilkan hanya informasi paling penting selama gameplayaktif.Sebagai contoh, jika pengalaman Anda termasuk tindakan input khusus untuk membuka pintu dan peti harta karun, tidak masuk akal untuk terus menampilkan tombol "buka" di layar.Sebagai gantinya, gunakan prompt proximity atau metode serupa untuk menerima input hanya ketika karakter mendekati pintu atau dada.

Di halaman ini