[멋쟁이사자처럼 부트캠프 TIL 회고] 유니티 게임 개발 3기 18일차

namespace UnityGameDevelopment.Day18 {
    public class Outline {
    	public static string Chapter1 = "9 슬라이싱 스프라이트";
    }
}

 

 

1. 9 슬라이싱 스프라이트

원본 크기와 다른 크기로 설정하면 왼쪽처럼 찌그러진다

 

UI Image의 크기를 늘이거나 줄이면 이미지가 뭉개집니다. 이를 막기 위해 유니티는 스프라이트에 9 슬라이싱 기법을 제공합니다.

---

샘플 이미지

 

위 이미지로 스프라이트 정보를 설정하여 뭉개지지 않는 UI를 구성하고자 합니다.

인스펙터 뷰에서 본 스프라이트

스프라이트를 선택하고 인스펙터 뷰를 확인합니다. 9 슬라이싱을 설정하기 위해 Sprite Editor를 선택합니다.

 

Sprite Editor

스프라이트 에디터에서 초록색 선 혹은 점을 드래그해 상하단과 좌우측 테두리 크기를 설정합니다. 설정이 완료된 후에는 위의 Apply 버튼을 클릭하여 설정을 적용합니다.

 

UI 이미지 생성

하이어라키 뷰에서 UI Image를 만들어줍니다.

UI Image 속성

생성한 UI Image를 인스펙터 뷰에서 확인합니다. Image 컴포넌트의 Source Image 속성에 조금 전에 작업했던 스프라이트를 연결해줍니다. 이제 이미지의 크기를 조정하여 확인합니다.

 

다양한 크기의 이미지

 

위 그림처럼 9 슬라이싱 스프라이트를 적용한 이미지는 뭉개지지않고 테두리 모양 그대로 늘어나고 줄어드는 걸 볼 수 있습니다.

---

 

실습 및 응용

▶ UI 메세지 창 만들기

하이어라키 뷰

 

창 테두리를 만들어주기 위해 Frame Image를 UI Image로, Content는 빈 오브젝트로, UI Text를 그 안에 배치하여 만들어줍니다.

UI 메세지 창

 

창 테두리는 9 슬라이싱 스프라이트를 연결해주고 부모의 크기에 앵커를 맞춰줍니다. Content도 부모 크기에 앵커를 맞춰주고 좌우상하의 20만큼의 여백을 줍니다. Text는 부모 크기에 맞춰주고 텍스트를 입력합니다.

결과 이미지

 

게임에서 위 처럼 대화를 표시하기 위해 사용될 수 있겠죠? 여기서 더 응용하여, 텍스트 애니메이션과 메세지 창 열고 닫을 때의 애니메이션을 구현은 직접 해보시길 바랍니다.