Konum ve boyutlu UI nesneleri

Arayüz nesneleri bir düzen yapısının veya bir boyut değiştirici/sınırın kontrolünde olmadığı sürece, onların pozisyonu ve boyutu üzerinde tam kontrole sahipsiniz.Ayrıca, nesnelerin üzerine geçtiği Z‑index katmanı siparişini de ayarlayabilirsiniz.

Temel özellikler

Tüm GuiObjects çekirdek bir dizi özellik paylaşır pozisyona , boyuta , sabitleştirmeye ve katmana on‑screen veya deneyim içinde bir kutuya.

Pozisyon

The özellik, nesneyi X ve Y eksenleri boyunca konumlandıran bir koordinat setidir.Bir UDim2 her eksen için hem Scale hem de Offset değerleriyle temsil edilir:

Scale değerleri, eşleşen eksen boyunca konteynerin büyüklüğünün yüzde kısmını temsil eder, herhangi bir Offset değerine ekleyici.
Offset değerleri, nesneyi ilgili eksene kaydırmak için kaç piksel ve herhangi bir Scale değerin eklenmesini temsil eder.

Seçilmiş bir GuiObject konumunu düzenlemek için, Özellikler penceresindeki Konum alanına tıklayın ve yeni bir UDim2 koordinat ayarlagirin.

Kısa ve uzun parantezler, Studio'ya bir UDim2 girerken isteğe bağlıdır - örneğin virgüllerle ayrılan dört değeri girebilirsiniz, örneğin 0.25,40,0.1,20 ve Studio niyetli değer ayarlatahmin edecektir.

Stüdyo ayrıca tek bir sayı girildiğinde niyet edilen değer setini de yorumlar.Örneğin, basitçe 0.5 girmek {0.5, 0},{0.5, 0} çevrilecektir, çünkü 0.5 muhtemelen %50'lik bir Ölçek değeri.Tersine, 20 girilmesi {0, 20},{0, 20} çevrilecektir, çünkü 20 muhtemelen 20 pikselin bir Ofset değeri ve 2000% ölçek değil.

Boyut

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

Ölçek — Konteynerin eksenine göre yüzde bir bölümünü temsil eden değerler, herhangi bir Ofset değerine ekleyici olarak.
Ofset — Eşleşen eksen boyunca nesnenin piksel boyutunu temsil eden değerler, herhangi bir Ölçek değerine ekleyici.

Seçilen bir ölçeğinin boyutunu düzenlemek için, Ölçek alanına tıklayın ve yeni bir koordinat ayarlagirin.

Kısa ve uzun parantezler, Studio'ya bir UDim2 girerken isteğe bağlıdır - örneğin virgüllerle ayrılan dört değeri girebilirsiniz, örneğin 0.75,0,0.25,0 ve Studio niyetli değer ayarlatahmin edecektir.

Çapa Noktası

The AnchorPoint özellik, nesnenin kaynak noktasını değiştirdiği yerden konumunu ve boyutunu değiştirir.Varsayılan AnchorPoint değerleri, (0, 0) , anahtarı nesnenin üst sol köşesine yerleştirir.

değerleri, nesnenin boyutu ile ilgili bir bölümden , nesnenin değerleri ile ilgili bir örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğin örneğinörneğin örneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörneğinörinörneğinörneğinörneğinör neğinörneğinörneğinörinörinörinörneğinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörinörin

Seçilmiş bir GuiObject ankraj noktasını görüntülemek ve düzenlemek için:

Özellikler penceresinde, Çapa Noktası alanına tıklayın.
Yeni bir Vector2 koordinatı girin ve Enter basın.

Stüdyo, tek bir sayı girildiğinde niyet edilen değer çiftini tahmin eder.Örneğin, basitçe 0.5 girmek bir merkez sabit nokta için 0.5, 0.5 dönüştürülecektir.

ZIndex Değeri

The ZIndex özelliği, GuiObjects render ve birbirlerine üst üste geçmek için katman sırasını tanımlar.Yeni render tabakaları oluşturmak istiyorsanız, her nesne için farklı pozitif veya negatif sayı değerlerine sahip ZIndex özelliğini ayarlamanız gerekir.

ScreenGui gibi UI konteynerleri için, varsayılan ZIndexBehavior daima ebeveynlerinin üzerindeki çocukları görüntüler ve her çocuğun ZIndex 'u, diğerlerine görüntülenme sırasını belirlemek için kullanılır.

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

Düzen yapıları

