[💬] [뮤냐어택!] 스압 주의) 스와이프 디텍션 코드 및 테스트 스크린샷

[갈릭디핑쏘스(garlicdipping101)]

안뇽, 요즘도 도트 수백번씩 찍었다가 지웠다를 반복하고 있는데 잘 안 찍히는 모션이 있어서 오늘은 코드 관련 로직을 한번 들고 와봤음.

당연히 유니티에 스와이프 디텍션 코드가 있을 줄 알았더니 터치 업 & 다운 코드밖에 없더라고?

간단한 로직이지만 처음 구현해보는 사람들은 막힐 수도 있으니 공유 겸 해서 겸사겸사 올려봄.

-------------------------------

사실 스와이프 디텍션 로직 자체는 간단함. 인풋 다운 & 업 각각의 포지션을 저장해 뒀다가, 벡터 계산해서 아 어느 방향으로 스와이프했군, 을 알아내면 됨.

하지만 나는 인풋 up이 호출되지 않아도 일정 거리 이상을 스와이프하면 디텍션되도록 구현하고 싶어서 약간 로직을 비틀어야 하는 부분이 있었음.

그럼 로직은 대강 다음과 같이 되겠지?

코드로 옮기면 다음과 같이 될 거야

Vector2 touchDownPos;

Vector2 swipeDirection;

void processMobileInput()

         {

                 if (Input.touches.Length > 0)

                 {

                          Touch t = Input.GetTouch(0);

                          if (t.phase == TouchPhase.Began)

                          {

                                   //save began touch 2d point

                                   touchDownPos = new Vector2(t.position.x, t.position.y);

                          }

                          else if (t.phase == TouchPhase.Moved)

                          {

                                   Vector2 currentTouchPos = new Vector2(t.position.x, t.position.y);

                                   bool swipeDetected = checkSwipe(touchDownPos, currentTouchPos);

                                   swipeDirection = (currentTouchPos - touchDownPos).normalized;

                                   if (swipeDetected)

                                            onSwipeDetected(swipeDirection);

                          }

                          else if (t.phase == TouchPhase.Ended)

                          {

                                   Debug.Log("Swipe End!");

                          }

                 }

         }

TouchPhase.Ended 경우에는 터치가 종료되는 시점인데, 즉 손가락을 뗐다는 말이지만 Swipe Detected 로직이 없음. 

왜냐면, 나는 손가락을 뗀 이후에 스와이프 디텍션을 하는 게 아니라 손가락이 일정 거리를 움직인 다음에 스와이프 디텍션을 하도록 구현하고 싶었으니까.

스와이프를 체크한 이후 관련 로직은 onSwipeDetected()에 들어가게 되고, 여기서 자잘한 처리를 할 것인데...그 전에 checkSwipe 로직을 살펴보자.

bool checkSwipe(Vector3 downPos, Vector3 currentPos)

{

Vector2 currentSwipe = currentPos - downPos;

if (currentSwipe.magnitude >= minSwipeDist)

{

//Debug.Log("Swipe Detected : " + currentSwipe);

return true;

}

return false;

}

엄청 간단함, 그냥 손가락 처음 터치한 위치와 Update()에서 받은 현재 손가락 위치를 검사해서 일정 거리 이상 움직이면 Swipe Detected로 판정하도록 하는 게 끝.

여기서 minSwipeDist는 적당한 거리값을 입력해야 하는데, 나는 스크린 사이즈의 1/14 정도로 설정해 놨어. 

void Awake()

{

Vector2 screenSize = new Vector2(Screen.width, Screen.height);

minSwipeDist = Mathf.Max(screenSize.x, screenSize.y) / 14f;

Debug.Log("MinSwipeDist : " + minSwipeDist); 

 }

근데 타블렛 종류나 이런 거에선 터치감이 안 좋을지도 몰라서 이 부분 로직은 나도 좀 의문이 드네. Swipe Detection Distance 관련해서 아는 것 있는 분들은 조언 좀...

일단 모바일 터치 로직은 위와 같지만, PC에서 스와이프 입력이나 다양한 디버그를 위해서 일부러 PC용 로직도 짰어. 

