버추얼 카메라 컴포넌트 퀵스타트

버추얼 카메라 컴포넌트는 언리얼 엔진에서 커스텀 버추얼 카메라를 빌드하는 토대를 제공하는 베이스 아키텍처입니다.

목차

개요

버추얼 카메라 컴포넌트(VCam Component) 는 언리얼 엔진 에서의 커스텀 버추얼 카메라 빌드를 지원하는 베이스 컴포넌트입니다.

버추얼 카메라 컴포넌트를 사용하면 커스텀 모디파이어(Modifier) 와 출력 제공자(Output Provider) 를 추가하여 언리얼 엔진 내에서 시네 카메라(Cine Camera) 를 구동할 수 있습니다.

목표

이 퀵스타트 가이드는 버추얼 카메라 컴포넌트를 사용하여 버추얼 카메라를 생성하는 작업의 기본 단계를 살펴볼 수 있도록 디자인되었습니다.

학습 목표

이 가이드에서는 다음과 같은 내용을 학습합니다.

  • 씬에 카메라를 배치하고 버추얼 카메라 컴포넌트를 추가하는 방법

  • 카메라에 모디파이어를 추가하여 비헤이비어를 커스터마이징하는 방법

  • 모디파이어를 활성화하거나 비활성화하는 기본 키 입력을 추가하는 방법

  • 다양한 출력 제공자를 사용하는 방법

  • 연결 포인트를 사용하여 입력 액션을 모디파이어에서 위젯으로 전달하는 방법

  • 다양한 상황에서 버튼을 재사용할 수 있도록 버튼을 커스터마이징하는 방법

1 - 필수 구성

시작하기 전에 프로젝트 내에서 적합한 플러그인을 활성화해야 합니다.

  1. 세팅(Settings) > 플러그인(Plugins) 을 클릭하여 플러그인 메뉴를 엽니다.

  2. 버추얼 카메라(Virtual Camera) 플러그인을 찾아 활성화 합니다.

  3. 에디터를 재시작합니다.

섹션 결과

이제 버추얼 카메라를 생성할 준비가 되었습니다.

2 - 버추얼 카메라 생성

버추얼 카메라 컴포넌트는 시네 카메라 컴포넌트(Cine Camera Component)를 포함하는 모든 액터와 함께 작동합니다. 이 예시에서는 편의상 시네 카메라 액터(Cine Camera Actor)를 사용합니다.

  1. 액터 배치(Place Actors) 패널에서 시네마틱(Cinematic) 카테고리를 선택하고 시네 카메라 액터 를 클릭하여 씬으로 드래그합니다.

  2. 시네 카메라 액터가 선택되어 있는 상태로 디테일(Details) 패널에서 카메라 컴포넌트(CameraComponent) 를 선택합니다.

  3. 컴포넌트 추가(Add Component) 버튼을 클릭하고 VCam 컴포넌트를 검색하여 추가합니다. 'VCam' 컴포넌트는 'CameraComponent'의 자손입니다.

  4. 카메라 액터(Camera Actor) 를 선택하고 컴포넌트 계층구조에서 VCam 컴포넌트를 선택합니다.

  5. 이제 버추얼 카메라 섹션 아래에서 프로퍼티를 사용할 수 있습니다.

프로퍼티는 다음과 같습니다.

프로퍼티

설명

활성화됨(Enabled)

전체 버추얼 카메라 컴포넌트의 활성화 및 비활성화를 토글합니다.

라이브 링크 서브젝트(Live Link Subject)

라이브 링크 플러그인을 통해 사용되는 서브젝트입니다. 이 컴포넌트는 서브젝트의 카메라 정보를 사용하여 씬에서 카메라를 구동합니다.

뷰포트를 카메라에 잠금(Lock Viewport to Camera)

뷰포트는 버추얼 카메라의 시점에서 렌더링됩니다.

시퀀서에 의해 스폰된 경우 컴포넌트 비활성화(Disable Component when Spawned by Sequencer)

시퀀스에 의해 스폰된 경우 버추얼 카메라 컴포넌트를 비활성화합니다. '스포너블(Spawnable)'로 설정된 VCam 컴포넌트가 포함되어 있는 시퀀스를 재생하는 경우 VCam 컴포넌트 두 개가 동시에 활성화될 수 있는 상황을 방지해 줍니다.

타깃 뷰포트(Target Viewport)

컴포넌트가 해당 뷰를 렌더링할 때 사용되는 에디터 뷰포트입니다.

출력 제공자

모든 출력 디바이스 대상의 목록을 포함합니다.

모디파이어 컨텍스트(Modifier Context)

모든 모디파이어 간에 공유되는 임의의 데이터를 포함하는 선택적인 오브젝트입니다.

모디파이어 스택(Modifier Stack)

컴포넌트에 추가된 모든 모디파이어의 목록을 포함합니다.

섹션 결과

시네 카메라 액터를 씬에 배치하고 버추얼 카메라 컴포넌트를 추가했습니다. 이제 모디파이어 를 추가하여 카메라를 커스터마이징할 준비가 되었습니다.

3 - 모디파이어 추가

모디파이어 는 커스텀 이펙트 및 행동을 구현하기 위해 버추얼 카메라에 추가할 수 있는 특수한 블루프린트 클래스입니다. 모디파이어를 사용하면 버추얼 카메라로 카메라 셰이크, 초점 조정, 노출 변경 등 실제 카메라 행동을 시뮬레이션할 수 있습니다. 모디파이어를 생성하려면 블루프린트 또는 C++ 를 사용하면 됩니다.

여러 개의 모디파이어를 고유한 버추얼 카메라 렌더 스택 에 추가하여 프로젝트의 버추얼 카메라에 이펙트나 행동을 적용할 수 있습니다. 이 스택은 모디파이어를 위에서 아래 순서로 적용하고 렌더링합니다.

모디파이어 생성

