UI 디자인: 캐릭터 선택창

[developerasun]

게임 시작 캐릭터 선택화면 UI 추가

• 관련 issues: [To do] Unity/UI : Player UI 디자인 #96 [To do] Unity/View UI: 캐릭터 선택창 #127

UI 레퍼런스

Unity 3D game - Trash Dash: Endless Runner

1차 구현

characters.mp4

[developerasun]

2차 구현

• [BUG] Unity/UI: 캐릭터 선택창 버튼 중복 클릭 #138 bug fix
• UI 디자인, BGM 추가
• 캐릭터 생성 위치 설정
• 캐릭터 이름 표시

characters2.mp4

[jshhhhh]

깔끔하네 ㅋㅋㅋ 기존 씬이랑 연결시키면 될 듯
근데 저 플레이어 모델들 기존 플레이어 모델처럼 애니메이션 어떻게 주지..?🤔

[developerasun]

슬랙에 3D 모델 링크 새로 보내놨으니까 한 번 체크해주세용 - 방법은 1) 애니메이션이 있는 모델로 교체하거나 2) 애니메이션 직접 만들거나 2개일 듯 고민해본다음에 얘기해주세요

[jshhhhh]

새로운 플레이어 모델 캐릭터 선택화면에 배치

#163 에서 제안했던 플레이어 모델 프리팹 배치

• 기존 제작해놓은 플레이어블 캐릭터 프리팹을 그대로 사용하기 위해 불필요한 컴포넌트 끄기

CharacterSelection.cs

void Start()
{
    loadObjects();

    for (int i = 0; i < characters.Length; i++)
    {
        switchCharactersComponents(i, false);
    }
    ...  
}

public void switchCharactersComponents(int _index, bool _bool)
{
    characters[_index].gameObject.GetComponent<Player>().enabled = _bool;
    characters[_index].gameObject.GetComponent<Rigidbody>().isKinematic = _bool;
    characters[_index].gameObject.GetComponent<Rigidbody>().detectCollisions = _bool;
    characters[_index].gameObject.GetComponent<BoxCollider>().enabled = _bool;
}

• 기존 플레이어 프리팹의 회전 애니메이션을 스크립트로 처리
  • spawnPoint를 일정한 주기로 회전시키고 캐릭터가 Lerp로 spawnPoint를 따라 천천히 회전하도록 구현

private void rotateCharacters()
{
    this.transform.rotation = Quaternion.Lerp(this.transform.rotation, spawnPoint.transform.rotation, Time.deltaTime);
}

IEnumerator changeRotateY()
{
    while (true)
    {
        yield return changeCycle;
        rotationY *= -1f;
        spawnPoint.transform.eulerAngles = new Vector3(0, rotationY, 0);
    }
}

void Update()
{
    rotateCharacters();
}

영상

character.select.mp4

[developerasun]

기존에 너무 빠르게 회전한다는 느낌이 있긴 했죠 ㅇㅇ 결과물이 이게 더 나은 듯

[jshhhhh]

캐릭터 선택화면과 플레이 씬 연결

선택한 캐릭터를 플레이 씬에서 플레이할 수 있도록 구현

• GameManager를 싱글톤으로 만들고, CharacterSelection에 있던 StartGame 함수를 GameManager 스크립트로 옮김
  • play 버튼을 누르면 CharacterSelection의 현재 인덱스에 있는 캐릭터의 이름을 저장함

public void StartGame()
{
    selectedCaracterName = characterSelection.characters[characterSelection.currentIndex].name;

    StartCoroutine(resetPlaySceneCoroutine());
}

//플레이어가 죽으면 Player 스크립트에서 호출됨
//씬을 새로 로드하고 스크립트 재탐색
public void resetPlayScene()
{
    StartCoroutine(resetPlaySceneCoroutine());
}

IEnumerator resetPlaySceneCoroutine()
{
    SceneManager.LoadScene(playScene);

    yield return null;

    player = FindObjectOfType<Player>();
    lifeManager = FindObjectOfType<LifeManager>();

    currentLife = TotalLife;
}

• playScene이 로드되면 playScene에 존재하는 Characters의 자식 오브젝트와 GamaManager에 저장되어 있는 캐릭터의 이름을 비교
• 이름이 일치하는 캐릭터의 프리팹 활성화

ActiveCharacters.cs

//logic flow
//1. CharacterSelection에서 선택된 플레이어의 이름을 Game Manager에서 가져옴
//2. 일치하는 자식 오브젝트의 캐릭터 프리팹 활성화(선택한 캐릭터 플레이)
public class ActiveCharacters : MonoBehaviour
{
    [SerializeField] GameObject[] characters;
    [SerializeField] GameManager gameManager;

    //Awake로 우선순위를 제일 높게 잡음
    //여기서 활성화된 Player 프리팹을 기준으로 다른 스크립트에서 FindObjectOfType을 사용하기 때문
    void Awake()
    {
        gameManager = FindObjectOfType<GameManager>();
        characters = new GameObject[this.transform.childCount];

        for (int i = 0; i < characters.Length; i++)
        {
            characters[i] = this.transform.GetChild(i).gameObject;
            if(characters[i].name == gameManager.selectedCaracterName)
            {
                characters[i].SetActive(true);
            }
        }
    }
}

영상

selected.character.play.mp4