마우스 Down, Up을 이용해서 구현했는데, 로직은 전체적으로 비슷하니 이쪽 설명은 생략하고...

C++처럼 전처리기를 이용해서 모바일과 PC 로직을 분리해줄 수 있으니 다음과 같이 Update를 처리할 수 있겠지?

void Update()

{

#if UNITY_ANDROID

processMobileInput();

#else

processInput();

#endif

}

이 시점에서 전체 코드는 다음과 같아 : 

using UnityEngine;

using System.Collections;

using System;

public class GarlicInputManager : MonoBehaviour

{

Vector2 screenSize;

float minSwipeDist;

Vector2 swipeDirection;

void Awake()

{

Vector2 screenSize = new Vector2(Screen.width, Screen.height);

minSwipeDist = Mathf.Max(screenSize.x, screenSize.y) / 14f;

Debug.Log("MinSwipeDist : " + minSwipeDist);

}

void Update()

{

#if UNITY_ANDROID

processMobileInput();

#else

processInput();

#endif

}

Vector2 touchDownPos;

void processMobileInput()

{

if (Input.touches.Length > 0)

{

Touch t = Input.GetTouch(0);

if (t.phase == TouchPhase.Began)

{

//save began touch 2d point

touchDownPos = new Vector2(t.position.x, t.position.y);

}

else if (t.phase == TouchPhase.Moved)

{

Vector2 currentTouchPos = new Vector2(t.position.x, t.position.y);

bool swipeDetected = checkSwipe(touchDownPos, currentTouchPos);

swipeDirection = (currentTouchPos - touchDownPos).normalized;

if (swipeDetected)

onSwipeDetected(swipeDirection);

}

else if (t.phase == TouchPhase.Ended)

{

Debug.Log("Swipe End!");

}

}

}

Vector3 mouseDownPos;

void processInput()

{

if (Input.GetMouseButtonDown(0) == true)

{

mouseDownPos = Input.mousePosition;

}

else if (Input.GetMouseButton(0) == true)

{

bool swipeDetected = checkSwipe(mouseDownPos, Input.mousePosition);

swipeDirection = (Input.mousePosition - mouseDownPos).normalized;

if (swipeDetected)

onSwipeDetected(swipeDirection);

}

else if (Input.GetMouseButtonUp(0) == true)

{

Debug.Log("Swipe End!");

}

}

bool checkSwipe(Vector3 downPos, Vector3 currentPos)

{

//딜레이 등으로 인해 인풋을 막고 있다.

if (isInputBlocked == true)

return false;

Vector2 currentSwipe = currentPos - downPos;

if (currentSwipe.magnitude >= minSwipeDist)

{

//Debug.Log("Swipe Detected : " + currentSwipe);

return true;

}

return false;

}

void onSwipeDetected(Vector2 swipeDirection)

{

//Swipe 

}

private bool isInputBlocked = false;

public void blockInput()

{

isInputBlocked = true;

}

public void unBlockInput()

{

isInputBlocked = false;

}

}

1)중간에 굵게 쓴 normalized는 스와이프 방향을 처리하는 로직. 크기가 1짜리인 벡터로 노말라이즈 시켜줘. 

오브젝트가 어느 방향으로 이동하는지 알고 싶을 때 유용하게 쓸 수 있음.

유니티에서 제공하는 벡터는 쓸만한 함수가 아주 많으니 유용하게 잘 쓰는 게 좋음. 고등학생 때 수학 안 졸고 들었으면 간단한 벡터 관련 이론은 알고 있겠지?(모른다면, 벡터 관련 기본 지식은 공부하는 게 반쯤 필수라고 생각함...생각하는 이상으로 자주, 유용하게 쓰이니까...)

2)제일 아랫단에 보면 blockInput 관련 로직이 있어.

공격 모션을 취하는 도중(Attack Start) 상태 등등의 경우, 강제적으로 사용자의 인풋을 막아버려야 하는 경우가 있으니 이를 위해 구현했음. 

checkswipe()에서 강제로 false를 돌려줘버리면 간단히 해결되겠지?

----------------------------------