새로운 VCam 모디파이어 블루프린트를 생성하려면 다음 단계를 따릅니다.

  1. '콘텐츠 브라우저(Content Browser)'에서 (+) 추가(Add) 를 클릭하고 VCam > VCam 모디파이어(VCam Modifier) 를 선택합니다.

    Create a VCam modifier via the Content Browser.

  2. 입력 매핑 컨텍스트를 추가하라는 메시지가 언리얼 에디터에 표시됩니다. 향상된 입력을 통해 모디파이어가 입력을 지원하게 하려면 입력 매핑 컨텍스트를 추가해야 합니다. 향상된 입력을 사용하지 않는 경우 입력 매핑 컨텍스트 추가는 건너뛰어도 됩니다.

    The prompt for adding an input mapping context, which is required for using enhanced input.

  3. 블루프린트의 이름을 VCM_LookAt 으로 지정하고 해당 블루프린트를 더블클릭하여 엽니다.

    Blueprint named VCM_LookAt visible in the Content Browser.

액터 레퍼런스 변수 설정

모디파이어 블루프린트에서는 버추얼 카메라가 트래킹하는 서브젝트를 레퍼런스하는 액터 레퍼런스 변수 를 정의해야 합니다.

블루프린트에서 액터 레퍼런스 변수를 설정하려면 다음 단계를 따릅니다.

  1. 내 블루프린트(My Blueprint) 탭에서 변수(Variables) 옆의 더하기(+) 기호를 클릭하여 새 TargetActor 변수를 추가합니다.

    Adding a new TargetActor variable by clicking the right-hand plus sign.

  2. 컨텍스트 메뉴에서 변수 타입을 선택하고 오브젝트 타입(Object Types) > 액터(Actor) > 오브젝트 레퍼런스(Object Reference) 로 이동하여 TargetActor 변수의 타입을 액터 오브젝트 레퍼런스(Actor Object Reference) 로 변경합니다.

    The pathway to set the actor type to be Object Reference.

  3. 변수의 디테일 패널에서 인스턴스 편집 가능(Instance Editable) 프로퍼티를 활성화합니다.

    Enabling the actor variable to be edited.

  4. 모디파이어 블루프린트를 저장(Save) 하고 컴파일(Compile) 합니다.

블루프린트 로직 생성

레퍼런스 변수를 생성하고 나면 이제 모디파이어 블루프린트 로직을 빌드할 수 있습니다.

블루프린트 로직을 생성하려면 다음 단계를 따릅니다.

  1. 모디파이어 블루프린트에서 TargetActor 변수를 이벤트 그래프(Event Graph) 로 드래그하고 컨텍스트 메뉴에서 Get TargetActor 옵션을 선택합니다.

    Drag the TargetActor variable into the Event Graph to create an instance of the variable.

  2. Is Valid 노드를 생성하고 타깃 액터 변수(Target Actor Variables) 출력 핀에 연결합니다.

    Creating and connecting an Is Valid node.

  3. 실행 핀을 사용하여 그래프의 Event on Apply 노드를 Is Valid 노드에 연결합니다.

  4. Event On Apply 노드의 카메라 컴포넌트(Camera Component) 핀에서 Get World Location 노드를 생성하고 연결합니다.

    Creating and connecting a Get World Location node.

  5. Target Actor 노드에서 Get Actor Location 노드를 생성하고 연결합니다.

    Connecting a Get Actor Location node to the Target Actor.

  6. Find Look at Rotation 노드를 생성하고, 이 노드를 Get World Location 노드의 반환 값(Return Value) 핀에 연결합니다.

    Connecting a Find Look at Rotation node to the return value of the Get World Location node.

  7. Get Actor Location 의 반환 값 핀을 Find Look at Rotation 의 타깃(Target) 핀에 연결합니다.

    Connecting the Get Actor Location and Find Look at Rotation nodes.

  8. Event On Apply 노드의 카메라 컴포넌트 핀에서 드래그하여 Set World Rotation 을 찾아 선택합니다.

    Connecting a Set World Rotatin node to the Camera Component pin for the Event On Apply node.

  9. Is Valid 노드의 유효함(Is Valid) 핀을 Set World Rotation 에 연결합니다. Get Actor Location 의 반환 값 핀을 Set World Rotation 의 새 회전(New Rotation) 핀에 연결합니다.

    Connecting the nodes to complete the Blueprint logic.

  10. 블루프린트를 저장 하고 컴파일(Compile) 합니다.

서브젝트 추가

씬에는 카메라가 트래킹할 서브젝트 오브젝트가 있어야 합니다. 이 예시에서는 단순한 스피어 스태틱 메시 오브젝트를 사용합니다.

서브젝트를 추가하려면 다음 단계를 따릅니다.

  • 액터 배치 탭에서 기본 게임 오브젝트를 이 레벨로 드래그하여 뷰포트 에 드롭합니다.

    Add a subject into the Viewport for your virtual camera to track.

스택에 모디파이어 추가

이제 모디파이어 스택 에 커스텀 모디파이어를 추가할 준비가 되었습니다.

  1. VCamActor를 선택하고 컴포넌트 계층구조 내에서 VCam 컴포넌트를 선택한 후 모디파이어 스택 으로 이동하여 더하기(+) 기호를 클릭합니다.

    Adding a new modifier stack on the VCam Actor.

  2. 모디파이어의 이름(예: LookAt)을 입력합니다. 이름을 추가하면 나중에 블루프린트에서 이 모디파이어를 레퍼런스할 수 있습니다.

    Name your modifier so you can reference it in Blueprints later.

  3. 생성된 모디파이어(Generated Modifier) 의 드롭다운 화살표 를 클릭하여 목록에서 VCM_LookAt 을 선택합니다.

    Selecting your modifier.

  4. 모디파이어 의 디폴트(Default) 섹션을 펼치고 타깃 액터(Target Actor) 드롭다운을 클릭합니다. 레벨에 추가한 스피어 액터를 선택합니다.

    Selecting your target actor.

  5. 프로젝트를 저장 하고 컴파일 합니다.

