인게임 구현 - 최종) 플레이어 턴 텍스트 수정 + 승리 애니메이션

- 개요

플레이어의 턴에 따라 턴을 알려주는 텍스트를 수정하고 플레이어가 승리하면 승리 방식에 따라 애니메이션을 재생한다

 

- 클라이언트 사이드

1) UI_WinLine 클래스

 

승리 방식에 따른 선을 그리기 위한 정보를 지니고 있는 LineConfig 클래스를 추가한다

승리 방식마다 4개의 프로퍼티를 각각 설정하여 원하는 방식의 애니메이션을 연출할 수 있다

멤버변수의 구성은 다음과 같다

• X 프로퍼티 : 선의 X 값
• Y 프로퍼티 : 선의 Y 값
• Height 프로퍼티 : 선의 높이값
• ZRotation 프로퍼티 : 선의 회전값

 

UI_WinLine 클래스의 멤버변수

 

UI_WinLine 클래스의 멤버변수는 위와 같다

• _xColor 멤버변수 : X 유저의 승리시에 적용할 색깔
• _yColor 멤버변수 : Y 유저의 승리시에 적용할 색깔
• Image 멤버변수 : 애니메이션에서 사용할 이미지
• _rectTransform 멤버변수 : Canvas에 포함된 이미지를 조정하기 위한 트랜스폼
• _lineConfigs 멤버변수 : 승리 타입과 승리 타입별 애니메이션의 정보를 연결하여 저장한 딕셔너리

 

 

Start 함수의 로직은 위와 같이 구성하였다

_image 멤버변수와 _rectTransform 멤버변수의 값을 설정하고

OnMarkCellHandler의 OnMarkCell 액션에 HandleMarkCell 함수를 바인드한다

이후 InitLineConfigs 함수를 호출하여 _lineConfigs 멤버변수의 값을 설정한다

 

 

OnDestroy 함수의 로직을 위와 같이 구성하여 바인드한 HandleMarkCell 함수를 해제한다

 

 

HandleMarkCell 함수의 로직은 위와 같이 구성하였다

• 보드에 놓여진 마커의 결과가 "승리"인 경우에만 다음의 로직을 수행
  • 이미지 컴포넌트를 활성화
  • _lineConfigs 멤버변수에서 승리타입에 맞는 애니메이션의 정보를 탐색
  • 탐색하여 가져온 정보와 마커를 놓은 플레이어의 이름을 SetupLine 함수에 인자로 사용
  • AnimateLine 코루틴 함수를 호출

 

 

AnimateLine 코루틴 함수의 로직은 위와 같다

애니메이션 작업을 시작하기 전에 0.5초의 딜레이를 주어 자연스러운 느낌을 연출한다

이후 이미지가 완전히 채워지기 전까지 매 프레임마다 조금씩 이미지를 채워준다

 

 

SetupLine 함수의 로직은 위와 같다

인자로 받은 config를 사용하여 승리 타입에 맞는 애니메이션을 연출하기 위해 위치 / 회전 / 크기를 결정하고 

마찬가지로 인자로 받은 playerId를 사용하여 플레이어의 타입을 가져와 색상을 결정한다

 

 

InitLineConfigs 함수의 로직은 위와 같다

각각의 승리 타입에 맞는 애니메이션의 정보를 설정한다

 

2) UI_Game 클래스

 

플레이어의 턴을 알려주는 하위 UI의 트랜스폼을 의미하는 _turn 멤버변수를 추가한다

 

 

Awake 함수에 위의 로직을 추가한다

• 자식 오브젝트 중에서 "Turn" 오브젝트를 찾아 _turn 멤버변수를 설정
• OnMarkCellHandler의 OnMarkCell 액션에 HandleMarkCell 함수를 바인드 

 

 

HandleMarkCell 함수의 로직은 위와 같다

마커를 놓은 결과가 승리 / 무승부라면 얼리리턴하여 더 이상 로직을 진행하지 않는다

그렇지 않은 경우 ShowTurn 코루틴 함수를 호출한다

 

 

ShowTurn 함수의 로직은 위와 같이 구성하여 1초를 기준으로 텍스트를 비활성화 / 활성화한다

 

- 최종 실행 결과

 

로그 결과