유니티 - 탄막 슈팅 게임을 만들자 (7) UI 만들기 - 상태와 점수 표시

안녕하세요, 윈디입니다.

한동안 휴학 준비하고, 휴학동안 할 일을 구하느라 포스팅이 좀 늦었네요 ㅜ 시간이 부족하기도 했지만 정진하지 못한 제 탓입니다!

앞으로는 좀더 열심히 자기계발을 하기 위해 노력해야 할 거 같습니다. 일이 끝나면 시간이 늦어서 그런지 자꾸 딴짓을 하게 되더군요..

그래도 어찌어찌 시간을 내서, 기본적인 틀을 완성한 탄막 게임에 UI를 입히기로 했습니다.

보통 슈팅 게임을 보면, 왼쪽이나 오른쪽에 작게, 아니면 아예 틀을 하나 만들어서 그 위에 현재 점수나, 현재 목숨, 봄 등등 여러가지 정보를

표시하게 되죠. 오늘 설명드릴 부분이 바로 그런 부분인데요, 간단하다면 정말 간단하지만,

 실제로 해 보는 것과 아닌 것은 큰 차이가 있더라구요.

▲탄막 게임으로 정말 유명한 게임이죠, 동방프로젝트입니다. 이 게임의 경우는 오른쪽에 

난이도와 점수, 목숨, 파워, 특수한 점수 등등을 몰아 주었죠.

저도 비슷하게 해 볼 생각이에요.

실제로 화면에 UI를 표시하게 되면, 몇가지 문제가 생깁니다.

가장 큰 게 해상도의 비율에 맞게 크기가 항상 일정해야 한다는 건데요.

이때 우리는 두가지 문제에 부딛힙니다.

1. UI 창에서 Text 오브젝트를 이용해 글씨를 쓰는데까진 성공했으나, 화면의 크기가 바뀌면 텍스트의 위치가 이상해진다.

-> 우선 UI의 크기 설정을 하시고, 추가로 앵커도 설정해 주셔야 합니다.

씬 화면에서 보실 수 있습니다. 크기를 설정하는 파란 동그라미 옆에 세모가 보이시죠?

이것은 앵커로서 UI캔버스 안의 오브젝트에만 있는 기능인데요, 이 세모들을 움직여서

화면 내에서 이 오브젝트가 가지는 비율을 정합니다.

예를 들어서, 화면 전체의 절반을 이 삼각형으로 만든 칸 안에 두면, 

지금 이 스펠이라는 글자가 가지는 영역은 화면 전체의 절반의 크기 변화에 따라서 똑같은 비율로 영역이 변하게 됩니다.

단, 글자 크기는 바뀌지 않습니다.

2. 글자의 크기가 화면의 크기에 비례해서 바뀌지 않는다.

-> 보통, 화면이 작아지면서 글자 크기에 더이상 맞지 않는 영역으로 작아지면, 글자는 그냥 사라져 버리게 됩니다.

하지만 그러면 여러가지 해상도를 지원하거나, 창모드, 전체화면 모드를 지원할 수 없겠죠.

그렇기 때문에, 해상도에 맞추어 글자 크기를 변화시키는 스크립트가 필요합니다.

저는 다음과 같이 스크립트를 짰습니다.

▲빨간 부분이 실제로 작성해야 하는 코드입니다. 특히 맨 위 부분이 있어야 실제로 유아이를 컨트롤하는 명령어들을 사용할 수 있으니 주의!

     스크린의 높이에 따라 폰트의 글자 크기를 정했습니다. 제 경우, 16:10의 화면 비율을 채택하고 있으니 가로 길이를 바꿔도, 세로 길이가     바뀌지 않으면 비율이 바뀌지는 않기 떄문에 복잡함을 좀 덜었네요.

화면 비율을 여러 가지로 채택하신다면 각각 따로 정해주셔야 되는것 잊지 말아주세요!

자, 이제 기본적인 문제는 모두 해결한 거 같습니다.

이제 실제로 텍스트가 점수값에 반응하여 글씨가 바뀌도록 하는 법을 알아봐야 하겠죠?

▲20점이 추가되는 장면입니다.

점수의 변화에 따라 숫자가 올라가게 되죠.

옆에 숫자의 변화가 확인되시죠?

이부분은 정말 간단합니다. 아까의 Unity3D.UI;를 추가하는 데서 시작합시다.

이렇게 컴포넌트를 잡은 텍스트의 text라는 변수에, String으로 원하는 값. 그러니까 score 라는 int 변수를 tostring 화 해서 집어넣어 주면 되겠습니다. 매 프레임 UI는 점수를 텍스트에 반영하게 됩니다.

이것을 조금 응용하면 이런 것도 만들수 있죠.

▲ 프레임 측정기 입니다. 프레임이 60 이상일 때는 60으로, 아닐 때는 값을 표시하도록 되어있습니다.

저도 예시를 찾기 위해서 어디선가 다운을 받았었던 스크립트인데, 

출처가 명확하지 않고 간단한 내용이라 일단 이것으로 바로 설명드리도록 할게요.

GUI를 조금 사용했는데, 간단히 설명해 드리겠습니다.

한마디로, GUI는  스크립트만으로 UI를 만드는 거라고 보시면 됩니다. GUI를 사용하시면 UNIty3D.UI의 명령어를 사용하실 필요 없이, 그냥 텍스트 안의 내용만으로 UI를 만들 수 있습니다.

한번 코드를 확인해 보시면 아시겟지만, 

GUIStyle이라는 타입으로 style 인스턴스를 생성해서, 위치와 앵커를 정하고, 색깔을 정했습니다. 한마디로 스타일을 정한거죠.

이 style 은 뒤의 라벨에서 적용되면서 설정된 옵션들을 적용시킵니다.

그리고 프레임을 계산해서 어떤 포맷으로 텍스트를 표시하도록 설정한 뒤 GUI 라벨에 적용하여 표시하도록 한 겁니다.

 GUI는 또 나름의 설정들이나 옵션들을 배우셔야 사용하시기 쉽기 때문에,

 설명드리려면 또 다른 글을 써서 설명을 드리는게 나을 것 같네요,

어떠신가요? 화면에 맞는 UI를 만드시는 데 조금 감이 오셨나요? 

그럼 다음 글로 찾아뵙도록 하겠습니다.