Home

NGUI with Masked Atlas Image

Mask 이미지 사용 전에 우선 Editor 폴더 내에 TextureModifier.cs 파일을 복사합니다.

Mask 이미지의 사용 방법은 아래와 같습니다.

1. NGUI 용 Atlas 이미지를 생성. (UI에 사용할 .png 파일들로 atlas 이미지를 만듭니다 - 기존의 NGUI Atlas 생성 방법과 동일)
2. 생성된 Atlas 이미지 파일 (prefab 파일이 아닙니다)을 선택하고 Ctrl + D로 새로운 Atlas 파일을 복제합니다.
3. 새로 복제한 Atlas 파일 이미지 파일 이름이 'with alpha.png' 접미사를 가지도록 파일 이름을 변경합니다. (예: facebook.png -> facebook with alpha.png)
4. 변경시 'atlas 파일 이름 mask.asset' 의 마스크 이미지가 자동으로 생성됩니다. (TextureModifier.cs 코드 참조)
5. Atlas 이미지의 머티리얼을 선택합니다.
6. Atlas 이미지의 머티리얼의 셰이더를 'Unlit/Transparent Colored AlphaMasked' 로 변경합니다. (마스크 이미지를 사용해서 렌더링하기 위함)
7. 이후 나머지 과정은 NGUI의 UISprite를 사용해서 작업하는 것과 동일합니다. (UiShaderSprite 를 사용하지 않아도 관계 없습니다)

UIShaderSprite

UiShaderSprite 컴포넌트는 실행 시간에 Atlas 이미지의 특정 스프라이트만 다른 셰이더를 사용해서 렌더링하고자 할 때 사용하기 위한 컴포넌트입니다.

예를 들어 게임에 사용하는 카드 이미지가 있는데, 이 카드 이미지가 전투 중 HP가 0이 되어 사망하는 시점에서는 흑백 이미지로 렌더링하고자 하는 경우와 같이 셰이더를 이용해서 해당 이미지만 다른 방법으로 렌더링하고 싶은 경우에 유용한 컴포넌트입니다.

즉, NGUI의 UISprite는 셰이더를 변경할 수 없는데다, Atlas 이미지에 포함된 모든 sprite 이미지를 동일한 셰이더만 사용해야 하지만, UIShaderSprite로는 실행시 특정 스프라이트 이미지만 원하는 셰이더로 변경해서 사용할 수 있도록 한 컴포넌트입니다.

다만 UISprite를 상속하고 있기 때문에 사용을 위해서는 원본 NGUI의 아래 코드의 변경이 필요합니다.

public class UISprite : UIBasicSprite
{
	// Cached and saved values
	[HideInInspector][SerializeField] protected UIAtlas mAtlas; // -> private을 protected로 변경