이제 VCam을 활성화하고 뷰포트에서 타깃 게임 오브젝트를 움직일 수 있습니다. 카메라가 회전하여 오브젝트를 트래킹합니다.

모디파이어 행동 변경

이제 카메라가 선택한 타깃 액터를 항상 따라다닙니다. 모디파이어에 행동을 추가하면 블루프린트를 사용하여 이 행동의 토글을 켜거나 끌 수 있습니다.

토글하여 켜거나 끄는 기능을 추가하려면 다음 단계를 따릅니다.

  1. Event On Apply 노드에서 카메라 컴포넌트(Camera Component) 를 우클릭하고 변수로 승격(Promote to Variable) 을 선택합니다.

    Promoting the Camera Component to a Variable.

  2. 디테일 패널에서 고급(Advanced) 드롭다운을 클릭하고 카메라 컴포넌트 변수(Camera Component Variable) 를 찾은 다음 트랜션트(Transient) 를 체크합니다.

    Making the Camera Component Variable transient.

  3. 이 변수를 클릭한 상태에서 블루프린트 창으로 드래그하고 Set Camera Component 를 클릭한 후 Event on Apply 실행 핀에 연결합니다.

  4. 내 블루프린트(My Blueprint) 탭에서 변수 옆의 더하기(+) 기호를 클릭하여 새 ShouldLookAt 부울 변수를 추가합니다. 이 변수를 블루프린트 창으로 드래그고 Get ShouldLookAt 을 선택합니다.

  5. ShouldLookAt 변수에서 드래그하여 Branch 를 선택합니다. 이렇게 하면 이 부울을 사용하여 카메라의 룩앳 행동을 켜거나 끌 수 있습니다.

    Selecting Branch from the ShouldLookAt variable.

  6. 이 Branch 를 Set Camera Component 뒤에 연결하고 True 를 IsValid 에 어태치합니다.

    Connecting your branch and making it valid.

  7. 내 블루프린트 변수 창에서 카메라 컴포넌트 변수를 드래그하고 Get Camera Component 를 선택합니다.

    Selecting Get Camera Component.

  8. 카메라 컴포넌트 에서 드래그하여 Get World Rotation 을 찾아 선택합니다.

    Searching for Get World Rotation.

  9. 카메라 컴포넌트 에서 다시 한 번 드래그하여 Set World Rotation 을 찾습니다. Get World Rotation 을 Set World Rotation 에 연결합니다.

    Connecting Get World Rotation and Set World Rotation.

  10. 앞에서 생성한 Branch 의 False 핀을 Set World Rotation 에 연결합니다.

    Connecting the False pin from your branch to Set World Rotation.

  11. 블루프린트를 저장 하고 컴파일 합니다. 이제 ShouldLookAt 부울로 VCam 컴포넌트의 룩앳 행동을 켜거나 끌 수 있습니다.

다음 섹션에서는 향상된 입력을 사용하는 방법을 살펴보고, 키를 한 번만 사용하여 부울을 제어하여 룩앳 행동을 즉시 켜거나 끌 수 있습니다.

섹션 결과

이 섹션에서는 블루프린트를 사용하여 커스텀 카메라 모디파이어를 생성하는 방법을 알아보았습니다.

또한 커스텀 모디파이어를 모디파이어 스택 에 추가하여 에디터 내에서 버추얼 카메라를 조작하는 방법에 대해서도 살펴봤습니다.

4 - (선택 사항) 향상된 입력 사용하기

VCam 모디파이어 는 향상된 입력 액션(Enhanced Input Actions) 을 사용하여 추가적인 제어 기능을 제공할 수 있습니다.

아래에는 이 시스템을 사용하여 모디파이어에 새로운 기능을 추가하는 방법이 나와 있습니다.

목표

이 섹션의 목표는 키 하나로 이펙트를 활성화하거나 비활성화할 수 있도록 모디파이어에 입력 액션 을 추가하는 것입니다.

입력 이벤트 생성

입력 이벤트를 생성하려면 다음 단계를 따릅니다.

  1. '콘텐츠 브라우저'에서 (+) 추가 > 입력(Input) > 입력 액션(Input Action) 을 선택합니다. IA_ToggleActivation 입력의 이름을 짓고 해당 입력을 더블클릭하여 엽니다.

    Create an input action from the Content Browser.

  2. 입력 매핑 컨텍스트 에셋을 추가하려면 콘텐츠 브라우저 에서 우클릭하고 입력 > 입력 매핑 컨텍스트(Input Mapping Context) 를 선택합니다.

  3. IMC_LookAt 에셋의 이름을 짓고 해당 에셋을 더블클릭하여 엽니다.

  4. 새 매핑 을 추가하려면 더하기(+) 를 누릅니다. 입력 액션 에서 IA_ToggleActivation 을 선택합니다.

    Selecting toggle activation under Mappings.

  5. 입력 액션을 활성화하려면 S 를 디폴트 키로 설정합니다.

    Setting S as a default key for the input action.

  6. Is Player Mappable 프로퍼티를 활성화하고 이름을 IA_ToggleActivation 으로 설정합니다.

    Enabling the Is Player Mappable property.

  7. 콘텐츠 브라우저 에서 VCM_LookAt 블루프린트를 더블클릭하여 엽니다.

  8. 클래스 디폴트(Class Defaults) 를 선택하고 IMC_LookAt 을 입력 매핑 컨텍스트 에 추가합니다.

    Adding IMC_LookAt to the Input Mapping Context.

  9. 이벤트 그래프 를 우클릭하고 향상된 액션 이벤트(Enhanced Action Events) 에서 ToggleActivation 을 찾아 선택합니다.

    Searching for toggle activation under Enhanced Action Events.

  10. ShouldLookAt 부울을 블루프린트 창 으로 드래그하고 Get ShouldLookAt 을 선택합니다.

    Selecting Get ShouldLookAt.

  11. ShouldLookAt 부울에서 드래그하여 Branch 를 찾아 선택합니다.

    Searching for Branch from the ShouldLookAt boolean.

  12. EnhancedInputAction ToggleActivation 노드에서 트리거됨(Triggered) 핀을 Branch 에 연결합니다.

    Connecting the triggered pin to the Branch.

  13. ShouldLookAt 부울을 블루프린트 창 으로 드래그하고 Set ShouldLookAt 을 선택합니다.

    Selecting Set ShouldLookAt for the ShouldLookAt boolean.

  14. Set ShouldLookAt 을 True 핀에 어태치하고 Set ShouldLookAt 노드의 체크박스가 체크되어 있지 않도록 합니다.

    Attaching Set ShouldLookAt and making it True.

  15. 위 단계를 반복하여 두 번째 Set ShouldLookAt 노드를 추가하고 이 노드를 False 에 연결합니다. 이 Set ShouldLookAt 노드의 체크박스는 체크되어 있도록 합니다.

    Adding a second Set Should LookAt node, connected to False.

    Graph showing two nodes, one false and one true.

  16. 블루프린트를 저장 하고 컴파일 합니다. 아래의 이미지와 같은 화면이 나타나야 합니다.

    The resulting Blueprint, after following all the steps above.

  17. 씬으로 돌아가 스피어 액터를 이동하면서 S 키를 누르면 이펙트를 토글할 수 있습니다.

    버추얼 카메라 입력 시스템은 카메라 사용자가 키를 누를 때마다 실행되며, 뷰포트의 초점이 맞지 않는 경우에도 마찬가지입니다. 이로 인해 사용자가 다른 용도로 동일한 키를 눌렀을 때 충돌이 발생할 수도 있습니다. 예를 들어 사용자가 콘텐츠 브라우저 에서 에셋의 이름을 변경하고 S 키를 누르면 이로 인해 이벤트가 실행됩니다.

  18. (선택 사항) ToggleActivation 에 사용한 키를 다시 바인딩하려면 IMC_LookAt 에서 디폴트 키를 변경하면 됩니다.

  19. 이제 S 키로 활성화를 토글할 때만 카메라 LookAt 행동이 실행됩니다.

