조이스틱

📌 Joystick

모바일 게임은 대부분 조이스틱을 이용해 캐릭터를 이동시킨다.

간단한 조이스틱 에셋을 이용해 이를 구현해보자.

📝 Asset

Nice Touch 라는 유료에셋을 사용했다.

Unity Live 를 보고 공짜로 받았던 에셋이라 사용해보았다.

📝 원리

Top View 게임에서 조이스틱은 회전과 움직임을 담당한다.

현재 이 에셋에 존재하는 조이스틱에는 MMTouchJoystick 클래스가 존재한다.

public class MMTouchJoystick
{
  public Vector2 _joystickValue;
}

이 클래스에는 JoystickValue 라는 Vector2 가 존재하며

이는 Joystick 이 움직일 때 실시간으로 변하는 값이다.

해당 값을 토대로 가고자 하는 방향을 바라봄과 동시에 움직인다.

이 게임의 캐릭터에는 Rigidbody 가 달려있기에 움직임은 Rigidbody 로, 회전은 eulerAngles 을 통해 구현해보자.

📋 Code

PlayerController

private float _horizontal;
private float _vertical;
private float _angle;

// 수평, 수직, 각도 변수 채워주기
public void Movement(Vector2 move)
{
  _horizontal = move.x;
  _vertical = move.y;
  // 현재 조이스틱의 각도 (앞 : 0 , 좌 : -90 , 뒤 : -180 , 우 : 90)
  _angle = Mathf.Atan2(_horizontal, _vertical) * Mathf.Rad2Deg;
	if(_angle < 0)
  {
    _angle += 360;
  }
}

// Movement 메소드를 통해 조이스틱에서 받은 값을 토대로 _angle 수정
private void Update()
{
  // Photon 을 통해 내 캐릭터만 움직이게 만들기
  if(_pv.IsMine)
  {
    if(_joyStick._joystickValue != Vector2.zero) {
      Movement(_joyStick._joystickValue);
    } else {
			Movement(Vector2.zero);
		}
  }
}

// 움직임
private void FixedUpdate()
{
  if(_pv.IsMine)
  {
    Vector3 movement = new Vector3(_horizontal, 0, _vertical) * _walkSpeed * Time.fixedDeltaTime;
		
    // 회전시켜주기
    if(_angle != 0)
    {
      float cur = this.transform.eulerAngles.y;
      float tar = _angle;
      float yrot = Mathf.Lerp(cur, tar, 10) % 360;
      transform.eulerAngles = new Vector3(transform.eulerAngles.x, yrot, transform.eulerAngles.z);
    }
    // 값이 존재한다면 움직이기
    if(movement.sqrMagnitude != 0)
    {
      _rb.MovePosition(_rb.position + movement);
    }
  }
}

💻 Execute