유니티3D - NPC 대화창 #2. 스프라이트 에디터

유니티의 캔바스(canvas) 는 HTML 의 캔바스(canvas)와 약간 다르긴 하지만 용도도 비스무리하지요 :)
통하는데가 있나 봅니다.
오늘은 NPC 대화창의 배경 스킨을 바꿔보도록 하겠습니다.

https://itadventure.tistory.com/419

유니티3D - NPC 대화창 #1

---

오늘은 아래와 같은 대화창을

아래와 같이 바꿔볼텐데요.

9-slicing sprite ( 나인 슬라이싱 스프라이트 ) 를 준비하면 됩니다.

크레이는 포토샵을 이용해 아래와 같은 이미지를 먼저 만들었는데요.
테두리 밖은 투명하고, 테두리 안쪽은 반투명한 배경 이미지입니다.

포토샵이 가능하신 분은 이런 이미지를 직접 만드셔도 좋지만
어려우신분들은 아래 첨부된 파일을 다운 받아 주시기 바랍니다.

DialogUI.png

0.01MB

그리고 Assets - Materials 폴더를 선택하신 다음,

윈도우 탐색기에서 다운받은 파일을 이 폴더 안쪽에 드래그 해주세요

이제 이 이미지를 UI 배경으로 사용하기 위해 9등분, 9개로 썰어낼 겁니다.

먼저 이 이미지를 스프라이트 타입로 바꾸어 주어야 하는데요.
이미지를 선택한 다음, Texture Type(텍스쳐 타입)을 Sprite ( 스프라이트 ) 로 선택합니다

그리고 Mesh Type ( 메시 타입 ) 은 Full Rect ( 풀 렉트 ) 를 선택합니다.

그리고 좀 창을 스크롤시켜서 아랫 부분의 Apply (적용) 를 선택해주면 이미지가 스프라이트로 바뀝니다.

이어서 Sprite Editor ( 스프라이트 에디터 ) 를 선택하시는데요.

스프라이트 에디터가 설치되어 있지 않으면 패키지 매니저에서 설치하라는 문구가 뜹니다.

이 경우 Window - Package Manager 메뉴를 선택하신 다음,

패키지 매니저 창에서 상단 선택상자를 Unity Regstry로 변경합니다.

그러면 꽤나 많은 설치가능한 패키지가 노출되는데요.
그 중에서 2D Sprite 패키지를 선택,

창 우측 하단의 Install(인스톨:설치)를 클릭해 주시면 되지요.

설치가 끝나면 패키지 매니저 창을 닫고, 다시 스프라이트 에디터를 선택해 봅시다.
그러면 이와 같은 창이 뜰텐데요.

4개 점을 드래그해서 9등분으로 창을 나누어 주세요.

그리고 나서 상단의 Apply(적용) 버튼을 눌러주시면 됩니다.

이제 거의 다 됐습니다.
Scene 창에서 패널을 선택하신 다음,

Inspector 창에 보시면 Image - Source Image( 원본 이미지 ) 우측의 양궁과녁판 모양 아이콘을 선택 후,

Select Sprite(스프라이트 선택)창이 뜨면 금방 적용한 UI를 더블 클릭해주시면 되지요.

무언가 창이 바뀌긴 했는데 흐릿해보이지요.
그것은 기본으로 반투명도가 들어가 있기 때문입니다.
이미지에 이미 반투명도가 적용되어 있어서 빼도록 하겠습니다.

근처에 있는 Color 항목 우측의 색상영역을 선택하신 다음에,

Color 창이 뜨면 이 중에서 A (알파:투명도) 항목의 선택막대를 클릭하여 우측 맨 끝까지 드래그해주시면 됩니다.

그러면 이와 같이 또렷한 UI 창이 나오게 되는데요.

높이 조절이 약간 필요하니 패널의 크기를 키워 주세요.

이제 플레이해보시면 로봇배경 UI 창을 만나보실수 있습니다 :)

 

오늘은 여기까지.
읽어주셔서 감사합니다 :)

---

다음데시글 : NPC 대화창3. 대화텍스트(리치 텍스트)

https://itadventure.tistory.com/421

유니티3D - NPC 대화창 #3. 대화텍스트(리치텍스트)