섹션 결과

이 섹션에서는 S 키를 눌렀을 때 실행되는 입력 이벤트를 추가했습니다. 이 이벤트는 모디파이어의 이펙트를 활성화 및 비활성화할 수 있습니다.

5 - 출력 제공자 추가

출력 제공자(Output Provider) 시스템은 뷰포트, 원격 세션 프로토콜을 사용하는 디바이스, 컴포셔 플러그인 및 다양하게 지원되는 비디오 캡처 카드 등 여러 제공자에 버추얼 카메라의 출력을 라우팅합니다.

사용 가능한 출력 제공자의 목록은 아래에 나와 있습니다. 필요한 출력 제공자를 추가하는 방법과 관련한 지침을 확인하려면 관련 제공자의 이름을 클릭합니다.

  • 뷰포트 출력 제공자(Viewport Output Provider)

  • 픽셀 스트리밍 출력 제공자(Pixel Streaming Output Provider)

  • 언리얼 원격 출력 제공자(Unreal Remote Output Provider)

  • 미디어 출력 제공자(Media Output Provider)

  • 컴포셔 출력 제공자(Composure Output Provider)

뷰포트 출력 제공자

뷰포트 출력 제공자 는 버추얼 카메라의 뷰를 에디터의 메인 뷰포트에 직접 출력합니다.

  1. VCam 컴포넌트를 선택하고 출력 제공자 옆의 + 기호를 클릭하면 목록에 새 제공자를 추가할 수 있습니다.

    Adding a new Output Provider.

  2. 목록에서 뷰포트 출력 제공자 옵션을 선택합니다.

    Selecting Viewport Output Provider from the list.

  3. 이제 아래 표에 나와 있는 대로 다양한 제공자 간에 공유되는 프로퍼티를 확인할 수 있습니다. 예를 들어 UMG 오버레이(UMG Overlay) 드롭다운을 클릭하고 TestUMG 를 찾아 테스트 위젯 을 뷰포트에 추가할 수 있습니다.

    프로퍼티

    설명

    활성 여부(Is Active)

    제공자를 활성화 및 비활성화합니다.

    UMG 오버레이

    UMG 위젯이 이미지 출력 위에 오버레이됩니다.

    오버라이드 해상도 사용(Use Override Resolution)

    출력 이미지의 커스텀 해상도를 설정합니다. 해상도가 고정된 외부 디바이스를 사용할 때 특히 편리합니다.

    오버라이드 해상도(Override Resolution)

    출력 이미지에 사용되는 고정 해상도입니다.

  4. 마지막으로, 체크박스를 클릭하여 출력 제공자 를 활성(Active) 으로 설정합니다.

    Setting Is Active to True on the Output Provider.

    이제 씬에서 메인 뷰포트에 적용된 오버레이가 보여야 합니다. 이는 특정 요건에 맞게 카메라 출력을 커스터마이징하는 방법의 예시입니다.

    Example of seeing an overlay of the main viewport in your scene.

픽셀 스트리밍 출력 제공자

픽셀 스트리밍 출력 제공자 는 VCam의 메인 출력 제공자입니다. 이 제공자는 Live Link VCam 앱 등 WebRTC로 연결된 원격 디바이스에 메인 에디터 뷰포트를 출력합니다. 이 방식(웹 브라우저 포함)으로 연결된 호환 디바이스는 어떤 것이든 사용할 수 있습니다.

픽셀 스트리밍은 픽셀 스트리밍 출력 제공자 의 인스턴스에서 완전하게 환경설정할 수 있으며 추가로 구성할 필요가 없습니다. 단, VCam은 하나의 스트림만지원합니다.

원격 세션을 사용한 iOS 디바이스 구성

App Store에서 ARKit 가 활성화된 iOS 디바이스에 Live Link VCAM 앱 을 다운로드하고 앱을 실행합니다.

The Live Link VCam app displayed on an ARKit enabled iPad.

