[TIL] 난이도 선택 씬 만들기

1. 배경색 설정

하이어라키의 메인 카메라를 누르고 인스펙터를 보면 Background가 있는데 이곳에서 색상을 바꾸면 배경색이 달라진다

---

2. 버튼 생성, 위치 및 크기 설정

하이어라키의 빈 곳에 마우스 우클릭을 하면 사진과 같은 창이 뜬다. 창에서 UI를 찾고 Button을 눌러 버튼을 생성한다.

 

버튼 위치 설정은 1번 화살표가 가리키는 곳을 눌러 버튼 위에 생기는 화살표를 당겨 원하는 곳에 배치가 가능하고 좀 더 섬세하게 위치를 조정하고 싶을 땐 2번 박스의 positionX값과 positionY값을 입력해 주면 된다.

버튼의 크기는 3번 박스의 Width(가로 폭)와 Height(세로 높이)에 값을 입력해 주면된다.

---

4. 버튼 텍스트, 그림자 설정

1번 박스 안의 Text칸에 원하는 텍스트를 입력한다.

2번 동그라미가 가리키는 곳을 누르면 위의 사진과 같이 나의 에셋 폴더 안에 있는 폰트 목록 창이 뜬다. 원하는 것을 골라 클릭하면 폰트가 적용된다. 

 

1번 화살표가 가리키는 Add Componet를 눌러 Shadow를 검색하여 추가한다.

2번 화살표가 가리키는 곳의 X와 Y값을 조절하여 그림자의 크기를 정한다.

마지막으로 동그라미 친 부분을 클릭하여 그림자의 색상을 선택한다.

---

3. 텍스트 추가

위의 버튼 생성, 편집 등의 방법으로 버튼 하나를 더 생성해 보았다. 다음으로는 '난이도'라는 텍스트를 추가해 볼 것이다.

먼저 버튼을 만들면서 생성된 Canvas를 우클릭 해준다. 그럼 위의 사진과 같은 창이 뜨게 되고 UI -> Text 순으로 눌러주면 Canvas 안에 텍스트가 생성이 된다.

 

버튼의 위치, 크기 등을 설정한 방법 그대로 설정하여 원하는 곳에 배치한다.

---

4. 버튼 애니메이션 만들기

버튼을 눌렀을 때 깜빡거리면서 크기가 살짝 작아지는 애니메이션을 만들 차례이다.

먼저 Canvas 안에 있는 버튼을 클릭하고 위의 사진과 같은 버튼 컴포넌트를 찾는다.

찾았다면 화살표가 가리키는 Transition 옆의 드롭다운을 눌러 Animation을 클릭해준다.

 

Animation으로 바꾸면 위의  사진과 같이 변한다. 화살표가 가리키는 Generate Anim을 누르면 오른쪽 사진과 같이 뜨며 원하는 파일 명을 입력하고 저장하면 된다.

 

위의 과정을 하고 나면 사진에서 보이는 빨간 박스가 가리키는 것과 같이 ButtonAni가 생긴 것을 확인할 수 있다. 유니티 상단에 위치한 Window 버튼을 누르면 창이 뜬다. Animation -> Animation 순으로 찾아서 눌러준다.

 

위의 사진과 같이 애니메이션을 만드는 창이 뜨면 1번 동그라미인 Normal을 눌러 Pressed를 누른다. 2번 동그라미를 눌러녹화를 진행한다. 3번 박스 안(Scale)의 X(가로)와 Y(세로)값을 원하는 크기만큼 작아지도록 변경해준다. 같은 방법으로 녹화를 진행하여 눌렸을 때 색상도 바뀌도록 한다.

 

애니메이션을 다 만들었다면 생성되어있던 ButtonAni를 눌러준다. 그럼 위의 사진처럼 애니메이터 창이 뜨게 된다.

애니메이터에서 회색 활살표를 누르고 인스펙터를 보면 1번, 2번 화살표가 가리키는 곳을 볼 수 있다. Fixed Duration을 해제해주고 Transition Duration은 0으로 설정해준다. 그리고 마지막으로 이 애니메이션을 적용할 오브젝트에 애니메이터를 드래그 앤 드롭해서 적용해준다. 

---

5. 결과

위의 과정대로 진행하면 영상과 같이 만들 수 있다.