블루프린트에서의 플립북 컴포넌트

블루프린트에서 플립북 컴포넌트에 접근하고 작업하는 방법 안내서입니다.

Windows
MacOS
Linux

블루프린트 에서의 플립북 컴포넌트 작업은 블루프린트의 다른 유형 컴포넌트 작업과 매우 유사합니다. 블루프린트에 플립북 컴포넌트를 추가한 이후에는, 사용할 소스 플립북 을 지정하고, 플립북의 재생 속도 를 정하거나 사용된 스프라이트 컬러 뿐만 아니라, 트랜스폼 처럼 모든 컴포넌트에 사용가능한 표준 옵션도 전부 조정할 수 있습니다.

그래프 탭 안에서는, 스크립트를 통해 플립북 컴포넌트의 프로퍼티를 직접 접근하고 변경할 수 있습니다. 여기에는 재생 속도, 플립북 재생, 중지, 역재생, 심지어 (캐릭터의 플립북 애니메이션을 전환할 때 좋은) 소스 플립북을 다른 플립북 애셋으로 변경하는 작업까지 포함됩니다.

이 페이지에서는 블루프린트에서 플립북 컴포넌트를 추가, 접근, 변경하는 법을 보여드립니다. 플립북 자체에 대한 상세 정보는, 페이퍼 2D 플립북 문서를 확인하세요.

플립북 컴포넌트 추가하기

블루프린트에 플립북 컴포넌트를 추가하는 것은 블루프린트의 컴포넌트 창에서 가능합니다.

  1. 블루프린트에서 컴포넌트 창의 컴포넌트 추가 버튼을 클릭한 다음 Paper Flipbook 을 추가합니다.

    Components1.png

  2. 플립북 컴포넌트 추가 이후, 컴포넌트 이름을 입력하라는 창이 뜹니다.

    Components2.png

    그 후 디테일 패널 안에서 플립북 컴포넌트의 프로퍼티 조정을 시작하면 됩니다.

블루프린트/스크립트 추가 옵션을 사용하여 블루프린트에 플립북 컴포넌트를 추가시킬 수도 있습니다.

  1. 레벨에 플립북 을 배치하고 선택한 상태로, 디테일 패널로 갑니다.

  2. 블루프린트/스크립트 추가 버튼을 클릭합니다.

    Components3.png

    그러면 새로운 블루프린트가 생성되어 (이름을 입력하라는 창이 뜨며) 선택된 플립북이 그 컴포넌트로 자동 할당됩니다.

플립북 컴포넌트 프로퍼티

플립북 컴포넌트의 디테일 패널 안에서 조절할 수 있는 프로퍼티는 여럿 있습니다만, 가장 중요한 것은 Sprite 섹션 아래에서 찾을 수 있습니다. 여기서 사용할 소스 플립북, 초기 재생 속도 및 플립북이 사용할 스프라이트 컬러 를 정의합니다.

Details1.png

없음 드롭다운 박스를 클릭하여 플립북을 할당합니다.

Details2.png

팝업창에 선택 가능한 플립북 애셋이 나타날 것이며, 다른 방법으로는 상단의 옵션에서 플립북 애셋을 새로 만들 수도 있습니다.

Details3.png

Play Rate (재생 속도) 박스 안에 초기 재생 속도 값을 수치로 입력하면 됩니다.

Details4.png

마지막으로 스프라이트에 사용할 컬러를 Sprite Color (스프라이트 컬러) 옵션으로 설정합니다.

Details5.png

콜리전 프로퍼티

플립북에 콜리전을 바로 적용하는 것이 가능은 하지만 (상세 정보는 플립북 에디터 레퍼런스 참고), 퍼포먼스상의 이유로 콜리전 셰이프를 사용할 것을 추천합니다. 예로 플립북에 박스, 캡슐 또는 구체 를 사용하여 필요한 콜리전 결과를 할당해 주면 됩니다.

예를 들어 블루프린트 안에서 컴포넌트 추가 버튼을 클릭한 다음 Collision 을 검색합니다:

Collision1.png

플립북 자체에 콜리전으로 사용할 셰이프를 지정하기 보다는, 다른 셰이프를 적용해도 됩니다.

