유니티5 독학하기 그 51번째 걸음-슬라이스 스프라이트 추가와 폰트 만들기

안녕하세요?

유니티5를 공부하다 보니, 드디어 유니티 NGUI 게임 프로젝트라는 책의 챕터5를 거의 다 보기는 했는데, 아무튼 이번 포스팅에서는 슬라이스 스프라이트를 추가하고도록 하고, 다음에는 폰트를 어떻게 바꾸는 것을 가지고서 하는 것을 올리고자 합니다. 내용이 다소 길기는 하지만, 그래도 상당히 유용할 것이라는 생각이 듭니다.

먼저 위 스크린샷에 보이는 것처럼 Background_Button과 Background_Window라는 것을 선택하도록 합니다.

그전에 아틀라스 메이커를 열어서 위 스크린샷에 보이는 것처럼 새로 선택된 텍스쳐2개가 추가되어 있으니, Add/Update라는 것을 누르도록 합니다.

그리고 나서 UIRoot>Main>Buttons>Play를 선택하도록 합니다.

먼저 아틀라스를 Game로 바꾸도록 하고, 스프라이트를 Background_Button로 지정하도록 합니다. 그리고 나서 여기서 옆에 있는 Edit이라는 버튼을 기억해 두도록 합니다.

일단 새로 추가하기는 했지만, 모양이 영 좋지 않은 것을 볼 수 있습니다. 왜 이렇게 되었느냐 하면, 분명히 UISprite의 Type이 sliced로 되어 있기는 하지만 배경 스프라이트는 아니기 때문이라고 합니다. 그래서 슬라이싱 매개 변수를 지정해 주어야 한다고 합니다. 위에서 본 스프라이트 옆에 있는 Edit버튼을 누르도록 합니다.

이러면 일련의 매개변수가 나오는데, 각각의 매개변수는 아래와 같은 의미를 지니고 있습니다.

일단 각각의 의미가 무엇인지 알아보는 데 성공했기 때문에, 다음에는 어떻게 해서 9-슬라이스 스프라이트를 설정하는지 알아 보도록 하겠습니다.

위 스크린샷에 나와 있는 박스안에 있는 것처럼 모든 Border의 값을 각각 10으로 지정을 해 주어야 합니다. 이렇게 하면.......

이제서야 말끔하게 정리가 된 것을 볼 수 있었습니다. 이제 다음에는 이걸 다른 UI버튼같은 것에도 지정을 하도록 해 보겠습니다. 

계층뷰의 검색창에 t:uibutton이라고 입력을 한 다음에, 위 스크린샷에 보이는 것처럼 Checkbox를 제외하고는 모든 게임 오브젝트를 선택하도록 합니다.

모두 아틀라스를 Game로 설정을 하도록 하고, 스프라이트는 Background_Button으로 지정을 하도록 합니다.

그리고 나서 위 스크린샷에 나온 것처럼 NickName의 Input을 선택한 다음에, Checkbox의 background를 선택하도록 합니다.

그리고 나서 여기서도 아틀라스와 스프라이트를 위 스크린샷에 있는 것처럼 지정을 하도록 합니다.

이제 타일 스프라이트를 설정해 주러 갑니다. 이 타일 스프라이트는 무한히 반복될 수 있는 패턴으로 나무와 같은 물질을 구현하는 것에는 유용하다는 생각이 듭니다. 일단 Resources/Texture란에 있는 Overlay_Wood를 선택하고 아틀라스 메이커에서 Add/Update를 누르도록 합니다.

그리고 나서 위 스크린샷처럼 UIRoot>Main>Background>Stripes를 선택하도록 합니다.

위 스크린샷처럼 이름부터 Wood로 바꾼 다음에, 줄이 쳐져 있는 부분들을 모두 바꾸어 주도록 합니다.

이제 어느정도 나무 무늬를 만드는 데는 성공했습니다만, 문제는 계속해서 격자 무늬가 남아 있는 것을 볼 수 있습니다. 이는 스프라이트 설정을 바꾸어 주도록 해야 합니다.

