[🌐정보] 2.2 트리거 정리 3 - Keyframe 트리거

[월계수(lunarcoef)]

오늘 알아볼 친구들은 얘네들이야

다들 많이 궁금해할 것 같아서 들고왔어

글이 좀 길고 복잡하겠지만 천천히 따라와 줬으면 좋겠어

1. Keyframe 시스템

키프레임 시스템은 기본적으로 여러 개의 무브+로테이트+스케일 효과를 간단하게 처리하기 위해 만들어진 시스템이야

이걸 구현하려면 3가지가 필요한데

바로 움직일 물체 + 키프레임 + 키프레임 트리거야

먼저 키프레임 트리거의 설정을 살펴보자

2. Keyframe 트리거

키프레임 트리거 설정은 페이지가 두개야

다행히도 그렇게 어려운 내용은 아니고 비슷한 설정이 많을 뿐이니까 걱정할 필요는 없어

Animation Group ID: 애니메이션을 만들 키프레임의 ID, 애니메이션 내 키프레임 중 하나에만 그룹이 걸려있어도 작동하고, 해당 그룹의 키프레임이 있는 여러 애니메이션이 있다면 동시에 작동함

Target ID: 움직일 물체의 그룹

Parent ID: 회전 및 스케일 효과의 중심이 될 그룹

근데 얘는 버그가 좀 있는것 같더라고

그래서 난 Parent ID는 0으로 비워두고 그룹 P 설정을 쓰고있어

혹시라도 내가 번역을 잘못해서 버그라고 착각한 거라면 알려줘

두번째 페이지는 모두 애니메이션 동작에 배수를 걸어주는 옵션이야

Time, Position X, Position Y, Rotation, Scale X, Scale Y 설정이 있는데 각각 시간, X방향 거리, Y방향 거리, 회전 각도, X방향 스케일, Y방향 스케일에 배수를 걸어줘

각 옵션을 2.00으로 하고 나머지는 모두 1.00으로 하면 이렇게 돼

이정도 설명했으면 됐겠지?

3. Keyframe 설정

이제 진짜는 이놈들이야

키프레임은 설치하면 0번 프레임으로 설정이 되고 선택한 상태에서 Copy+Paste로 복사하면 다음 프레임이 생겨

그래서 얘들은 일반적인 방법으로는 복붙을 할 수 없어

키프레임에는 많은 설정들이 있어

이걸 6가지 구역으로 나눠봤으니까 하나씩 알아보자

빨간색 영역은 애니메이션의 움직임을 설정해

이건 무브, 로테이트, 스케일 트리거에도 다 있는 옵션들이야

Duration은 말 그대로 작동 시간, 현재 키프레임부터 다음 키프레임까지의 시간이고

Easing은 애니메이션의 움직임을 결정하는 옵션이야

주황색 영역은 회전 애니메이션을 결정해

먼저 CCW/CW는 Counterclockwise, Clockwise의 줄임말이야

이걸 설정하게 되면 이전 키프레임부터 현재 키프레임까지 오브젝트가 도는 방향을 설정할 수 있어

다시 말해서 키프레임의 회전 방향은 180도보다 적게 도는 방향으로 자동으로 결정되는데 이걸 쓰면 그 방향을 강제할 수 있는거야

주의할 점은 빨간색 영역과 다르게 적용되는 구간이 다르다는거야

대체 왜 이렇게 만든건지 진짜 모르겠네...

X360은 위의 사항들이 적용된 상태에서 추가로 몇 바퀴를 더 돌건지를 결정해

X360을 1로 해 놓으면 프레임이 진행될 때 오브젝트가 한 바퀴 더 도는 걸 볼 수 있어

그리고 이건 시계 방향이 양수야

노란색 영역은 다른 트리거를 불러오는 영역이야

End 트리거의 SpawnID 옵션처럼 해당 그룹의 트리거를 불러오게 돼

SpawnDelay는 시간 딜레이야

SpawnID의 그룹을 그 값만큼 뒤에 불러오게 돼

단위는 당연히 초야

Prox는 그룹을 해당 키프레임이 끝날때 불러오는 옵션이야

근데 얘는 잘 작동하지 않는 것 같아

주의할 점은 얘는 첫번째 키프레임에서는 작동하지 않는다는거야...

