에임 오프셋 만들기

에임 오프셋을 사용하여, 캐릭터가 마우스 또는 컨트롤러 방향으로 무기를 조준하도록 합니다.

Windows
MacOS
Linux

이 가이드에서는 캐릭터의 무기 조준을 돕기 위해 포즈의 블렌딩가능 시리즈를 저장하는 애셋인 에임 오프셋 을 만들겠습니다. 아래 예제에서 보듯이, 애니메이션 시퀀스를 잡아 에임 오프셋에 사용할 수 있는 포즈로 쪼갠 다음, 마우스의 위치로 플레이어의 피치/요 를 구하고, 그를 통해 블렌딩할 포즈를 결정한 뒤, 캐릭터가 이동하면서 마우스 방향으로 (약간의 제한을 두고) 조준할 수 있도록 합니다.

이 강의를 완료하면 위 영상과 비슷한 캐릭터가 나올 것입니다:

1 - 에임 포즈 생성

이번 단계에서는 기본 플레이 캐릭터를 변경하고 에임 오프셋에 필요한 모든 포즈를 생성하도록 하겠습니다.

여기서는 블루프린트 삼인칭 템플릿 프로젝트에 Animation Starter Pack 을 추가하여 사용하고 있습니다:

AnimationAssetPack.png

Animation Starter Pack 은 에픽 런처의 마켓플레이스 탭에서 무료로 받을 수 있습니다.

