Unity’de Mask Nasıl Kullanılır? (Sprite Masks)

Merhaba, bir önceki dersimizde Unity ile Lazerli bir güvenlik sistemi yapmıştık.Bugünkü dersimizde ise, Unity‘de mask kullanımını göreceğiz.Mask kullanımı birçok programda olduğu gibi, Unity içerisinde de mevcuttur.Kullanım alanları geniş olmakla birlikte, genelde bir görselin istenmeyen bölümlerini gizlemek için kullanılır.Tabi bu kulağa tek bir amacı var gibi geliyor fakat, projenizde ki mekaniklere göre bu bileşeni farklı şekillerde kullanabilirsiniz.Şimdi yeni bir proje oluşturalım ve dersimize başlayalım.

Sahnemizi oluşturmaya başlayalım.

Evet bu dersimiz için kullanacağımız birçok senaryo düşündüm.Fakat Sprite Mask bileşenini daha iyi anlatabileceğim ve sizinde daha iyi anlayabileceğiniz bir senaryoda karar kıldım.Senaryomuz gayet basit olacak.Öncelikle sahnemizde bir evimiz olacak ve bu evin içini görmek için bir x-ray dürbün kullanacağız.Bu dürbün bizim mask bileşenimiz olacak.Flash oyunlarda olduğu gibi basit bir sniper sahnesi oluşturmaya çalışacağız.

Şimdi senaryomuz için internetten bir ev görseli buluyoruz.Yalnız projemizde kullanacağımız bu görselin hem dış çephesi hemde iç çephesinin olması gerekiyor.Siz kendi projenizde ki bir görseli tercih edecekseniz, bu adımı atlayabilirsiniz.Daha sonra bulduğumuz bu görselleri, Unity içerisine ekliyoruz.Şimdi burada yapmamız gereken birkaç tane ayar bulunuyor.

İlk olarak Project penceresinde bulunan ilk görselimizi seçiyoruz ve sağ taraftaki Inspector penceremize geliyoruz.Bu bölümde Texture Type modunu, Sprite (2D and UI) seçeneğine getiriyoruz.Daha sonra değiştirdiğimiz ayarları kaydediyoruz.Aynı şekilde diğer görsellerimize de bu ayarları yapmamız gerekiyor.Aksi taktirde projemizde kullanamayız.

Sprite renderer bileşenin özellikleri.

Evet şimdi ayarlarını değiştirdiğimiz görselleri sahnemize ekliyoruz.Burada yine basit olarak yapacağımız birkaç ayar bulunuyor.Ancak bunlara geçmeden önce sprite renderer bileşeninin özellerinin ne olduklarına bir bakalım.

1. Color : Bu ayar ile sprite görselimiz için renk belirleyebiliriz.
2. Flip : Bu ayar ile belirlediğimiz görseli, x veya y ekseninde döndürebilirsiniz.
3. DrawMode : Bu ayar ile belirlediğimiz görselin çizim modunu değiştirebiliriz.
4. Sorting Layer : Bu ayar ile hedef görselin hangi katmanda gözükmesini istediğinizi belirleyebilirsiniz.
5. Order in Layer : Bu ayar ile hedef görselin katman sırasını belirleyebilirsiniz.
6. Mask Interaction : Bu ayar ile hedef görselin maskeler ile nasıl etkileşime gireceğini belirleyebilirsiniz.
7. Sprite Sort Point : Bu ayar ile Sprite Renderer‘ı sıralamak için kullanılan Sprite‘ın konumunu belirleyebilirsiniz.

Ayarlarımızın ne işe yaradıklarını öğrendiğimize göre, artık görsellerimiz için gerekli ayarları kullanmaya başlayabiliriz.İlk olarak Hierarchy penceresinde bulunan ve yapacağımız mask işleminden etkilenecek görselimizi seçiyoruz.Daha sonra Inspector penceremize geliyoruz ve Sprite Renderer bileşeni altında yer alan, Mask Interaction ayarına geliyoruz.Bu ayarı, Visible Outside Mask olarak değiştiriyoruz.

Daha sonra ikinci görselimiz olan yani mask işleminden etkilenmeyecek görselimizi seçiyoruz.Yine Inspector penceremize geliyoruz ve Sprite Renderer bileşeni altında yer alan, Mask Interaction ayarına geliyoruz.Bu sefer ayarımızı, Visible İnside Mask olarak değiştiriyoruz.Böylece belirlediğimiz maske görselimizin içerisinde ikinci görselimizi görebileceğiz.

Aslında burada, etkilenecek ve etkilenmeyecek derken kafanız karışmış olabilir.Bu konuyu biraz daha açarsak, ilk görselde maske ile üzerine geldiğimiz zaman, arkaplanda duran görseli görmemiz gerekiyor.Bu yüzden maskemizin bu görseli etkilemesi gerekiyor.Daha doğrusu, görselimizin maskeden etkilenmesi gerekiyor.İkinci yani arkaplanda gözükecek görselimiz için ise, durum tam tersi.Bu görselinde maske üzerine geldiği zaman tepki vermemesi gerekiyor.

