히가츠류의 보금자리

Unity Sprite Mask //Where is My cat? 본문

Programming/Unity 2D

Unity Sprite Mask //Where is My cat?

HiGaTsu Ryu 2020. 3. 16. 10:02

Unity 2018.4.7 버전

Sprite Mask를 사용한 예제!

 

Sprite Mask를 사용하면 일부 영역의 이미지를 나타내거나 없앨 수 있다.

이를 사용하면 숨바꼭질을 만들 수 있을 것 같아서 간단하게 실험해보았다.

 

우선 실험에 필요할 스프라이트 부터 구상해보았다.

 

<필요 Sprite>

1. 고양이를 숨겨줄 Front Object

2. 숨어있는 고양이나 물건이 될 Middle Object

3. 고양이가 안에 있다는 느낌을 더 크게 줄 수 있는 Back Object

4. 아무 상호작용이 없을 배경용 Background

 

Sprite 구상... 순서대로 Front Object, Middle Object, Back Object, Background.

 

 

필요 스프라이트를 작업하기 위해

그림 폴더를 크게 4가지로 나눠 작업한 다음 개별적으로 저장했다.

(ClipStudio로 작업)

 

ClipStudio 작업 화면
사물을 저장할 때 배경은 투명으로 설정해야한다.

 

게임이었다면 고양이를 찾아서 클릭할 때마다 사라지면서 점수가 올라야하므로

사물 하나하나 별도 저장해야 하는 게 맞겠지만, 지금은 그냥 실험용이니 통째로 저장했다.

 

 

Unity2D 프로젝트를 만들어준 후, 이미지들을 넣고 각각 이름을 정해줬다.

그 후 Sprite Rederer에 있는 Order in Layer를 통해 이미지가 보이는 순서를 정해줬다.

(Order in Layer의 숫자가 높을 수록 먼저 보이게 됨.)

 

스프라이트를 전부 넣어준 모습.
    Order in Layer를 통해서 이미지 순서 설정.   간단하게 1, 0, -1, -2로 설정했다.

 

그 후 Hierarchy창에 오른쪽 클릭을 해서 2D Object > Sprite Mask를 생성해줬다.

Sprite Mask를 생성하면 다른 오브젝트들에 있는 Sprite Renderer에 Mask Interaction이 생기는데,

이를 설정하면 Sprite Mask와 어떤 관계가 되는지 설정할 수 있다.

 

None : 아무 상호작용 없음

Visible Inside Mask : 이 객체는 Sprite Mask와 닿아있는 곳만 보임.

Visible Outside Mask : 이 객체는 Sprite Mask와 닿아있는 곳만 투명해짐.

 

Hierarchy창에서 오른쪽 클릭을 하면 찾을 수 있다.

 

정확히는 닿아있는 부분이 보이고 안보이고 하는게 아니라

카메라가 Sprite Mask를 통해서 물체를 보는 느낌이다. 3D버전을 보면 더 쉽게 알 수 있다.

3D 영상을 보면 더 쉽게 이해할 수 있다.

★고로 Sprtie Mask는 카메라와 Sprite Object 사이 있어야한다. 순서 주의. 

 

3D 프로젝트에서 Sprite Mask를 사용하고 카메라를 움직여 봤을 때.

Sprite Renderer에 Mask Interaction를 설정한 후

Sprite Mask와 관계를 정하고 Sprite Mask 객체를 설정해줬다.

 

 

                         MouseSpriteMask 오브젝트 정보!                           생김새는 간단하게 원 모양(Knob)으로 설정했다

Sprite Mask에 Sprite를 대충 동그라미(Knob)으로 설정한 후, Scale로 눈에 보일만한 크기로 조정했다.

 

Sprite Mask가 마우스를 따라다니기 위해 Follow Mouse라는 Script를 작성해줬다.

//MouseSpriteMask가 마우스를 따라다니게 하는 주요 코드
	void Update()
    {
        Vector3 target = Input.mousePosition;
        target += new Vector3(0,0,1);
        transform.position = Camera.main.ScreenToWorldPoint(target);
    }

 

원래는 프로그램의 과부하를 막기위해 Update말고 Coroutine을 쓰는게 좋겠지만

실험용이라서 스킵했다.

 

<결과>

매우 귀여웠다.

 

Where is My cat을 구상해보았다.

 

 

 

추후에 시간이 된다면 간단한 고양이 찾기 게임을 만들어볼 예정이다.

Comments