✨ 들어가며
마우스를 버튼 위에 올려놓으면 버튼 글씨 아래에 라인(밑줄) 이 생기게 하고 싶었다.
처음에는 TextMeshPro를 사용했는데,
버튼 상태(눌림 여부)가 잘 드러나지 않아
텍스트를 이미지로 만들어서 넣는 방식으로 변경했다.
이로 인해 TextMeshPro의 밑줄 기능을 쓸 수 없게 되었고,
대신 얇은 이미지(line)를 따로 제작해 버튼 아래에 배치하여
밑줄처럼 보이게 했다.
1️⃣ Pointer 이벤트 사용하기
Unity의 버튼에는 여러 이벤트 메서드가 있다.
그중 가장 자주 쓰는 건 OnClick.AddListener()일 것이다.
원하는 기능을 만들어내기 위해 이번에는 OnPointerEnter와 OnPointerExit을 사용한다.
OnPointerEnter: 마우스 포인터가 버튼 위로 올라올 때 실행OnPointerExit: 마우스 포인터가 버튼에서 벗어날 때 실행
이 두 이벤트는 PointerEventData를 인자로 받는다.
직접 코드로 구현할 수도 있지만,
Unity의 Event Trigger 컴포넌트를 활용하면 더 간단하게 구현할 수 있다.
2️⃣ Event Trigger 설정
- 버튼 오브젝트에 Event Trigger 컴포넌트를 추가한다.
- Add New Event Type에서
Pointer Enter와Pointer Exit이벤트를 추가한다. - 각 이벤트에 밑줄(line) 오브젝트를 연결하고
SetActive(true / false)를 지정한다.
3️⃣ 결과
이제 마우스를 올리면 밑줄이 표시되고,
벗어나면 자동으로 사라진다.
