Unity로 아두이노 시리얼 통신하기 - UI 생성하기

Unity로 UI를 만들어서 Arduino랑 시리얼 통신을 하여 서보모터를 가동시켜보려고 합니다.

본 시리즈는 5편으로 작성될 예정이며 아래 링크로 바로 찾아볼 수 있습니다.

1. Unity로 아두이노 시리얼 통신하기 - 에셋 설치하기

2. Unity로 아두이노 시리얼 통신하기 - UI 생성하기

3. Unity로 아두이노 시리얼 통신하기 - ArduinoSerial 사용 전 설정

4. Unity로 아두이노 시리얼 통신하기 - Arduino에 코드 업로드하기

5. Unity로 아두이노 시리얼 통신하기 - Unity UI에서 아두이노 시리얼통신

---

Unity로 아두이노와 시리얼 통신을 하면서 서보모터를 작동시키기 위해 UI를 만들어보려고 합니다.

Canvas 생성하기

왼쪽 Hierarchy에 마우스 오른쪽 클릭합니다.
이후 UI - Canvas를 클릭하여 생성합니다.

Canvas에 요소 추가하기

Text 추가하기

Canvas 오브젝트에서 마우스 오른쪽 클릭 - UI - TextMeshPro를 추가합니다.

Canvas 하위에 Text - TextMeshPro 추가하기

Import TMP Essentials 버튼을 눌러 TMP Essentials 만들기

Text - TextMeshPro를 추가하면 Importer 창이 나오게 되는데 이때 Import TMP Essentials를 눌러 설치해줍니다. 

Text 위치 옮기기

Text(TMP)를 더블클릭 했을 때 Scene에 나오는 모습

지금부터는 Canvas를 종이라고 생각하고 Text(TMP)나 다른 하위 요소들은 그 위에 붙이는 요소들이라고 생각해봅시다.

Text나 기타 요소들의 위치를 옮기는 방법은 쉽게는 크게 2가지 입니다.

• Text(TMP) 등의 오브젝트를 선택 후 씬 창에서 화살표 혹은 파란색 네모 박스를 드래그해서 이동
• 옮길 오브젝트를 선택 후 Inspector의 Rect Transform의 Pos X, Pos Y, Pos Z의 값을 변화(여기서는 Pos Z는 고정)

Text 내용 수정하기

Text의 내용을 수정하려면 Text(TMP)를 선택 후 Inspector 안의 TextMeshPro - Text(UI)를 찾습니다. 

Text의 내용은 Text Input에 적혀있는 New Text를 지우고 수정합니다.

Font Size와 Font Style, Vertex Color(글자 색상) 등을 입맛에 맞게 수정해주세요.

 

단, 현재는 영어만 가능하며 한글을 기입할 시 □ □ □와 같이 텍스트가 깨져서 나오게 됩니다. 이는 현재 TMP로 변환한 폰트가 한글을 공식호환하지 않아서 생기는 문제로 한글 폰트를 변환시키는 방법은 아래를 참고해주세요.

 

Slider 추가하기

Canvas 오브젝트에서 마우스 오른쪽 클릭 - UI - Slider를 추가합니다.

연결한 모터 수에 따라 슬라이더를 추가해주세요.

여기서 슬라이더는 연결된 서보모터의 각도를 조절하기 위하여 사용합니다.

Text와 마찬가지로 Slider도 위치를 조절해주세요.

※ Text와 Slider의 위치가 겹쳐 있다면 이후 정확한 인식이 불가능합니다. 꼭 겹쳐있지 않게 조절해주세요.

play 버튼 눌러서 확인해보기

상단의 플레이 버튼을 눌러서 만든 UI를 확인해봅니다.

서보모터 1개에 해당하는 UI 예시

UI 배경 설정하기

현재는 Canvas안에 Panel등을 배치하지 않아 Scene의 배경 색상이 그대로 반영됩니다. Panel을 삽입해도 되지만 여기서는 배경 색상을 단순히 바꾸어 보려고 합니다.

먼저 Hierarchy - MainCamera를 찾아 클릭해주세요.

그리고 오른쪽 Inspector창에서 Camera 컴포넌트 - Environment - Background Type를 클릭하여 Soild Color로 바꿔줍니다. 

변경한 후 Background를 원하는 색상으로 바꿔주세요. 이후 다시 Play 버튼을 누르고 game 탭을 확인해보세요.

완성된 UI 예시

 

이렇게 서보모터를 작동시키기 위한 UI를 간단하게 만들어보았습니다.
제목, 모터의 갯수 등을 고려하셔서 자신의 창작물에 맞게 바꿔보세요.

다음으로는 본격적으로 아두이노와 Serial 통신을 하기 위한 설정 작업에 들어가고자 합니다.