언어:
페이지 정보
수준별:
엔진 버전:
언리얼 엔진

이미지 시퀀스 재생

언리얼 엔진

Image Media Source (이미지 미디어 소스) 애셋은 언리얼 엔진 내 미디어 프레임워크 툴의 일부로 이미지 시퀀스를 재생할 수 있는 방편을 제공해 줍니다. 이미지 미디어 소스 애셋은 비디오 링크 대신 이미지 시퀀스 파일 경로를 지정하여 재생한다는 점에서 File Media Source (파일 미디어 소스)와 비슷합니다. 작명 규칙이 중요한데, 이미지 순서대로 따르는 것이 좋습니다. 예를 들어 재생 순서대로 Image_01, Image_02, Image_03 식입니다.

여기서는 이미지 미디어 소스를 적용 및 사용하여 레벨의 스태틱 메시에 이미지 시퀀스를 재생하도록 하겠습니다.

ImageMediaHero.png

단계

여기서는 블루프린트 삼인칭 템플릿시작용 콘텐츠 를 포함시켜 사용하고 있습니다. 이미지 시퀀스가 없는 경우, 이 튜토리얼에 사용된 샘플 이미지 시퀀스 에 우클릭하여 다운로드하면 됩니다.

  1. 콘텐츠 브라우저 에서 소스 패널, then under Content, create a new folder called Movies.

    IMGSequence_01.png

  2. Movies 폴더에 우클릭한 뒤 탐색기에서 표시 를 선택합니다.

    IMGSequence_02.png

    필수는 아니지만, 프로젝트를 패키징할 때 미디어가 제대로 포함되도록 하기 위해 Content/Movies 폴더에 넣을 것을 추천합니다.

  3. Content/Movies 폴더 안에 이미지 시퀀스 상의 이미지를 넣습니다.

    IMGSequence_03.png

    여기서는 Content/Movies 안에 UE4_Images 라는 폴더를 새로 만들고, 그 안에 PNG 이미지를 넣었습니다. lowres 라는 폴더도 하나 만들어 시퀀스 이미지 저해상도 버전을 넣었습니다. 미디어 프레임워크 툴은 (전형적으로) 개발 도중 미디어 소스 프록시를 통해 저해상도 버전의 이미지로 작업을 할 수 있는 방편을 제공하고 있습니다. 이렇게 하면 보다 효율적이라 파일 크기와 이미지 시퀀스가 커다란 경우 작업할 때의 퍼포먼스 이슈를 최소화시키는 데 도움이 됩니다.

  4. 에디터 로 돌아와 언리얼 에디터 4 프로젝트 내 자동 임포트 대화창의 Don't Import (임포트 않음) 버튼을 클릭합니다.

    IMGSequence_03b.png

    프로젝트에 이미지를 임포트하기 보다는, 프로젝트 디렉터리 내 위치에 대한 레퍼런스만 필요합니다.

  5. Content/Movies 폴더에 우클릭하고 Media (미디어) 아래 Img Media Source (이미지 미디어 소스)를 선택한 뒤 MyImageSequence 라 합니다.

    IMGSequence_04.png

  6. 새로운 MyImageSequence 애셋 안에서, Sequence Path (시퀀스 경로) 옆 ... 버튼을 클릭하고 이미지 시퀀스의 첫 이미지를 선택합니다.

    IMGSequence_05.png

  7. Advanced Options (고급 옵션) 펼침 버튼을 눌러 Sequence (시퀀스) 옵션 중 Proxy Override (프록시 오버라이드) 아래 lowres 라 입력합니다.

    IMGSequence_06.png

    여기서는 개발용으로 사용할 저해상도 이미지가 들어있는 lowres 라는 폴더를 가리키고 있습니다. 저해상도 이미지 파일로 작업하면 메모리 요구량이 줄어들어 원본 해상도 파일로 작업을 할 때보다 효율적인 작업이 가능합니다.

    Proxy Override 경로는 원본 해상도 이미지와 같은 디렉터리 구조 내 동일한 이름의 폴더를 가리켜야 찾을 수 있습니다.

  8. Content/Movies 폴더에 우클릭하고 Media (미디어) 아래 Media Player (미디어 플레이어)를 선택합니다.

    IMGSequence_07.png

    미디어 플레이어 애셋은 앞서 만든 이미지 시퀀스를 재생하는 데 사용됩니다.

  9. 미디어 플레이어 생성 창에서 Video output Media Texture asset (비디오 출력 미디어 텍스처 애셋) 옵션을 켠 뒤 OK 버튼을 클릭합니다.

    IMGSequence_08.png

    그러면 이미지 시퀀스 재생에 사용될 미디어 플레이어에 연결된 미디어 텍스처 애셋을 생성하여 자동 할당해 줍니다.

  10. 미디어 플레이어 애셋 이름은 MyPlayer 로 하고 (그러면 미디어 텍스처 이름도 자동으로 지어지니) 더블클릭하여 엽니다.

    IMGSequence_09.png

  11. 미디어 에디터 안의 디테일 패널에서 Loop (반복) 옵션을 켭니다.

    IMGSequence_09b.png

    이 옵션을 커면 미디어 플레이어는 이미지 시퀀스를 무한 반복 재생합니다.

  12. MyImageSequence 애셋에 더블클릭하면 이미지 시퀀스 재생이 시작됩니다.

    IMGSequence_10.png

    이미지 시퀀스가 미디어 에디터 안에서 재생되기 시작하며, Info (정보) 탭을 클릭하면 재생중인 이미지 시퀀스 관련 정보를 확인할 수 있습니다. 우리 예제에서 이미지 시퀀스의 Dimension (치수)가 640 x 360 인 것이 보이는데, 현재 lowres 이미지를 사용하도록 설정했기 때문입니다.

  13. 콘텐츠 브라우저 에서 MyImageSequence 애셋을 열고 Proxy Override (프록시 오버라이드) 부분을 지웁니다.

    IMGSequence_11.png

    그러면 원본 해상도 이미지로 전환되어, 미디어 플레이어 애셋을 열고 이미지 시퀀스를 다시 재생해 보면, Dimension (치수) 값이 다른 것을 볼 수 있습니다.

    IMGSequence_12.png

    플레이어 창 하단의 Image Cache (이미지 캐시) 진행 막대는 메모리에 캐시로 저장된 콘텐츠 양을 (초록은 완전히 준비 및 로드되었음을, 노랑은 현재 로드 중임을, 회색은 로드 예약 상태임을) 나타냅니다. 시스템 하드웨어에 따라, 캐시 양과 표시되는 색은 다를 수 있습니다. 자세한 정보는 미디어 프레임워크 개요 문서의 이미지 미디어 섹션을 참고하세요.

  14. 메인 에디터에서, 모드 패널의 기본 아래 Plane (면)을 끌어 레벨에 놓고 원하는 대로 크기와 위치를 조절합니다.

    IMGSequence_14.png

    트랜스폼 툴 을 사용하여 면의 위치, 회전, 스케일을 원하는 대로 조절할 수 있습니다.

  15. 콘텐츠 브라우저 에서 MyPlayer_Video 미디어 텍스처 애셋을 끌어 레벨의 Plane 위에 놓습니다.

    IMGSequence_14b.png

    그러면 미디어 텍스처를 사용한 머티리얼 을 자동 생성하여 레벨의 면에 적용하고, 여기서 이미지 시퀀스가 재생됩니다.

  16. 메인 툴바에서 블루프린트 - 레벨 블루프린트 열기 를 클릭합니다.

    IMGSequence_15.png

    테스트하기에 앞서, 블루프린트 를 사용하여 게임플레이가 시작되면 이미지 미디어 소스 애셋을 열어 재생을 시작하도록 미디어 플레이어에게 이르도록 하겠습니다.

  17. 내 블루프린트 패널에서 변수를 새로 만들어 이름은 MediaPlayer, 유형은 Media Player Reference 라 하고 MyPlayerMedia Player 로 할당합니다.

    IMGSequence_16.png

    변수를 생성한 뒤 컴파일 버튼을 클릭해야 미디어 플레이어기본 값 할당이 가능할 것입니다.

  18. Ctrl 키를 누르고 MediaPlayer 변수를 끌어 그래프에 놓은 뒤, 우클릭하고 Event Begin Play 노드를 생성합니다.

    IMGSequence_17.png

  19. Media Player 변수를 끌어 놓고 Open Source 노드를 사용하여 Media SourceMyImageSequence 로 설정한 뒤 그림처럼 연결합니다.

    IMGSequence_18.png

  20. 컴파일, 저장 후 메인 에디터의 플레이 버튼을 클릭하여 에디터에서 플레이합니다.

최종 결과

에디터에서 플레이해 보면, 이미지 시퀀스가 레벨의 스태틱 메시에서 반복 재생되기 시작할 것입니다.

이 예제에서는 PNG 파일을 사용했지만, 이미지 미디어 소스 안에서 지원하는 파일 유형 이면 무엇이든 사용 가능합니다.