Ad Block 한번만 꺼주시면 안될까요..?
게임 개발/유니티

유니티) UI 길이 늘려도 안깨지도록 설정하기(대화창 만들기)

UniCoti(유니코티) 2022. 12. 10.

유니티에서 RPG 등을 만들다 보면,

적이나 NPC의 대사를 유저들에게

보여줘야 하는데, 거기서 우리는 보통

대화창을 생각하게 된다.

던전앤 파이터의 대화창


오늘은 이런 대화창을 만들면서 생기는 어려움을 해결해보겠다.

먼저, 대화창 에셋(사진)을 가져왔다면,

원하는 크기로 조절하고 싶을 것이다.

 

예를 들어,

이렇게 생긴 대화창 사진을 준비했다면,

대화창 길이에 맞춰 늘리고 싶을 것이다.

 

하지만 늘려보면,

강제적으로 늘렸기 때문에 사진이 깨진 걸 볼 수 있다.


1. Sprite Editor 켜기

 

Sprite Editor에 들어가 준다.

사진을 클릭하면 가운데 쯔음에 Sprite Editor라는 버튼이 있다.

골드 메탈님의 강의에서 배포된, 이 UI사진에 경우에는

이렇게 UI사진들이 모여있는 걸 볼 수 있는데,

구역이 나눠지지 않았다면 나눠준 후,

 

https://alpaca-code.tistory.com/36 (이미지를 나누는 법)

 

스프라이트 이미지 자르기

여러 사진이 모여있어 한 사진으로 표현된 사진을 스프라이트 이미지 라고 한다. 유니티에는 스프라이트 이미를 나눠서 여러 사진의 용도로 쓸 수 있다. 오늘은 그 방법을 설명해보겠다. 처음

alpaca-code.tistory.com

우리가 원하는 사진인 하얀색 대화창을 클릭해보자.

(하나의 사진일 경우에도 마찬가지)


2. 바뀌지 않는 부분 표시하기.

 

그러면 이미지가 선택되며 

우측 하단에 정보가 표시된다.

저 아래에 있는 정보들 중 Border을 변경해준다.

이 사진의 경우, 사진의 모서리, 그림자를 생각하여

L(left) : 3 , R(right) : 3 , T(top) : 3, B(bottom) : 5로 설정해준다.

방향\값
L(left) 3
R(right) 3
T(top) 3
B(bottom) 5

이러면 밝은 색으로 테두리가 생성되는데,

테두리 밖에 있는 것은 늘어나지 않는다는 걸 의미한다.


3. 최종 확인

 

이제 상단의 apply를 누르고, 다시 유니티로 돌아와서,

늘리려고 했던 이미지의 Image Type을 Simple에서 Sliced로 바꾸면,

늘어나지 않도록 설정했던 테두리들은 늘어나지 않고,

중간만 늘어나서 원하는 대로 대화창의 형태가 되었다.

 

이로서 원하는 바를 이룰 수 있게 되었다.

 

유니티 협력 글(어필리에이트)


도움이 되었길 바라며,

 

끝.

댓글

💲 추천 글