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

• 주제

>>  VideoPlayer란 무엇인가?

>>  목표 기능 정의

>>  CutsceneManager 스크립트

>>  StreamingAssets 폴더 구성하기

>>  VideoPlayer 주요 메서드

---

• 공부내용

Unity로 WebGL 게임을 개발할 때, 게임 내 이벤트와 동영상을 연동해 플레이어에게 시각적인 전환 효과를 줄 수 있다.

이번 게시글에서는 VideoPlayer 컴포넌트를 활용해 MP4 동영상을 로드하고,

재생 준비를 완료하는 과정까지 다룬다.

 

1. VideoPlayer란 무엇인가?

Unity의 VideoPlayer 컴포넌트는 MP4와 같은 동영상 파일을 쉽게 재생할 수 있도록 지원한다.

특히 WebGL에서도 활용 가능하며, 간단한 설정만으로 게임과 동영상을 자연스럽게 연동할 수 있다.

---

2. 목표 기능 정의

 

• MP4 파일을 게임에 추가하고 로드한다.
• 동영상 재생 준비를 완료하는 메서드를 구현한다.
• 동영상 준비 상태를 확인하는 이벤트를 처리한다.

---

3. CutsceneManager 스크립트

아래는 동영상 로드와 준비 상태를 관리하는 CutsceneManager 클래스다.

using UnityEngine;
using UnityEngine.Video;

public class CutsceneManager : MonoBehaviour
{
    public VideoPlayer cutscenePlayer; // VideoPlayer 컴포넌트 참조
    private bool isCutsceneReady = false; // 동영상 준비 상태 확인

    private void Start()
    {
        cutscenePlayer.prepareCompleted += OnCutsceneReady; // 준비 완료 이벤트
        PrepareCutscene(); // 동영상 준비 시작
    }

    // 동영상 로드 및 준비
    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("동영상 준비 완료!");
    }
}

 

---

4. StreamingAssets 폴더 구성하기

동영상 파일을 WebGL 빌드에 포함하려면, StreamingAssets 폴더를 사용해야 한다.

 

구현 단계

1. Unity 프로젝트 폴더에 StreamingAssets 폴더를 생성한다.
2. 동영상 파일 Scene_Intro.mp4를 해당 폴더에 추가한다.

폴더 구조

UnityProject/
├── Assets/
├── StreamingAssets/
│   └── Scene_Intro.mp4

---

5. VideoPlayer 주요 메서드

 

Prepare()

• 동영상을 미리 로드하며, 준비 완료 시 prepareCompleted 이벤트가 호출된다.
• 준비 완료 여부를 확인하여 재생 가능 상태를 제어할 수 있다.

prepareCompleted 이벤트 처리

• 동영상 준비가 완료되면 호출되는 콜백이다.
• 이를 활용해 플레이어에게 재생 준비 상태를 알리거나 UI를 업데이트할 수 있다.

---

< 정리 >

이번 게시글에서는 동영상을 로드하고 준비 상태를 관리하는 방법을 다뤘다. 다음 게시글(Day 46)에서는 준비된 동영상을 재생하고, 종료 이벤트를 처리하는 방법을 알아보겠다. 🎬