단계

  1. 콘텐츠 브라우저 에서 Content/ThirdPersonBP/Blueprints 폴더 아래 ThirdPersonGameMode 블루프린트를 엽니다.

  2. Default Pawn Class 아래 드롭다운 메뉴를 클릭한 다음 Ue4ASP_Character 를 선택하고 블루프린트를 저장 후 닫습니다.

    Animations1.png

    기본 플레이 캐릭터를 Animation Starter Pack 에 제공된 것으로 사용하도록 변경하고 있습니다.

  3. 콘텐츠 브라우저 에서 Content/AnimStarterPack 폴더를 연 뒤, 신규 추가 버튼을 누르고 AimPoses 라는 폴더를 만듭니다.

    AimOffset1.png

  4. Aim_Space_Hip 애셋을 끌어 AimPoses 폴더에 놓고 복사 를 선택합니다.

    AimOffset2.png

    포즈로 쪼갤 무기 조준용 동작 범위가 들어있는 애니메이션 시퀀스입니다.

  5. AimPoses 폴더 안에, Aim_Space_Hip 를 선택한 채로 Ctrl+W 키를 눌러 복제하고 이름을 Aim_Center 라 짓습니다.

    AimOffset3.png

  6. Aim_Center 애셋을 열고, 재생 컨트롤의 일시정지 버튼을 클릭한 뒤, ToFront 버튼을 클릭합니다.

    AimOffset4.png

  7. 타임라인의 스크럽 바에 우클릭 한 다음 Remove from frame 1 to frame 87 옵션을 선택합니다.

    AimOffset5.png

    이제 에임 오프셋에 사용할 수 있는 포즈가 들어있는 프레임이 하나 생겼습니다.

  8. AimPoses 폴더의 Aim_Space_Hip 을 선택한 채, Ctrl+W 키를 눌러 복제한 뒤 이름을 Aim_Center_Down 으로 변경합니다.

  9. Aim_Center_Down 을 열고, 0 프레임에 있는지 확인한 다음, ToNext 버튼을 클릭한 뒤 20 프레임으로 갑니다.

    AimOffset9.png

    뷰포트에 캐릭터가 아래쪽을 조준하고 있을텐데, 아래 조준에 사용하려는 포즈입니다.

  10. 타임라인의 스크럽 바에 우클릭 한 다음 Remove frame 0 to frame 20 옵션을 선택합니다.

    AimOffset10.png

    스크럽 바의 어디를 클릭했는가에 따라 프레임 범위 한 두 프레임 다를 수 있지만, 캐릭터가 아래를 조준하고 있는지만 확인하면 됩니다.

  11. 타임라인의 스크럽 바에 다시 우클릭 한 다음, Remove from frame 1 to frame 68 옵션을 선택합니다.

    AimOffset11.png

  12. AimPoses 폴더의 Aim_Space_Hip 를 선택한 채로 Ctrl+W 키를 눌러 복제한 다음 이름을 Aim_Center_Up 이라 짓습니다.

  13. Aim_Center_Up 을 열고 0 프레임에 있는지 확인한 다음 ToNext 버튼을 클릭하여 10 프레임으로 갑니다.

  14. 타임라인의 스크럽 바에 우클릭 한 다음 Remove frame 0 to frame 10 옵션을 선택합니다.

    AimOffset14.png

  15. 타임라인의 스크럽 바에 다시 우클릭 한 다음 Remove from frame 1 to frame 78 옵션을 선택합니다.

    AimOffset15.png

  16. 아래 표를 참고하여 각각에 대해 Aim_Space_Ironsights 애셋을 복제 한 다음 나머지 포즈를 만듭니다.

    애님 이름

    시작 키프레임

    제거 프레임 1

    제거 프레임 2

    Aim_Left_Center

    30

    0 - 30

    1 - 57

    Aim_Left_Up

    40

    0 - 40

    1 - 48

    Aim_Left_Down

    50

    0 - 50

    1 - 37

    Aim_Right_Center

    60

    0 - 60

    1 - 27

    Aim_Right_Up

    70

    0 - 70

    1 - 17

    Aim_Right_Down

    80

    0 - 80

    1 - 8

    각 애니메이션에 대해 위의 시작 키프레임 에서 시작한 다음, 스크럽 바에 우클릭 하고 제거 프레임 1 을 제거하고, 다시 스크럽 바에 우클릭한 다음 제거 프레임 2 를 제거합니다. 각 애니메이션은 캐릭터가 그 이름 방향으로 조준하는 단일 프레임일 것입니다. 전부 만들고 나면 AimPoses 폴더에는 각 조준 방향에 대한 포즈가 여럿 있을 것입니다.

    AimOffset17.png

  17. 콘텐츠 브라우저 에서 Shift 키를 누르고 각각의 에임 포즈를 선택합니다.

    AimOffset18.png

  18. 우클릭 하고 애셋 액션 아래 Bulk Edit via Property Matrix (프로퍼티 매트릭스를 통한 대량 편집) 옵션을 선택합니다.

    AimOffset19.png

  19. 프로퍼티 매트릭스 에서 Additive Settings (애디티브 세팅) 아래 Additive Anim Type (애디티브 애님 유형)을 Mesh Space (메시 스페이스)로 변경합니다.

    AimOffset20.png

    애니메이션이 에임 오프셋과 호환되도록 하려면, 애디티브 애님 유형이 메시 스페이스 를 사용하도록 설정되어 있어야 합니다.

  20. Base Pose Type (베이스 포즈 유형)을 Selected animation frame (선택된 애니메이션 프레임)으로 변경한 뒤, Base Pose Animation (베이스 포즈 애니메이션) 아래 애셋 선택 아이콘을 클릭하고 Idle_Rifle_Hip 을 선택합니다.

    add_01.png

    이 베이스 포즈 유형은 애디티브 델타 계산 방식을 결정합니다.

  21. 완료되었으면 콘텐츠 브라우저 로 돌아와 모두 저장 버튼을 클릭합니다.

    AimOffset22.png

각각의 포즈 애셋을 생성했으니, 다음 단계에서는 에임 오프셋을 생성하도록 하겠습니다.

2 - 에임 오프셋 생성

이번 단계에서는 에임 포즈 각각을 가지고 각 포즈 블렌딩을 하는 에임 오프셋을 만들어 봅니다.

