Day 46 - WebGL 게임에서 동영상 파일 활용하기 (2부)

• 주제

>>  동영상 재생 기능 구현

>>  동영상 종료 이벤트 처리

>>  UI 연동

>>  GameFlow와 동영상 연동

>>  최종 코드

---

• 공부내용

이전 게시글에서는 CutsceneManager를 통해 동영상을 준비하는 과정을 살펴봤다.

이번에는 준비된 동영상을 재생하고, 게임 UI와 연동하는 기능을 구현한다.

 

1. 동영상 재생 기능 구현

동영상 준비가 완료되면, 이를 PlayCutscene() 메서드를 통해 재생한다.

이 과정에서 Unity UI의 RawImage를 활용해 동영상을 화면에 출력할 수 있다.

public void PlayCutscene()
{
    if (isCutsceneReady) // 동영상 준비 상태 확인
    {
        UIController.Instance.CutsceneDisplay.enabled = true; // UI 활성화
        cutscenePlayer.Play(); // 동영상 재생
        Debug.Log("동영상 재생 시작!");
    }
    else
    {
        Debug.LogWarning("동영상이 아직 준비되지 않았다.");
    }
}

Key Notes

• isCutsceneReady: 동영상 준비 상태를 확인하는 플래그다.
• CutsceneDisplay: RawImage 컴포넌트로, 동영상이 출력될 UI 요소다

---

2. 동영상 종료 이벤트 처리

Unity의 VideoPlayer는 동영상 종료 시 발생하는 loopPointReached 이벤트를 제공한다.

이를 활용해 동영상 종료 후 UI를 숨기거나 다른 게임 로직을 실행할 수 있다.

private void OnCutsceneEnd(VideoPlayer vp)
{
    UIController.Instance.CutsceneDisplay.enabled = false; // UI 비활성화
    Debug.Log("동영상 종료");
}

 

이벤트 연결
Start() 메서드에서 종료 이벤트를 연결한다.

cutscenePlayer.loopPointReached += OnCutsceneEnd;

---

3. UI 연동

동영상은 Unity UI의 RawImage를 사용해 화면에 출력한다.

UIController 클래스는 UI 요소를 관리하며, 싱글턴 패턴으로 설계된다.

using UnityEngine;
using UnityEngine.UI;

public class UIController : MonoBehaviour
{
    public static UIController Instance { get; private set; }
    public RawImage CutsceneDisplay; // 동영상 출력 UI

    private void Awake()
    {
        Instance = this;
    }
}

---

4. GameFlow와 동영상 연동

동영상은 맵 전환 등 특정 이벤트에 의해 실행된다. 이 과정에서 GameFlowManager와 같은 게임 진행 관리 스크립트와 연결하여, PlayCutscene() 메서드를 호출할 수 있다.

 

GameFlowManager에서 동영상 재생 호출

GameFlowManager.Instance.OnStageTransition += PlayCutscene; // 맵 전환 이벤트 연결

---

5. 최종 코드

using UnityEngine;
using UnityEngine.Video;

public class CutsceneManager : MonoBehaviour
{
    public VideoPlayer cutscenePlayer;
    private bool isCutsceneReady = false;

    private void Start()
    {
        cutscenePlayer.prepareCompleted += OnCutsceneReady; // 준비 완료 이벤트
        cutscenePlayer.loopPointReached += OnCutsceneEnd; // 종료 이벤트
        PrepareCutscene();
        UIController.Instance.CutsceneDisplay.enabled = false; // 초기 UI 비활성화
    }

    private void PrepareCutscene()
    {
        cutscenePlayer.url = System.IO.Path.Combine(Application.streamingAssetsPath, "Scene_Intro.mp4");
        cutscenePlayer.Prepare();
    }

    private void OnCutsceneReady(VideoPlayer vp)
    {
        isCutsceneReady = true;
        Debug.Log("동영상 준비 완료!");
    }

    public void PlayCutscene()
    {
        if (isCutsceneReady)
        {
            UIController.Instance.CutsceneDisplay.enabled = true;
            cutscenePlayer.Play();
        }
    }

    private void OnCutsceneEnd(VideoPlayer vp)
    {
        UIController.Instance.CutsceneDisplay.enabled = false;
        Debug.Log("동영상 종료");
    }
}

---

 

<정리>

이번 게시글에서는 동영상 재생, 종료 이벤트 처리, UI 연동을 다뤘다.

다음 게시글(Day 47)에서는 WebGL 환경에서 빌드하고, 최적화 및 디버깅 팁을 공유하겠다. 🚀