이 가이드를 마칠 즈음이면 옆에 서서 키를 눌러 켜고 끄면 콘텐츠가 재생되는 TV 가 생길 것입니다.
목적
이 안내서의 목적은 레벨 안에서 비디오를 재생할 수 있는 TV 구성 방법을 안내해 드리는 것입니다. 또한 TV 를 버튼을 눌러 켤 수 있도록 블루프린트로 구성합니다. 미디어 프레임워크 변수도 디테일 패널에 노출시켜 TV 에 재생되는 콘텐츠를 빠르게 변경할 수 있도록 합니다. 미디어 프레임워크 툴이 처음이거나 레벨의 스태틱 메시에서 비디오를 재생하는 방법이 궁금하신 분들을 위한 안내서입니다.
이 안내서에는 머티리얼 및 블루프린트를 사용하여 TV 에서 비디오가 재생되는 효과를 내는 구성 방법이 몇 가지 포함되어 있습니다. 이와 관련해서 있으면 좋은 사전 지식이 있기는 하지만 필수는 아닙니다.
목표
이 안내서에서 얻을 수 있는 지식은 다음과 같습니다:
- 미디어를 임포트하고 다양한 미디어 소스를 사용하는 방법.
- 미디어 파일 재생에 사용되는 미디어 텍스처 사용 머티리얼을 만드는 방법.
- 블루프린트로 미디어 재생을 시작, 중지하는 방법.
- TV 블루프린트를 만들어 사용할 미디어 소스를 지정하는 방법.
1 - 프로젝트 및 머티리얼 구성
-
ThirdPerson (삼인칭) 블루프린트 템플릿을 사용해서 게임 카테고리에서 사용할 새 프로젝트를 만들고 이름을 지정합니다.
-
이 샘플 콘텐츠 압축을 컴퓨터에 풀고 모든 콘텐츠를 엔진에 임포트합니다.
선택적으로 새 폴더를 만들어 모든 샘플 콘텐츠를 저장할 수 있습니다. 텍스처 에셋에 따라 머티리얼 이 자동 생성됩니다.
-
M_TV_Inst 머티리얼에서 Vector Parameter (벡터 파라미터) 노드를 삭제하고, Texture Sample (텍스처 샘플)을 추가한 뒤 Sample Type (샘플 유형)을 External (외부)로 설정합니다.
-
Texture Object Parameter (텍스처 오브젝트 파라미터)를 추가하고 이름을 TV_Texture 라 한 뒤 Tex 핀을 통해 Texture Sample (텍스처 샘플)에 연결합니다.
-
TV_Texture Param Tex Object 에 대해, Texture (텍스처)를 새로운 Media Texture (미디어 텍스처)로 변경하고 MediaPlayer_01_Video 라 합니다.
이미지를 클릭하면 원본을 확인합니다.
-
돋보기 아이콘을 클릭하여 MediaPlayer_01_Video 에셋을 엽니다.
Electra Media Player 가 포함된 텍스처 샘플이나 텍스처 오브젝트를 사용 중인 경우 샘플러 유형 을 컬러 로 설정하세요.
-
Media Player (미디어 플레이어) 드롭다운 메뉴를 클릭하고 미디어 플레이어 에셋을 생성한 뒤 MyMediaPlayer 라 합니다.
이미지를 클릭하면 원본을 확인합니다.
미디어 플레이어 생성 팝업 메뉴가 나타나면, 확인 을 클릭합니다. 위 5 단계에서 했으므로 다른 미디어 텍스처 를 만들 필요가 없기 때문입니다.
-
MyMediaPlayer 에셋을 연 다음, *Sample Video 파일을 더블클릭하면 비디오 재생이 시작됩니다.
이미지를 클릭하면 원본을 확인합니다.
-
M_TV_Inst 머티리얼에 TexCoord 를 추가하고 VTiling 을 2.0 으로 설정한 뒤 Texture Sample 의 UVs 핀에 연결합니다.
이미지를 클릭하면 원본을 확인합니다.
-
TextureSample 을 또 하나 추가하고 Texture 를 T_TV_M2 에셋으로 설정합니다.
이미지를 클릭하면 원본을 확인합니다.
-
LinearInterpolate 노드를 추가하고 이전 단계의 Texture 를 Green 채널을 통해 Alpha 에 연결합니다.
-
나머지 핀을 아래와 같이 연결합니다.
이미지를 클릭하면 원본을 확인합니다.
섹션 결과
미디어 플레이어 및 연관된 미디어 텍스처 에셋을 사용해서 미디어를 재생하는 머티리얼을 구성했습니다. 콘텐츠 브라우저 에서 TV 메시를 열면, 화면이 검정( 또는 경우에 따라 하양)으로 나타날 수 있습니다.
미리보려면 미디어 플레이어 에셋을 열고 미디어 소스를 더블클릭합니다. 그러면 미디어가 뷰포트의 스태틱 메시 TV 에 재생됩니다.
Click image to expand.
2 - TV 블루프린트 - 컴포넌트 구성
이 단계에서는 TV 스태틱 메시와 나머지 컴포넌트를 사용해서 레벨의 TV 를 작동하게 만드는 블루프린트를 생성합니다.
-
콘텐츠 브라우저 에서 신규 추가 버튼을 클릭하고 블루프린트 클래스 를 선택합니다.
-
부모 클래스 선택 메뉴에서 Actor 를 선택하고 이름을 TV_BP 라 합니다.
-
TV_BP 에셋에서 컴포넌트 추가 버튼을 클릭하고 Static Mesh (스태틱 메시)를 선택합니다.
-
스태틱 메시 의 디테일 패널에서 SM_TV 를 사용하도록 설정합니다.
이미지를 클릭하면 원본을 확인합니다.
-
Box Collision (박스 콜리전) 컴포넌트를 추가한 다음 아래와 같이 TV 앞에 오도록 위치와 스케일을 조정합니다.
이미지를 클릭하면 원본을 확인합니다.
박스 콜리전을 사용해서 플레이어가 TV 앞에 있을 때 켤 수 있음을 나타냅니다 (뒤에 있을 때는 켤 수 없게 하고 싶습니다).
-
MediaSound (미디어 사운드) 컴포넌트를 추가하고 디테일 패널에서 Media Player (미디어 플레이어) 프로퍼티에 MyMediaPlayer 에셋을 할당합니다.
이미지를 클릭하면 원본을 확인합니다.
미디어 플레이어 안에 정의된 미디어 소스 에 연관된 오디오를 재생하는 데 사용됩니다.
-
박스 콜리전 에 대한 디테일 패널에서 On Component Begin Overlap 및 On Component End Overlap 이벤트를 추가합니다.
섹션 결과
TV 블루프린트가 구성되었으니, 다음에는 스크립트 기능을 추가하여 TV 앞에 서서 키를 눌렀을 때 켤 수 있도록 하겠습니다.
3 - TV 블루프린트 - 스크립트 구성
이 마지막 단계에서는 스크립트 기능을 추가하여 플레이어가 버튼을 누르면 TV 를 켜거나 끌 수 있도록 하겠습니다.
-
TV 블루프린트의 이벤트 그래프 에서 Get Player Controller, Enable Input, Disable 입력을 아래와 같이 연결합니다.
이미지를 클릭하면 원본을 확인합니다.
-
그래프에 우클릭하고 P Keyboard (또는 원하는 키 눌림) 이벤트를 추가하고 Pressed 를 FlipFlop 노드에 연결합니다.
-
그래프에 우클릭하고 컨텍스트에 따라 옵션을 해제한 뒤 Open Source 노드를 추가합니다.
-
Open Source 노드에서 타깃 핀에 우클릭하고 변수로 승격 한 뒤 MediaPlayerforVideo 라 합니다. .
기본적으로 미디어 플레이어는 Play on Open (열리면 재생) 설정되어 있어서 미디어를 열면 재생합니다.
Play on Open 이 비활성화된 미디어 플레이어의 경우, Play 노드에 Open Source 호출을 사용하면 됩니다.
-
Media Source (미디어 소스)를 변수로 승격하고 SourceToOpen 라 합니다.
-
변수 목록에서 두 변수의 눈 모양 아이콘을 클릭하여 Instance Editable (인스턴스 편집가능)으로 만들고 아래와 같이 연결합니다.
-
Close 노드를 추가하고 FlipFlop 의 B 핀에 연결한 뒤 타깃 을 MediaPlayerforVideo 로 설정합니다.
-
TV_BP 를 레벨에 드래그한 뒤 디테일 패널에서 MyMediaPlayer 및 Gideon_1080p_H264 에셋을 할당합니다.
이미지를 클릭하면 원본을 확인합니다.
박스 콜리전을 사용해서 플레이어가 TV 앞에 있을 때 켤 수 있음을 나타냅니다 (뒤에 있을 때는 켤 수 없게 하고 싶습니다).
-
MyMediaPlayer 에셋 안에서 Loop 옵션을 활성화합니다.
그러면 닫기 명령을 내리지 않는 한 비디오를 자동으로 반복 재생합니다.
-
플레이 버튼을 눌러 레벨에서 플레이합니다.
최종 결과
레벨에서 플레이하고 TV 에 다가간 뒤 P 버튼을 누르면 할당된 미디어 재생이 시작됩니다. P 를 다시 누르면 재생이 멈춥니다.
4 - 직접 해보기!
미디어 프레임워크 툴을 사용해서 프로젝트에 시도해 볼 수있는 추가 작업은 다음과 같습니다.
- 플레이어가 TV 의 재생을 제어 할 수 있도록 합니다.
- 미디어 플레이리스트 를 미디어 소스로 사용하여 플레이어가 TV 의 채널을 변경할 수 있도록 합니다.
- 자체 미디어 플레이어, 미디어 사운드, 미디어 소스 에셋이 있는 두 번째 TV 블루프린트를 레벨에 추가합니다.
