Mask 컴포넌트를 사용하면 알파 이미지를 마스킹 할수 있다.
마스킹 이미지를 사용해서 다음과 같은 버튼을 만들수 있다.
단계별로 알아보자.
1. 계층 구조를 다음과 같이 만든다.
Image : UI-Image 추가
마스킹할 이미지를 설정할 오브젝트
Button: UI-Button 추가
Image 자식으로 추가된 오브젝트는 마스킹 이미지에 의해서 이미지가 마스킹 된다.
마스킹은 이미지의 알파값에 의해 설정 된다.
2. 마스킹 이미지를 Image 오브젝트에 추가한다.
3. Mask 컴포넌트를 Image 오브젝트에 추가한다.
4. 버튼 이미지를 버튼에 추가한다.
5. 버튼 Click 이벤트에 함수를 추가한다.
버튼이 클릭 되었을때 로그를 추가한다.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ButtonTest : MonoBehaviour {
public void OnButtonEvent()
{
Debug.Log("Button Clicked!!!");
}
}
using System.Collections.Generic;
using UnityEngine;
public class ButtonTest : MonoBehaviour {
public void OnButtonEvent()
{
Debug.Log("Button Clicked!!!");
}
}
실행)
여기까지 작업 후 실행 하면 보이지 않는 영역에서 마우스 클릭해도 "Button Clicked!!! 이벤트가 발생 된다.
이미지만 마스킹 되었지, 이벤트가 마스킹 된건 아니다.
다른 개발자가 작업한 코드가 이미 존재하기 때문에 다운로를 받아서 추가하면 된다.
6. RaycastMask 컴포넌트 추가 하기
다운로드 받은 RaycastMask 컴포넌트를 Mask 컴포넌트가 있는 오브젝트에 같이 추가한다.
RaycastMask.cs는 senritsu님이 만든 코드이다.
이 코드는 UnityUIExtensions에도 들어가 있다. 여기에는 워닝이 제거된 코드이다.
UnityUIExtensions에서 다운로드 받아서 추가한다.
다운로드:
https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/src/master/Scripts/Effects/RaycastMask.cs
실행 )
여기까지 작업 후 실행 후, 마우스로 버튼을 클릭하면 다음 메세지가 뜬다.
Mask texture not readable, set your sprite to Texture Type 'Advanced' and check 'Read/Write Enabled'
마스킹 이미지를 Read/Write 할수 있도록 수정해야 한다.
7. 마스킹 이미지를 Read/Write 옵션으로 바꾼다.
https://github.com/senritsu/unitility/blob/master/Assets/Unitility/GUI/RaycastMask.cs
https://github.com/sarbian/KSPUIHelper/blob/master/unity-ui-extensions/Effects/RaycastMask.cs