Babylon.js · GUI & UI
Responsive UI: pencere ile birlikte nefes alan arayüz
«Duyarlı» burada tek bir CSS dosyası demek değil; tam ekran veya sahne içi GUI'nin tuval boyutu, ölçek kuralı ve konteyner yerleşimi ile birlikte yeniden düzenlenmesidir. Kullanıcı tarayıcıyı daraltınca menü taşmamalı; genişletince yazılar birbirine yapışmamalı — bunun için hem tasarım birimi hem motorun yeniden boyama ( resize) zinciri birlikte düşünülür.
Holodepth Three.js tarafında aynı sorun çoğu zaman media query, esnek kutu ve gerçek DOM ile çözülür; burada doku tabanlı arayüzün kendi yerleşim dilini ve pencere olayıyla bağlantıyı sabitliyoruz — kural seti farklı, kırılma noktaları ( breakpoint) düşüncesi ortaktır.
Özet: dört kontrol noktası
| Nokta | Soru | Belirti |
|---|---|---|
| İdeal tuval | Tasarım hangi piksel ölçüsüne göre? | Mobilde yazı devasa veya mikroskobik. |
| Yerleşim birimi | Sabit piksel mi, yüzde mi? | Kenarlardan taşma veya ortada sıkışma. |
| Yeniden boyut | Motor ve doku yeniden ölçülüyor mu? | Pencereyi değiştirince eski düzen «donuk» kalır. |
| Dokunma | Küçük ekranda hedef boyutu yeterli mi? | Yanlış düğmeye basılır veya hiç seçilemez. |
İdeal tuval ve ölçek bağlantısı
Özel yapı: tam ekran GUI'de seçilen ideal genişlik / yükseklik, tasarımın düşünüldüğü sanal tuvaldir; gerçek pencere bundan farklıysa tek ölçek katsayısıyla sığdırma yapılır ( Fullscreen UI · ideal ölçek). Responsive düşünce bu rakamları «tek doğru» olarak değil cihaz sınıflarına göre seçilmiş başlangıç olarak görür — örneğin dar genişlikte daha küçük ideal tuval, geniş masaüstünde daha büyük; geçişleri tek satırda çözmeyin, tasarım kararıyla bağlayın.
İdeal tuval değişince yerleşim ağacındaki yüzde ve köşe kuralları aynı kalabilir; değişen şey «birim pikselin fiziksel boyutu»dur — konteyner hiyerarşisi Fullscreen UI · yerleşim ağacı ile birlikte okunmalıdır. Doku iç çözünürlüğü ile bellek ilişkisi ayrı başlıktır ( UI doku mantığı · çözünürlük); burada odak pencere genişliğine göre hangi idealin seçileceğidir, bitmap boyutunun kendisi değil.
Geçişi tasarımla bağlama
Kırılma noktası ( breakpoint) değiştirdiğinizde ideal tuvali güncelliyorsanız, aynı anda hangi menü öğelerinin gizleneceğini veya ikon yerine metin gösterileceğini belgeleyin — yalnızca rakam değiştirmek bazen taşmayı çözmez, öncelik sırasını değiştirmek gerekir.
- Başlangıç: dar / orta / geniş için ayrı ideal adayları seçin; tek sabit zorunlu değildir.
- Ölçek: motorun tek katsayı sığdırması ile margin ve yazı boyutları tasarım biriminde kalır.
- Doğrulama: her sınıfta en az bir gerçek cihaz veya tarayıcı önizleme genişliği ile kontrol edin.
Yüzde, iç boşluk ve taşma
Özel yapı: konteyner boyutu yüzde ile verildiğinde alt öğeler ebeveynin güncel genişliğine göre yeniden hesaplanır; sabit piksel genişlikli düğmeler ise dar ekranda sırayı bozar. Köşeye sabitleme ( anchor) ile yüzde genişlik birlikte kullanıldığında, beklenen davranışı bir diyagram üzerinde doğrulayın — «sol üst köşe %16 içeride» gibi kurallar yazılı olmadan kafa karıştırır.
İç boşluk ( padding) yüzdeyse ebeveyn genişliğine bağlıdır; sabit piksel ise dar ekranda «iç alan» hızla sıfıra yaklaşır. Üst üste binme sırası ( z-order) yanlışsa tıklanabilir alan görünmez kalır — yerleşim ağacı ile aynı dilde düşünün ( Fullscreen UI · yerleşim).
Taşma ve kaydırma
İçerik yüksekliği artınca kaydırılabilir bir alt konteyner tanımlamak gerekir; aksi halde düğmeler ekran dışına taşar veya üst üste binir — duyarlılık yalnız genişlik değil dikey bütçe meselesidir. Kaydırma alanı ayrıldığında tıklama isabeti yalnızca görünür bölgeye düşer; doku tarafındaki güncelleme maliyeti için UI doku mantığı · güncelleme sayfasına yönelin — burada yalnız yerleşim kararı özetlenir.
- Karışım: yüzde genişlik + sabit piksel düğme → dar ekranda satır kırılması planlayın.
- Köşe: anchor + yüzde birlikteyse diyagram veya tasarım spesifikasyonu zorunlu sayın.
- Dikey: taşma bekleniyorsa kaydırılabilir alt ağaç; aksi halde öncelikle öğe sayısını azaltın.
Pencere yeniden boyutu: motor senkronu
Özel yapı: tarayıcı penceresi değişince üç katman güncellenmelidir: tuval çözünürlüğü ( canvas boyutu), kamera en-boy oranı, GUI dokusunun yeniden ölçülmesi. Bu zincirin bir halkası atlansa, arayüz önceki piksel düzeninde «yapışık» kalır veya tıklama koordinatları kayar. Kontrol sistemiyle birlikte düşünün ( Control system · odak ve bağlam): yeniden boyutta odak ve işaretçi konumu beklenmedik tetik üretebilir; kamera sürüklemesi açıksa kamera / GUI önceliği ile çakışmayı ayrı doğrulayın.
Motorun yeniden boyuta nasıl tepki verdiği Motor ömrü · yeniden boyut ile hizalanır; doku yenilemesinin kare maliyeti UI doku mantığı · güncelleme konusunda ayrıntılanır — burada yalnızca «üç halkanın birlikte güncellendiğini» doğrulamanız istenir.
- Kontrol: yeniden boyuttan sonra kritik bir düğmeye tıklayıp beklenen eylemi doğrula.
- Performans: sürekli sürüklemede ağır yeniden çizimi debounce veya eşik ( threshold) ile kısın.
- Senkron: tuval, en-boy oranı ve GUI ölçeği aynı olayda veya sabit sırayla güncellenmelidir.
Güvenli alan ve dokunma hedefi
Özel yapı: mobil cihazlarda çentik veya yuvarlak köşeler güvenli iç alanı ( safe area) küçültür; kenara sıfır yapıştırılmış düğmeler fiziksel olarak zordur. Dokunma hedefi için önerilen minimum fiziksel boy (~44 CSS piksel eşdeğeri düşünce) küçük ideal tuvalde «sığmıyorum» çelişkisini doğurur — ya tasarımda öncelik sırası ya da ikinci bir dar / geniş düzen şeması gerekir.
Motor içi GUI bu insets değerlerini otomatik «bilmez»; kenar boşluğunu tasarım token'larıyla ( safe margin) kodda uygulamanız gerekir. Hedef boyutu büyüttüğünüzde yüzde ve taşma ile birlikte dikey kaydırma ihtiyacı doğar — ikinci bir dar düzen ( ideal tuval değişimi veya gizlenen öğeler) çoğu zaman daha az pahalıdır, tek satırda sıkıştırmaktan iyidir.
Cihaz üstünde bir dakika
Gerçek cihazda başparmak erişimi ve çentik köşesini deneyin; yalnız masaüstü penceresinde daraltmak güvenli alan ve parmak kalınlığını taklit etmez. Yanlış düğme veya «tıklanmıyor» şikâyeti burada başlar; isabet ayrıntısı UI doku · UV ve tıklama ile birleştirilebilir.
- Kenar: güvenli alan için ek iç boşluk; sıfır yapıştırma yerine tasarım kuralı.
- Hedef: minimum dokunma boyutu; sığmıyorsa öncelik veya ikinci düzen.
- Test: çentikli cihaz + yatay/dikey tutuş; yalnız tarayıcı genişliği yetersizdir.
Three.js ile üst üste okuma
Three.js tarafında ResizeObserver, CSS ve media query ile kamera en-boy oranı genelde ayrı katmanlarda birleşir; Babylon.js tam ekran GUI'de benzer sonuç çoğu zaman ideal tuval + resize olayı + motor senkronu üçlüsüyle çıkar — araç adları farklı, «pencere değişti, düzeni yeniden üret» düşüncesi ortaktır.
Çakışmayı önleyen çerçeve
Three.js projelerinde duyarlılık çoğu zaman tarayıcı düzeni ile çözülür; Babylon.js GUI'de düzen motor içi konteyner kurallarıyla yaşar. Flexbox yerine yüzde ve köşe bağlantıları; media query yerine çoğu zaman kodda seçilen ideal ölçü ve yeniden boyut olayı devreye girer — problemin özü «ekran nasıl bölünür?» sorusu olduğu için kavramlar eşlenir, kopyala-yapıştır taşınmaz.
Tam ekran dokunun DOM ile karşılaştırmalı okuması Fullscreen UI · Three kutusunda; pencere zinciri bu sayfada ( 3). Sahne içi panel ölçeği 3D GUI · ölçek ile ayrıca bağlanır — responsive yalnız 2B tuval değil, dünya ölçeği de sorulabilir.
- Ortak: kırılma noktası ve yeniden düzen; fark ifade dili.
- Three: düzen ve canvas boyutu tarayıcı katmanında.
- Babylon: ideal tuval, konteyner kuralları ve motor resize senkronu.
Sıradaki: arayüz dokusu
Duyarlı yerleşim netleştikten sonra doku güncelleme bütçesi ve bitmap gerçekliği için UI texture logic sayfasına geçebilirsiniz. Önceki adım: Fullscreen UI.