디바이스 연결

  1. 버추얼 카메라 액터에서 VCam 컴포넌트를 선택하고 출력 제공자 드롭다운 목록에서 픽셀 스트리밍 제공자 를 선택합니다.

    Selecting Pixel Streaming Provider from the Output Provider dropdown.

  2. 출력 제공자를 변경한 후 새로 선택된 출력 제공자에서 활성 여부 가 체크되어 있는지 확인합니다. ![i

    Making sure that the Is Active checkbox is enabled.

  3. 디바이스에서 Live Link VCam 앱을 실행합니다. 연결하려면 컴퓨터의 IP 주소를 입력하고 연결(Connect) 을 탭합니다.

  4. 이제 디바이스 화면에 메인 에디터 뷰포트가 미러링되는 것을 확인할 수 있습니다.

언리얼 원격 출력 제공자

언리얼 원격 출력 제공자 는 Live Link VCam 앱 같은 원격 세션 프로토콜을 사용하여 연결된 원격 디바이스에 메인 에디터 뷰포트를 출력합니다. 이 방식으로 연결된 호환 디바이스는 어떤 것이든 사용할 수 있습니다.

이 출력 제공자를 사용하려면 프로젝트를 환경설정하여 원격 세션을 사용하는 외부 디바이스에 연결해야 합니다.

  1. 세팅 > 프로젝트 세팅(Project Settings) 을 엽니다.

  2. 플러그인 카테고리에서 UDP 메시지(UDP Message) 섹션으로 이동한 후 유니캐스트 엔드포인트(Unicast Endpoint) 를 컴퓨터의 IP 주소로 설정합니다. 이때 IP 주소 끝에 붙어 있는 :0 은 포트 번호를 나타냅니다.

    Setting your Unicast Endpoint to your computer's IP address.

  3. 엔진(Engine) 카테고리에서 렌더링(Rendering) 섹션으로 이동한 후 디폴트 세팅(Default Settings) 에서 화살표를 클릭하여 '고급(Advanced)' 세팅을 펼칩니다. 프레임 버퍼 픽셀 포맷(Frame Buffer Pixel Format) 을 8비트 RGBA(8bit RGBA) 로 설정합니다.

  4. 에디터를 재시작합니다.

원격 세션을 사용한 iOS 디바이스 구성

App Store에서 ARKit 가 활성화된 iOS 디바이스에 Live Link VCam 앱 을 다운로드하고 앱을 실행합니다.

디바이스 연결

  1. 버추얼 카메라 액터에서 VCam 컴포넌트를 선택하고 출력 제공자 드롭다운 목록에서 '언리얼 원격 출력 제공자 를 선택합니다. 선택된 출력 제공자에서 활성 여부 가 체크되어 있도록 합니다.

    Selecting the relevant settings for your Output Provider.

  2. 디바이스에서 Live Link VCam 앱을 실행합니다. 톱니바퀴 모양의 아이콘을 선택하고 연결 타입(Connection Type) 을 원격 세션(Remote Session) 으로 변경합니다.

    Changing the connection type to Remote connection.

  3. 연결하려면 컴퓨터의 IP 주소를 입력하고 연결 을 탭합니다.

  4. 이제 디바이스 화면에 메인 에디터 뷰포트가 미러링되는 것을 확인할 수 있습니다.

    Seeing the main editor viewport on your device.

미디어 출력 제공자

미디어 출력 제공자 는 Black Magic이나 AJA의 비디오 캡처 카드처럼 언리얼 미디어 프레임워크에서 지원되는 모든 디바이스에 버추얼 카메라의 출력을 전송합니다.

선택한 경우, 출력 환경설정(Output Config) 을 사용하여 출력 파라미터를 지정할 수 있습니다.

Using Output Config to change the media provider.

언리얼 미디어 프레임워크의 자세한 사용 방법은 미디어 프레임워크 문서를 참고하세요.

컴포셔 출력 제공자

컴포셔 출력 제공자 는 컴포셔 플러그인](working-with-media\integrating-media\Composure)에서 직접 사용될 수 있는 렌더 타깃으로 버추얼 카메라의 출력을 전송합니다. 또한 카메라 뷰가 렌더링될 컴포셔 레이어 타깃(Composure Layer Target) 을 지정할 수 있습니다.

Composure output provider.

섹션 결과

이 섹션에서는 버추얼 카메라 컴포넌트에 다양한 출력 제공자를 추가하는 방법에 대해 살펴봤습니다. 이제 버추얼 카메라를 사용하여 에디터 뷰포트나 픽셀 스트리밍 및 원격 세션 프로토콜을 사용하는 외부 디바이스에 직접 출력할 수 있습니다.

또한 출력을 전송하여 미디어 프레임워크 및 컴포셔 플러그인으로 처리하는 방법도 알아봤습니다.

6 - (선택 사항) 연결 포인트를 사용하여 입력 액션을 모디파이어에서 위젯으로 전달하기

모디파이어 연결 포인트를 사용하는 것은 실험 단계 기능입니다.

이전 섹션에서는 모디파이어에서 입력 액션을 생성하고 이를 하드웨어 입력으로 매핑하는 방법을 살펴봤습니다. 향상된 입력은 하드웨어 입력의 개념을 핵심으로 삼아 개발된 것이지만, 버추얼 카메라에서 입력 주입 및 VCam 연결 포인트를 사용하여 UMG 입력을 리매핑하는 방법으로도 활용되고 있습니다.

아래에서는 하드 레퍼런스 또는 형변환을 사용하지 않고도 이 시스템을 사용하여 모디파이어에 빠르게 리매핑할 수 있는 UMG 위젯을 생성하는 방법을 살펴봅니다.

목표

이 섹션의 목표는 VCam 연결(VCam Connections) 및 연결 포인트(Connection Points) 를 사용하여 모디파이어 에두 가지 기능을 리매핑할 수 있는 VCam 위젯(VCam Widget) 을 생성하는 것입니다.

모디파이어에 연결 포인트 추가

