[📚정보] [Unity] 바로 써먹을 수 있는 10분 GUI 강좌 #1

[beside(164.125)]

엑박이실 분들을 위해 링크 (전체공개글입니다)

https://cafe.naver.com/allapprepo/48

---------------------------------------------------------------------------------------------------

GUI (Graphical User Interface)는 게임의 필수요소 중 하나입니다.

사용자들은 게임을 해보기 전에 GUI만 보고 게임을 시작하지 않는 경우가 많습니다.

Unity에 조금 익숙하신 분들은 10분만에 따라할 수 있는 간단한 강좌 예제를 준비했습니다.

캐릭터 사진과 에너지바가 있는 간단한 HUD (Head-Up Display)입니다.

완성 결과는 이렇습니다.

----------------- 자, 그럼 시작해보겠습니다 -----------------

준비 과정

1. 2D 프로젝트를 만듭니다. (설명은 생략해도 되겠지요?)

2. 예제를 시작하기에 앞서 리소스들을 다운로드합니다. (무료입니다)

https://opengameart.org/content/free-game-gui

https://opengameart.org/content/cat-dog-free-sprites

3. 다운로드한 catSprites와 uiElements 이미지를 같이 클릭 (shift)하고, 아래 그림과 같이 설정합니다.

4. catSprites만 클릭 후 Sprite Editor를 열어 아래 그림과 같의 작업 후 Apply 클릭

5. catSprites만 클릭 후 Sprite Editor를 열고 동일하게 작업하되, Pivot을 "Center"로 설정해줍니다.

GUI 만들기

1. UI canvas를 추가하고, 이름을 "HUD Canvas"로 바꿉니다.

- GameObject -> UI -> Canvas

2. HUD Canvas를 클릭 후 Inspector에서 아래와 같이 설정해줍니다.

3. HUD Canvas의 자식으로 UI Panel을 만들고, 이름을 "HUD Panel"로 바꿉니다.

- GameObeject -> UI -> Panel

4. UI Panel을 클릭 후 아래와 같이 설정해줍니다.

5. uiElements 이미지의 오른쪽에 있는 화살표를 눌러 펼친 후, uiElements_1 서브이미지를 HUD Panel의 Source Image에 드래그&드랍합니다. 그리고 HUD Panel을 아래와 같이 설정해줍니다.

6. HUD Panel의 크기를 아래와 같이 조정합니다. (최종 설정을 잘 확인하시고, 그림에 보는 것처럼 되어야 합니다.)

7. 이제 내용물을 채워넣을 차례입니다. HUD Panel의 자식으로 Image를 추가하고, 이름을 Character Holder로 바꿉니다.

- GameObject -> UI -> Image

8. Character Holder의 Source Image에 uiElements_6을 넣고, 아래 그림처럼 설정합니다.

9. Character Holder의 자식으로 Image를 추가하고, 이름을 Character Image로 바꿉니다. (설명 생략)

10. Character Image에 catSprites_0을 넣고, 아래 그림처럼 설정합니다.

11. 이제 체력바를 만들겠습니다. 절차는 위와 동일합니다.

HUD Panel의 자식으로 Image를 넣고, 이름을 Health Holder로 바꿉니다.

12. Health Holder에 uiElements_20을 넣고, 아래 그림처럼 설정합니다.

13. Health Holder의 자식으로 Image를 넣고, 이름을 Health Bar로 바꿉니다.

14. Health Bar에 uiElements_23을 넣고, 아래 그림처럼 설정합니다.

---------------------------------------------------------------------------------------

순식간에(?) 간단한 GUI가 완성됐습니다.

마음에 드는 리소스가 있다면 Source Image와 Rect transform만 조금씩 바꾸면 맞춤 GUI를 만들 수 있겠죠?

다른 UI를 만들더라도 강좌에서 했던 과정을 조금 응용하시면 쉽게 만들 수 있을거라 생각되네요

2편에서는 더 유익한 강좌로 찾아뵙도록 하겠습니다.

다들 화이팅하십쇼 !!

---------------------------------------------------------------------------------------

- 저작권은 https://cafe.naver.com/allapprepo에 있습니다.

[ㅁ(1.231)]

안보여

[beside(164.125)]

엑박이에요?

[익명(110.10)]

오오... 이거는 착한놈 눈에만 보인다는 그 GUI 냐?

[익명(121.139)]

다 엑박났는데

[익명(59.1)]

다른 사이트에서 쓴글 코드 그대로 긁어오면 엑박난다 디시에 글쓸거면 그림은 디시 업로더로 올린다음 글만 복붙해야됨

[beside(164.125)]

네 다시 작업했습니다. 감사합니다ㅎㅎ