Oyun Tasarımı Destek Sitesi

Tekrardan merhabalar,

Bu derste, Unity‘nin EventSystem sisteminden faydalanarak hem PC’de hem de dokunmatik ekranlarda çalışan mouse/parmak input’u yazmayı göreceğiz. Bu sayede, PC’de Input.GetMouseButton ve mobilde Input.GetTouch kullanmak yerine, tek bir kod ile her iki platformu da destekleyeceğiz ve yazdığımız kod otomatik olarak multi-touch destekliyor olacak.

Hazırsanız başlayalım!

Unity’nin UI sistemini kullandıysanız, Hierarchy’de otomatik olarak oluşan EventSystem objesini büyük olasılıkla fark etmişsinizdir. Bu obje, UI sistemine hem PC’de hem de mobilde input gitmesini sağlar. Bu sayede, UI’ınızdaki butonlar her iki platformda da otomatik olarak düzgün çalışır. İlaveten, EventSystem multi-touch desteklediği için, dokunmatik ekranlarda aynı anda birden çok butona dokunmak mümkündür. Birazdan göreceğimiz üzere, biz de dilersek EventSystem’in multi-platform input’undan faydalanabiliriz ve bu esnada tüm ağır işi arkaplanda EventSystem objesi halleder.

EventSystem ile input alabilmek için 2 şeye ihtiyacımız var: input’u alacak bir UI objesine ve bu input’u işleyecek bir script’e. Bunların ilki çok basit: GameObject-UI-Image ile bir Image objesi oluşturun, bu objeyi tüm ekranı kaplayacak şekilde genişletin ve Color değerinin alpha’sı (saydamlık) ile oynayarak objeyi görünmez yapın:

Sadece Raycast Target‘ı açık objeler EventSystem’dan input alabilir, o yüzden bu seçeneği açık bırakmamız önemli.

Gelelim Image objemizin aldığı input’u script vasıtasıyla işlemeye. Burada işin güzel yanı, ne tarz input’ları dinleyebileceğimize karar verebilmemiz. Örneğin sadece ekrana tıklama input’u okuyabileceğimiz gibi, istersek ekranda parmağın kaydırılması input’u da okuyabiliriz.

Basit bir örnekle başlayalım. InputDers adında yeni bir C# script oluşturup bunu Image objesine component olarak verin:

using UnityEngine;
using UnityEngine.EventSystems;

public class InputDers : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
	public void OnPointerDown( PointerEventData eventData )
	{
		Debug.Log( "Parmak dokundu: " + eventData.position );
	}

	public void OnPointerUp( PointerEventData eventData )
	{
		Debug.Log( "Parmak kaldırıldı: " + eventData.position );
	}
}

Oyunu çalıştırıp ekrana birkaç defa dokunun. Her ekrana dokunuşunuzda konsola “Parmak dokundu” yazacak ve yanında da parmağın ekranın neresine dokunduğu yazacak. Benzer şekilde, ekrandan parmağınızı her kaldırdığınızda da konsolda “Parmak kaldırıldı” yazacak.

Script’te göze çarpan 2 kısım var: IPointerDownHandler ve IPointerUpHandler interface‘leri ile OnPointerDown ve OnPointerUp fonksiyonları. Bu interface’lere erişebilmek için kodun başına using UnityEngine.EventSystems; yazmak zorundayız. OnPointerDown, IPointerDownHandler interface’inin fonksiyonu iken OnPointerUp ise IPointerUpHandler’ın fonksiyonu. Unity’nin UI sistemi, bu iki interface’ten de otomatik olarak haberdardır; Image objesine mouse/parmak (pointer) ile dokununca otomatik olarak OnPointerDown fonksiyonunu, pointer ekrandan çekilince de otomatik olarak OnPointerUp fonksiyonunu çağırır.

EventSystem’dan input aldığımız fonksiyonlar parametre olarak bir PointerEventData objesi alırlar. Bu parametre, o UI objesi ile etkileşime geçen mouse/parmak (pointer) hakkında detaylı bilgi barındırır. Örnek kodda PointerEventData’nın position değeri vasıtasıyla, pointer’ın ekrandaki konumuna eriştik. PointerEventData’nın sahip olduğu diğer önemli değişkenler ise şunlardır:

• button: eğer etkileşime mouse imleci ile geçtiysek, hangi mouse butonunun basılı olduğunu depolar: sol (Left), orta (Middle) veya sağ (Right). Parmak ile etkileşime geçerken bu değer Left’tir
• delta: son iki frame arasında pointer’ın ne yönde ve kaç piksel hareket ettiğini Vector2 olarak döndürür
• pointerId: her mouse butonu ve her parmak için eşsiz bir int değer (id) döndürür. Dokunmatik ekranlarda bu değer Input.GetTouch().fingerId ile aynıdır
• pressPosition: nasıl position pointer’ın ekrandaki mevcut konumunu döndürüyorsa, bu değişken de pointer’ın ekrana ilk dokunduğu koordinatı Vector2 olarak döndürür. position‘dan bu değeri çıkararak, pointer’ın ekranda toplamda kaç piksel hareket ettiği bulunabilir