모디파이어에 연결 포인트를 추가하려면 다음 단계를 따릅니다.

  1. VCM_LookAt 모디파이어를 실행하고 클래스 디폴트(Class Defaults) 를 선택합니다.

  2. VCam 연결 포인트(VCam Connection Points) 섹션에서 연결 포인트 를 펼쳐 Toggle Activation 이라는 이름의 엘리먼트를 추가합니다.

    Adding a Toggle Activation element under Connection Points.

  3. 해당 엘리먼트를 펼치고 IA_ToggleActivation 입력 액션을 관련 액션(Associated Action) 으로 선택합니다.

    Selecting the Toggle Activation input action as the Associated Action.

  4. 저장 하고 컴파일 합니다. 이제 연결 포인트 트리거를 사용하여 모디파이어 블루프린트를 활성화할 수 있습니다.

VCam 위젯 생성

VCam 위젯 은 입력을 수락하고 모디파이어 연결 포인트로의 연결을 정의할 수 있다는 점에서 사용자 위젯(User Widget) 과 다릅니다.

VCam 위젯을 생성하려면 다음 단계를 따릅니다.

  1. '콘텐츠 브라우저'에서 (+) 추가 를 클릭하고 VCam 섹션으로 이동하여 VCam 위젯 을 선택합니다.

    Creating a VCam Widget via the Content Browser Add options.

  2. 새 위젯의 이름을 VCW_ConnectionButton 으로 짓습니다. 에셋을 더블클릭하여 엽니다.

    입력 매핑 컨텍스트 에 대한 메시지가 표시되겠지만, 여기에서 알아야 할 내용은 아닙니다. 컨텍스트가 제공됨으로써 향상된 입력 사용하기에서 모디파이어 에 대해 설명된 것과 동일한 방법으로 위젯이 입력 액션 이벤트(Input Action Events) 를 실행할 수 있게 됩니다.

  3. 디자이너(Designer) 의 '라이브러리(Library)'에서 버튼을 추가합니다. 버튼의 이름을 ConnectionButton 으로 짓습니다.

    Adding a button from the library.

  4. 그래프(Graph) 를 선택하여 블루프린트 스크립팅 그래프로 이동하여 클래스 디폴트 를 선택합니다.

  5. VCam 연결 섹션에서 연결(Connections) 배열을 펼치고 더하기(+) 기호를 클릭하여 엘리먼트를 추가합니다.

  6. 이 엘리먼트의 이름을 Button 으로 짓고 버튼을 펼쳐 프로퍼티를 확인합니다.

    Adding a Button to the the Connections array.

    프로퍼티

    설명

    필수 인터페이스(Required Interfaces)

    연결 시 필수 인터페이스가 나열되는 경우, 해당 인터페이스를 구현하지 않는 모디파이어에는 연결되지 않습니다. 이를 사용하면 슬라이더의 경우 바운드와 같이 모디파이어가 위젯에 필요한 정보를 제공하게 할 수 있습니다. 블루프린트 인터페이스에 대한 자세한 내용은 블루프린트 인터페이스 문서를 참고하세요.

    선택적 인터페이스(Optional Interfaces)

    선택적 인터페이스는 연결에 성공하는 데 필요한 인터페이스는 아닙니다. 이를 사용하면 버튼의 컬러와 같이 모디파이어가 선택적 정보를 제공하는 데 사용 가능한 인터페이스를 저장할 수 있습니다.

    입력 액션 필요(Requires Input Action)

    이 필드는 연결을 통해 타깃 모디파이어 연결 포인트(Modifier Connection Point) 의 관련 액션 프로퍼티에서 입력 액션을 제공해야 할지 여부를 정의합니다.

    액션 타입(Action Type)

    입력 액션 필요 가 활성화된 경우, 이 프로퍼티를 사용하여 연결에 성공하는 데 필요한 입력 액션의 타입을 지정할 수 있습니다.

    수동으로 연결 환경설정(Manually Configure Connection)

    이 필드에서는 타깃 모디파이어 및 연결 포인트의 이름을 지정할 수 있습니다. 지금은 이 필드를 비워 두어도 됩니다. 조합형 HUD에서 이 필드를 환경설정해야 합니다.

  7. 입력 액션 필요 프로퍼티를 토글하여 활성화한 후 액션 타입 을 디지털(부울)(Digital (부울)) 로 설정합니다.

    Setting the connection point to require an input action of a bool type.

  8. 이벤트 그래프(Event Graph) > 내 블루프린트(My Blueprint) > <사용자 버튼> > 이벤트(Events) 로 돌아가서 클릭 시(On Clicked) 이벤트를 추가합니다.

    Adding an On Clicked event.

  9. 이벤트 그래프 를 우클릭하고 VCam 연결 섹션에서 Get Connections 를 찾습니다.

    Searching for Get Connections.

  10. Get Connections 노드에서 드래그하여 Find 를 검색합니다. 해당 키 를 연결 이름과 일치하도록 Button 으로 설정합니다.

    해당 키를 연결 이름과 일치하도록 'Button'으로 설정합니다.

  11. 출력 핀에서 드래그하여 Get Connected Modifier > Get Owning VCam Component > Inject Input For Action 을 추가합니다. Get Owning VCam Component 의 출력 핀이 Inject Input For Action 의 타깃 입력에 연결되게 합니다.

    Connecting Get Owning VCam Component to the Target input on Inject Input For Action.

    Blueprint element with all the nodes connected properly.

  12. 원시 값(Raw Value) 입력을 우클릭하고 구조체 핀 분할(Split Struct Pin) 을 선택합니다. Inject Input For Action 의 원시 값 타입(Raw Value Type) 을 연결에 정의된 액션 타입 과 일치하도록**부울(Bool) 로 설정하고 On Clicked 의 실행 핀을 Inject Input for Action** 에 연결합니다.

    Setting Split Strut Pin.

    Example of blueprint for the On Clicked boolean even with Inject Input for Action.

  13. Find 노드에서 드래그하여 Get Connected Input Action 을 추가합니다. 그 결과를 Inject Input For Action 의 액션(Action) 핀에 연결합니다. 이렇게 하면 호출하려는 액션이 모디파이어의 연결 포인트로 지정된 액션과 동일한지 확인할 수 있습니다.

    Adding Get Connected Input Action from your Find node.

    Blueprint with Get Connected Input Action added.

  14. 원시 값 X 플로트 값을 1로 설정합니다. 이렇게 하면 버튼을 눌렀을 때 입력 액션 이 True 값을 수신하여 하드웨어 버튼을 누른 것과 동일한 결과를 내게 할 수 있습니다.

    Setting the Raw Value X to 1.

  15. 저장 하고 컴파일 합니다.

