UI에 상태 표시

1. 목표

---

플레이어가 점수 획득에 성공했을 때 플레이어의 초상화(캐릭터UI) 화면에 동그라미를 표시할 것이다.

2. 구현

---

우선 현재 플레이 화면을 보면 캐릭터를 투영하는 카메라와 UI가 하나의 texture로 연결되어있다.

이제 여기서 Test 플레이어가 점수를 획득했을때 캐릭터를 보여주는 화면에도 체크(동그라미) 표시를 해 줄 예정이다.

플레이어가 점수를 획득하는 함수가 실행될때 실행시켜줄 함수를 만들면 될 것 같다고 생각했다.

그렇게 ChangeStateUI() 를 구성해봤다.

void ChangeStateUI(int _playerId)
{
    switch (_playerId)
    {
        case 0:
			// 1. RawImage의 texture에 불러온 texture를 입힌다.
            player1StateMask.texture = Resources.Load<Texture>("State/check");
			// 2. 비활성화 되어있는 UI를 활성화한다.
            player1StateMask.gameObject.SetActive(true);
			// 3. UI를 다시 비활성화 하는 코루틴을 실행한다.
            StartCoroutine(DestroyCheckImage(stateDisplayTime));
            break;
    }
}

코드를 설명하자면 우선 ChangeStateUI는 플레이어ID를 매개변수로 받는다.

플레이어 마다 연결될 RawImage가 다르기 때문에 플레이어ID를 받아서 switch문으로 활성화 될 이미지를 선택할 수 있게 만들었다.

플레이어ID를 잘 받았다면 연결된 RawImage의 Texture를 Resource.Load(”경로”)를 이용해서 “경로”에 저장된 이미지로 바꾼다.
(”Resources/State/check” 파일을 불러온 것)

이후 비활성화 되어있던 RawImage를 활성화하고, 특정 시간이 지나면 비활성화 시켜준다.

특정시간이 지나면 없애주기위해 코루틴을 사용했다.

아래는 코루틴 함수

IEnumerator DestroyCheckImage(float delay)
{
		// delay가 지나면 실행.
    yield return new WaitForSeconds(delay);
		
		// RawImage의 Texture를 없애고 비활성화한다.
    player1StateMask.texture = null;
    player1StateMask.gameObject.SetActive(false);
}

이렇게 원하는 기능을 구현했다고 생각했다.

아래는 테스트 영상.

플레이 해보니 확인 마크가 캐릭터 뒤에 나타난다.

UI 오브젝트는 순서가 아래일수록 먼저 렌더링되기 때문에 오브젝트의 위치를 수정했다.


↓ 최종 수정된 플레이 영상