2.2가 버그가 하도 많다보니 이게 내가 모르는건지 버그인건지 하나도 모르겠다

나중에 뭐든 알게되면 수정할게

아무튼 이들을 종합해서 애니메이션을 만들어볼게

그룹 3에는 배경이 빨갛게 빛나는 펄스트리거를 넣어놨어

그리고 두번째와 세번째 키프레임에서 그룹이 작동할거고, 세번째 키프레임은 딜레이가 0.25초로 설정되어 있어

잘 작동되지

초록색 영역은 하단 체크박스야

Close Loop는 마지막 키프레임을 첫번째와 이어주는 옵션이야

마지막 키프레임에 적용시키면 작동되는 걸 볼 수 있어

Preview Art는 오브젝트 움직임을 미리 보여주는 기능이야

첫번째 키프레임에는 GroupID라는 칸이 있는데, 여기에 그룹 번호를 넣고 Preview Art를 켜면 이렇게 돼

Ref Only는 남색 영역의 설정에서 쓰이니까 거기서 설명할게

Auto Layer는 키프레임들의 레이어를 자동으로 바꿔주는 옵션이야

단 키프레임을 새로 만들 때 일괄 적용되니까 다 만든 애니메이션에 적용시키고 싶으면 키프레임을 하나 새로 만들었다가 지워주면 돼

Edit Group 창에 들어가면 L2 값이 자동으로 변경된 걸 볼 수 있어

Preview Art도 켜져있으면 이렇게 나오게 돼

파란색 영역은 좌측 +버튼이야

Select All은 해당 애니메이션의 키프레임들을 모두 선택해

Update Art는 Preview Art의 프리뷰를 업데이트해주는 기능이야

원본 그룹이 변경되었을 때 쓸 수 있어

Dup Anim은 Duplicate Animation, 애니메이션을 복붙해주는 기능이야

앞서 말했듯이 애니메이션은 Copy+Paste로는 복붙이 안되고 대신 새 프레임이 생성되지만 이걸 쓰면 복붙이 가능해

Reverse Order는 애니메이션의 진행 순서를 반대로 바꿔줘

마지막으로 남색 영역이야

여기서는 Time, Even, Dist 세가지 옵션이 있어

그리고 앞에서 넘겼던 Ref Only 설정이 여기서 사용돼

이건 말로 설명하기 애매하니 결과를 먼저 보여줄게

여기서 첫번째, 두번째, 세번째 키프레임의 작동 시간은 각각 2초, 0.5초, 0.2초로 해놨고 두번째 키프레임은 Ref Only를 켜놨어

첫번째 키프레임의 설정은 각각 Time, Even, Dist야

정리해보면 남색 영역의 설정은 이런식으로 이루어지게 돼

Time: Ref only는 무시되고, 애니메이션 재생 시간은 설정한 Duration으로 재생됨

Even: Ref only가 켜지지 않은 다음 키프레임 또는 마지막 키프레임까지 Duration의 시간동안 이동, 중간 키프레임 간의 이동 시간이 일정함

Dist: Ref only가 켜지지 않은 다음 키프레임 또는 마지막 키프레임까지 Duration의 시간동안 이동, 이동 속도가 일정함

이걸로 설명이 부족할 수 있는데 위의 GIF를 보면서 이해해 보았으면 해

그리고 이것만으로는 이 시스템의 의의를 이해하지 못할 수도 있는데

이 시스템의 진가는 Easing 설정에서 드러나

이런 식으로 여러 개의 움직임에서 하나의 Easing을 적용시킬 수 있어

이건 무브 트리거로는 구현할 수 없는 영역이야

여기까지가 핵심 기능이고

아직 설명하지 않은 게 두개 남았는데

Curve는 연결선이 곡선으로 바뀌는 옵션이고

Line Opacity는 연결선의 투명도를 조절하는 옵션이야

자 이렇게 키프레임 시스템의 설명이 끝났어

이렇게 길게 글을 써본것도 정말 오랜만이네

다음번 글에서는 조금 쉬운 트리거를 다뤄볼게

[ㅇㅇ 1(121.176)]

개추

[w0nder(triplekill1432)]

사랑해 - dc App

[Yeowoo(shortfox01)]

어질어질하네

[ㅇㅇ 2(116.47)]

다음으로 이벤트 트리거 해주면 안되냐 작동법을 모르겠다