Unity ile Basit Menü Yapımı – 1

Merhaba, bir önceki yazımda Unity‘nin sürümleri ve hangi sürümü indirmemiz gerektiği ile ilgili konulara değinmiştim.Şimdi ise Unity ile projemize, nasıl menu yapılır anlatmaya çalışacağım.Öncelikle yeni bir proje oluşturuyoruz.Ben 3D bir proje oluşturdum.Programa baktığımızda karışımızda çeşitli pencerelerin olduğunu görüyoruz.

Yeni nesneler oluşturmak.

Bu kısımların ne işe yaradığını, yeri geldikçe değineceğim.Projeler geliştirdikçe bir takım konuların akılda daha kalıcı olduğu kanısındayım.O yüzden her yerde aynı şeyleri anlatmanın bana göre bir yararı yok.Şimdi konumuza dönecek olursak, Hiyerarşi kısmında bir takım nesneler görüyoruz.Bunlardan biri kameramız diğeri ise ışığımız.Main Camera kısaca, projemizde bizim gözlerimiz oluyor.

Yani o olmaz ise, Game penceresi hata verecektir.Directional Light ise sahnedeki ışığı kontrol eden nesnemiz.Bunun ayarları ile oynayarak, sahnemizin atmosferini istediğimiz gibi ayarlayabiliyoruz.Şimdi bunları bir kenara bırakalım ve devam edelim.Hiyerarşi demiştik.Bu pencerede projemizde kullandığımız nesneleri oluşturabilir ve görebilirsiniz.Menümüz için biz UI yani arayüz sistemini kullanacağız.Bunun içinde Hiyerarşi kısmına gelip sağ tıklıyoruz ve sırasıyla UI > Canvas seçiyoruz.

Arayüz elamanlarının önemi.

Daha sonra Hiyerarşi pencerimize iki tane yeni nesne eklendi.Bunlardan biri Canvas yani, diğer tüm UI yani arayüz elamanlarımızın içinde barınmak zorunda olduğu nesnemiz.Diğeri ise EventSystem, bu nesneninde görevi diğer platformlarda arayüz elamanlarımızın çalışmasını sağlamak.Bunu şöyle örneklendirebilirim.

Biz bilgisayar için bir proje geliştiriyorsak, aynı projedeki arayüz elamanları(buton, toggle vs.) diğer platformlarda da çalışacaktır.Biz bunun için ekstra bir çaba sarf etmiyoruz.Şimdi Sahne kısmına bakarsak, Canvas penceresini tam karşısından göremediğimizi farketmişsinizdir.Bunun için Sahne penceresinin hemen altında 2D yazan butona basarsak, artık tam karşıdan göreceğiz.Bu bize arayüz elamanlarını yerleştirirken kolaylık sağlayacaktır.

Her çözünürlükte aynı sonuç.

Bu butona bastığımızda Canvas nesnesinin 4 kenarını da net olarak göremiyorsanız, üst bölümden eli (kısayolu Q tuşu) seçerek tut sürükle ve farenin tekeri ile yakınlaştırıp/uzaklaştırıp kendinize göre ayar çekebilirsiniz.Canvas nesnesinde yapmamız gereken önemli bir ayar var.Bu farklı çözünürlükteki ekranlarda, bizim menumuzde yer alan arayüz elamanlarının aynı konumda gözükmeleri açısından yaptığımız bir şey.

Canvas seçili iken Inspector penceresinde, Canvas Scaler bileşeninin hemen altında yer alan UI Scale Mode seçeneğini “Scale with Screen Size” ile değiştiriyoruz.Reference Resolution için önerdiğim değer ise FullHD yani 1920×1080 piksel.Şimdi arayüz elemanlarımızı yerleştirmeye devam edelim.Canvas nesnemizin üzerine sağ tıklayarak, sırasıyla UI > Panel seçiyoruz.Bu menünun arkaplanını oluşturacaktır.Inspector penceresine bakacak olursak, seçtiğimiz nesnenin tüm bileşenlerini bu pencereden görebiliyor ve düzenleyebiliyoruz.

Bu pencere yaptığımız projelerde oldukça önemli bir yere sahiptir.Şimdi Panel nesnemizi seçelim.Arayüz tasarlarken, önemli şeylerden biride nesnelerin birbirlerine olan konumlarıdır.Bunlar birbirleriyle ne kadar uyumlu olursa o kadar iyi gözükürler.Sahne kısmına bakacak olursak, dört köşede küçük oklar görüyoruz.İşte bunlar bizim için cetvel görevi gören araçlardır.Her eklediğimiz arayüz elamanı bu cetvellere sahiptirler.

Görsel ekleme ve ayarları.

Şimdi menümüz için seçtiğimiz arkaplan resimini Unity’de Assets penceresine sürükleyip bırakalım.Bu resmi projemizde kullanmamız için bir takım ayarlar yapmamız gerekiyor.Resmi seçtiğimizde Inspector penceresine bakacak olursak, bir takım ayarlar göreceksiniz.Öncelikle Texture Type standart olarak “default” ayarında gelmektedir.Biz onu “Sprite (2D and UI)” seçeneğine getiriyoruz.

