언리얼 엔진 5 문서가 에픽 디벨로퍼 커뮤니티로 이전되었습니다

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

목적

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

목표

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

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

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

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

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

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

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

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

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

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

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

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 애셋을 엽니다.

   
   

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

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

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

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

9. M_TV_Inst 머티리얼에 TexCoord 를 추가하고 VTiling 을 2.0 으로 설정한 뒤 Texture Sample 의 UVs 핀에 연결합니다.

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

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

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

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

섹션 결과

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

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

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

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

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

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

   
   

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

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

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

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

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

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

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

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

섹션 결과

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

최종 결과

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

4 - 직접 해보기!

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

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

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

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