여기까지 짜고 나서 발견한 문제는 

1.사용자가 손가락을 떼지 않고 화면을 한 번에 쭈욱 밀 경우, 2번 이상의 swipe input이 들어가버림.

->원인은 touch down pos는 그대로인데 current pos는 계속 업데이트 되고 있으니, 입력을 강제로 막고 있던 isInputBlocked가 false가 되자마자 곧바로 터치 입력이 들어가버리는 것.

한 번 스와이프를 했으면, 손가락을 떼고, 다시 터치한 후, 스와이프를 하도록 구현해 주면 해결되겠지?

2.엄~~~청 천천히 손가락을 밀어도, 화면에서 손가락을 떼지 않으면 일정 거리를 움직이자마자 스와이프 인풋이 들어감.

->이건 도트 찍느라 아직 못 고침, 아마 터치 다운시에 Timestamp를 기록해두고 (스와이프 거리 / 스와이프 시간 = 스와이프 속도) 를 계산해서 일정 스피드 이상으로 스와이프했으면 입력으로 처리해주면 되겠지? 아니면 코루틴 등으로 0.5~1초마다 touch down pos가 리셋되도록 해 줘도 될 것 같네. 

1번은 해결했고 2번은 아직 미루고 있는데, 1번은 그냥 boolean 플래그를 주면 해결되는 문제니까 다음과 같이 짜면 될 거야

bool swiped = false;

void processMobileInput()

{

if (Input.touches.Length > 0)

{

Touch t = Input.GetTouch(0);

if (t.phase == TouchPhase.Began)

{

//save began touch 2d point

touchDownPos = new Vector2(t.position.x, t.position.y);

swiped = false; //손가락을 뗀 후 다시 화면을 터치하기 전에는 입력을 막는다

}

else if (t.phase == TouchPhase.Moved)

{

Vector2 currentTouchPos = new Vector2(t.position.x, t.position.y);

bool swipeDetected = checkSwipe(touchDownPos, currentTouchPos);

swipeDirection = (currentTouchPos - touchDownPos).normalized;

if (swipeDetected)

onSwipeDetected(swipeDirection);

}

else if (t.phase == TouchPhase.Ended)

{

Debug.Log("Swipe End!");

swiped = true;

}

}

}

void processInput()

{

if (Input.GetMouseButtonDown(0) == true)

{

mouseDownPos = Input.mousePosition;

swiped = false;

}

else if (Input.GetMouseButton(0) == true)

{

bool swipeDetected = checkSwipe(mouseDownPos, Input.mousePosition);

swipeDirection = (Input.mousePosition - mouseDownPos).normalized;

if (swipeDetected)

onSwipeDetected(swipeDirection);

}

else if (Input.GetMouseButtonUp(0) == true)

{

Debug.Log("Swipe End!");

swiped = true;

}

}

bool checkSwipe(Vector3 downPos, Vector3 currentPos)

{

//손가락을 아직 안 뗐지만 인풋은 입력받았다.

if (swiped == true)

return false;

//딜레이 등으로 인해 인풋을 막고 있다.

if (isInputBlocked == true)

return false;

Vector2 currentSwipe = currentPos - downPos;

if (currentSwipe.magnitude >= minSwipeDist)

{

//Debug.Log("Swipe Detected : " + currentSwipe);

return true;

}

return false;

}

void onSwipeDetected(Vector2 swipeDirection)

{

//Swipe, 각종 게임 로직은 이 안에 구현

swiped = true;

}

이제 swipeDirection에 따라 사용자가 원하는 로직을 onSwipeDetected에 넣고 처리하면 될 거야.

---------------------------------------------

**보너스 - Action을 이용한 이벤트 기반의 인풋 시스템

조금 어려울 수도 있는 부분인데, 시스템 구현 시에 매우 유용한 부분이라서 조금 첨가함.

예전에 안드로이드 독학하면서 느낀 건데 On~~~ 등의 이벤트 기반 함수 호출 시스템은 엄청 편리하고 좋음. 

함수 이름에서부터 어느 시점에 이 함수가 호출되는지 알 수 있고, 객체지향적 논리에도 잘 들어맞는 편인 것 같고...