Şimdi de dilerseniz EventSystem’ın sunduğu diğer event’ler nelermiş onlara bakalım:

• IPointerClickHandler: Image objesine tıklayınca (pointer ile dokunup ardından dokunmayı kesince) OnPointerClick fonksiyonunu çalıştırır
• IBeginDragHandler: objeye dokunup pointer’ı bir miktar hareket ettirince OnBeginDrag fonksiyonunu çalıştırır. Pointer kaç piksel kaydırılınca bu fonksiyonun çağrılacağını, EventSystem objesindeki Drag Threshold değişkeni belirler
• IDragHandler: IBeginDragHandler çalıştıktan sonra, pointer her hareket ettiğinde OnDrag fonksiyonunu çalıştırır
• IEndDragHandler: IBeginDragHandler çalıştıktan sonra, pointer ekrandan kaldırıldığında OnEndDrag fonksiyonunu çalıştırır
• IPointerEnterHandler: bir pointer Image objesinin üzerine ilk defa geldiğinde OnPointerEnter fonksiyonunu çalıştırır
• IPointerExitHandler: Image objesinin üzerindeki bir pointer, Image’ın sınırları dışına çıktığında OnPointerExit fonksiyonunu çalıştırır. Pointer Image’ın sınırları dışına çıktıktan sonra tekrar Image’ın sınırları içine girerse, IPointerEnterHandler tekrar çalışır

Dilerseniz bu yeni bilgiler ışığında örnek kodumuzu biraz güncelleyelim:

using UnityEngine;
using UnityEngine.EventSystems;

public class InputDers : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
	public void OnBeginDrag( PointerEventData eventData )
	{
		Debug.Log( "Dokunan parmak hareket etmeye başladı: " + eventData.pointerId + " " + eventData.position );
	}

	public void OnDrag( PointerEventData eventData )
	{
		Debug.Log( "Parmak hareket ediyor: " + eventData.pointerId + " " + eventData.delta );
	}

	public void OnEndDrag( PointerEventData eventData )
	{
		Debug.Log( "Parmak dokunmayı kesti: " + eventData.pointerId + " " + eventData.position );
	}
}

Eğer kodu dokunmatik ekranda test ederseniz, ekranda hareket eden her parmak için farklı bir pointerId ile Debug.Log çalıştırıldığını göreceksiniz.

Bazen script’in aynı anda sadece bir parmağı takip etmesini isteyebilirsiniz. Mesela üstteki örnekte, ekranda birden çok parmak hareket etse bile, sadece tek bir parmak için OnDrag‘in çalışmasını isteyebilirsiniz. Bunu yapmak oldukça basit:

using UnityEngine;
using UnityEngine.EventSystems;

public class InputDers : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
	private int takipEdilenPointerId;

	public void OnBeginDrag( PointerEventData eventData )
	{
		// Sadece bu pointer'ın OnDrag'i çalıştırmasını sağla
		takipEdilenPointerId = eventData.pointerId;

		Debug.Log( "Dokunan parmak hareket etmeye başladı: " + eventData.pointerId + " " + eventData.position );
	}

	public void OnDrag( PointerEventData eventData )
	{
		if( eventData.pointerId != takipEdilenPointerId )
		{
			// Bu parmak, takip ettiğimiz parmak değil. Fonksiyondan direkt çık (OnDrag'i çalıştırma)
			return;
		}

		Debug.Log( "Parmak hareket ediyor: " + eventData.pointerId + " " + eventData.delta );
	}

	public void OnEndDrag( PointerEventData eventData )
	{
		if( eventData.pointerId != takipEdilenPointerId )
		{
			// Bu parmak, takip ettiğimiz parmak değil. Fonksiyondan direkt çık
			return;
		}

		Debug.Log( "Parmak dokunmayı kesti: " + eventData.pointerId + " " + eventData.position );
	}
}

Ekrana son dokunan parmağın pointerId‘sini bir değişkende tutuyoruz ve pointerId değeri bununla eşleşmeyen parmaklar için OnDrag ve OnEndDrag’i çalıştırmıyoruz. Bu kadar basit!

İsterseniz bir başka basit örneğe daha bakalım: Image objesi üzerinde parmağımızı sürükledikçe, sahnedeki bir objenin parmağın olduğu konuma ışınlanmasını ve parmakla beraber hareket etmesini sağlayalım. Bunun için kodu aşağıdaki gibi güncelleyip Inspector’dan Obje değişkenine değer olarak sahnedeki bir 3D objeyi verin:

using UnityEngine;
using UnityEngine.EventSystems;

public class InputDers : MonoBehaviour, IPointerDownHandler, IDragHandler
{
	private Camera kamera;
	private int takipEdilenPointerId;

	public Transform obje;

