UI nesneleri bir düzen yapısı veya bir boyut değiştirici/kısıtlayıcı kontrolü altında değilse, onların konumunu ve boyutunu tamamen kontrol edersiniz. Ayrıca nesnelerin üst üste bindiği Z‑indeks katmanlama sırasını da ayarlayabilirsiniz.
Temel özellikler
Tüm GuiObjects, bir ekran içi veya oyun içi konteyner içinde konumlandırma, boyutlandırma, ankraj ve katman için ortak bir özellik setine sahiptir.
Konum
Position özelliği, nesneyi X ve Y eksenleri boyunca konumlandıran bir UDim2 koordinat setidir. Bir UDim2, her eksen için Scale ve Offset değerleri ile temsil edilir:
Seçili bir GuiObject'ın konumunu düzenlemek için, Özellikler penceresindeki Konum alanına tıklayın ve yeni bir UDim2 koordinat seti girin.
Studio'da bir UDim2 girerken parantezler ve boşluklar isteğe bağlıdır — dört değeri virgülle ayırarak girebilirsiniz, örneğin 0.25,40,0.1,20, ve Studio, niyet edilen değer setini çıkarır.
Studio, tek bir sayı girildiğinde de niyet edilen değer setini çıkarır. Örneğin, sadece 0.5 girmek, {0.5, 0},{0.5, 0} olarak dönüştürülür çünkü 0.5 muhtemelen %50'lik bir Ölçek değeridir. Tersine, 20 girmek {0, 20},{0, 20} olarak dönüştürülür çünkü 20 muhtemelen 20 piksel olan bir Offset değeridir ve %2000'lik bir ölçek değildir.
Boyut
Size özelliği, nesneyi X ve Y eksenleri boyunca boyutlandıran bir UDim2 koordinat setidir. Bir UDim2, her eksen için Scale ve Offset değerleri ile temsil edilir:
- Ölçek — İlgili eksen boyunca konteynerin boyutunun bir yüzdesini temsil eden değerler, herhangi bir Offset değeri ile toplanır.
- Offset — İlgili eksen boyunca nesnenin piksel boyutunu temsil eden değerler, herhangi bir Scale değeri ile toplanır.
Seçili bir GuiObject'ın boyutunu düzenlemek için, Özellikler penceresindeki Boyut alanına tıklayın ve yeni bir UDim2 koordinat seti girin.
Studio'da bir UDim2 girerken parantezler ve boşluklar isteğe bağlıdır — dört değeri virgülle ayırarak girebilirsiniz, örneğin 0.75,0,0.25,0, ve Studio, niyet edilen değer setini çıkarır.
Studio, tek bir sayı girildiğinde de niyet edilen değer setini çıkarır. Örneğin, sadece 0.5 girmek, {0.5, 0},{0.5, 0} olarak dönüştürülür çünkü 0.5 muhtemelen %50'lik bir Ölçek değeridir. Tersine, 20 girmek {0, 20},{0, 20} olarak dönüştürülür çünkü 20 muhtemelen 20 piksel olan bir Offset değeridir ve %2000'lik bir ölçek değildir.
AnchorPoint
AnchorPoint özelliği, nesnenin konumunu ve boyutunu değiştirdiği kök noktasını tanımlar. Varsayılan AnchorPoint değerleri (0, 0) olup, bu nesnenin sol üst köşesinde ankrajı yerleştirir.
AnchorPoint değerleri, nesnenin boyutuna göre 0 ile 1 arasında bir kesirdir; bu, AnchorPoint değerleri (0.5, 0.5) olan bir nesnenin, hem yatay hem de dikey olarak nesnenin ortasında (yüzde 50) ankraj noktasını yerleştirdiği anlamına gelir ve konum veya boyut değişiklikleri bu noktadan dışarı doğru hareket eder ve ölçeklenir.
Seçili bir GuiObject'ın ankraj noktasını görüntülemek ve düzenlemek için:
Özellikler penceresinde, AnchorPoint alanına tıklayın.
Yeni bir Vector2 koordinatı girin ve Enter tuşuna basın.
Studio, tek bir sayı girildiğinde niyet edilen değer çiftini çıkarır. Örneğin, sadece 0.5 girmek, merkez ankraj noktası için 0.5, 0.5 olarak dönüştürülür.
ZIndex
ZIndex özelliği, GuiObjects'ın hangi katman sırasına göre render edildiğini ve birbirinin üstüne bindiğini tanımlar. Yeni render katmanları oluşturmak istiyorsanız, her nesne için ZIndex özelliğini farklı pozitif veya negatif tam sayı değerlerine ayarlamalısınız.
ScreenGui gibi UI konteynerleri için varsayılan ZIndexBehavior, her zaman çocukları ebeveynlerinin üstünde render eder ve her çocuğun ZIndex değeri, diğerlerinin üzerinde hangi sırayla 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 tam sayı 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 konteynerleri içinde eşit boyutlu bir ızgara veya bir sayfa dizisi gibi. Düzenler genellikle kontrol ettikleri nesnelerin konumunu/boyutunu geçersiz kılar veya etkiler.
| Düzen | Açıklama |
|---|---|
| Liste | UIListLayout, kardeş GuiObjects'ı ebeveyn konteyner içinde yatay satırlara veya dikey sütunlara yerleştirir. |
| Izgara | UIGridLayout, kardeş GuiObjects'ı ebeveyn konteyner içinde aynı boyutta uniform hücreler halinde yerleştirir. |
| Tablo | UITableLayout, kardeş GuiObjects ve çocuklarını tablo formatında yerleştirir. |
| Sayfa | UIPageLayout, kardeş GuiObjects'ı benzersiz sayfalara organize eder ve bunlara betik ile geçiş yapabilirsiniz. |
Çoklu platform faktörleri
Roblox, oyuncuların telefon veya tabletlerinde oyunları keşfedip katılabildiği, ardından PC veya konsolda kaldıkları yerden devam edebildiği için doğası gereği çoklu platform destekler. Roblox oyunlarınızı desteklemeyi seçtiğiniz tüm platformlarda erişilebilir ve keyifli olacak şekilde tasarlamalısınız; bir platform için optimize etmek ve diğerlerini ihmal etmek yerine.
Ayrılmış bölgeler
Mobil cihazlarda, varsayılan kontroller ekranın sol alt ve sağ alt köşelerinin bir kısmını kaplar. Bir oyunun UI'sını tasarlarken, önemli bilgileri veya sanal düğmeleri bu bölgelerde yerleştirmekten kaçının.
Parmak bölgeleri
Çoğu mobil oyuncu iki parmak kullanır — biri sanal parmak çubuğunda ve diğeri zıplama düğmesindedir. Cihazın fiziksel boyutuna ve oyuncunun ellerine bağlı olarak, alt köşelerden çok uzaklaşmak rahatsız edici veya imkansız hale gelir, bu nedenle sık kullanılan düğmeleri kolayca ulaşılabilir bölgelerin dışına yerleştirmekten kaçınmalısınız.
Düğme, oyuncunun sağ parmağının rahatça ulaşabileceği mesafede
Düğme, oyuncunun elini veya parmağını uzatmadıkça ulaşması zor
Unutmayın ki rahat parmak bölgeleri telefonlar ve tabletler arasında farklılık gösterir çünkü tabletlerin ekranı daha büyüktür. Ekranın üst kenarından %40 aşağıda yerleştirilen bir düğme, bir telefonda ulaşılabilirken, bir tablette neredeyse ulaşılamazdır.
Düğme, telefonun üst kenarından %40 uzaklıkta, oyuncunun parmağına ulaşılabilir
Düğme, tabletin üst kenarından %40 uzaklıkta, uzatmadan ulaşmak zor
Hem telefonlar hem de tabletler için güvenilir bir yaklaşım, özel düğmeleri varsayılan zıplama düğmesi gibi sık kullanılan kontrollerin yanına göreceli olarak yerleştirmektir; böylece kolayca ulaşılabilir hale gelirler.
Aşağıdaki kod, StarterPlayerScripts içinde bir istemci tarafı betiğine yerleştirildiğinde, zıplama düğmesinin konumunu alır ve onun soluna 20 piksel uzaklıkta bir yer tutucu düğme oluşturur.
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ü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 düğmesinin 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 destekli değil veya Studio dokunmatik destekli bir cihazı taklit etmiyor!")
endBağlama tabanlı UI
Mobil cihazlarda ekran alanı sınırlıdır, bu nedenle aktif oyun sırasında yalnızca en hayati bilgileri göstermelisiniz. Örneğin, oyununuzun kapıları ve hazine sandıklarını açmak için özel bir giriş eylemi varsa, ekranın üstünde sürekli bir "aç" düğmesi göstermek mantıklı değildir. Bunun yerine, bir yakınlık istemi veya benzeri bir yöntem kullanarak, karakter bir kapıya veya sandığa yaklaştığında yalnızca girişi kabul edin.