위 스크린샷에 보이는 것처럼 Border의 모든 수치를 1로 통일해서 바꾸어 주도록 합니다.

이번에는 격자 무늬가 사라진 것을 볼 수 있었습니다. 이렇게 해서 타일 슬라이스까지 처리를 하였습니다.

이제 인스펙터 뷰에서 우클릭을 해서 UISprite라는 컴포넌트에서 우클릭을 해서 Copy Component라는 항목을 선택하도록 합니다.

이번에는 UIRoot>Options>Background>Stripes를 선택하도록 합니다.

여기서 게임 오브젝트 이름을 Wood로 바꾸어 주도록 하고, 인스펙터 뷰에서 Paste Component Values를 선택하도록 합니다.

그리고 복사를 하면, 앵커도 같이 복사가 됩니다. 그래서 하는 수 없이 여기서 앵커의 Target을 UIRoot>Optionios>Background로 지정을 하도록 해야 합니다.

그렇게 해서 Gif파일로 만든 일련의 영상을 보시면, 지난번 디자인과는 많이 달라진 것을 볼 수 있습니다. 이렇게 해서 배경의 타일 슬라이드까지 적용하는 것까지 해 보았습니다. 이제는 폰트를 가지고서 하는 작업에 들어가 보고자 합니다.

이번에는 UIRoot>Main>Buttons>Play>Label을 눌러서 선택을 하도록 합니다. 이번에는 다이나믹 폰트라고 해서 어떤 크기로 확대가 된다고 해도 계단현상을 일으키지 않는 것이며, 랜더링때 드로우 콜이 필요하다고 합니다.

그리고 인스펙터 뷰에서 위 스크린샷과 같이 설정을 하도록 합니다. 폰트는 GoodDog을 선택하도록 하고, NGUI로 되고 있는 부분은 Unity로 바꾸고 사이즈는 80등으로 바꾸는 작업을 한 것입니다.

이제 다이나믹 폰트를 만들어 봤으니, 이번에는 비트맵폰트를 만들어 보도록 합니다. 여기서 만들기 위해서는 NGUI에서 폰트 메이커를 열도록 합니다.

일단 폰트메이커에서 위 스크린샷과 같은 일련의 매개변수가 있는 것을 볼 수 있습니다.

각각의 매개변수가 가지는 의미는 위 스크린샷과 같이 나와 있고, 이제 본격적인 비트맵 폰트를 작성하는 작업에 들어가 보도록 합니다.

폰트 메이커에서 설정을 위 스크린샷과 같이 해주도록 하고 나서, 마지막으로 Create the Font를 눌러서 폰트를 생성하도록 합니다.

이름을 Lato라고 지정을 하고서 프로젝트의 폴더 중에 Resource/Font라는 폴더 속에 넣어 주도록 합니다.

위 스크린샷과 같이 폰트의 매개변수가 뜨는데, 나머지는 유추를 하기 쉽지만, 아랫쪽에 있는 Modify는 폰트에 특수한 효과를 주는 용도롤 사용한다고 합니다. 하지만 실제로 폰트를 만드는 데 사용되는 소프트웨어가 따로 있는 것으로 봐서, 이 기능까지는 상세하게 알지 않아도 될 듯 합니다.

마지막으로 UIRoot>Tooltip>Label을 선택하도록 합니다.

위 스크린샷과 같이 변경을 한 다음에, 이제 어떻게 바뀌었는 지를 보도록 합니다.

위 GIF파일과 같이 메뉴 위에 커서가 있으면 뜨는 툴팁의 글꼴이 바뀐 것을 볼 수 있습니다. 이제 챕터5도 얼마 남지 않았는데, 챕터6와 같은 것을 들어갈지 말지는 조금은 고민할 시간이 필요하다는 생각이 듭니다. 다만 이제 챕터5가 얼마 남지 않았기 때문에, 이는 가볍게 정리를 하고서 조금만 더 생각을 해봐야 할듯 합니다.