Tabi şuan ilk görselin arkasında kaldığı için, ikinci görselimizi göremiyoruz.Evet o zaman dürbünümüzü yani maskemizi oluşturmaya başlayalım.

Sprite mask bileşenin özellikleri.

1. Sprite : Buraya maske olarak kullanmak istediğimiz görseli ekliyoruz.
2. Alpha Cutoff : Bu ayar ile seçmiş olduğumuz maske görselinin kenarları için, saydamlık ve keskinlik ayarı yapabiliyoruz.
3. Custom Range : Bu ayarı aktif hale getirirsek, birden fazla görselimiz için katman sırasını ayarlayabilirsiniz.
4. Sprite Sort Point : Bu ayar ile Sprite Renderer‘ı sıralamak için kullanılan Sprite‘ın konumunu belirleyebilirsiniz.

Evet Sprite Mask bileşeninin gayet basit özellikleri bulunuyor.Sahnemize eklediğimiz dürbün görselini seçiyoruz ve Inspector penceresine geliyoruz.Burada yer alan Sprite Renderer bileşenini siliyoruz.Daha sonra Add Component butonuna tıklıyoruz ve Sprite Mask bileşenini buraya ekliyoruz.Ben senaryoya uygun olarak, bir dürbün tercih ettim.Siz kendi projenizde ki temaya uygun, bir görselde belirleyebilirsiniz.Böylelikle seçtiğiniz görselin hatlarına göre bir maskeleme işlemi uygulanacaktır.

Kodlarımızı yazmaya başlayalım.

Aslında dersimiz bu aşamada bitmiş bulunmaktadır.Fakat projemizi başlattığımız zaman sahnemizde bulunan maske hareket etmeyecektir.Bu maskeyi hareket ettirmek ve sonuçları daha iyi görmek açısından basit bir kod yazacağız.Şimdi Project penceremizde yeni bir C# Script dosyası oluşturalım ve bu script dosyamızı editör yardımı ile açalım.

public Transform Durbun;
private Vector3 DurbunHareketi;
public float Hiz = 10f;

Öncelikle bize gereken değişkenlerimizi oluşturmakla başlıyoruz.İlk satırda, bir Transform değişkeni oluşturuyoruz.Bu değişken ile, dürbünümüzün yani maskemizin pozisyonunu kontrol edebileceğiz.İkinci satırda, bir Vector3 değişkeni oluşturuyoruz.Son satırda ise, float türünde bir değişken tanımlıyoruz.Bu değişkenle ise, dürbünümüzün yani maskemizin hareket hızını kontrol edebileceğiz.

Durbun = GameObject.FindWithTag ("durbun").transform;

Daha sonra start() fonksiyonumuzun içerisine bu kodu yazıyoruz.Burada değişkenimize, etiketi “durbun” olan nesnemizin transform bilgilerini tanımlıyoruz.

DurbunHareketi = new Vector2 (Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"));
Durbun.transform.position += DurbunHareketi * Hiz * Time.deltaTime;

Şimdi bu kodları update() fonksiyonumuzun içerisine yazıyoruz.İlk satırda değişkenimize yeni bir Vector oluşturuyoruz.Yalnız burada dikkat etmememiz gereken bir nokta var.Biz bir görsel üzerinden bu işlemi yaptığımız için, z ekseni ile bir işimiz yok.Bu yüzden Vector2 fonksiyonunu kullanıyoruz.Parantez içerisine baktığımız zaman, Input.GetAxis fonksiyonlarını görüyoruz.İlk bölümde yatay hareket için fonksiyonumuz yer alırken, ikinci bölümde ise dikey kontrol için fonksiyonumuz yer alıyor.

İkinci satırda ise, “Durbun” değişkenimizin position ayarlarını, “+=” ile değiştiriyoruz.Bunu yaparken, “DurbunHareketi” değişkenimizde yer alan transform bilgileri ile “Hiz” değişkenimizi çarpıyoruz.Daha sonra her karede aynı sonucu vermek için ise, Time.deltaTime fonksiyonu ile çarpıyoruz.Evet script dosyamızı hazırladık.Şimdi bu dosyamız için yeni bir boş nesne oluşturuyoruz ve içerisine ekliyoruz.

Evet bu projemizin de sonuna geldik.Unity ile mask kullanımı sadece hayal gücünüz ile sınırlı olduğunu unutmayın.Ben bu yazıda sadece bir örneğini size gösterdim.Temel mantık aynı olsa bile oluşturduğunuz senaryolar buna ekstra bir zenginlik katacaktır.Evet yazımızın sonuna geldik.Bir sonraki yazımızda görüşmek üzere…