UI nesnelerini konumlandırma ve boyutlandırma

UI nesneleri bir düzen yapısı veya bir boyut değiştirici/kısıtlama altında değilse, bunların konumu ve boyutu üzerinde tam kontrole sahip olursunuz. Ayrıca, nesnelerin üst üste geldiği Z‑indeks katmanlama sırasını ayarlayabilirsiniz.

Temel özellikler

Tüm GuiObjects, ekran üzerindeki veya deneyim içindeki bir konteynır içinde konumlandırma, boyutlandırma, çarpan ve katman için temel bir dizi özelliği paylaşır.

Konum

Position özelliği, nesnenin X ve Y eksenleri boyunca konumlandırmak için bir UDim2 koordinat setidir. Bir UDim2, her eksen için hem Scale hem de Offset değerleri ile temsil edilir:

• Scale değerleri, karşılık gelen eksen boyunca konteynırın boyutunun bir yüzdesini temsil eder, herhangi bir Offset değeri ile eklenerek.
• Offset değerleri, nesneyi karşılık gelen eksen boyunca ne kadar piksel kaydıracağını temsil eder, herhangi bir Scale değeri ile eklenerek.

Seçilen bir GuiObject'un konumunu düzenlemek için, Özellikler penceresindeki Posizyon alanına tıklayın ve yeni bir UDim2 koordinat seti girin.

Boyut

Size özelliği, nesneyi X ve Y eksenleri boyunca boyutlandıran bir UDim2 koordinat setidir. Bir UDim2, her eksen için hem Scale hem de Offset değerleri ile temsil edilir:

• Çarpan — Karşılık gelen eksen boyunca konteynırın boyutunun bir yüzdesini temsil eden değerler, herhangi bir Offset değeri ile eklenerek.
• Offset — Nesnenin karşılık gelen eksen boyunca piksel boyutunu temsil eden değerler, herhangi bir Çarpan değeri ile eklenerek.

Seçilen bir GuiObject'un boyutunu düzenlemek için, Özellikler penceresindeki Boyut alanına tıklayın ve yeni bir UDim2 koordinat seti girin.

Çarpan Noktası

AnchorPoint özelliği, nesnenin konumunu ve boyutunu değiştirdiği hareket noktasını tanımlar. Varsayılan AnchorPoint değerleri (0, 0)'dur ve bu, çarpanı nesnenin sol üst köşesine yerleştirir.

AnchorPoint değerleri, nesnenin boyutuna göre 0 ile 1 arasında bir oran değeridir, bu da (0.5, 0.5) çarpan noktasına sahip bir nesne, hem yatay hem de dikey olarak nesnenin ortasında (yüzde 50) çarpan noktasını yerleştirir ve konumu veya boyutu üzerinde yapılan herhangi bir değişiklik bu noktadan dışa doğru hareket ve ölçekleme yapar.

Seçilen bir GuiObject'un çarpan noktasını görüntülemek ve düzenlemek için:

1. Özellikler penceresinde, AnchorPoint alanına tıklayın.

   

2. Yeni bir Vector2 koordinatı girin ve Enter tuşuna basın.

   Studio, tek bir sayı girildiğinde istenen değer çiftini çıkarır. Örneğin, yalnızca 0.5 girmek, merkezi bir çarpan noktası için 0.5, 0.5 olarak dönüştürülecektir.

ZIndeksi

ZIndex özelliği, GuiObjects'ın birbirlerini nasıl render ve üst üste gelecekleri katman sırasını tanımlar. Yeni render katmanları oluşturmak istiyorsanız, her nesne için ZIndex özelliğini farklı pozitif veya negatif tamsayı değerlerine ayarlamalısınız.

ScreenGui gibi UI konteynırları için, varsayılan ZIndexBehavior her zaman çocukları ebeveynlerinin üzerinde render eder ve her çocuğun ZIndex değeri, diğerlerinin üzerinde hangisinin önce render edileceğini belirlemek için kullanılır.