Böylelikle arkaplan olarak kullanabileceğiz.Yine aynı pencerede pixel oranları, resimin kalitesi gibi ayarlarda mevcut.Şu an bunlarla bir işimiz olmadığı için devam edelim.Yaptığımız değişikliği kaydediyoruz.Daha sonra Panel nesnemizi seçiyoruz ve Sağ tarafta Image bileşenini görüyoruz.Bu bölümde Source Image bölümü, bizim arkaplan resmimizin tutulduğu yer.Bu pencere açıkken, hemen Assets penceresinden arkaplan resmimizi tutyoruz ve Source Image bölümüne sürükleyip bırakıyoruz.Artık arkaplanımız eklendi ve bunun gibi gözüküyor.

Burada resmimiz yarı saydam bir şekilde gözükebilir.Sorun değil düzeltmek için, yine panel seçili iken Image bileşeninde Color bölümündeki renge tıklıyoruz ve A yani alpha özelliğini en sona getiriyoruz.Böylelikle saydamlığı kaldırmış olduk.Arkaplanımız hazır, menüye bir başlık ekleyerek devam edelim.Panel‘e sağ tıklayarak sırasıyla UI > Text seçelim.Hiyerarşi penceremize yeni bir nesne eklenmiş oldu.Bu aşamada yazı nesnemizi sahne ekranında çıkan cetveller ile istediğimiz yere konumlandırabiliriz.

Yada Inspector penceresinde Rect Transform bileşeninin altındaki, Anchors değerleri ile oynayarak ayarlama yapabilirsiniz.Tercih size kalmış.Ben öncelikle yazımın rengini değiştirdim ve boyutunu ayarladım.Bu noktada küçük bir detay vereyim.Yazının boyutunu Font Size bölümünden ayarlamayın.Hemen altında yer alan Best Fit özelliğini aktif hale getirerek, Min ve Max Size bölümlerini kendinize göre doldurun.Benim önerdiğim ayar, Min 10 ve Max 300 (bu tabi size kalmış.)Bu sayede ilerde doğacak bir takım sorunların önüne geçmiş olacağız.

Çapa kullanımının önemi.

Yine yazının hizalanması gibi ayarları da bu bölümden değiştirmek mümkündür.Sıra geldi butonlarımızı yerleştirmeye, bunun için yine Panel nesnemize sağ tıklayarak sırasıyla, UI > Button seçelim.Ekrana butonumuz gelecektir.İlk olarak bu nesnenin boyutları ile oynamamız gerekiyor.Çünkü Game penceresine bakacak olursak, boyut olarak çok küçük olduğunu göreceksiniz.

Yukarıdada değindiğim üzere, bunu ayarlamanın birden fazla yolu mevcut.Bu sefer Inspector penceresinde Rect Transform bileşeninin altındaki, Anchors değerleri ile oynayarak cetvelimi istediğim pozisyona getireceğim.Cetveli istediğim pozisyonlara getirdikten sonra, butonumun aynı yerde kaldığını ve hiçbir değişiklik olmadığını görüyorum.

Bunu düzeltmek içinde, Rect Transform bileşeninin altındaki “left-top-right-bottom” değişkenlerinin hepsini “0” yapmamız gerekiyor.Bunu yaptıktan sonra sizde göreceksiniz ki, butonumuz cetvellerin tam hizasına gelmiş olacak.Butonu hizaladıktan sonra, buton nesnesinin solunda yer alan oka basarak alt nesnelerini açalım.Burada butonun içinde yazıyı kontrol eden nesnemizi görüyoruz.Bunu yine üst bölümlerde değindiğim özelliklerden yararlanarak, istediğimiz şekle sokuyoruz.

Yine oluşturduğumuz bu butondan birkaç kopya daha alarak diğer menü elemanlarımızı da hazırlıyoruz.Butonu yada herhangi bir nesneyi kopyalamak için, Hiyerarşi pencerimizde kopyalayacak olduğumuz nesneye sağ tıklayarak, Duplicate seçeneğini seçiyoruz.Yada yine nesne seçili iken, klavyeden crtl + d kısayolu ile bu işlemi gerçekleştirebiliriz.Ben iki kopya buton oluşturdum.

Bunlar aynı pozisyonda görüneceklerdir.Bu yeni nesnelerin pozisyonlarını değiştirmek için, klavyeden w kısayolu ile yada yukarıda elin yanındaki 4 oklu şekli seçerek Sahne penceresinden pozisyonları ile oynamak mümkün oluyor.Aynı işlemi Inspector penceresinden de yapmak mümkündür.Son olarak projemize baktığımız zaman basit bir menü karşımızda duruyor.

Tabi şuan herhangi bir işlevi yerine getirdiğini söyleyemeyiz.Çünkü gerekli kodları yazmadık ve butonların görevlerini atamadık.Bir sonraki dersimde butonlara nasıl görev verildiğini göreceğiz ve kod yazmaya başlayacağız.Görüşmek üzere…