연결 관리를 위한 HUD 생성

HUD를 생성하려면 다음 단계를 따릅니다.

  1. 콘텐츠 브라우저 에서 우클릭하고 VCam > VCam 위젯 으로 이동합니다. 새 위젯의 이름을 VCW_ConnectionHUD 로 짓습니다. 에셋을 더블클릭하여 엽니다.

  2. 라이브러리 에서 Connection Button 을 찾아 추가합니다.

    Adding your Connection Button from the Library.

  3. Connection Button 위젯 을 계층구조(Hierarchy) 로 드래그하여 추가하고 디테일 패널을 찾습니다.

  4. 할당 시 HUD가 전체 화면 버튼이 되지 않게 하려면 캔버스(Canvas) 패널에서 VCW_Connection 버튼을 래핑합니다.

    The HUD as a full-screen button, before being wrapped.

    Wrapping the Connection Button with a Canvas Panel.

  5. VCam 연결 섹션에서 연결 포인트 를 펼쳐 Button 연결을 찾습니다.

  6. 해당 연결을 펼치고 수동으로 연결 환경설정 을 활성화합니다.

    Enabling Manually Configure Connection.

  7. 새로운 연결 타깃 세팅(Connection Target Settings) 필드가 표시됩니다.타깃 모디파이어(Target Modifier) 를 Look At(앞에서 환경설정한 대로 모디파이어 스택의 모디파이어에 지정한 이름)으로 설정하고 타깃 연결 포인트(Target Connection Point) 를 Toggle Activation(VCM_LookAt 의 연결 포인트** 에 지정한 이름)로 설정합니다.

  8. 저장 하고 컴파일 합니다.

  9. Vcam 컴포넌트 를 씬 액터에 반환하고 출력 제공자 를 아무 타입이나 추가합니다.

  10. UMG 오버레이 를 VCW_ConnectionHUD 로 설정합니다.

  11. VCam 컴포넌트에서 활성 여부 체크박스와 활성화됨 체크박스를 모두 활성화합니다.

    두 체크박스가 이미 활성화되어 있는 경우, 해당 체크박스의 토글을 껐다가 다시 켜서 액터를 새로 고칩니다.

  12. 뷰포트에서 버튼을 클릭합니다. 이제 모디파이어의 활성화를 토글로 조정할 수 있어야 합니다.

  13. (선택 사항) 버튼을 새 연결 포인트 로 리바인딩하려는 경우, VCW_ConnectionHUD 로 돌아가서 원하는 새 타깃과 일치하도록 타깃 모디파이어 및 타깃 연결(Target Connection) 을 변경합니다.

섹션 결과

이 섹션에서는 VCam 위젯, 연결, 연결 포인트를 사용하여 리매핑 가능한 UMG 엘리먼트를 생성하는 방법과 쉽고 빠르게 환경설정하는 방법을 살펴봤습니다.

또한 출력을 전송하여 미디어 프레임워크 및 컴포셔 플러그인으로 처리하는 방법도 알아봤습니다.

다음 단계

자신의 버추얼 카메라를 직접 빌드하는 방법에 대해 살펴봤으므로, 버추얼 카메라 액터 퀵스타트에서 언리얼 엔진에 포함되어 있는 사전 빌드된 버추얼 카메라 액터 에 대해서도 알아보세요.

7 - (선택 사항) 버튼 커스터마이징하기

모디파이어 상태에 따라 버튼 컬러가 변하도록 연결 및 블루프린트 인터페이스를 통해 버추얼 카메라 버튼을 커스터마이징할 수 있습니다. 이 기능을 사용하면 동일한 버튼을 녹화 기능 및 스크린샷 기능으로 페어링하는 등 다양한 용도로 버튼을 재사용할 때, 서로 다른 컬러가 각각의 용도를 나타내게 할 수 있습니다.

이 기능은 고급 기능으로, 이미 버추얼 카메라 액터를 구성한 경우에 사용할 수 있습니다.

이 방법으로 버튼을 커스터마이징하면 일부 기능이 버추얼 카메라 퀵스타트에 설명된 표준 기능과 달라질 수 있습니다.

블루프린트 에셋 생성

시작하기 전에 모디파이어에 연결할 수 있는 블루프린트 에셋을 생성합니다.

블루프린트 에셋을 생성하려면 다음 단계를 따릅니다.

  1. 콘텐츠 브라우저 에서 우클릭하고 블루프린트(Blueprints) > 블루프린트 인터페이스(Blueprint Interface) 를 선택합니다. 새 에셋의 이름을 BPI_ConnectionButton 으로 짓습니다.

  2. 에셋을 더블클릭하여 엽니다.

  3. 기존 함수의 이름을 Get Button Color 로 변경 합니다.

    Renaming the function to Get Button Color.

  4. 디테일 패널에서 입력(Inputs) 으로 이동하여 이름(Name) 타입의 새 파라미터를 추가하고 해당 이름을 Connection Point 로 지정합니다.

    Adding a Name parameter.

    Showing the Input you've called Connection Point.

  5. 출력(Outputs) 섹션에서 새 파라미터 두 개를 추가합니다.

  6. 선형 컬러(Linear Color) 타입의 파라미터를 생성하고 파라미터 이름을 Color 로 짓습니다.

  7. 부울 타입의 파라미터를 생성하고 파라미터 이름을 Success 로 짓습니다.

    The outputs Color and Success that you have created.

  8. 저장 하고 컴파일 합니다.