어쨌든 c#의 delegate 시스템을 쓰면 이걸 엄청 쉽게 구현할 수 있는데, 델리게이트는 쉽게 말하자면 함수를 변수처럼 다루는 거야.

예를 들자면 add() 함수와 subtract() 함수가 있고, delegate로 선언한 addAndSubtract 라는 변수가 있다고 했을 때,

addAndSubtract += add;

addAndSubtract += subtract;

//add();

//subtract();

//아래 코드는 위 2줄과 같은 효과를 보임

addAndSubtract();

위에 코드는 엄청 대충 설명한 거니까 그냥 대충 그런 거구만~ 하고 개념만 잡고 넘어가자

C#에서는 Action이나 Func 클래스를 이용해서 훨씬 쉽게 만들 수 있게 도와주는데, 잘 모른다면 이 부분은 스킵하거나 관련 자료를 구글에서 검색해서 공부해보고 계속하는 걸 추천함. 자세히 설명하기엔 사실 나도 그리 정확하게 아는 건 아닌 것 같고, 훨씬 유용한 자료도 많고...

어쨌든 계속하자면, 위 코드에서는 OnSwipe~~~ 함수에 Action을 응용할 거야.

왜?

OnSwipe~~ 함수에서 swipeDirection 벡터를 응용해서 코드를 구현하면, 필연적으로 게임 시스템 로직과 인풋 시스템 로직이 섞여버리게 돼.

게임 로직이 간단한 경우에는 별 문제가 안 되겠지만, 점점 복잡해질수록 인풋 로직과 시스템 로직이 꼬이면서 코드는 그지같아지고 개발 속도는 느려지다가 아 시발 안 만들어, 하면서 때려쳐버리겠지?

그래서 가능하면 미리미리 로직을 분리해 두는 거야. (사실 이 면에서 보자면, 위에 processInput()과 processMobileInput() 로직도, 중복 로직이 2번 들어가고 있기 때문에 리팩토링이 필수겠지? 좀이따 해야지...)

이 때 매우 유용하게 쓰일 수 있는 게 delegate 관련 시스템이기 때문에 적어두는 것.

위에서 짠 OnSwipe~~ 로직에는 어느 방향으로 터치 인풋이 들어갔는지 알려주는 Vector2 파라미터가 있어. 

리턴값이 없는 함수는 Action을 쓰면 편리하니까, 다음과 같이 선언해.

Action<Vector2> actionOnSwipeDetected;

그리고 위에서 짠 OnSwipe 로직 안에는 다음과 같이 구현하면 : 

void onSwipeDetected(Vector2 swipeDirection)

{

swiped = true;

actionOnSwipeDetected(swipeDirection);

}

내가 원하는 게임 시스템 로직은 actionOnSwipeDetected 액션에 할당하여 분리하고, 인풋 관련 코어 로직(swiped = true;) 은 인풋 처리 클래스 안에 집어넣을 수 있는거지.

액션은 변수랑 비슷하게 관리할 수 있어. 다음과 같이 public으로 외부 컴포넌트가 액션을 설정할 수 있도록 하면 : 

public void setOnSwipeDetected(Action<Vector2> onSwipeDetected)

{

actionOnSwipeDetected = onSwipeDetected;

}

인풋 클래스와 게임 시스템 클래스를 완전히 분리해서 깔끔하게 구현할 수 있게 되었지?

예를 들어 ABC라는 클래스에서 myOnSwipeDetected() 함수를 구현했다고 해 보자. 다음과 같이 인풋 클래스에 할당하면 돼.

public class ABC : MonoBehaviour

{

GarlicInputManager inputManager;

// Use this for initialization

void Awake () 

{

inputManager = GetComponent<GarlicInputManager>();

inputManager.setOnSwipeDetected(myOnSwipeDetected);

}

void myOnSwipeDetected(Vector2 swipeDirection)

{

Debug.DrawLine(transform.position, transform.position + swipeDirection, Color.red, 2f);

}

}