단계

  1. Content/AnimStarterPack/UE4_Mannequin/Mesh 폴더에서 UE4_Mannequin우클릭 하고 에임 오프셋 생성 을 클릭합니다.

    AimOffset23.png

    그러면 이 스켈레톤을 기반으로 에임 오프셋 애셋이 생성됩니다.

  2. 에임 오프셋 (가운데) 창에서 Parameters (파라미터) 아래 아래와 같이 입력합니다.

    AimOffset26.png

    X Axis LabelYaw 로, Y Axis LabelPitch 로, 두 Axis Ranges 모두 -90 to 90 로 설정한 다음 Apply Parameter Changes 를 클릭합니다.

    에임 오프셋은 블렌드 스페이스 와 작동 방식이 매우 유사하며, 파라미터에 따른 포즈 블렌딩이 가능합니다.

  3. 애셋 브라우저 에서 Aim 을 검색한 다음, Aim_Center 애니메이션을 끌어 아래와 같이 그래프 중앙에 놓습니다.

    AimOffset27.png

  4. 아래와 같이 Aim_Center_Up1 위치에, Aim_Center_Down2 위치에 끌어 놓습니다.

    AimOffset28.png

    옵션으로, Enable Tooltip Display (툴팁 표시 켜기) 옵션 체크를 해제하면 그리드의 툴팁을 끌 수 있습니다.

  5. 아래와 같이 Aim_Left_Center1 위치에, Aim_Right_Center2 위치에 끌어 놓습니다.

    AimOffset29.png

  6. Aim_Left_Up (1), Aim_Right_Up (2), Aim_Left_Down (3), Aim_Right_Down (4) 포즈를 추가하여 에임 오프셋을 마무리합니다.

    AimOffset30.png

  7. 애셋 디테일 패널에서 Additive Settings (애디티브 세팅) 아래 Preview Base Pose (프리뷰 베이스 포즈) 옵션을 Idle_Rifle_Hip 으로 설정합니다.

    Add01.png

    그리드 안에서 마우스를 움직이는 것으로 포즈 블렌딩을 미리볼 수 있으며, 뷰포트 메시는 마우스 위치에 따라 그 포즈가 업데이트됩니다.

Aim Offset 구성이 완료되었으니, 다음 단계에서는 게임플레이에서 블렌딩을 구동할 수 있도록 애니메이션 블루프린트 안에서 걸어주도록 하겠습니다.

3 - 에임 오프셋 구현

이번 단계에서는 애니메이션 블루프린트에 에임 오프셋을 추가하고 기존 애님 그래프에 연결해 봅니다.

단계

  1. Content/AnimStarterPack 폴더의 UE4ASP_HeroTPP_AnimBlueprint 를 열고 내 블루프린트 패널의 애님 그래프더블클릭 합니다.

    step3_01.png

  2. 애셋 브라우저 탭에서 에임 오프셋 애셋을 끌어 놓습니다.

    step3_02.png

  3. 아래와 같이 에임 오프셋을 연결한 뒤, YawPitch 핀에 우클릭 하고 변수로 승격 한 후 이름을 Aim YawAim Pitch 라 합니다.

    step3_03.png

    이 두 개의 변수는 플레이어가 마우스로 조준을 할 때마다 채워지며, 에임 오프셋의 포즈를 구동시킵니다.

  4. 내 블루프린트 패널에서 이벤트 그래프 로 점프해 들어갑니다.

    step3_04.png

  5. 이벤트 그래프 에서 스크립트의 Movement 부분 안의 Sequence 노드를 찾습니다.

    step3_05.png

    Sequence 노드의 핀 추가 버튼을 클릭합니다.

    step3_05b.png

  6. 내 블루프린트 패널에서 Alt 키를 누르고 Aim YawAim Pitch 둘 다 끌어 놓고 Sequence 노드에 연결합니다.

    step3_06.png

  7. Cast To Ue4ASP_Character 노드를 끌어 놓고 Get Control RotationGet Actor Rotation 노드를 추가합니다.

    step3_07.png

  8. Get Control Rotation 노드를 끌어 놓고 Delta(Rotator) 노드를 추가합니다.

    step3_08.png

  9. Get Actor RotationDelta(Rotator) B Pin 에 연결한 뒤, Return Value 를 끌어 놓고 RInterp To 노드를 추가합니다 (그리고 Current 에서 Target 연결을 교체합니다).

    step3_09.png

    Ctrl 키를 누르고 Current 핀을 좌클릭 드래그한 다음, 그 연결을 Target 핀에 끌어 놓습니다.

  10. RInterp To 노드의 Current 핀을 끌어 놓고 Make Rotator 를 선택합니다.

    step3_10.png

  11. 내 블루프린트 패널에서 Ctrl 키를 누르고 Aim PitchAim Yaw 변수를 끌어 놓은 뒤 Make Rotator 노드의 PitchYaw 에 연결합니다.

    step3_11.png

  12. Movement 스크립트 시작 부분의 Event Blueprint Update Animation 노드를 찾아, Delta Time X 를 변수로 승격시킨 뒤 Time 이라 하고 아래와 같이 연결합니다.

    step3_12.png

  13. RInterp To 노드로 돌아와 새로운 Time 변수를 연결, Interp Speed15 로 설정합니다.

    step3_13.png

    캐릭터의 로테이션과 플레이어 입력의 로테이션을 사용하여 캐릭터가 한 방향으로 얼마나 회전할 수 있는지를 제한하는 로테이터를 새로 만들 것입니다.

  14. RInterp To 노드에서, Break Rotator 를 추가하고, PitchYawClamp Angle 최소/최대치를 각각 -9090 으로 설정합니다.

    step3_14.png

  15. Clamp AnglePitch 에서 Aim Pitch 로, Yaw 에서 Aim Yaw 로 연결합니다.

    step3_15.png

    에임 오프셋을 구동시키는 Aim Yaw 및 Aim Pitch 값이 이제 캐릭터의 로테이션, 플레이어의 현재 컨트롤러 로테이션을 고려하며, 캐릭터가 한 방향으로 너무 많이 돌지 않도록 제한시킵니다. 각도 제한이 없으면, 캐릭터의 다리 방향은 앞을 보는데 몸통은 뒤틀어져 반대 방향을 가리키고 있을 수가 있으므로, 원하는 상황이 아닐 것입니다.

