1인 개발 게임 (Unity)/UNITY

[UNITY] button 에서 image 투명한 부분은 선택안되게 하기

Z46 2024. 8. 25. 18:58

 


Unity UI: 버튼 이미지의 투명한 부분 클릭 방지하기

Unity에서 UI 버튼을 사용할 때 흔히 마주치는 문제가 있습니다. 바로 이미지의 투명한 부분까지 클릭되는 현상인데요. 이번 포스트에서는 이 문제를 해결하는 방법을 알아보겠습니다.

 

 

흔히 검색하는 키워드:

  • Unity 버튼 이미지 투명 부분 클릭 방지
  • Unity UI 버튼 실제 이미지만 선택되게 하기
  • Unity 버튼 클릭 영역 이미지에 맞추기
  • Unity UI Image 투명 부분 무시하기

 

일반적으로 시도하는 방법들 (그리고 왜 잘 안되는지)

  1. Image의 'Alpha Is Transparent' 설정
    • 많은 사람들이 추천하지만, 실제로는 효과가 없습니다.
  2. RectTransform 수정
    • 이 방법은 이미지 크기 자체를 변경해버려서 원하는 결과를 얻기 어렵습니다.
  3. Raycast Padding 수정
    • 어느 정도 효과는 있지만, 버튼 크기 변경 시 비율이 유지되지 않는 문제가 있습니다.
    • 추가 작업이 필요하고, 근본적인 해결책이 되지 못합니다 
      • 이유는? -> Text 영역도 별도 조정이 필요하기 때문입니당

 

실제로 작동하는 해결 방법 ( **주목)

1.5시간의 시행착오 끝에 찾아낸 효과적인 방법을 소개합니다:

1. 새 스크립트 만들기

Unity 프로젝트에서 'SetButtonClickRange'라는 이름의 새 C# 스크립트를 생성합니다.

2. 스크립트 내용 작성

다음 코드를 스크립트에 붙여넣습니다:

using UnityEngine;
using UnityEngine.UI;

public class SetButtonClickRange : MonoBehaviour
{
    private Image imgButton;

    void Start()
    {
        imgButton = GetComponent<Image>();
        imgButton.alphaHitTestMinimumThreshold = 0.1f;
    }
}

3. 버튼에 스크립트 적용

만든 스크립트를 해당 버튼 오브젝트에 드래그 앤 드롭합니다.

4. 이미지 설정 변경

버튼에 사용된 Image 컴포넌트의 Inspector 창에서 다음 설정을 변경합니다:

  • Mesh Type을 'Full Rect'로 설정
  • Advanced 섹션에서 'Read/Write Enabled' 체크박스를 활성화

 

작동 원리

이 방법은 alphaHitTestMinimumThreshold를 사용하여 이미지의 투명도에 따라 클릭 가능 여부를 결정합니다. 값을 0.1f로 설정함으로써, 알파값이 0.1 미만인 부분(거의 완전히 투명한 부분)은 클릭되지 않게 됩니다.

주의사항

  • 이 방법은 이미지에 약간의 반투명 부분이 있을 때 가장 효과적입니다.
  • 완전히 불투명하거나 완전히 투명한 이미지에는 큰 차이가 없을 수 있습니다.
  • 성능에 약간의 영향을 줄 수 있으므로, 많은 수의 버튼에 적용할 때는 주의가 필요합니다.

이 방법을 통해 Unity UI 버튼의 클릭 영역을 이미지 형태에 맞게 더욱 정확하게 설정할 수 있습니다. 

다들 파이팅