Düzen yapıları, örneğin yatay veya dikey listeye hızlı bir şekilde düzenlenmesini ve görüntülenmesini sağlar, eşit boyutlu karelerden bir ızgara , bir sayfa sırası ve daha fazlası.Düzenler genellikle kontrolleri altındaki nesnelerin pozisyonunu / boyutunu geçersizleştirir veya etkiler.

Düzen	Açıklama
Liste	UIListLayout konumlar kardeşine ebeveyn kutusunun içinde yatay sütunlara veya dikey sütunlara yerleştirin GuiObjects .
Kafağız	UIGridLayout konumları aynı boyuttaki eşit hücrelerden oluşan bir ızgara içinde ebeveyn kutunun içinde aynı boyuttaki kardeş GuiObjects pozisyonları.
Tablo	UITableLayout kardeş pozisyonları GuiObjects ve çocukları masa biçimine dönüştür.
Sayfa	UIPageLayout kardeşini GuiObjects yazılım aracılığıyla geçiş yapabileceğiniz benzersiz sayfalara düzenler.

Çapraz platform faktörleri

Roblox, doğası gereği çapraz platformludur , çünkü oyuncular bir PC veya konsolda deneyimler keşfedip katılabiliyor, ardından telefonlarını alıp bıraktıkları yerden devam ediyorlar.Bir platform için optimize etmek ve diğerlerini görmezden gelmek yerine, desteklediğiniz tüm platformlarda erişilebilir ve keyifli Roblox deneyimleri tasarlamalısınız .

Rezerve bölgeler

Mobil cihazlarda, varsayılan kontroller ekranın sol alt ve sağ alt köşelerinin bir kısmını kaplar.Deneyimin arayüzünü tasarlarken, bu bölgelere önemli bilgileri veya sanal düğmeleri yerleştirmekten kaçının.

Deneyiminiz varsayılan kontrol ayarını DevTouchMovementMode.UserChoice kullanıyorsa, mobil cihazlardaki oyuncular, girişlerini Dinamik Thumbstick , Klasik Thumbstick veya Taşımak için dokunun 'dan seçebilecek ve ekranda bulunan kontroller ve rezerve edilmiş bölgeler biraz değişecek.Kullanıcı arayüzünüzü bu olasılık etrafında tasarlamayı unutmayın.

Parmak bölgeleri

Çoğu mobil oyuncu iki parmağı kullanır - biri sanal joystick üzerinde ve biri de atlama düğmesinde.Cihazın fiziksel boyutuna ve oyuncunun ellerine bağlı olarak, en alt köşelere çok fazla ulaşmak rahatsız edici veya imkansız hale gelir, bu yüzden kolay ulaşılabilen bölgelerin dışına sık kullanılan düğmeler yerleştirmekten kaçınmalısınız.

oyuncusağ başparmak ulaşımına rahat bir şekilde düğme

Oyuncu elini veya başparmaklarını uzatana kadar ulaşması zor olan düğme

Rahat bilek bölgelerinin telefonlardan ve tabletlerden farklı olduğunu unutmayın, çünkü tabletlerin daha geniş bir ekranı var.Ekranın üst kenarının %40 altına yerleştirilen bir düğme, telefonda ulaşılabilir ancak neredeyse tablette ulaşılamaz.

Düğme, telefonun üst kenarından %40, oyuncunun başparmaklarının ulaşabileceği yerden

Buton, tabletin üst kenarından %40, uzatmadan ulaşmak zor

Her iki telefonda ve tabletten güvenilir bir yaklaşım, varsayılan atlama düğmesi gibi sık kullanılan kontrollerin yakınındaki özel düğmelere mutlak pozisyon vermek ve onları kolay ulaşılabilir konuma yerleştirmektir.

Aşağıdaki kod, StarterPlayerScripts içinde bir müşteri tarafı kriptinde yerleştirilir ve atlama düğmesinin konumunu alır ve sağında bir yer tutucu düğmesi 20 piksel oluşturur.

Müşteri Kodu - Zıplama Düğmesinin Yakınında Ö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üklenmesini 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 soluna yeni özel düğme yerleştir
	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

Kontekst tabanlı UI

Ekran alanı mobil cihazlarda sınırlıdır, bu nedenle aktif oynanışsırasında yalnızca en önemli bilgileri göstermelisiniz.Örneğin, deneyiminiz 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ıklı değildir.Bunun yerine, yalnızca karakter bir kapı veya göğüse yaklaştığında girişi kabul etmek için bir yakınlık uyarısı veya benzer yöntemi kullanın.

Bu sayfadakiler