이제 스와이프를 할 때마다 ABC 클래스 안의 myOnSwipeDetected가 호출되어 스와이프 한 방향으로 디버그 라인이 그려질 거야.

처음에는 다소 이해하기 어렵겠지만, 이 부분을 이해하고 나면 훨씬 깔끔한 코드를 짤 수 있게 되는 첫 발을 내딛는 거니까 열심히 노력하자!

마무리로, 전체 최종 코드 첨부 : 

using UnityEngine;

using System.Collections;

using System;

public class GarlicInputManager : MonoBehaviour

{

Vector2 screenSize;

float minSwipeDist;

Vector2 swipeDirection;

Action<Vector2> actionOnSwipeDetected;

void Awake()

{

Vector2 screenSize = new Vector2(Screen.width, Screen.height);

minSwipeDist = Mathf.Max(screenSize.x, screenSize.y) / 14f;

Debug.Log("MinSwipeDist : " + minSwipeDist);

}

void Update()

{

#if UNITY_ANDROID

processMobileInput();

#else

processInput();

#endif

}

Vector2 touchDownPos;

bool swiped = false;

void processMobileInput()

{

if (Input.touches.Length > 0)

{

Touch t = Input.GetTouch(0);

if (t.phase == TouchPhase.Began)

{

//save began touch 2d point

touchDownPos = new Vector2(t.position.x, t.position.y);

swiped = false;

}

else if (t.phase == TouchPhase.Moved)

{

Vector2 currentTouchPos = new Vector2(t.position.x, t.position.y);

bool swipeDetected = checkSwipe(touchDownPos, currentTouchPos);

swipeDirection = (currentTouchPos - touchDownPos).normalized;

if (swipeDetected)

onSwipeDetected(swipeDirection);

}

else if (t.phase == TouchPhase.Ended)

{

Debug.Log("Swipe End!");

swiped = true;

}

}

}

Vector3 mouseDownPos;

void processInput()

{

if (Input.GetMouseButtonDown(0) == true)

{

mouseDownPos = Input.mousePosition;

swiped = false;

}

else if (Input.GetMouseButton(0) == true)

{

bool swipeDetected = checkSwipe(mouseDownPos, Input.mousePosition);

swipeDirection = (Input.mousePosition - mouseDownPos).normalized;

if (swipeDetected)

onSwipeDetected(swipeDirection);

}

else if (Input.GetMouseButtonUp(0) == true)

{

Debug.Log("Swipe End!");

swiped = true;

}

}

bool checkSwipe(Vector3 downPos, Vector3 currentPos)

{

//손가락을 아직 안 뗐지만 인풋은 입력받았다.

if (swiped == true)

return false;

//딜레이 등으로 인해 인풋을 막고 있다.

if (isInputBlocked == true)

return false;

Vector2 currentSwipe = currentPos - downPos;

if (currentSwipe.magnitude >= minSwipeDist)

{

//Debug.Log("Swipe Detected : " + currentSwipe);

return true;

}

return false;

}

//public float speed = 5f;

//Vector3 vel;

public void setOnSwipeDetected(Action<Vector2> onSwipeDetected)

{

actionOnSwipeDetected = onSwipeDetected;

}

void onSwipeDetected(Vector2 swipeDirection)

{

swiped = true;

actionOnSwipeDetected(swipeDirection);

}

private bool isInputBlocked = false;

public void blockInput()

{

isInputBlocked = true;

}

public void unBlockInput()

{

isInputBlocked = false;

}

}

위 코드를 이용한 게임 테스트 : 

[스넬ㄹ(snails88)]

먼진몰라도 진짜길다 - dc App

[갈릭디핑쏘스(garlicdipping101)]

코드를 쓸데없이 많이 첨부해서 그래...오늘 집중이 잘 안 되서 한번 써 봤는데 기술 문서 별로들 안 좋아하면 그냥 도트 찍은거나 계속 올리려구...

[몽묘(talunhahwe)]

이런 거 아주 좋읍니다

[야훼(yahweh)]

이런거 너무 좋아

[갈릭디핑쏘스(garlicdipping101)]

ㅇㅋ 한번씩 여유되면 기술문서도 올려볼게