Unity

Unity Scroll View Componentinin Kullanımı

Rantabl_Unity-Scroll-View-Componentinin-Kullanimi_tanitim

Unity Scroll View Componentinin Kullanımı


Canvasımızın içine Scroll View componentini ilk eklediğimizde Content objesinin içerisinde öğeleri teker teker yan yana veya alt alta yerleştirmemiz gerekmekte ve kaydırma özelliği de doğru bir şekilde çalışmayacaktır tabii ki de componenti oluşturup ayar yapmadan kullanmak doğru bir seçim olmayacktır.


Bu yazı da Scroll View componenti yukarıdaki örnek üzerinden anlatılacağı için bazı ayarlar değişiklik gösterebilir herhangi bir sorunla karşılaşırsanız yorum kısmında veya discord sunucumuzda sormaktan çekinmeyin.


Bu yazı da kullanılan görselleri Asset Store dan ücretsiz temin edebilirsiniz. Flat RPG Icons Pack 1: WEAPONS by CreateV

Paketteki prefabların içeresindeki objelerin Width ve Height değerleri 120 olarak değiştirilmiştir. Text (TMP) objesinin görünürlüğü açılıp Anchor Preset değeri sağ alta gelecek şekilde ayarlanmıştır. İsterseniz Background objesindeki color değerini de değiştirebilirsiniz görünüm açısından güzel bir sonuç elde edebilirsiniz.


Main Camera da yapılacak ayarlar;

  • Clear Flags; Solid Color
  • Background; #020D1B (Örnekte kullanılan renk kodu. Kopyalayıp renk alanını açıp Hexadecimal kısmına yapıştırınız.)
    • Rect Transform da yapılacak ayarlar;
      • Anchor Preseti açıp alt ve mouse sol tık ile en sağdan ortadaki seçeneği seçip bağlı olduğu objenin genişliği kadar genişletiryoruz.
      • Height; 200
    • Image Componentin de yapılacak ayarlar;
      • Color; #000000
      • Color içindeki A; 100
    • Scroll Rect de yapılacak ayarlar;
      • Vertical; Tiki kaldırılacak.
      • Horizontal & Vertical Scrollbar; None olarak seçilecek. (İsteğe göre kalabilir ama kaydırmalı bir alan olduğu için mouse ile kolaylıkla kontrol edebiliriz.)
        • None olarak seçtikten sonra Horizontal & Vertical Scrollbar nesnelerini silin veya görünürlüğünü gizleyin. Component tarafından kullanılan nesnelere müdahale edemediğimiz için öncelikle none olarak seçmemiz gerekmekte.
      • UI Scale Mode; Scale With Screen Size
      • Reference Resolution; 1920 x 1080
      • Match; 0.5

Canvas oluşturduktan sonra yapılacak ayarlar;

Ardından Canvas içerisinde Scroll View componentini oluşturup yapmamız gereken ayarlar;

  • Scroll View içerisinde ki Viewport da yapılması gereken ayarlar;
    • Rect Transform da yapılacak ayarlar;
      • Right; 0

Viewport içerisinde ki Content de yapılacak ayarlar;

  • Rect Transform da yapılacak ayarlar;
    • Anchor Preseti açıp alt ve mouse sol tık ile en soldan ortadaki seçeneği seçip bağlı olduğu objenin içerindeki sol taraftan başlatıyoruz.
    • Pivot Y; 0.5
  • Horizontal Layout Group componentini ekliyoruz (Dikeyde kaydırmak isterseniz Vertical Layout Group componenti)
    • Padding Left & Right; 50
    • Spacing; 50
    • Child Aligment; Middle Center
  • Content Size Fitter componentini ekliyoruz. (Ekli olduğu objenin width ve height değerlerini; içerisinde bulunan nesnelere göre otomatik olarak ayarlar.)
      • Horizontal ve Vertical Fit; Perfered Size

Son olarak en başta ayarlamalarını yaptığımız Prefabları, Scroll View içerisinde ki Viewport içerisinde ki Content objesi içine ekliyoruz.

Yapılması gereken bütün işlemler bu kadar. Aklınıza takılan herhangi bir şeyi yorum kısmında veya discord sunucumuzda sorabilirsiniz.

Düşünceni burada bırak