Bir nesnenin ZIndex değerini düzenlemek için, Özellikler penceresinde ZIndex'i bulun ve yeni bir tamsayı değeri girin.

Düzen yapıları

Düzen yapıları, GuiObjects'ı hızlı bir şekilde organize etmenizi ve görüntülemenizi sağlar; örneğin yatay veya dikey bir liste, ebeveyn konteynırının içinde birbirine eşit boyutlardaki kutulardan oluşan bir ızgara, bir sayfa dizisi ve daha fazlası. Düzenler genellikle kontrolü altındaki nesnelerin konumunu/boyutunu geçersiz kılar veya etkiler.

Çoklu platform faktörleri

Roblox, oyuncuların telefon veya tabletlerinde deneyimleri keşfedip katılabildiği ve ardından daha sonra PC veya konsolda kaldıkları yerden devam edebildiği için doğası gereği çoklu platformdur. Seçtiğiniz tüm platformlarda Roblox deneyimlerinizi erişilebilir ve keyifli hale getirmeye odaklanmalısınız, bir platform için optimize etmek ve diğerlerini göz ardı etmek yerine.

Ayrılmış alanlar

Mobil cihazlarda, varsayılan kontroller ekranın sol alt ve sağ alt köşelerinin bir kısmını kaplar. Bir deneyimin UI'sini tasarlarken, önemli bilgileri veya sanal düğmeleri bu alanlara yerleştirmekten kaçının.

Parmak alanları

Çoğu mobil oyuncu iki parmak kullanır — biri sanal parmak çubuğunda ve diğeri zıplama butonundadır. Cihazın fiziksel boyutuna ve oyuncunun ellerine bağlı olarak, alt köşelerden uzaklaşmak rahatsız edici veya imkansız hale geleceğinden, sıkça kullanılan düğmeleri kolayca ulaşılabilir alanların dışına yerleştirmekten kaçınmalısınız.

Oyuncunun sağ parmağının rahatlıkla ulaşabileceği düğme

Oyuncunun elini veya parmağını uzatmadığı sürece zor ulaşılabilen düğme

Unutmayın ki rahat parmak alanları telefonlar ve tabletler arasında farklılık gösterir çünkü tabletlerin ekranı daha büyüktür. Ekranın üst kenarının 40% altında yer alan bir düğme, bir telefon için ulaşılabilirken, bir tablet için neredeyse ulaşılmazdır.

Telefonun üst kenarından yüzde 40 mesafede, oyuncunun parmağının ulaşabileceği düğme

Tabletinin üst kenarından 40%, uzatmadan zor ulaşılabilen düğme

Hem telefonlarda hem de tabletlerde güvenilir bir yaklaşım, özel düğmeleri sıkça kullanılan kontrollerin (varsayılan zıplama butonu gibi) yakınında göreceli olarak konumlandırmaktır; bu doğrultuda kolayca ulaşılabilir bir konumda olmalarını sağlamaktır.

Aşağıdaki kod, StarterPlayerScripts içinde bir istemci tarafı scriptine yerleştirildiğinde, zıplama butonunun konumunu alır ve onun soluna 20 piksel uzaklıkta bir düğme oluşturur.

İstemci Scripti - Zıplama Butonuna Yakın Ö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 butonunun tamamen yüklenmesini bekleyin
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Yeni özel düğmeyi zıplama butonunun soluna 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("Cihaz dokunmatik özellikli değil veya Studio, dokunmatik özellikli bir cihazı taklit etmiyor!")
end

Bağlama temelli UI

Mobil cihazlardaki ekran alanı sınırlıdır, bu nedenle aktif oyun sırasında sadece en hayati bilgileri göstermelisiniz. Örneğin, eğer deneyiminiz kapıları ve hazine sandıklarını açmak için özel bir giriş eylemi içeriyorsa, ekranın üzerinde sürekli bir "aç" düğmesini göstermek mantıklı değildir. Bunun yerine, yalnızca karakter bir kapıya veya sandığa yaklaştığında girişi kabul etmek için bir yakınlık istemi veya benzer bir yöntem kullanın.