유니티 2048 만들기 #2 UI 구성

유니티 2048 만들기 #2 UI 구성

 

본 게임은 고라니TV님의 영상을 참고로 만들어본 2048게임입니다. 

 

목차

1. 리소스 다운로드

2. UI 구성

3. 알고리즘 분석

4. 코드 분석

 

0.다운받은 리소스를 Asset으로 옮기기

0-1 프로젝트 탭에서 Asset > 마우스 우클릭 > Create > Folder

0-2 폴더 이름은 Resource로 바꾸기 (다른 이름이어도 상관없음)

0-3 다운로드 받은 리소스를 Resource폴더로 옮기기

 

 

1.배경 만들기

1-1 하이라키 탭에 2D Object > image 선택

1-2 오브젝트 이름을 background로 설정

1-3 b 이미지를 background의 image로 설정하기

1-4 이미지가 크기 때문에 scale을 0.5, 0.5 ,1 로 설정

 

 

2.캔버스 만들기

2-1 하이라키 탭에 UI > canvas 선택 

2-2 인스팩터 창의 canvas속성 중 render mode를 screen space- camera 로 변경

2-3 render camera에 Main Camera 연결하기

 

 

3. 카메라 배경 바꾸기

3-1 카메라의 background에서 스포이드를 눌러 배경색과 일치하는 색으로 바꾼다.

3-2 color값은 250, 248, 239, 0

 

 

4. 점수 관련 UI 셋팅하기

4-1 UI > Legacy > Text 로 canvas에 오브젝트 생성하기

4-2 만든 오브젝트의 Text의 Font를 CLEARSANS-BOLD로 설정하기 (다운받은 리소스에 있음)

4-3 적당한 폰트 크기로 설정

4-4 설정을 완료한 Text를 복사 하여 Text를 2개 더 만들기

4-5 Text의 이름을 각각 Score, BestScore, Plus로 명명하기

4-6 Score, BestScore, Plus의 Text값을 0,0,+0으로 바꾸기

4-7 Score, BestScore의 폰트 color는 흰색으로 Plus 의 색은 검은 갈색 계열로 바꾸기

4-8 Score, BestScore의 위치는 점수, 최고 점수의 위치의 칸에 알맞게 배치하고 Plus는 Score와 같은 위치로 옮긴다.

 

 

5. 새로하기 버튼 만들기

5-1 UI > image을 선택하여 canvas에 오브젝트 생성하기 

5-2 해당오브젝트의 이름을 New Game으로 변경

5-3 Asset의 Resource폴더의 a 이미지를 눌러 인스팩터 탭에서 Sprite Mode > Multiple로 변경 후 Apply누르기

5-4 인스팩터 탭에서 Sprite Editor 눌러 에디터 열기

5-5 Slice를 눌러 Automatic으로 slice후 에디터 창 닫기

5-6 New Game의 이미지를 a_0으로 변경

5-7 New Game의 크기를 적당히 변경하고 최고 점수 아래로 이동하기

5-8 인스팩터 탭에서 Add Component > Button을 추가하기 (이벤트는 나중에 추가할 예정)

 

 

6.닫기 창 만들기 

6-1 UI > image을 선택하여 canvas에 오브젝트 생성하기 

6-2 해당 오브젝트 이름을 Quit로 변경

6-3 해당 오브젝트의 색을 0,0,0,160 으로 변경 (흰색에 살짝 투명도만 있는 상태)

6-4 해당 오브젝트의 안에 Text와 Imgae를 추가로 만들기 UI > Legacy > Text, UI > image

6-5 추가한 오브젝의 이름을 Text는 GameOver, image는 TryAgain으로 변경

6-6 GameOver의 text는 GameOver로 변경 폰트 사이즈는 크게, 폰트는 CLEARSANS-BOLD, 폰트 색은 적당한 갈색 계열로 설정, 

6-7 GameOverd의 위치는 Quit창의 중간 위쪽으로 셋팅

6-8 TryAgain의 image는 a_1로 변경, 크기는 New Game과 같은 크기로 위치는 GameOver 아래로 배치하기

6-9 TryAgain에 Add Component > Button으로 버튼 생성하기 (이벤트는 추후 추가할 예정)

 

 

고라니TV 채널 - https://www.youtube.com/@gorani_TV