Positioning ve Sizing UI Objects

Eğer UI nesneleri bir レイアウト構造 veya bir サイズ modifier/float altında değilse, onların pozisyonu ve 1>büyüklüğü1> üzerindeki kontrolü tamdır. Ayrıca, Z-index 4>layering4> sırasını ayarlayabilirsiniz, böylece nesnelerin çakıştığ

Çekirdek Özellikleri

Tüm GuiObjects bir ortak set of propriétés'i paylaşır pozisyon , büyüklük , 1>bağlantı1> ve 4>katman4> onları bir on-screen veya in-experience kutusunda içinde veya onların üzerinde.

Pozisyon

Class.GuiObject.Position|Position özelliği, nesneyi UDim2 eksenleri ile birlikte yerleştiren bir Datatype.UDim2 koordinat setidir. Bir 1>Datatype.UDim2</

• Ölçek — Container'ın boyutunun %4 kadarını temsil eden değerler, herhangi bir Sıfırlama değerlerinin eklenmesi.
• Sıfırlama — Nesneyi ilgili eksenin üzerindeki nesneyi kaç Pixel ile değiştireceğini temsil eden değerler, herhangi bir Ölçek değerlerinin eklenmesi.

Seçili bir GuiObject 'in pozisyonunu düzenlemek için, Pozisyon alanını Özellikler penceresindeki 1>Yeni bir Datatype.UDim2 koordinat ayarlagirin1> ve yeni bir 4>Class.GuiObject4> oluşturun.

Boyut

The Size özelliği, bir UDim2 koordinat seti boyutlandırır bir nesneyi X ve 1>Y1> eksenleri arasındaki ç

• Ölçek — Container'ın boyutunun %4 kadarını temsil eden değerler, herhangi bir Sıfırla değerine ekleyici olarak eklenir.
• Sıfırlame — Geçerli eksenin boyunca Pixel büyüklüğüne eşdeğer olan değerler, herhangi bir Ölçek değerine ekleyici olarak ekler.

Seçili bir GuiObject 'in boyutunu düzenlemek için, Boyut alanını Özellikler penceresindeki çıkartma ile tıklayın ve yeni bir 1> Datatype.UDim21> koordinat ayarlagirin.

Anka Noktası

The AnchorPoint özelliği, nesnenin pozisyon ve büyüklük değerlerini değiştirdiğinden 1>aşırı yükleme1> noktasından oluşan bir 4>

AnchorPoint değerleri, nesnenin büyüklüğ

Seçili bir GuiObject 'in bağlantı noktasını görüntülemek ve düzenlemek için:

1. Özellikler penceresinde, AnchorPoint alanının içine tıklayın.

   

2. Yeni bir Vector2 koordinatı girin ve Enter'e basın.

   Studio, tek bir sayı girildiğinde niyet edilen değer çiftini tahmin eder. Örneğin, sadece 0.5 girerek merkez ankraj noktası için 0.5, 0.5 olarak dönüştürülür.

Z indeksi

The ZIndex özelliği, GuiObjects render ve Overlay'ın birbirini ortaya çıkarmasının katman sırasını tanımlar. Yeni render katmanlar oluşturmak istiyorsanız, her objenin farklı olumlu veya olumsuz sayı değerleri için Class.GuiObject.

For UI容器 like ScreenGui , the default ZIndexBehavior always renders children above their parents, and each child's ZIndex is used to decide the order in which it renders over others.

Bir nesnenin ZIndex 'ini düzenlemek için, ZIndex 'i Özellikler penceresinde bulun ve yeni bir sayı değeri gir.

Yapıların Tasarımı

Yapılar, hızlı bir şekilde şekillendirme ve gösterme GuiObjects , örneğin bir yandan veya diğerine bir Liste , bir Gitir ve daha fazlasına, yapılar genellikle kontrol altındaki nesnelerin 1>pozisyonu1>

Platformlar Arası Faktörler

Roblox, içgüdüsel olarak çevrimiçi platform dır, çünkü oyuncular bir PC'de veya konsolda deneyimler keşfedebilir ve katılabilir, sonra telefonlarını alıp devam etmek için şu anda bırakabilirler. Roblox deneyimlerinizi tasarlayın, bir platform için optimize etmeyi değil, bunları desteklemek için diğer

Reservasyon Bölgeleri

Mobil cihazlarda, varsayılan kontroller ekranın sol ve sağ kenarlarının bir kısmını kaplar. Bir deneyimin UI'sini tasarlarken, bu bölgelerde önemli bilgileri veya sanal düğmeleri yerleştirmeyin.

Dizin Bölgeleri

Çoğu mobil oyuncunun iki parmak kullanır - biri onun sanal başparmak üzerindedir ve biri atlama düğmesindedir. Cihazın fiziksel büyüklüğüne ve oyuncunun ellerinin ağır basma düğmesinden başıca yerlerden uzaklaşmak rahatsız edici veya imkansız hale gelir, bu yüzden kolay erişilebilir bölgelerin dışında sık kullanılan düğmelere yerleş

Buton oyuncunun sağ başparmaklarına rahatça ulaşır

Oyuncu elini veya başparmaklarını uzatana kadar düğmeye ulaşmak zor

Rahat başparmak bölgelerinin telefon ve tabletler arasında farklı olduğunu unutmayın, çünkü tabletler daha büyük bir ekrana sahiptir. Ekranın üst kenarına yerleştirilen bir düğme, telefonun baş parmakına ulaşılabilir, ancak tabletin baş parmakına neredeyse ulaşılamaz.

Düğme, oyuncunun başparmaklarının ulaşabileceği yüksek kenarın %40'ından fazlası

Düğme %40'tan fazla tabletin üst kenarından, streching olmadan ulaşılabilir

Her iki cihazda da güvenilir bir yaklaşım, özelleştirilmiş düğmelere yakı kullanılan kontrollerin yakındaki relatif konumlandırma ile, onları kolay erişilebilir yerleştirme içinde yerleştirmeyi içerir.

Aşağıdaki kod, StarterPlayerScripts içindeki bir kullanıcı tarafı kodu alır ve sağ tarafında buton 20 pikseli oluşturur.

Müşteri Kısmı - Zıplama Düğmesinin Yakınındaki Özel Düğme
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

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

if UserInputService.TouchEnabled then
	-- Zıplama düğmesinin tamamen yükleneceğini bekleyin
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Zıplama düğmesinin solundaki yeni özel düğmeyi yerleştirin
	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

Konuşlandırma Temelli Kullanıcı Arayüzü

Mobil cihazlarda ekran alanı sınırlıdır, bu yüzden sadece aktif oynanışsırasında en önemli bilgileri göstermelisiniz. Örneğin, deneyiminizin kapıları ve hazine sandıklarını açmak için özel bir giriş eylemi içeriyorsa, ekranda sürekli bir "aç" düğmesi göstermek mantıksız hale gel