유니티 게임 인터페이스 UI 기초 / Canvas / Text / Image / Button

 

TIL

 

📝  게임 인터페이스 UI

📝  Canvas

📝  Screen

📝  Text / Image

📝  Button / Anchor

 

유니티 게임 인터페이스 UI 기초 

 

---

 

👩‍💻  캔버스 

 

📌 Canvas 

UI가 그려지는 도화지 역할 컴포넌트 

모든 UI 요소가 캔버스 오브젝트의 자식입니다

 

 

🔻 Hierarchy - UI 컴포넌트를 추가할 수 있습니다 

 

 

 

🔻 Canvas를 추가하면 흰 색 캔버스가 씬 창에 나타납니다. 2D를 활성화시켜 화면을 정면에서 바라볼 수 있습니다 

 

---

 

👩‍💻  스크린 

 

📌 Screen

게임이 표시되는 화면, 해상도로 크기 결정

 

 

🔻 Canvas를 추가하면 흰 색 직사각형이 씬 창에 나타납니다. 2D를 활성화시켜 화면을 정면에서 바라볼 수 있습니다

 

마우스 커서도 스크린 좌표계에 포함됩니다 

 

 

---

 

👩‍💻  텍스트 UI

 

📌Text 

문자열을 표시하는 UI 

 

 

 

🔻 Canvas에 Text가 디폴트로 귀속되어 추가됩니다 (한글 지원 O)

📣 폰트는 꼭 라이센스 확인 ! 상업용으로 사용가능한지 확인할 것 ! 

 

 

 

📌  Text 프로퍼티 

 

 

📍 Font

 

컴퓨터에 있는 폰트가 자동적으로 유니티에서 불러와지지 않습니다 

사용하고 싶은 폰트는 파일을 끌어다 Project창에 에셋으로 추가해야합니다 

 

 

 

📍 Horizontal / Vertical Overflow

 

텍스트가 너무 넓거나 길어 사각형에 들어가지 않는 경우 사용하는 방법입니다

 

Horizontal Overflow - Wrap / Overflow

Vertical Overflow - Truncate / Overflow 

 

 

---

 

👩‍💻  이미지 UI

 

📌Image

이미지를 표시하는 UI 

 

 

 

🔻 Canvas에 Image를 추가하고 사용할 사진/이미지 파일을 가져와야합니다 

 

 

 

처음 가져온 이미지파일 Texture Type이 Default로 되어있는데, 캔버스 내의 Image 안으로 끌어다 놓을 수 없습니다

 

🔻 Texture Type을 Sprite로 설정해야 UI 적용이 가능합니다 

 

 

 

🔻 캔버스 Image로 가서 비어있는 Source Image에 해당 이미지 파일을 끌어다 놓습니다 (추가된 Jessie 파일)

 

📌   Image  프로퍼티

Preserve Aspect  :  비율 고정

Set Native Size  :  실제 원본 크기로 맞춤 

Image Type (Simple / Sliced / Tiled / Filled )

Filled - Fill Method (각도 및 가로세로) - Fill Amount (지우는 정도)

 

 

 

🔻 Image Type Filled 를 설정하고, 쿨타임 구현하기 

 

 

 

---

 

👩‍💻  버튼 UI

 

📌Button

클릭 이벤트를 가지고 있는 반응형 UI 

 

 

 

🔻 Canvas에 Button을 추가한 모습입니다 

 

 

🔻 Image Type은 Sliced에 디폴트되어 있습니다 

버튼의 실제 크기는 32x32의 작은 사이즈이나 Slice 기능으로 자유자재 크기로 이미지 구현 가능합니다 

이 Button 컴포넌트는 팝업 창이나 버튼에서 사용합니다 

 

 

 

 

📌 Button 기능

Interactable	반응 유무 (클릭 등)
Color Tint	색 변경 (기본적으로 옅은 회색)
Normal Color	기본 버튼 컬러
Highlighted Color	마우스를 올려놓았을 때의 컬러
Pressed Color	눌렀을 때 컬러
Disabled Color	버튼이 비활성화 되었을 때 (Interactable 비활성화 시)
Color Multiplier	색을 섞는 강도 (보통은 1)
Fade Duration	색이 변하는 시간
Navigation	Tap Key를 눌렀을 때 이동하는 버튼 선택 방향
On Click ()	버튼 클릭 시 호출되는 이벤트 함수

 

---

 

📌 OnClick()

버튼 클릭 시 호출되는 이벤트 함수

 

 

🔻 On Click () 를 추가합니다

 

 

🔻 버튼을 클릭하면 Ball_1 오브젝트가 반응할 수 있도록 하는 인터렉션 을 만들기위해 Ball_1 오브젝트를 추가합니다

 

 

🔻 Ball 스크립트  |  No Function에 Ball_1 의 스크립트 중에 반응할 Function을 설정해야합니다

public으로 Jump 를 만들었고, 다시 Inspector 창으로 돌아갑니다 

 

 

 

🔻 NoFunciton을 클릭하여 Ball - Jump() 를 맵핑 시켜놓습니다

📣 Jump를 public으로 설정하지 않았다면 보이지 않습니다 

 

 

맵핑이 되었다면, 해당 버튼을 누를 경우 Jump()함수가 실행됩니다

즉, 공이 10의 힘으로 위로 튀어 오르겠죠 ! 

 

 

📣 버튼 클릭은 누르기-떼기 한 세트 동작 

 

---

 

👩‍💻  앵커 

 

📌Anchor

4개의 작은 삼각형 핸들로 Scene View에 표시됩니다 

 

 

📌 Anchor Presets

앵커 빨간점 :  캔버스에서의 기준점 

앵커 파란점 :  컴포넌트에서의 기준점 (shift) 

 

 

🔻 왼쪽 상단 앵커를 택하니, 바람개비 중심점이 왼쪽 상단으로 이동함 

 

 

🔻 shift (컴포넌트에서 기준점)를 누르고 (0, 0, 0)로 좌표를 설정하면, 오브젝트가 캔버스 사이드에 붙습니다 

 

 

🔻 앵커 중앙네모 : 컴포넌트의 위치 (Alt) 

자동으로 컴포넌트를 캔버스 모서리에 맞춰 움직입니다. 좌표를 다시 (0, 0, 0)로 설정할 필요가 없습니다