블루프린트 에셋 컴파일

연결 가능한 에셋을 생성하려면 VCam 모디파이어에서 블루프린트 에셋을 선택하고 컴파일해야 합니다.

에셋을 선택하려면 다음 단계를 따릅니다.

  1. VCM_LookAt 모디파이어로 돌아갑니다.

  2. 클래스 세팅 을 엽니다.

  3. 인터페이스(Interfaces) 에서 구현된 인터페이스(Implemented Interfaces) 를 찾아 추가(Add) 를 선택합니다.

    Adding an inherited interface.

  4. BPI_ConnectionButton 을 선택합니다.

    Interfaces section showing you've added the implemented interface for your connection button.

  5. 컴파일 합니다.

블루프린트로 버튼 연결

이제 블루프린트를 사용하여 버튼을 연결할 수 있습니다. 이렇게 하면 선택된 기능에 대해 버튼이 전송하는 컬러를 정의할 수 있습니다.

버튼을 연결하려면 다음 단계를 따릅니다.

  1. 내 블루프린트 탭에서 인터페이스 섹션을 펼칩니다. Get Button Color 함수가 표시됩니다. 이 함수를 편집하려면 더블클릭합니다.

    The Get Button Color function is now visible in the Interfaces section.

  2. Connection Point 출력 핀 에서 드래그하고 Switch On Name 노드를 추가합니다.

  3. 디폴트 Return 노드를 Switch On Name 의 디폴트 핀에 연결합니다. Success 가 이 반환에서 False 인지 확인합니다.

    Adding Switch On Name.

  4. Switch On Name 노드를 선택합니다. 해당 노드의 디테일 패널에서 연결 포인트 이름과 일치하도록 Toggle Activation 이라는 이름의 핀 을 추가합니다.

    Adding a Toggle Activation pin.

  5. 그래프에서 우클릭하고 다른 Return 노드를 추가합니다. 이 노드를 Switch on Name 의 새로운 Toggle Activation 핀에 연결합니다.

    Searching for and selecting Add Return Node.

    Get Button Color now has two return nodes.

  6. ShouldLookAt 부울을 블루프린트 창 으로 드래그하고 Get ShouldLookAt 을 선택합니다.

    Selecting GetShouldLookAt.

  7. ShouldLookAt 에서 드래그하여 Select Color 노드를 추가합니다.

  8. A 를 초록색으로, B 를 빨간색으로 설정합니다.

    Setting the color values for your two options.

  9. Select Color 의 반환 값 을 Toggle Activation 에 연결된 Return 노드의 Color 핀에 연결합니다.

    Blueprint where you've set colors for the return values for your button.

규칙 정의

이어서, 위에서 방금 환경설정한 정보를 위젯으로 요청, 파싱 및 적용하는 방식을 정의해야 합니다.

규칙을 정의하려면 다음 단계를 따릅니다.

  1. 앞에서 설정한 VCW_ConnectionButton 으로 돌아가서 클래스 디폴트 > VCam 연결 > 연결 로 이동합니다.

  2. Button 연결을 펼쳐 필수 인터페이스 또는 선택적 인터페이스 옆에 있는 + 를 클릭하고 BPI_ConnectionButton 을 추가합니다.

    Adding BPI_ConnectoinButton under your interface of choice.

    • 이를 필수 인터페이스 에 추가하면 모디파이어가 BPI_ConnectionButton 을 구현하여 연결을 성공시키도록 합니다.

    • 이를 선택적 인터페이스 에 추가하면 모디파이어가 해당 인터페이스를 구현했는지 여부에 관계없이 연결을 성공시키도록 합니다.

  3. 그래프에서 우클릭하고 VCam 연결 로 이동하여 Get Connections 노드를 추가합니다.

    Searching and finding the Get Connections node.

  4. Get Connections 노드에서 드래그하여 Find 를 검색합니다. 해당 키 를 Button 으로 설정하여 이 버튼이 연결의 이름과 일치하도록 합니다.

  5. 출력 핀에서 드래그하여 Get Connected Modifier 를 추가합니다.

  6. Get Connected Modifier 의 반환 값 에서 드래그하여 IsValid 를 추가합니다. Event Tick 의 실행 핀을 Is Valid 에 연결합니다.

    Blueprint for Event Task.

  7. Get Connected Modifier 의 반환 값 에서 드래그하여 BPI_ConnectionButton 섹션의 Get Button Color (Message) 를 추가합니다.

  8. Find 의 출력 핀에서 드래그하여 Get Connection Point Name 노드를 추가합니다. 반환 값 을 Get Button Color 의 Connection Point 입력에 연결합니다.

  9. Is Valid 의 실행 핀을 Get Button Color 에 연결합니다.

    Blueprint with Is Valid connected to Get Button Color.

  10. Success 핀에서 드래그하여 Branch 를 추가합니다.

  11. 내 블루프린트 탭에서 변수 섹션으로 이동하여 버튼을 드래그합니다. 버튼을 Get 노드로 드롭하고 Branch 근처에 배치합니다.

  12. Get 노드에서 드래그하여 Set Background Color 를 추가합니다. Get Button Color 의 Color 출력 핀을 Set Background Color 의 In Button Color 핀에 연결합니다.

  13. Branch의 True 실행 핀을 Set Background Color 에 연결합니다.

    Complete Blueprint for changing your button color.

  14. 저장**하고 컴파일** 합니다.

최종 결과

이제 월드에서 액터의 VCam 컴포넌트로 돌아가 활성화됨 토글을 켜거나 꺼서 새로 고칠 수 있습니다. 이제 버튼의 컬러가 부울의 상태에 따라 변해야 합니다.

언리얼 엔진 문서의 미래를 함께 만들어주세요! 더 나은 서비스를 제공할 수 있도록 문서 사용에 대한 피드백을 주세요.
설문조사에 참여해 주세요
취소