미디어 프레임워크 퀵스타트

미디어 프레임워크로 게임 레벨 안에 비디오를 빠르게 추가하고 재생하는 방법에 대한 안내입니다.

Windows
MacOS
Linux

MediaFrameworkHero.png

이 가이드를 마칠 즈음이면 옆에 서서 키를 눌러 켜고 끄면 콘텐츠가 재생되는 TV 가 생길 것입니다.

목적

이 안내서의 목적은 레벨 안에서 비디오를 재생할 수 있는 TV 구성 방법을 안내해 드리는 것입니다. 또한 TV 를 버튼을 눌러 켤 수 있도록 블루프린트로 구성합니다. 미디어 프레임워크 변수도 디테일 패널에 노출시켜 TV 에 재생되는 콘텐츠를 빠르게 변경할 수 있도록 합니다. 미디어 프레임워크 툴이 처음이거나 레벨의 스태틱 메시에서 비디오를 재생하는 방법이 궁금하신 분들을 위한 안내서입니다.

이 안내서에는 머티리얼블루프린트 를 사용하여 TV 에서 비디오가 재생되는 효과를 내는 구성 방법이 몇 가지 포함되어 있습니다. 이와 관련해서 있으면 좋은 사전 지식이 있기는 하지만 필수는 아닙니다.

목표

이 안내서에서 얻을 수 있는 지식은 다음과 같습니다:

  • 미디어를 임포트하고 다양한 미디어 소스를 사용하는 방법.

  • 미디어 파일 재생에 사용되는 미디어 텍스처 사용 머티리얼을 만드는 방법.

  • 블루프린트로 미디어 재생을 시작, 중지하는 방법.

  • TV 블루프린트를 만들어 사용할 미디어 소스를 지정하는 방법.

1 - 프로젝트 및 머티리얼 구성

  1. ThirdPerson (삼인칭) 블루프린트 템플릿을 사용해서 새 프로젝트를 만들고 아무 이름이나 짓습니다.

    이미지를 클릭하면 원본을 확인합니다.

  2. 샘플 콘텐츠 압축을 컴퓨터에 풀고 모든 콘텐츠를 엔진에 임포트합니다.

    MediaFrameworkQS_02.png

    선택적으로 새 폴더를 만들어 모든 샘플 콘텐츠를 저장할 수 있습니다. 텍스처 애셋에 따라 머티리얼 이 자동 생성됩니다.

  3. M_TV_Inst 머티리얼에서 Vector Parameter (벡터 파라미터) 노드를 삭제하고, Texture Sample (텍스처 샘플)을 추가한 뒤 Sample Type (샘플 유형)을 External (외부)로 설정합니다.

    MediaFrameworkQS_03.png

  4. Texture Object Parameter (텍스처 오브젝트 파라미터)를 추가하고 이름을 TV_Texture 라 한 뒤 Tex 핀을 통해 Texture Sample (텍스처 샘플)에 연결합니다.

  5. TV_Texture Param Tex Object 에 대해, Texture (텍스처)를 새로운 Media Texture (미디어 텍스처)로 변경하고 MediaPlayer_01_Video 라 합니다.

    이미지를 클릭하면 원본을 확인합니다.

  6. 돋보기 아이콘을 클릭하여 MediaPlayer_01_Video 애셋을 엽니다.

    MediaFrameworkQS_04b.png

  7. Media Player (미디어 플레이어) 드롭다운 메뉴를 클릭하고 미디어 플레이어 애셋을 생성한 뒤 MyMediaPlayer 라 합니다.

    MediaFrameworkQS_04c.png

    미디어 플레이어 생성 팝업 메뉴가 나타나면, 확인 을 클릭합니다. 위 5 단계에서 했으므로 다른 미디어 텍스처 를 만들 필요가 없기 때문입니다.

    MediaFrameworkQS_04d.png

  8. MyMediaPlayer 애셋을 연 다음, Gideon_1080p_H264 파일에 더블클릭하면 비디오 재생이 시작됩니다.

    이미지를 클릭하면 원본을 확인합니다.

  9. M_TV_Inst 머티리얼에 TexCoord 를 추가하고 VTiling2.0 으로 설정한 뒤 Texture SampleUVs 핀에 연결합니다.

    MediaFrameworkQS_05.png

  10. TextureSample 을 또 하나 추가하고 TextureT_TV_M2 애셋으로 설정합니다.

    MediaFrameworkQS_06.png

  11. LinearInterpolate 노드를 추가하고 이전 단계의 TextureGreen 채널을 통해 Alpha 에 연결합니다.

    MediaFrameworkQS_07.png

  12. 나머지 핀을 아래와 같이 연결합니다.

    이미지를 클릭하면 원본을 확인합니다.

섹션 결과

미디어 플레이어 및 연관된 미디어 텍스처 애셋을 사용해서 미디어를 재생하는 머티리얼을 구성했습니다. 콘텐츠 브라우저 에서 TV 메시를 열면, 화면이 검정( 또는 경우에 따라 하양)으로 나타날 수 있습니다.

MediaFrameworkQS_08a.png

미리보려면 미디어 플레이어 애셋을 열고 미디어 소스를 더블클릭합니다. 그러면 미디어가 뷰포트의 스태틱 메시 TV 에 재생됩니다.

이미지를 클릭하면 원본을 확인합니다.

2 - TV 블루프린트 - 컴포넌트 구성