	private void Awake()
	{
		kamera = Camera.main;
	}

	public void OnPointerDown( PointerEventData eventData )
	{
		// Sadece bu pointer'ın OnDrag'i çalıştırmasını sağla
		takipEdilenPointerId = eventData.pointerId;
		ObjeyiPointeraIsinla( eventData );
	}

	public void OnDrag( PointerEventData eventData )
	{
		if( eventData.pointerId == takipEdilenPointerId )
			ObjeyiPointeraIsinla( eventData );
	}

	private void ObjeyiPointeraIsinla( PointerEventData eventData )
	{
		Vector2 pointerKonum = eventData.position;

		// Objeyi parmağın olduğu konuma, kameradan 5 metre uzakta olacak şekilde ışınla
		obje.position = kamera.ScreenToWorldPoint( new Vector3( pointerKonum.x, pointerKonum.y, 5f ) );
	}
}

EventSystem ile input almanın beraberinde getirdiği birkaç avantaj da bulunmakta:

• input’u bir UI objesi vasıtasıyla aldığımız için, bu UI objesinin üzerinde yer alan ve Raycast Target‘ı açık olan başka bir UI objesine tıklayınca, input bizim script’imize ulaşmaz. Yani örneğin ekrandaki bir butona tıklayınca bizim script’imizdeki OnPointerDown çalıştırılmaz; pointer’ın dokunduğu noktada başka bir UI objesi yoksa ancak o zaman çalıştırılır
• ekranın sadece belli bir kısmından (örneğin sağ yarısı) input alabiliriz. Bunun için Image objesinin konum ve boyutuyla oynamamız yeterli
• yazının başında dediğim gibi, bu sistem otomatik olarak multi-touch desteklediği için, bir parmak bizim script’imize input sağlarken aynı anda başka bir parmak da ekrandaki bir butona tıklayabilir

Yazıyı noktalamadan önce ufak bir noktaya değinmek istiyorum: şu anda input’u bir Image objesiyle alıyoruz. Her ne kadar bu Image objesi görünmez olsa da, maalesef halen GPU tarafından işlenerek overdraw sıkıntısına yol açmakta. Bunun çözümü ise çok basit:

1. GorunmezImage adında yeni bir C# script oluşturun:

using UnityEngine.UI;

// Credit: http://answers.unity.com/answers/1157876/view.html
public class GorunmezImage : Graphic
{
	public override void SetMaterialDirty() { return; }
	public override void SetVerticesDirty() { return; }

	protected override void OnPopulateMesh( VertexHelper vh )
	{
		vh.Clear();
		return;
	}
}

2. Image objesinden Image component’ini kaldırın ve onun yerine GorunmezImage component’ini verin (bu component GPU tarafından işlenmez ve o yüzden fillrate sıkıntısını oluşturmaz):

BONUS: EventSystem Script’lerinin 2D ve 3D Objelerde Çalışmasını Sağlamak

2D Sprite‘larınızda veya 3D objelerinizde OnMouseDown, OnMouseDrag ve OnMouseUp fonksiyonlarını kullanıyorsanız, bu fonksiyonların multi-touch desteklemediğini fark etmiş olabilirsiniz. Derste bahsettiğim OnPointerDown ve OnPointerUp gibi multi-touch destekleyen fonksiyonların bu objelerde de çalışmasını istiyorsanız, yapmanız gereken basit:

• sahnenizde halihazırda bir EventSystem objesi yoksa, GameObject-UI-Event System ile yeni bir tane oluşturun
• kameranıza Physics Raycaster (3D objeler için) veya Physics 2D Raycaster (2D Sprite’lar için) component’lerinden birini verin. Bu component’ler raycast bazlı çalıştığı için, sahnede çok fazla obje varsa performansı olumsuz etkileyebilirler. Bu sorunu minimuma indirgemek için, component’in değişkenleriyle oynayabilirsiniz:
  • Event Mask: hangi layer’lardaki objeler için OnPointerDown gibi fonksiyonların çalıştırılacağını belirler
  • Max Ray Intersections: raycast ışınlarının maksimum kaç objeye isabet edebileceğini belirler. Örneğin A objesi sahnede B objesinin arkasında kalıyorsa ve OnPointerDown fonksiyonu A objesinde yer alıyorsa, raycast’in hem B objesine hem de onun arkasındaki A objesine değebilmesi için bu değer minimum 2 olmalıdır. Bu değer 0 olursa bir limit yoktur ama en iyi performans için, değerini mümkünse 1, yoksa 1’e yakın bir rakam verin
• OnPointerDown vs. fonksiyonlara sahip olan script’inizi, istediğiniz 2D Sprite’lara veya 3D objelere verin (bu objelere Image veya GorunmezImage gibi başka bir component vermenize gerek yok, onun yerine bu objelerde Collider2D/Collider olduğundan emin olun)

Böylelikle dersi noktalıyorum. Sonraki derslerde görüşmek üzere!