기록 보관소

[Unity/유니티] 기초-3D 쿼터뷰 액션 게임: UI 배치하기 [B51] 본문

유니티 프로젝트/3D 쿼터뷰 액션게임

[Unity/유니티] 기초-3D 쿼터뷰 액션 게임: UI 배치하기 [B51]

JongHoon 2022. 4. 8. 19:24

개요

유니티 입문과 독학을 위해서 아래 링크의 골드메탈님의 영상들을 보며 진행 상황 사진 또는 캡처를 올리고 배웠던 점을 요약해서 적는다.

현재는 영상들을 보고 따라하고 배우는 것에 집중할 것이며, 영상을 모두 보고 따라한 후에는 개인 프로젝트를 설계하고 직접 만드는 것이 목표다.

https://youtube.com/playlist?list=PLO-mt5Iu5TeYI4dbYwWP8JqZMC9iuUIW2 

 

유니티 강좌 기초 채널 Basic

유니티 개발을 처음 시작하시는 입문자 분들을 위한 기초 채널. [ 프로젝트 ] B00 ~ B12 (BE1) : 유니티 필수 기초 B13 ~ B19 (BE2) : 2D 플랫포머 B20 ~ B26 (BE3) : 2D 탑다운 대화형 RPG B27 ~ B37 (BE4) : 2D 종스크롤

www.youtube.com

3D 쿼터뷰 액션 게임: UI 배치하기[B51]

1. 캔버스 세팅

Canvas 생성
게임 화면을 16:9로 바꿔준다
캔버스 설정

2. 타이틀 메뉴 UI

Canvas에 Panel 생성
Panel 설정 변경
타이틀 Image 추가 및 설정
점수 아이콘 Image 추가 및 설정
점수 값 Text 추가 및 설정

  • Text의 폰트는 메이플스토리 BOLD를 이용했다. 또한 폰트가 약간 깨진다면 Scale을 줄이고 Font Size를 늘리면 조금 해결할 수 있다.

시작 버튼 Button 추가 및 설정
시작 버튼 Button Text 설정

  • 버튼 Source Image는 Image Type을 Sliced-> Simple로 바꿔주고 SetNativeSize로 사이즈를 원래 크기로 바꾼 후, 다시 Image Type을 Simple -> Sliced로 변경해주면 깨짐 없이 수정할 수 있다.

UI 이름을 용도에 맞게 바꾸고 비활성화

3. 인게임 주요 UI

인게임 UI 배경 Panel 생성 및 설정. Color에서 Alpha값을 0으로 만들어서 색이 없도록 해준다.
점수를 처리할 Score Group 생성 및 설정. 자식 오브젝트로 Image와 Text도 추가해둔다.
Score Image 설정
Score Text 설정
Score Group 앵커를 왼쪽 상단으로 잡아준다
Score Image도 왼쪽 상단으로 앵커를 잡아준다
Score Text도 왼쪽 상단으로 앵커를 잡고, 위치를 조정해준다
완료하면 여백을 잡아준다
Score Group을 복사해서 Status Group으로 변경한 후, 왼쪽 하단으로 앵커를 잡아준다
앞의 과정처럼 Score Image와 Score Text의 앵커도 왼쪽 하단으로 잡고, 위치를 조정해준다
Score Image와 Score Text를 2쌍 더 복사해서 위치를 조정해준다
체력과 총알, 동전으로 이미지를 변경하고 텍스트와 크기를 조정해서 맞춰준다.
Status Group 위치를 조정해 여백을 추가해준다
Score Group을 하나 더 복사 후 앵커를 오른쪽 상단으로 잡아준다
Stage Group으로 변경해서 Image를 변경하고 위치를 조정한다
Stage Text는 왼쪽 정렬을 오른쪽 정렬로 바꾸고 텍스트 내용과 Y축 위치만 바꿔주면 된다.
Image와 Text를 한쌍 더 복사해주고 위치를 수정한다
Stage Group에 여백을 추가해준다
위 과정들처럼 스테이지 적의 수를 표시하는 Enemy Group을 복사해서 만들고, Image와 Text의 위치를 조정한다
완성했으면 Enemy Group에 여백을 넣어준다

4. 장비 UI

플레이어 장비를 표시할 UI Equip Group 생성
장비칸으로 사용할 Image 생성 및 설정
장비칸의 자식 오브젝트로 망치 Image 추가
무기 번호 표시를 위해 Num Image도 추가해서 왼쪽 상단으로 앵커를 맞춰 위치 설정을 해준다
위 Image 그룹을 4개 더 복사해서 위치를 설정하고 Image들을 그에 맞게 변경해준다
마지막으로 Equip Group의 여백과 크기를 설정

5. 보스 체력 UI

보스 체력을 설정할 UI Boss Group 생성 및 설정
보스 체력바를 나타낼 Image를 생성하고 앵커를 위쪽으로 잡고 크기를 설정해준다
체력을 표시할 Image를 자식 오브젝트로 추가 및 설정
보스 아이콘 Image 추가 및 설정. 앵커는 왼쪽 중앙으로 잡았다.
보스 텍스트 Image 추가 및 설정. 앵커는 중앙으로 잡았다.
보스 체력 Image는 shift만 눌러서 왼쪽으로 잡아준다. 이렇게하면 Image의 Width를 줄일때 체력 감소하듯이 왼쪽으로 길이가 줄어들게 된다.
완성했으면 Boss Group에 여백을 준다

저작자표시 비영리 (새창열림)

'유니티 프로젝트 > 3D 쿼터뷰 액션게임' 카테고리의 다른 글

[Unity/유니티] 기초-3D 쿼터뷰 액션 게임: UI 로직 연결하기[B53]  (0) 2022.04.10
[Unity/유니티] 기초-3D 쿼터뷰 액션 게임: 간단한 상점 만들기[B52]  (0) 2022.04.09
[Unity/유니티] 기초-3D 쿼터뷰 액션 게임: 다양한 패턴을 구사하는 보스 만들기[B50]  (0) 2022.04.07
[Unity/유니티] 기초-3D 쿼터뷰 액션 게임: 다양한 몬스터 만들기[B49]  (0) 2022.04.03
[Unity/유니티] 기초-3D 쿼터뷰 액션 게임: 목표를 추적하는 AI 만들기[B48]  (0) 2022.04.02
'유니티 프로젝트/3D 쿼터뷰 액션게임' Related Articles more