이 단계에서는 TV 스태틱 메시와 나머지 컴포넌트를 사용해서 레벨의 TV 를 작동하게 만드는 블루프린트를 생성합니다.

  1. 콘텐츠 브라우저 에서 신규 추가 버튼을 클릭하고 블루프린트 클래스 를 선택합니다.

    MediaFrameworkQS_010.png

  2. 부모 클래스 선택 메뉴에서 Actor 를 선택하고 이름을 TV_BP 라 합니다.

    MediaFrameworkQS_011.png

  3. TV_BP 애셋에서 컴포넌트 추가 버튼을 클릭하고 Static Mesh (스태틱 메시)를 선택합니다.

    MediaFrameworkQS_012.png

  4. 스태틱 메시디테일 패널에서 SM_TV 를 사용하도록 설정합니다.

    MediaFrameworkQS_013.png

  5. Box Collision (박스 콜리전) 컴포넌트를 추가한 다음 아래와 같이 TV 앞에 오도록 위치와 스케일을 조정합니다.

    이미지를 클릭하면 원본을 확인합니다.

    박스 콜리전을 사용해서 플레이어가 TV 앞에 있을 때 켤 수 있음을 나타냅니다 (뒤에 있을 때는 켤 수 없게 하고 싶습니다).

  6. MediaSound (미디어 사운드) 컴포넌트를 추가하고 디테일 패널에서 Media Player (미디어 플레이어) 프로퍼티에 MyMediaPlayer 애셋을 할당합니다.

    MediaFrameworkQS_015.png

    미디어 플레이어 안에 정의된 미디어 소스 에 연관된 오디오를 재생하는 데 사용됩니다.

  7. 박스 콜리전 에 대한 디테일 패널에서 On Component Begin OverlapOn Component End Overlap 이벤트를 추가합니다.

    MediaFrameworkQS_016.png

섹션 결과

TV 블루프린트가 구성되었으니, 다음에는 스크립트 기능을 추가하여 TV 앞에 서서 키를 눌렀을 때 켤 수 있도록 하겠습니다.

3 - TV 블루프린트 - 스크립트 구성

이 마지막 단계에서는 스크립트 기능을 추가하여 플레이어가 버튼을 누르면 TV 를 켜거나 끌 수 있도록 하겠습니다.

  1. TV 블루프린트의 이벤트 그래프 에서 Get Player Controller, Enable Input, Disable 입력을 아래와 같이 연결합니다.

    이미지를 클릭하면 원본을 확인합니다.

  2. 그래프에 우클릭하고 P Keyboard (또는 원하는 키 눌림) 이벤트를 추가하고 PressedFlipFlop 노드에 연결합니다.

    MediaFrameworkQS_018.png

  3. 그래프에 우클릭하고 컨텍스트에 따라 옵션을 해제한 뒤 Open Source 노드를 추가합니다.

    MediaFrameworkQS_019.png

  4. Open Source 노드에서 타깃 핀에 우클릭하고 변수로 승격 한 뒤 MediaPlayerforVideo 라 합니다.

    MediaFrameworkQS_020.png

    기본적으로 미디어 플레이어는 Play on Open (열리면 재생) 설정되어 있어서 미디어를 열면 재생합니다.

    Play on Open 이 비활성화된 미디어 플레이어의 경우, Play 노드에 Open Source 호출을 사용하면 됩니다.

  5. Media Source (미디어 소스)를 변수로 승격하고 SourceToOpen 라 합니다.

  6. 변수 목록에서 두 변수의 눈 모양 아이콘을 클릭하여 Instance Editable (인스턴스 편집가능)으로 만들고 아래와 같이 연결합니다.

    MediaFrameworkQS_021.png

  7. Close 노드를 추가하고 FlipFlopB 핀에 연결한 뒤 타깃MediaPlayerforVideo 로 설정합니다.

    MediaFrameworkQS_022.png

  8. TV_BP 를 레벨에 드래그한 뒤 디테일 패널에서 MyMediaPlayerGideon_1080p_H264 애셋을 할당합니다.

    MediaFrameworkQS_023.png

    박스 콜리전을 사용해서 플레이어가 TV 앞에 있을 때 켤 수 있음을 나타냅니다 (뒤에 있을 때는 켤 수 없게 하고 싶습니다).

  9. MyMediaPlayer 애셋 안에서 Loop 옵션을 활성화합니다.

    MediaFrameworkQS_024.png

    그러면 닫기 명령을 내리지 않는 한 비디오를 자동으로 반복 재생합니다.

  10. 플레이 버튼을 눌러 레벨에서 플레이합니다.

최종 결과

레벨에서 플레이하고 TV 에 다가간 뒤 P 버튼을 누르면 할당된 미디어 재생이 시작됩니다. P 를 다시 누르면 재생이 멈춥니다.

4 - 직접 해보기!

미디어 프레임워크 툴을 사용해서 프로젝트에 시도해 볼 수있는 추가 작업은 다음과 같습니다.

  • 플레이어가 TV 의 재생을 제어 할 수 있도록 합니다.

  • 미디어 플레이리스트 를 미디어 소스로 사용하여 플레이어가 TV 의 채널을 변경할 수 있도록 합니다.

  • 자체 미디어 플레이어, 미디어 사운드, 미디어 소스 애셋이 있는 두 번째 TV 블루프린트를 레벨에 추가합니다.

Select Skin
Light
Dark

새로운 언리얼 엔진 4 문서 사이트에 오신 것을 환영합니다!

문서 사이트에 대한 의견을 모을 수 있는 피드백 시스템을 포함해서 여러가지 새로운 기능을 준비하고 있습니다. 아래 Documentation Feedback 포럼(영문) 또는 언리얼 엔진 네이버 공식 카페(한글) 중 편하신 곳에 의견이나 문제점을 알려 주세요.

새 시스템이 준비되면 알려 드리겠습니다.

네이버 카페
공식 포럼