프로젝트 TIGRIS - 튜토리얼과 내레이션 만들기

(Thumbnail)

 

개요

졸업작품으로 진행했던 TIGRIS 프로젝트를 마무리 (돌아가기만 하게끔...) 하는 과정에서, 빠져서는 안 되는 튜토리얼을 구현하게 됐습니다. 단순하게 내레이션을 출력해서 사용자에게 조작을 안내하고, 안내한 해당 조작을 진행하면 다음 튜토리얼로 진행하는 방식으로 작업했습니다. 👀

 

내레이션 튜토리얼 구현 예

 

---

 

매우 간단하게 구현하기

내레이션으로 튜토리얼을 진행하기 위해, 내레이션을 재생하는 NarrationPlayer, 게임의 플로우를 관리하는 GameManager, 그리고 마지막으로 상태 및 내레이션 인덱싱 등의 미리 정의한 상수값들 (Enum으로 분류) 을 가지고 있는 Constants 의 세 클래스를 작성했습니다.

 

Constants 내의 상수들은 아래와 같이 구성하고, NarrationPlayer 내부의 PlayNarration() 함수에서 NarrationState Enum 을 정수형으로 변환해, 해당 인덱스의 내레이션 오디오 클립을 재생하도록 구성했습니다.

이제 GameManager 에서 튜토리얼 진행과정을 관리하며, PlayNarration() 함수를 통해 상황에 맞는 내레이션을 재생해주면 되겠습니다!

 

public static class Constants
{
    public enum GameState { OUTGAME, GAMESTART, TUTORIAL, COMBAT_NORMAL, COMBAT_BOSS, CLEAR, GAMEOVER }

    public enum NarrationState
    {
        Tutorial0_Intro, Tutorial1_Intro, Tutorial2_Speed, Tutorial3_Move, Tutorial4_Booster, Tutorial5_Attack, Tutorial6_End,
        BossAppear, LevelClear
    }
}

// ···

public void PlayNarration(Constants.NarrationState state)
{
    player.PlayOneShot(clips[(int)state]);
}

// ···

 

튜토리얼이 진행되면 GameManager 스크립트 내에서 아래와 같이 코루틴 내부에 내레이션을 재생하는 WaitUntil()과 WaitForSecond() 을 반복하는 식으로 구성된 코드뭉치들로 내레이션을 재생하도록 했습니다.

 

IEnumerator TutorialFlow()
{
    // ···
    
    // #2 : Speed
    narration.PlayNarration(Constants.NarrationState.Tutorial2_Speed);
    Debug.Log("Narration : Speed");
    yield return new WaitForSeconds(4f);
    yield return new WaitUntil(() => Input.GetKeyDown(KeyCode.F));

    // ···
}

 

튜토리얼-내레이션 출력 개발에 많은 시간을 투자하기 어려워서, 최대한 빠르게 구현이 가능한 쪽으로, 이렇게 코드를 작성했습니다. 튜토리얼 시스템을 디테일하게 분리해 처리하지 않고, 뭉뚱그려 처리하니 확실히 가독성이라던가, 유지보수 면에서 힘든 점이 생기긴 하더라고요. 코드 초안을 작성한 뒤 3일 뒤에 추가로 작업했는데, 코드가 잘 안 읽혀서 다시 흝어보았습니다 😂

 

---

 

번외로, 내레이션 음성은 ElevenLabs AI 서비스를 사용해 생성했습니다. 한국에서 나름 유명한 Vrew AI도 사용해 보았지만, ElevenLabs 가 조금 더 자연스럽고, 많은 화자 스타일이 존재해서 더 좋은 결과물이 나오는 것 같습니다. 추가로 효과음도 나름 괜찮게 만들어주더라고요!