Constraint 기능을 활용해서 마우스 움직임을 잘 따라가는 고양이를 만들기로 한다.
참고한 영상 링크: https://www.youtube.com/watch?v=hdhmp78jbqs
우선 고양이 형태를 만든다.
하이어라키 구성은 아래와 같다.
<Head>
- face group (눈알, 눈동자, 코)
- whisker (오른쪽, 왼쪽)
- ear (오른쪽, 왼쪽)
- head shadow (머리를 따라다니는 그림자)
<Body>
<tail>
<shadow>
곡선 효과를 주는 방법
마우스 커서를 따라다니는 타겟을 만들어줘야 하는데,
타겟의 용도는 마우스 움직임에 따라 고양이가 따라 움직일 수 있도록 하는 중간 통로다.
마우스 커서 -- (타겟) -- (전체적인 고양이 얼굴, 수염, 눈동자 등)
Q. 왜 마우스 커서에 곧바로 고양이 눈동자와 같은 요소를 연동시키지 않는지?
이렇게 해도 간단한 구현은 가능하지만, 복잡한 동작을 구현하고 싶다면 수정을 편리하게 해줄 중간 통로가 필요하다.
그래서 타겟이라는 중간 통로를 굳이 두면서 안전한 설계를 하는 것
그럼 우선 타겟을 만들어준다.
G 단축키를 누른 후 화면에 그룹을 만들어주고 싶은 곳을 클릭한다.
style을 group에서 target으로 설정한다.
그럼 이 타겟이 마우스 커서를 따라가게 만들고 싶은 것이니,
어느 범위에서 마우스 커서를 따라가게 할 것인지 설정하기 위해 hitbox를 만들어 준다.
마우스 커서 -- (타겟) -- (전체적인 고양이 얼굴, 수염, 눈동자 등)
| |
여기까지 연동했으니, 순서대로 요 부분을 타겟과 연결시켜주기로 한다.
1. 전체적인 고양이 얼굴
Translation은 position 값이 그대로 연동되도록 하는 Constraint 기능 중 하나이다.
100% Strength로 값이 연동되면 고양이 눈,코가 얼굴 밖으로 튀어나오는 불상사가 생기는데,
Strength 값을 조정해서 살짝만 마우스를 따라오게 조정할 수 있다.
눈보다 코가 조금 더 마우스를 잘 따라와주었으면 한다면, nose 레이어를 클릭해서 Translation Constraint를 중복으로 걸어준다.
nose에 따로 걸어준 2%와 전체 face group에 걸어준 6%가 얹어져서 nose가 마우스를 조금 더 잘 따라오게 된다.
2. 고양이 수염 (오른쪽 왼쪽 둘 다 적용)
3. 눈동자와 타겟 연결
간단하게 생각해볼 수 있는 방법은,
마우스와 연동시킬 타겟 그룹을 오른쪽, 왼쪽 눈 각각 만들고, listener 탭에서 mouse align 설정을 해준다.
그리고 각 눈동자가 타겟을 따라가도록 눈동자에 Translation Constraint 설정을 해준다.
근데 눈알이 눈동자 밖으로 나가는 불상사가 생기면 안되니,
Distance Constraint를 걸어줄 타겟 그룹을 또 생성해준다. (각각 눈 중앙에 배치)
그런데 이렇게 되면 문제가 하나 생기는데,
눈이 완전한 원형이 아닌 타원형이기 때문에 눈동자가 가로끝까지는 잘 움직여도 세로 끝까지는 닿지를 못한다.
혹은 세로 끝까지는 닿아도 눈알 가로폭을 튀어나가버리거나.
제시하는 해결 방법은: 눈동자 X축, Y축용 타겟을 따로 구분지어서 생성하는 것이다. (Distance 값 X,Y 구분)
왼쪽눈만 예시로 들어보자면, 눈 하나당 타겟이 3개 만들어져야 한다.
1. X축 리미트 걸 타겟
2. Y축 리미트 걸 타겟
3. 눈 정중앙에 둘 리미트 타겟
마우스 커서 - 거리제한 - 타겟 -- 눈동자
|
여기까지 연동했으니, 이제 남은 타겟과 눈동자를 연결시켜준다.
X축 제어용, Y축 제어용 타겟을 따로 만들어 주었으니 Translation Constraint도 2개 생성.
그리고 각각 X축, Y축만 제어할 수 있도록 설정한다.
다음은 기본 형태의 애니메이션 설정
우선 1초마다 고양이가 제자리에서 살짝 바운스 하는 것을 기본상태로 만들어주기로 한다.
애니메이션 설정까지 했으니 Idle(기본 상태)는 설정이 다 됐다.
완성도를 높여주기 위해 두가지를 추가로 더 해볼거다.
1. 고양이가 주기적으로 눈 깜박이게 하기
2. 고양이 머리가 마우스 따라 갸우뚱거리게 하기
3초에 한번씩 1초동안 눈을 깜박이도록 했다.
자세히 보면 키프레임이 동그라미인 것이 있는데, 아래와 같은 차이가 있다.
동그라미: S자 interpolation (처음에 느렸다가 빠르게 스냅! 했다가 느려짐)
다이아몬드: linear 스냅 없이 일률적으로 애니메이션 진행
근데 눈꺼풀이 크다보니, 눈을 번쩍 떴을 때, 고양이 머리 바깥으로 눈꺼풀이 삐져나와 보일 수가 있다.
> Clip 기능으로 해결한다.
Clip 기능은 기본적으로 A에 B를 타겟으로 하는 클립을 걸어주었다고 가정을 한다면:
B라는 구멍(혹은 창문)을 통해서만 A를 볼 수 있게 하겠다는 것과 같다.
즉, 고양이 눈알 내부에서만(B) 눈꺼풀이(A) 보이기를 원하는 것이므로,
각 눈꺼풀 레이어에 고양이 눈동자를 타겟으로 하는 클립을 걸어주면 된다.
주의할 점은, 눈꺼풀이 눈알 내부에서만 보이게 설정을 했으므로
뭐 고양이 귀라던가 고양이 머리와 눈꺼풀의 레이어간 하이어라키를 신경쓸 필요는 없지만,
눈동자와의 하이어라키는 정석대로 맞춰주어야 한다. (눈알 위에 - 눈동자 위에 - 눈꺼풀)
이걸 무시하면 당연히 눈꺼풀 위로 눈동자가 둥둥 떠다닌다거나 하는 요상한 그림이 연출된다.
1. 고양이가 주기적으로 눈 깜박이게 하기
2. 고양이 머리 마우스 따라 갸우뚱거리게 하기로 넘어간다.
여기서 내가 원하는 건, 고양이 머리가 흉측하게 몸이랑 분리돼서 마우스를 따라가는게 아니라,
마우스를 따라 고개를 살짝 갸우뚱하게 만드는 거다.
말인즉, Translation이 아닌 Rotation Constraint를 걸어주겠다는 것.
연동 방법은 이렇게 정리할 수 있다.
머리 - 뼈 - 타겟1 - 타겟2 - 마우스 움직임 값이 100% 연동된 타겟 (Face Control)
각 구간마다 이런 기능을 수행한다.
1. 머리 - 뼈 (머리가 뼈의 꼭짓점을 따라 rotate 되게 함)
2. 뼈 - 타겟1 (뼈의 꼭짓점이 타겟 1을 따라가게 함)
3. 타겟1 - 타겟2 (타겟 1에서 Strength 값을 조절해 타겟 2에 연동된 값을 약하게 받아옴)
4. 타겟2 - Face Control (타겟 2에 마우스의 움직임 중 X축값, 즉 수평값만 받아옴)
여기서 질문이 생길 것이다.
2번에서 타겟 1을 새로 만들지 말고, 뼈의 target을 바로 Face Control로 지정하면 안됨?
> 가능은 하나, 고양이 목이 360도 자유롭게 마우스 움직임에 따라 꺾이는 호러를 목격하게 된다.
그래서 굳이 타겟 1,2를 새로 잡아줘가면서 일종의 완화제 역할을 하도록 하는 것이다.
Face Control과 바로 연동된 타겟2는 X값만 받아오게 하고,
타겟 2와 연동된 타겟1은 이 X값을 20%의 strength로 받아오게 함으로써.
극강의 효율을 중요시한다면 이런 질문이 있을 수 있다.
걍 3번에서 타겟1의 타겟을 Face Control로 잡고,
X축값만 받아오도록 Copy X만 체크표시 해주면 타겟 2 굳이 안만들어줘도 되는 거 아님?
> 이건 나도 의문이 많은 부분이었는데, (참고한 유튜브에서는 이렇게 했음) 제미나이에게 물어본 결과는 이렇다:
(사실 그다지 납득되지는 않았지만 일단 따라해주었다)
주의 사항: target을 설정하기 전에 오프셋 toggle ON
Offset이란, 쉽게 말해 각각의 기즈모 값을 인정해 주는 것이다.
이는 수치와 상관없이 화면상에 보여지는 그대로 align될 수 있도록 한다.
+ Rive에서 회전값: 내 부모를 기준으로 내가 얼마나 돌아갔는가
Offset이 켜져 있다면: 뼈가 90도이고 머리가 0도여도, 그 상태를 '현재 0'으로 고정하고 움직임
Offset이 꺼져 있다면: 머리가 뼈의 회전값인 -90도를 그대로 강제 복사하게 되어, 고양이 머리가 갑자기 -90도로 180도 꺾여버림
Offset이 필요한 이유: 각 오브젝트의 rotation값을 강제로 한쪽에 align 시켜주는 게 아니라, 각자 존중해줌.
(정확히는 그 두 오브젝트 형태 그대로 rotation값을 0으로 리셋시켜줌)
1. 고양이가 주기적으로 눈 깜박이게 하기
2. 고양이 머리 마우스 따라 갸우뚱거리게 하기
> 원하는 모션 구현 완료!
'blog project' 카테고리의 다른 글
| RIVE: 파도타기 하는 글자 (0) | 2026.02.21 |
|---|---|
| Blender: 손목 보호를 위한 로지텍 버티컬 마우스 커스텀 (0) | 2026.02.18 |
| RIVE: Vector Feathering 기능으로 포토샵 (0) | 2026.02.09 |
| RIVE: 360도 돌아가는 3D 문어 (0) | 2026.02.04 |
| RIVE : 출렁이는 별 3개 UI (0) | 2026.02.01 |
댓글