유니티 텍스트 Text 화면에 표시하기

해당 티스토리 페이지는 필자가 유니티 C# 개발을 하면서 학습한 내용들을 기록하고 공유하는 페이지입니다 !

- 틀린 부분이 있거나, 수정된 부분이 있다면 댓글로 알려주세요 !

- 해당 내용을 공유 or 퍼가도 좋으나, 출처를 꼭 명시해주세요 !

- 해당 글의 모든 저작권은 Chameleon Studio에 있습니다.

- 방문해주셔서 감사합니다 ^^

유니티 화면에 텍스트 표시

안녕하세요 ! 카멜레온입니다 !

이번 시간에는 유니티 UI(UGUI)를 통해서 텍스트를 만들어보려고 합니다 ㅎㅎ

이 글의 마지막 파트에서는 스크립트 코딩을 통해 마우스가 클릭되면 텍스트가 1씩 증가하는 것까지 구현하도록 해보겠습니다 !

시작해봅시다 !!

프로젝트 실행

우선 프로젝트를 열고, 플랫폼을 자신이 개발할 환경으로(안드로이드 or iOS)로 세팅해주세요 !

프로젝트를 만드는 법과 플랫폼 변경법을 모르시는 분들은 링크를 확인해주세요. 

저는 프로젝트 이름을 TextUpdate라고 하고 플랫폼을 iOS로 변경했습니다 !

이제 여기에 텍스트를 넣어봅시다 !

하이어라키 창에서 마우스 우클릭 > UI > Text 클릭

우선, Hierarchy 창에서 우클릭을 한 후, UI > Text를 클릭합니다.

레이아웃 창에 대한 설명을 알고 싶다면 '유니티 기본 화면 구성 용어 설명'을 읽고와주세요 !

텍스트 생성

Text를 만들면, Canvas 안에 Text가 만들어집니다.

유니티 UI는 항상 Canvas 안에 위치해야 화면 상에 나타나게 됩니다.

Canvas 밖에 유니티의 UI가 위치하게 되면 화면 상에서 UI가 표시되지 않으니, UI 작업을 할 때 유의해야 합니다 !

또, EventSystem이 만들어지는데 이는 유니티에서 자체적으로 제공하는 오브젝트입니다.

EventSystem가 유니티 UI의 반응을 도와주니 Text를 만들었는데 이상한게 생겼다고 지우시면 안됩니다 !

텍스트 변경

이제 Inspector 창에서 Text를 바꿔봅시다 !

저는 크러쉬팡이라고 텍스트를 쳤습니다 !

근데 화면에 텍스트가 보이지 않습니다..

사실 보이지 않는 것이 아니라, 보이지만 너무 텍스트 크기가 작아서 잘 나타나지 않는 것입니다.

Inspector 창에 있는 Text의 Rect Transform을 변경하고 텍스트 크기를 키워봅시다.

Rect Transform의 Pos X와 Pos Y를 0으로 둡시다.

Pos X와 Pos Y는 텍스트의 '위치'인 X, Y 값을 설정하는 것을 관여합니다.

위치를 정중앙인 (0,0)에 두었다면, 이제 텍스트가 들어 갈 창의 가로크기와 세로크기를 늘려보겠습니다.

Width(가로)의 크기를 500으로 두고, Height(세로)의 크기를 300으로 둬봅시다.

그리고 텍스트 안의 font size를 100으로 둡니다.

텍스트 정렬

짠,, 글씨가 나타났습니다 !!

하지만, Text의 쓰기 정렬이 위쪽 왼쪽 정렬로 되어있네요.

Text의 Paragraph에 가서 Alignment를 중간 정렬로 변경해봅시다.

중앙에 텍스트 표시

드디어! 텍스트가 정중앙에 표시되네요.

여기까지 화면에 텍스트 표시하기가 끝났습니다.

다음엔 '유니티 스크립트로 텍스트 표시하기'를 알아보도록 하겠습니다.

감사합니다 !

Chameleon Studio가 만든 게임하러가기

<젤랑점핑>

안드로이드- market://details?id=com.Cameleon.TangTangBall

IOS- itms-apps://itunes.apple.com/app/id1429522379

<크러쉬팡>

안드로이드- market://details?id=com.Chameleon.CrushPang 

IOS- itms-apps://itunes.apple.com/app/id1450109331