유니티 둥근 사각형 - yuniti dung-geun sagaghyeong

유니티에서 간단하게 UI 이미지를 위와같이 마스크하는 방법을 소개합니다.

위 이미지같은 경우에는 원래는 바탕화면 크기의 원본이미지를, X마크 모양으로 출력하게 한 결과입니다.

(MASK란? 타겟이미지를 원하는 모양대로 일부를 잘라서 출력하는 방식)

마스크를 이용하면 이미지를 모양마다 매번 새로 만들어서 저장할 필요가 없습니다!

따라서 에셋 관리 및 데이터 관리에도 유용하고, 디자이너가 작업할때도 좀 더 편리하게 작업할 수 있습니다.

(▼ 같은 이미지를 마스크 이미지만 변경하면 총모양으로도 뽑을 수 있습니다.)

방식은 정말 간단합니다! 

1. 우선 마스크할 모양의 이미지를 추가합니다.

GameObject -> UI -> Image 추가

보기 편하게 하기 위해 마스크하는 이미지를의 이름을 Image(Mask)라고 수정했습니다. 

2. 그럼 Image의 Source Image의 경로를, 마스크 할 이미지로 정해줍니다.

우리는 총모양으로 이미지를 뽑을 거니까, 총모양을 선택할게요.

그러면 이렇게 원본 이미지인 총 모양이 나오는 걸 확인할 수 있습니다.

3. 이제 방금 만든 Image하단에 새 Image를 추가합니다.

이번에도 보기 편하게 이름을 Mask Target이라고 변경했어요.

4. 이전에 했던 것 처럼, 방금 만든 Image의 Source Image를 정해줍니다.

(이 이미지는 마스크가 될 대상, 원하는 모양으로 나오게 할 타겟 이미지 입니다.)

저는 방공호 배경의 그림으로 정했는데요. 

아직 마스킹 처리를 하지 않았기 때문에 원본 모양인 사각형의 모양으로 출력됩니다.

5. 이제 마스킹 처리를 해볼건데요.

가장 처음 만든 Image를 클릭하여 Mask 컴포넌트를 추가합니다.

6. 그럼 아래와 같이 원본 이미지가 총 모양으로 마스킹된 것을 확인할 수 있습니다.

7. 유니티의 Mask 컴포넌트를 이용해 이미지를 마스크하는 방법이었습니다.

마지막은 하이라키 구조입니다.

Image(Mask) - 마스크 시킬 이미지 (이미지의 모양틀!)

Image(MaskTarget) - 마스크가 될 대상 이미지 (원본 이미지)

* Mask 컴포넌트의 Show Mask Graphic은 마스크 이미지를 보여지게 하는 기능입니다.

필요에 따라 끄고 켜면 됩니다.

(Ex 크기가 타겟 이미지 보다 클 경우 등)

모서리가 둥근 사각형을 만들어보자

_____

모서리가 둥근 사각형을 만드는 방법을 알아봅시다. 

1. 먼저 프로젝트 하나를 생성한다. 

File > New를 눌러서 새로운 프로젝트를 만드면 이렇게 큐브가 하나 생기게 됩니다. 

여기서  탭을 누르거나 밑에 사진에 좌측 밑쪽을 보면 Edit Mode를 눌러서 Edit Mode로 사진과 같이 만들어 줍니다. 

여기서 전체 선택을 해제하려면 A 클릭! 그래도 안된다면 한영 바꾸고 클릭! 

2. 면과 면이 만나는 엣지를 선택하기 위해 엣지 선택 모드를 클릭한다. 

여기서 엣지하나를 선택해줍니다.

3. 연결되어 있는 엣지를 전부 선택하기 위해 Select 클릭!  Linked 클릭! 

Select 선택하고... 

Linked 선택하고...

그럼 이렇게 된다.

3. Mesh의 Bevel을 선택한다.

마우스를 움직여서 Amount값을 정할 수도 있고 좌측 하단에 생기는 Bevel 창에서 설정할 수도 있다. 

Segments 값을 늘릴 수록 더 부드럽게 모서리를 둥글게 만들 수 있다. 

기본은 Segments가 1로 되어 있지만 숫자를 올린다면....!!? 

이렇게 됩니다.

위의 사진은 Segments 4로 했을때의 사진! 

끝.