Roblox UI/UX Mimarisi: CanvasGroup, Akıcı Ölçekleme, Mobil Güvenli Alan & Çapraz Platform Düzen

Kompakt bir akıllı telefonda, iPad'de, 1080p monitörde ve 4K TV'de net ve dengeli görünen bir Roblox arayüzü tasarlamak kritik bir mühendislik görevidir. Sabit piksel kullanımı butonların üst üste binmesine veya ekran dışına taşmasına yol açar.

Başarılı oyunlar duyarlı düzen mimarisi benimser. UDim2 Scale bağıl ölçekleme, AnchorPoint (0.5, 0.5) merkezleme, UIAspectRatioConstraint oran kilitleme, GuiService Safe Area telafisi ve CanvasGroup donanım hızlandırmalı render ile akıcı HUD'lar üretebilirsiniz.

1. Bağıl Ölçekleme: UDim2 Scale ve Offset Yönetimi

Roblox Studio duyarlı arayüz tasarımının temel taşları:

• Scale ve Offset Farkı: UDim2.new(XScale, XOffset, YScale, YOffset). Scale ana kapsayıcının yüzdesidir (0.0-1.0), Offset ise sabit piksel sayısıdır.
• Saf Scale Kuralı: Küçük ekranlarda orantılı küçülme sağlamak için üst çerçeve boyutlarında daima Scale kullanın.
• Offset Kullanım Alanı: Offset'i yalnızca ince kenarlıklar, UIPadding iç boşlukları veya sabit boyutta kalması gereken küçük simgeler için saklayın.

2. En-Boy Oranı Kilitleme ve AnchorPoint Geometrisi

Geniş ekranlarda arayüz bozulmalarını engelleme:

• AnchorPoint (0.5, 0.5): Varsayılan (0, 0) noktasını (0.5, 0.5) yapıp Position'ı UDim2.new(0.5, 0, 0.5, 0) ayarlamak her çözünürlükte kusursuz merkezleme sağlar.
• UIAspectRatioConstraint: Kare haritaların veya yuvarlak yetenek simgelerinin elipse dönüşmesini önler (örn. kare için AspectRatio = 1.0).
• Baskın Eksen Kontrolü: Geniş veya dar ekranlarda taşmaları önlemek için DominantAxis'i Width veya Height olarak belirleyin.

3. Mobil Safe Area ve Kamera Çentiği Telafisi

Akıllı telefon kamera delikleri ve gezinme çubuklarını yönetme:

• Çentik Tehlikesi: Ekran köşelerine yerleştirilen butonlar kamera delikleri veya yuvarlatılmış köşeler nedeniyle tıklanamaz hale gelebilir.
• ScreenGui.ScreenInsets: Özelliklerden ScreenInsets değerini DeviceSafeInsets yaparak butonları otomatik olarak güvenli alana taşıyın.
• Kenar Boşluğu: Sistem geri hareketleriyle çakışmamak için ekran kenarlarından en az 20 piksel boşluk bırakın.

-- En-Boy Oranı Kilitlemeli ve Güvenli Alan Destekli Duyarlı Kapsayıcı
local GuiService = game:GetService("GuiService")
local ResponsiveContainer = {}
ResponsiveContainer.__index = ResponsiveContainer

function ResponsiveContainer.new(parentScreenGui, config)
    local self = setmetatable({}, ResponsiveContainer)
    
    local rootFrame = Instance.new("Frame")
    rootFrame.Name = config.Name or "ResponsiveRoot"
    rootFrame.AnchorPoint = Vector2.new(0.5, 0.5)
    rootFrame.Position = UDim2.new(0.5, 0, 0.5, 0)
    rootFrame.Size = config.Size or UDim2.new(0.8, 0, 0.8, 0)
    rootFrame.BackgroundTransparency = 1
    rootFrame.Parent = parentScreenGui
    
    if config.AspectRatio then
        local ratioConstraint = Instance.new("UIAspectRatioConstraint")
        ratioConstraint.AspectRatio = config.AspectRatio
        ratioConstraint.AspectType = Enum.AspectType.ScaleWithParentSize
        ratioConstraint.DominantAxis = config.DominantAxis or Enum.DominantAxis.Width
        ratioConstraint.Parent = rootFrame
    end
    
    local sizeConstraint = Instance.new("UISizeConstraint")
    sizeConstraint.MinSize = config.MinSize or Vector2.new(300, 200)
    sizeConstraint.MaxSize = config.MaxSize or Vector2.new(1920, 1080)
    sizeConstraint.Parent = rootFrame
    
    self.Frame = rootFrame
    return self
end

return ResponsiveContainer

4. CanvasGroup Performansı ve Toplu Çizim

Düşük segment mobil cihazlarda karmaşık menüleri optimize etme:

• CanvasGroup Çalışma Prensibi: Normal Frame saydamlık animasyonunda tüm alt ögeleri tek tek yeniden çizerken, CanvasGroup tüm ağacı tek bir GPU dokusuna derleyerek 1 draw call ile işler.
• Pürüzsüz Geçişler: Açılır pencerelerde CPU yükü oluşturmadan 60 FPS akıcı animasyon için GroupTransparency kullanın.
• VRAM Uyarısı: Mobil cihazlarda video belleğini tüketmemek için aynı anda çok sayıda aktif CanvasGroup bulundurmayın.

5. Oyun Kolu ve Dokunmatik Kontrol Ergonomisi

Konsollar ve dokunmatik ekranlar için evrensel kontrol tasarımı:

• Minimum Dokunma Alanı: Yanlış basmaları önlemek için dokunmatik buton boyutunu en az 44x44 piksel tutun.
• Konsol Odak Yönetimi: Menü açıldığında GuiService.SelectedObject ile başlangıç butonunu seçili hale getirin.
• Sanal Joystick Alanı: UserInputService.TouchEnabled durumunda sol alt köşeyi joystick için boş bırakın.

Frequently Asked Questions