그 예제는 아래와 같습니다.

Collision2.png

위에서 간단한 깜빡이 박스 블루프린트를 만들고 박스 콜리전 컴포넌트를 추가한 뒤, Box Extent 값을 박스를 둘러싸도록 변경하고 콜리전 프리셋Block All 로 변경하여 실제 콜리전을 제공해 줬습니다.

플립북 컴포넌트 작업하기

플립북 컴포넌트 작업을 시작할 준비가 되면, 그래프 탭으로 가서 내 블루프린트 창의 컴포넌트 섹션 아래, 블루프린트에 추가된 다른 컴포넌트와 함께 나열된 것을 볼 수 있습니다.

MyBlueprint1.png

플립북 컴포넌트에 어떤 식으로든 접근 또는 영향을 끼치기 위해서는, Ctrl 키를 누르고 플립북 컴포넌트를 그래프에 드래그 앤 드롭 합니다.

Graph1.png

그러면 놓은 곳에 플립북 컴포넌트에 대한 Get 노드가 생성되어, 거기에 이벤트나 함수를 얼마든지 호출할 수 있습니다.

Graph2.png

컨텍스트 메뉴에 Flipbook 을 검색해 보면 플립북을 가지고 할 수 있는 작업을 몇 가지 보실 수 있을 것입니다.

Graph3.png

여기서 플립북이 현재 재생중인지 알아보고, 현재 재생 속도를 구하거나, 재생 속도를 새로 설정하고, 재생, 중지, 역재생 등을 할 수 있습니다. 현재 소스 플립북 애셋을 구해오는 것은 물론, 새로 사용할 소스 플립북을 설정하여 애니메이션을 전환하는 것도 가능합니다.

Sprite 로 검색해도 여기에 접근하여 Sprite Color 변경을 위한 옵션을 제공받을 수 있습니다.

Graph4.png

플립북 전환

아래 예제를 통해 SetFlipbook 노드를 사용하여 재생중인 플립북 모션을 업데이트하는 것을 볼 수 있습니다.

플립북 컴포넌트의 모빌리티 프로퍼티가 무버블 로 설정되어 있거나, 액터 생성 도중 호출되었을 때만 작동합니다.

이 예제에서, 플레이어 캐릭터가 어떤 동작을 하면, Update Animation 이라는 커스텀 이벤트가 호출됩니다.

Animation1.png

이 커스텀 이벤트는 (우리 플레이어 캐릭터인) Sprite 라는 플립북 컴포넌트에 대해 SetFlipbook 을 사용하여, 캐릭터의 Velocity (속도) 가 0 초과(, 즉 이동중)인지 아닌지에 따라 Idle (빈둥) 애니메이션 또는 Running (달리기) 애니메이션 중 하나를 Select (선택)합니다. 이동중이라면 달리기 플립북이, 이동중이 아니라면 빈둥 플립북이 소스 플립북으로 설정됩니다.

Animation2.png

그 결과 아래와 같은 플립북 애니메이션 전환이 일어납니다.

프로젝트 브라우저새 프로젝트 아래 2D 횡스크롤 프로젝트 템플릿 안에서 이 부분을 직접 확인하실 수도 있습니다.

재생 속도 설정하기

Set Play Rate 노드를 사용하여 플립북 컴포넌트의 재생 속도를 높이고/낮추는 예제는 아래와 같습니다.

Sprint.png

위에서, 캐릭터 블루프린트 안에 Left Shift Key Event 를 사용하여 Shift 키가 눌렸는지 아닌지에 따라 (Character Movement 의 속력인) Max Walk Speed 를 업데이트합니다. 그런 다음 (우리 플레이 캐릭터인) Sprite 플립북 컴포넌트의 Play Rate 를, Shift 가 눌린 상태에서는 두 배로 해 주고, 떼면 원래대로 되돌리는 식으로 업데이트합니다.

그 결과 Shift 가 눌린 상태에서는 캐릭터가 (플립북의 속도도 같이) 빨라집니다.

Select Skin
Light
Dark

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

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

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

네이버 카페
공식 포럼