UI디자이너가 NGUI Label에 이모지를 넣고 싶을 때 어떻게 해야 할까?
Unity3D NGUI 에는 해당 기능이 있다.
정확히 이야기하자면 이모티콘 기능을 이용하여 이모지 넣는 것이다.
총 2가지 방법이 있는데 Bitmap Font로 만드는 방법, Dynamic Font로 만드는 방법 이 있다.
아래 내용에서 설명하겠다.
방법 1 : Bitmap Font에 Emoji 만들어 넣기
1. 이모지 리소스와 폰트파일을 준비한다.
:) , :D , >_< , -_- 이렇게 총 4가지 표정의 리소스를 만들고 무료 폰트파일을 준비했습니다.
2. Bitmap Font를 만든다.
NGUI의 Font Maker 창을 연다.
Type은 Generated Bitmap으로 한다.
Source에 준비한 폰트파일을 넣는다.
Size는 각자의 프로젝트에 적절한 폰트 사이즈를 입력한다.
Padding은 0으로 한다.
'Create the Font' 버튼을 눌러 파일이름과 위치를 지정한다.
그럼 아래처럼 비트맵 폰트와 관련 파일이 만들어진다.
3. Emoji가 포함된 Atlas를 만든다.
NGUI의 Atlas Maker를 연다.
아래처럼 준비한 이미지를 선택하여 새 아틀라스를 만든다.
'Create' 버튼을 누르고 아틀라스를 만들면 아래와 같은 파일이 만들어진다.
4. Bitmap Font에 Atlas를 연결한다.
2번에서 만든 NGUI Font Asset을 선택하면 Inpector에 아래처럼 나올 것이다.
Atlas에 3번에서 만든 NGUI Atlas Asset을 연결하자.
그럼 아래처럼 나올 것이다.
보면 Atlas 바로 아래에 Sprite 가 있다.
누르면 아래처럼 Sprite를 선택하라고 창이 뜬다.
이중 폰트 이미지를 선택해 준다.
그리고 다시 Inpector로 돌아간다.
Symbols and Emoticons 가 있다.
왼쪽의 빈칸에 적절한 이모티콘을 입력하고,
중앙의 빈칸에 해당 이모티콘을 눌렀을 때 나올 심볼(이모지 스프라이트)을 선택한다.
그리고 Add 버튼을 누른다.
(Tinted 체크박스를 체크하면, Label 컬러 바꿀 때 이모지색도 변하므로 체크하지 않는다.)
그럼 이렇게 추가되었다.
참고로 하단의 옵션들은
Scale은 이모지 스프라이트에 대한 Scale이다.
Offset은 이모지 스프라이트의 세로 위치값인데 0이 기본값이고 숫자를 넣으면 그만큼 올라가거나 내려간다.
Height는 높이값인데 0이 기본이다. 해당값은 Inspector의 Default Size가 최대 사이즈라 생각하면 되고 이는 기본값인 0과 동일하다. (ex. Default Size가 30일 때 Height에 15를 넣으면 이모지는 원래보다 절반의 높이로 출력된다. )
5. Label에 이모지를 넣어 사용하기
NGUI Label을 만들고 아까 만든 폰트 에셋을 연결한다.
그 후 Text칸 안에 4번에서 등록한 이모티콘을 입력하자.
이렇게 이모티콘이 이모지가 되어 출력되었다.
완성.
방법 2 : Dynamic Font에 Emoji 만들어 넣기
1. 이모지 리소스와 폰트파일을 준비한다.
:) , :D , >_< , -_- 이렇게 총 4가지 표정의 리소스를 만들고 무료 폰트파일을 준비했습니다.
2. Dynamic Font를 만든다.
NGUI의 Font Maker 창을 연다.
Type은 Dynamic으로 한다.
'Create the Font' 버튼을 눌러 폰트에셋을 제작한다.
3. Emoji가 포함된 Atlas를 만든다.
NGUI의 Atlas Maker를 연다.
아래처럼 준비한 이미지를 선택하여 새 아틀라스를 만든다.
'Create' 버튼을 누르고 아틀라스를 만들면 아래와 같은 파일이 만들어진다.
4. Dynamic Font에 Atlas를 연결한다.
2번에서 만든 NGUI Font Asset을 선택하면 Inpector에 아래처럼 나올 것이다.
Symbol Atlas에 3번에서 만든 NGUI Atlas Asset을 연결하자.
그럼 아래처럼 나올 것이다.
Symbols and Emoticons 가 있다.
왼쪽의 빈칸에 적절한 이모티콘을 입력하고,
중앙의 빈칸에 해당 이모티콘을 눌렀을 때 나올 심볼(이모지 스프라이트)을 선택한다.
그리고 Add 버튼을 누른다.
(Tinted 체크박스에 체크하면, Label 컬러 바꿀 때 이모지색도 변하므로 체크하지 않는다.)
그럼 이렇게 추가되었다.
참고로 하단의 옵션들은
Scale은 이모지 스프라이트에 대한 Scale이다.
Offset은 이모지 스프라이트의 세로 위치값인데 0이 기본값이고 숫자를 넣으면 그만큼 올라가거나 내려간다.
Height는 높이값인데 0이 기본이다. 해당값은 Inspector의 Default Size가 최대 사이즈라 생각하면 되고 이는 기본값인 0과 동일하다. (ex. Default Size가 30일 때 Height에 15를 넣으면 이모지는 원래보다 절반의 높이로 출력된다. )
5. Label에 이모지를 넣어 사용하기
NGUI Label을 만들고 아까 만든 폰트 에셋을 연결한다.
그 후 Text칸 안에 4번에서 등록한 이모티콘을 입력하자.
이렇게 이모티콘이 이모지가 되어 출력되었다.
완성.
참고로 UGUI에는 TMP에 비슷한 기능이 있으니 그 기능을 쓰면된다.
'Unity3D' 카테고리의 다른 글
| Unity3D Linear 환경으로 개발할 때 UI resource의 alpha 값 문제 (2) | 2023.09.13 |
|---|
