[Unity게임 프로젝트] 타워디펜스 게임(1) - 홈, 스테이지 선택, 설정 화면 UI작업

 

얼마전에 횡스크롤 타워디펜스 게임을 접해서 비슷한 느낌으로 간단하게 만들어보겠습니다.

프로젝트를 만들면서 캡쳐를 미리 해놨어야 하는건데... 시작 부분은 캡쳐본이 없으니 양해부탁드립니다.

 

1. 홈화면

 

Unity프로젝트를 3D로 받아왔습니다.

MainCamera의 ClearFlag를 skybox에서 solid color로 바꾸어 단색배경을 만들었습니다.

 

개인적으로 Scene을 바꿔가며 화면을 전환하는 것보다 Image를 만들어 껐다켰다하는게 편합니다.

UI작업을 할 것이기에 Hierarchy에서 Canvas에 Image를 추가해줬습니다.

Game창에 이미지를 꽉 차게 만들어주기 위해서 Anchor PreSets를 우측 하단을 선택하였습니다.

 

먼저 홈화면을 만들어주기 위해 TextMeshPro를 사용하여 메인 이름을 중앙에 넣어줬습니다.

그 다음 GameStart, Setting, Exit 버튼을 생성하였습니다.

 

GameStart버튼을 누르면 나오는 StageChoice화면을 만들어줬습니다.

하...블랙앤골드 간지 그 잡채..

---

2. 스테이지 선택 화면

 

스테이지 선택 화면도 홈화면과 같이 Image와 TextMeshPro, Button을 활용하여 만들었습니다.

---

 

3. 설정 창

다음은 홈화면에서 Setting버튼을 누르면 나오는 Setting창을 만들었습니다.

 

Setting창의 강조를 위해 백그라운드 이미지를 배경화면과 같은 색으로 설정하고 투명도를 설정해줬습니다.

Setting창은 두 개의 이미지를 겹쳐서 메인 제목 색과 같은 테두리 라인을 만들어줬습니다.

 

♥ Image를 이용하여 테두리 색깔을 바꾸기

1. 모양이 같은 Image를 2개 추가해줍니다.
2. Hierarchy에 생성된 두 개의 Image오브젝트 중 위에 있는 Image를 테두리 이미지로 설정합니다.
3. 먼저 호출한 코드가 먼저 실행되는 것처럼 이미지도 위치가 같다면 먼저 생성된 것을 뒤에 오는 이미지가 덮어버립니다.
4. 테두리 이미지를 원하는 색깔로 바꾼다음 테두리 이미지의 Inspector에서 Rect Transform의 Width와 Height를 동시에 바꾸어 기호에 맞게 설정해줍니다.

 

다음은 Setting창의 나가기 버튼을 만들어줄 것입니다.

 

먼저 이미지 안에 Button-TextMeshPro를 추가해줬습니다.

 

그 다음 RectTransform을 이용해 위치를 우측 상단으로 보내줬습니다.

 

버튼의 Width와 Height를 조정하여 알맞은 크기고 바꿔줬습니다.

그리고 버튼의 text를 그냥 대문자X로 바꿔주고 색도 테두리 라인과 같은 색상으로 바꿔줬습니다.

다음 버튼의 배경 색상을 바꿔주면?

 

역시 블랙앤골드가 짱이야!!

 

다음은 Setting창의 제목과  Sound의 Power를 조정할 Slider를 추가하였고, Slider의 Value값을 나타내는 text도 추가해주었습니다.

 

제목과 Sound, Slider수치text는 위 작업과 같이 Setting이미지를 기준으로 배치해줬습니다.

이제 Slider의 Value값에 따라 text(숫자)가 변하게 해주는 코드를 작성해야 합니다.

 

먼저, 인스펙터에서 설정해주기 위해 UIManager스크립트에서 Sound슬라이더의 수치를 나타내는 text를 담당할 변수와 해당 슬라이더를 넣어줄 soundPower변수를 만들었습니다.

 

그리고 sound슬라이더text는 숫자를 써놨지만 text라 데이터 자체는 string입니다.

그래서 이 text에 사운드 슬라이더의 value값을 string으로 형변환해서 넣어주는 함수를 작성했습니다.

 

이젠 UIManager의 인스펙터에서 각각에 맞는 오브젝트를 넣어줍니다.

 

이러면 Sound슬라이더의 위치에 따라 text의 수치가 변하게 됩니다. 

---

 

4. Script작성 및 Object와 Button연결 작업

1) 실행했을 때 게임창에 홈화면만 나오게 하는 코드 작성.

2) 홈화면에서 GameStart과 Setting버튼을 눌렀을 때 각각의 화면이 나오는 코드 작성.

3) Setting창에서 나가기(X)버튼을 눌렀을 때 Setting창이 꺼지는 코드 작성.

 

홈화면,스테이지 선택화면, 세팅 창 오브젝트를 넣어줄 맴버변수 추가.

Awake()를 사용해서 실행하면 홈화면이 가장 먼저 나오게 설정.

ButtonPressGameStart()는 GameStart버튼을 눌렀을 때 홈화면이 꺼지고 스테이지 선택 화면이 나오는 함수.

ButtonPressSetting()은 Setting버튼을 눌렀을 때 Setting창이 나오게 하는 함수.

ButtonPresBack()은 Setting창에서 X버튼을 눌렀을 때 Setting창이 꺼지는 함수.

 

이제 미리 만들어놓은 UIManager 오브젝트에 3개의 맴버변수가 생겼을겁니다.

거기에 각각에 맞는 오브젝트를 넣어줍니다.

그 다음 아래와 같이 Button의 하단에 위치한 OnClick()을 +를 눌러서 추가해주고,

UIManager를 넣어준 다음 fuction에서 UIManager로 들어가줍니다.

그리고 버튼에 따라 설정한 함수를 등록해주면 끝!

GameStart버튼도 똑같은 작업을 해줬습니다.

---