구성이 거의 완료되었으니, 다음 단계에서는 모두 한 데 모아 캐릭터의 조준 기능을 테스트해 보겠습니다.

4 - 마무리

마지막 단계에서는 캐릭터 블루프린트를 업데이트하여 컨트롤러 로테이션 처리 방식 변경이나 테스트 전 사소한 문제를 몇 가지 해결해 봅니다.

단계

  1. Content/AnimStarterPack 폴더의 Ue4ASP_Character 블루프린트를 엽니다.

  2. 컴포넌트 창의 Ue4ASP_Character 를 클릭한 뒤, 디테일 패널에서 Use Controller Rotation Yaw 체크를 해제합니다.

    step4_04.png

    그러면 캐릭터가 컨트롤러의 yaw 위치로 자동 회전하지 않게 됩니다.

  3. 컴포넌트 창의 CapsuleComponent 를 클릭한 뒤, 디테일 에서 Hidden in Game 옵션을 체크합니다.

    HideCapsule.png

    그러면 게임플레이 도중 디버그 표시가 꺼집니다.

  4. 내 블루프린트이벤트 그래프 를 클릭한 뒤, Crouching 섹션을 찾아 InputAction Crouch 노드를 C Key Event 로 대체합니다.

    step4_05.png

    그러면 프로젝트에 Crouch (웅크리기)에 대한 기본 액션 매핑이 없어서 창 좌상단 구석 컴파일 버튼에 생기던 노란 경고 표시가 제거됩니다. 웅크리기에는 C 버튼을 사용하겠습니다 (원하는 어떤 Key Event 든 사용할 수 있습니다).

  5. 블루프린트를 컴파일, 저장 후 닫습니다.

  6. 레벨에서 ThirdPersonCharacter 를 제거합니다.

    DeleteCharacter.png

    그러면 레벨에 배치된 캐릭터가 아닌 게임 모드에 할당된 캐릭터가 사용됩니다.

  7. 플레이 버튼을 눌러 에디터에서 플레이합니다.

최종 결과

에디터에서 플레이해 보면, 캐릭터가 이제 가만히 있을 때 마우스 이동에 반응하여 조준, 마우스 방향을 가리킵니다. 마우스가 뒤에 있으면 캐릭터가 뒤쪽을 향하지는 못하게끔 제약되어 있으며, 캐릭터가 뛰어다닐 때 마우스를 움직이면 캐릭터의 몸통도 가리키는 방향으로 돌아갑니다.

여기서 조금 더 나아가자면, 캐릭터가 한 방향으로 조준을 하면서 그 방향으로 발사 애니메이션을 재생한다거나, 기존 애니메이션 위에 레이어 애니메이션 을 놓는 방식으로 웅크린 상태 또는 한 방향으로 이동하는 상태에서 캐릭터에 발사 애니메이션을 재생하도록 할 수도 있습니다. 또는 이제 조준이 가능해 졌으니, 스켈레탈 메시 소켓 을 살펴보면 캐릭터의 손에 무기를 붙이는 법에 대한 예제를 찾아볼 수 있을 것입니다.

Select Skin
Light
Dark

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

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

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

네이버 카페
공식 포럼