UI - 최종) 유닛 생성 버튼 개선과 일시정지 UI

- 개요

유닛 생성 버튼을 개선하여 선택한 버튼이 잘 표현되도록 설정한다

또, 일시정지 UI를 추가하여 인게임 UI - 일시정지 UI를 교차하며 사용할 수 있도록 한다

 

- 스크립트 작업

1) 유닛 생성 버튼 개선 관련

1 - 1) UI_BuildBtnHover 클래스

 

유닛 생성 버튼에 적용할 UI_BuildBtnHover 클래스를 생성한다

선택한 유닛 생성 버튼은 위로 상승하고 다른 버튼을 선택하면 상승한 버튼을 하강시킨다

멤버변수는 위와 같다

• adjustSpeed 멤버변수 : 유닛 생성 버튼의 상승/하강 속도
• showcaseY 멤버변수 : 상승한 버튼의 위치
• defaultY 멤버변수 : 기본 버튼의 위치
• targetY 멤버변수 : 버튼이 상승할 위치
• canMove 멤버변수 : 버튼이 위/아래로 이동할 수 있는지 여부

 

 

Update 함수를 통해 유닛 생성 버튼의 현재 위치와 canMove 변수의 값을 판단하여 버튼을 상승 또는 하강 시킨다

 

 

SetTargetY 함수는 생성 버튼이 이동할 위치를 설정한다

ToggleCanMove 함수는 생성 버튼이 이동할 수 있는지 여부에 따라 버튼의 위치를 복구한다

SetDefaultPosition 함수는 생성 버튼의 위치를 복구한다

 

 

 

IPointerEnterHandler 인터페이스와 IPointerExitHandler 인터페이스를 상속받아

생성 버튼에 마우스가 진입하면 상승시키고, 마우스가 퇴장하면 하강시킨다

 

1 - 2) UI_BuildBtns 클래스

 

위와 같이 멤버변수를 추가한다

• openAnimationDuration 멤버변수 : 유닛 생성 버튼의 상하 이동 연출에 대한 시간
• buildButtons 멤버변수 : 유닛 생성 버튼들에 부착된 UI_BuildBtnHover 컴포넌트들
• isBuildMenuActive 멤버변수 : 유닛 생성 버튼들이 상하로 이동할 수 있는지 여부

 

 

Start 함수에서 buildButtons 멤버변수의 값을 설정한다

 

 

ToggleButtonsMovement 함수를 추가하여 유닛 생성 버튼 각각의 상하 이동 여부를 설정한다

 

 

ShowBuildButtons 함수를 추가한다

유닛 생성 버튼들의 상하 이동 여부를 반전시킨 후에 그 값에 따라 유닛 생성 버튼들을 상하로 이동시키고

ToggleButtonsMovement 멤버 함수를 호출하여 유닛 생성 버튼 각각의 상하 이동 여부를 설정한다

 

2) 일시정지 UI 관련

2 - 1) UI_Animator 클래스

 

CoChangeScale 코루틴 함수에서 unscaledDeltaTime 변수를 사용하여

인게임 시간과 무관하게 UI의 크기를 변경할 수 있도록 설정한다

 

2 - 2) UI_Pause 클래스

 

일시정지 UI의 클래스를 추가하고 멤버변수를 구성한다

• pauseElements 멤버변수 : 일시정지 UI의 하위 UI들
• uiCanvas 멤버변수 : 조상 UI의 컴포넌트
• uiInGame 멤버변수 : 인게임 UI의 컴포넌트

 

 

Awake 함수에서는 UIManager에 일시정지 UI를 등록하고 uiCanvas 멤버변수의 값을 설정한다

Start 함수에서는 UIManager에 등록된 인게임 UI를 가져와 uiInGame 멤버변수의 값을 설정한다

 

 

Update 함수를 위와 같이 구성하여 ESC 키가 눌리면 인게임 UI로 전환한다

 

 

OnEnable 함수와 OnDisable 함수를 추가하여

일시정지 UI가 활성화되면 timeScale을 0으로 변경하여 게임을 정지시키고,

비활성화되면 1로 변경하여 게임을 진행한다

 

 

SwitchPauseUIElements 함수를 추가하여 일시정지 UI의 하위 UI 중에서 의도된 한 개의 UI만 활성화한다

 

2 - 3) UI_InGame 클래스

 

인게임 UI에 멤버변수를 추가하여 조상 UI와 일시정지 UI를 사용한다

 

 

Awake 함수와 Start 함수에 로직을 추가하여 추가한 멤버변수의 값을 설정한다

 

 

Update 함수를 추가하여 ESC 키를 누르면 일시정지 UI를 활성화한다

 

- 최종 실행 결과