Dev Blog

Unity Simple Joystick

20.06.20208 min read
image

Merhaba bu yazımda internette pek Türkçe kayanağa rastlayamadığım Joystick olacak.

⇒İlk olarak Canvas objemizi olusturarak baslayalım

⇒Canvas objemizin 'Canvas Scaler' componentindeki 'UI Scale Mode' secenegini 'Scale With Screen Size' moduna getiriyorum.

(Bu secenek UI objelerini 'Reference Resolution' daki belirmis oldugumuz cözunurluge gore ayarlarak cozunurluk degisiminde su anki oranı korur.
Tabi reference res. ayarını kendi 'Standolone' ayarımıza esitlemiliyiz ki objelerin nasıl gorunecegini onizleyelim.)

⇒Ardından Canvas objeme bir Image objesi ekliyorum ve ismini 'JoystickBG' olarak degistiriyorum ve resimde gormus oldugunuz ayarlamaları yapıyorum.

⇒Ardından Background Objemizin icine 'Joystick' isminde yeni bir Image objesi olusturup resimde gorulen ayarlamaları yapıyorum.



⇒Daha Sonra 'Joystick_Controller' isimli bir script olustup 'Main Camera' objemize ekliyoruz.


 

⇒Burada mühim olan Unity'nin biza saglamıs oldugu 'Event Trigger' componentidir.
Bu componenti 'JoystickBG' objemize veriyoruz ve 'Pointer Down'(Basıldıgınde) ve 'Pointer Up'(Cekildiginde) isimli Event Type'ı vererek dokunma/tıklama olayını yakalayabiliyoruz.

⇒Artık kodlamaya baslayabiliriz.

  public RectTransform joystick;
        public RectTransform joystickBG;
        Vector2 startPoint,endPoint,currentPoint;
        bool isSelected;

 

  1. UI objelerinin transform componenti RectTransform oldugu icin Joystick ve joystickBG adlı RectTransform tipinde degiskenlerimi olusturuyorum.
    Bu sayede Background ve Joystick UI objemizi bu degiskenlere atayıp position ve size ayarlarını ulasabiliriz.
  2. Joystick objesini hareket ettirirken startPoint,endPoint ve currentPoint olmak üzere Vector2 tipinde degisken olusturduk.
  3. endPoint'den startPoint vektorunu cıkarırsak currentPoint elde ederiz ve bu pointe joystick objemizi tasıyabiliriz.

joystick objesinin secilme durumunu kontrol etmek icin ise isSelected degiskeni olusturduk


 void Start()
    {
        isSelected = false;

        startPoint = new Vector2(joystickBG.position.x + joystickBG.sizeDelta.x / 2,
        joystickBG.position.y + joystickBG.sizeDelta.y / 2);
    }

⇒Oncelikle isSelected degiskenini baslangıcta false yapıyoruz.

⇒Ardından startPoint'i belirliyoruz.


public void MoveStart(){
        isSelected = true;
    }

    public void MoveEnd(){
        isSelected = false;
        joystick.anchoredPosition = Vector2.zero;
    }

⇒ MoveStart ve MoveEnd methodlarını baslangıcta olusturmus oldugumuz Event Trigger componentine atıyoruz.

⇒ Pointer Down(MoveStart) ve Pointer Up(MoveEnd) event de kullanıyoruz

⇒ joystick objemize basıldıgında isSelected = true oluyor, kaldırdıgımızda ise isSelected = false oluyor ve tabiki joysticki bıraktıgımız icin baslangıc konumuna gitmesi yani (0,0) gerek.


void Update()
    {
        if(isSelected){
            endPoint = new Vector2(Input.mousePosition.x,Input.mousePosition.y);
            currentPoint = endPoint - startPoint;
            currentPoint = Vector2.ClampMagnitude(currentPoint,joystickBG.sizeDelta.x / 2);

            joystick.anchoredPosition = currentPoint;
        }
    }

⇒ endPoint noktamızı belirliyoruz.

currentPoint noktamız endPoint ve startPoint arasındaki fark

⇒ Burada mühim olan yer ise Vector2.ClampMagnitude, bu method sectigim vectorun uzunlugunun sınırlandırır, bunu yapıyoruz cunku joystick objesinin arka plandaki resimden dısarı cıkmasını istemiyoruz.

⇒ En son olarak joystick objemizi currentPoint noktamıza tasıyoruz.

⇒ Ve scriptin son hali


using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Joystick_Controller : MonoBehaviour
{

    public RectTransform joystick;
    public RectTransform joystickBG;
    Vector2 startPoint,endPoint,currentPoint;
    bool isSelected;

    void Start()
    {
        isSelected = false;

        startPoint = new Vector2(joystickBG.position.x + joystickBG.sizeDelta.x / 2,
        joystickBG.position.y + joystickBG.sizeDelta.y / 2);
    }

    void Update()
    {
        if(isSelected){
            endPoint = new Vector2(Input.mousePosition.x,Input.mousePosition.y);
            currentPoint = endPoint - startPoint;
            currentPoint = Vector2.ClampMagnitude(currentPoint,joystickBG.sizeDelta.x / 2);

            joystick.anchoredPosition = currentPoint;
        }
    }

    public void MoveStart(){
        isSelected = true;
    }

    public void MoveEnd(){
        isSelected = false;
        joystick.anchoredPosition = Vector2.zero;
    }
}

⇒ Ve ufak bir goruntu

--> Sonraki Gonderide gorusmek uzere...