[Unity/C#] UI 버튼 일반 클릭(터치) vs 롱클릭(터치)

유니티 내에 존재하는 UI 중 Button의 기본적인 클릭 기능과

길게 클릭했을 때 특정 기능이 수행되는 롱클릭 기능 만드는 방법을 알아보겠습니다 :)

 

1. Button 만들기

가장 먼저 기능을 수행할 버튼이 있어야 합니다

 

 

 

Hierarchy 창에서 우클릭 후 UI - Button을 눌러 버튼을 만들어 줍니다

생성한 버튼은 원하는 위치에 원하는 크기와 모양으로 배치해주시면 됩니다

 

2. 일반 클릭 (OnClick) 기능

스크립트를 새로 생성하거나 기존 사용하던 스크립트에

클릭했을 때 호출될 함수를 만들어줍니다

public void ButtonClick()
    {
        print("버튼 일반 클릭");
    }

저는 버튼을 클릭했을 때 "버튼 일반 클릭"이라고 출력되도록 했습니다

버튼을 클릭했을 때 호출 될 '함수'는 꼭 public으로 만들어야 합니다!

 

 

 

원하는 기능이 들어있는 함수를 완성했다면 해당 스크립트를 Hierarchy에 있는 오브젝트에 넣어줍니다

꼭 버튼 UI에 넣을 필요는 없습니다 스크립트를 관리하기 편한 오브젝트에 넣어줍니다

저는 버튼의 부모인 Canvas에 넣어주었습니다

 

 

 

다음은 버튼에 함수를 연결해주는 과정입니다

버튼 인스펙터를 보면 Button컴포넌트에 OnClick()이라는 탭이 있습니다

오른쪽 아래에 있는 +를 눌러줍니다

 

 

 

노란색으로 표시한 곳에 아까 만든 스크립트를 넣었던 오브젝트를 넣어줍니다

드래그해서 넣는 것도 가능하고, 오른쪽 동그란 부분을 클릭하여 선택하는 것도 가능합니다

 

 

 

오브젝트를 넣어주었다면 No Function을 클릭했을 때 오브젝트의 컴포넌트가 쭉 나열됩니다

기능 함수가 있는 스크립트 - 기능 함수를 선택해줍니다

(이때 만들었던 함수가 뜨지 않는다면 함수를 public으로 만들었는지 확인해주세요)

 

 

 

완성입니다! 정상적으로 작동합니다

 

3. 롱클릭 (PointDown, PointUp) 기능

롱클릭 기능을 구현하기 위해서는 버튼을 클릭하기 시작했을 때와

버튼 클릭이 끝났을 때 호출될 함수가 필요합니다

 

private float clickTime; // 클릭 중인 시간
public float minClickTime = 1; // 최소 클릭시간
private bool isClick; // 클릭 중인지 판단

    // 버튼 클릭이 시작했을 때
    public void ButtonDown()
    {
        isClick = true;
    }

    // 버튼 클릭이 끝났을 때
    public void ButtonUp()
    {
        isClick = false;
        print(clickTime);
        
        // 클릭 중인 시간이 최소 클릭시간 이상이라면
        if(clickTime >= minClickTime)
        {
            print("특정 기능 수행");
        }
    }

    private void Update()
    {
    	// 클릭 중이라면
        if (isClick)
        {
           // 클릭시간 측정
            clickTime += Time.deltaTime;
        }
        // 클릭 중이 아니라면
        else
        {
           // 클릭시간 초기화
            clickTime = 0;
        }
    }

기본적으로 꼭 필요한 코드입니다

버튼 클릭을 시작한 시점부터 클릭이 끝날 때까지의 시간을 측정하여

최소 클릭 시간 이상이라면 특정 기능이 수행되도록 하는 코드입니다

(저는 최소 클릭 시간을 1초로 두었습니다)

Clipboard.cs

0.00MB

(위 코드를 복사하시려면 이 스크립트를 다운받아주세요 - 우클릭 방지)

 

 

버튼에 Event Trigger 라는 새로운 컴포넌트를 추가합니다

 

 

 

Add New Event Type을 눌러 PointerDown과 PointerUp이라는 새로운 이벤트를 생성합니다

PointerDown은 버튼을 클릭했을 때, PointerUP은 버튼 클릭이 끝났을 때 실행됩니다

 

 

 

일반 터치를 구현할 때처럼 +를 눌러 오브젝트를 끌어다 놓고,

각 이벤트가 실행될 때 호출될 함수를 선택합니다

 

 

 

실행하면 정상적으로 작동합니다!
클릭 시간이 최소 클릭 시간보다 짧으면 아무일도 일어나지 않고,

최소 클릭시간보다 길면 "특정 기능 수행"이라는 메시지가 출력됩니다

print("특정 기능 수행"); 이라는 코드 부분에 원하는 특정 기능을 넣으면 됩니다 :)

 

---

Button UI의 기본적인 클릭 기능과 심화과정인 롱터치 기능을 알아보았습니다

긴 글 읽어주셔서 감사합니다 🥰