귀여움은 모델이 아니라 모션에서 나온다
토끼 몸통을 구와 캡슐로 빚었지만, 가만히 있으면 그냥 장식이다.
키프레임 애니메이션 파일은 없으니 움직임도 전부 코드로 만들어야 했다. useFrame 안에서 매 프레임 변형을 직접 계산한다.
키프레임이 없어서 오히려 좋았던 것
처음엔 아쉬운 선택이었지만 하다 보니 장점이 분명해졌다.
키프레임 클립은 미리 정해진 길이의 재생물이라, 실제 게임 상태와 어긋나기 쉽다.
속도가 오르면 재생 속도를 맞춰야 하고, 점프와 달리기 클립 사이엔 블렌딩과 상태 머신이 필요하다.
어긋나는 순간 발이 바닥에서 미끄러지는 그 특유의 어색함이 나온다.
절차적으로 만들면 그 문제가 아예 없다.
모션이 상태에서 직접 파생되기 때문이다.
지금 속도가 얼마인지, 땅에 붙어 있는지, 각속도가 어느 쪽인지를 그대로 받아 변형을 계산하니, 정의상 게임 상태와 어긋날 수가 없다.
속도를 12에서 30까지 올려도 호핑은 알아서 그만큼 빨라진다.
상태에서 끌어낸 것들
기본은 속도에 동기화된 호핑이다. Math.abs(Math.sin(...))으로 위아래 바운스를 만들고, 빨라질수록 호핑 주기를 당긴다.
착지 근처에서는 몸을 납작하게(squash), 공중에선 위아래로 늘인다(stretch).
애니메이션 교과서의 그 원칙인데, 프리미티브 덩어리에서는 효과가 유난히 크다.
형태가 단순할수록 변형이 더 잘 읽히기 때문이다.
회전할 때는 그 방향으로 살짝 기울인다(bank).
여기서 기울기의 근거로 쓰는 값이 이동을 굴리는 각속도 그 자체다.
별도 애니메이션 파라미터를 두지 않았으니, 조작과 겉모습이 서로 다른 말을 할 일이 없다.
최대 각속도가 3.2rad/s니 기울기도 거기 비례해 상한이 생긴다.
귀는 속도가 붙을수록 뒤로 눕다가 호핑에 맞춰 팔랑인다.
캡슐 두 개에 회전만 얹은 건데, 속도감을 전달하는 몫이 꽤 크다.
깜빡임도 3초쯤마다 한 번씩 눈 스케일을 눌러 넣었다.
눈이 잠깐 감기는 것만으로 "보고 있다"는 인상이 생긴다.
앞발은 한 번 갈아엎었다.
처음엔 발을 통째로 앞뒤로 옮겼는데, 몸에서 분리돼 떠다니는 것처럼 보였다.
어깨 위치에 회전 피벗을 두고 그 피벗을 흔드는 방식으로 바꾸니 비로소 팔이 몸에 달린 것처럼 움직였다.
관절이 있는 것처럼 보이려면 실제로 관절 위치에서 돌려야 했다.
백미는 돌아보기
백미는 "글랜스"다.
러너 카메라는 토끼 뒤에 있어서 플레이어에겐 뒤태만 보인다.
그대로 두면 공들인 얼굴을 아무도 못 본다.
그래서 5.2초 주기로 머리 그룹이 카메라 쪽을 슬쩍 돌아봤다가 부드럽게 제자리로 돌아오게 했다.
glanceTimer.current += dt;
if (glanceTimer.current > 5.2) glanceTimer.current = 0;
const gp = glanceTimer.current;
let glance = 0;
if (gp > 0.8 && gp < 2.6) glance = Math.sin(((gp - 0.8) / 1.8) * Math.PI);
if (head.current) head.current.rotation.y = glance * -1.6;
숫자를 잡는 데 시간이 걸렸다.
주기가 짧으면 계속 두리번거려서 산만하고, 길면 있는 줄도 모른다.
5.2초는 한 판에 몇 번은 눈에 띄되 거슬리지는 않는 간격이었다.
돌아보는 구간을 주기 전체가 아니라 0.8초에서 2.6초 사이로 잘라둔 것도 같은 이유다.
대부분의 시간은 앞을 보고 달리고, 가끔 한 번 돌아본다.
각도를 사인 곡선으로 만든 것도 중요하다.
선형으로 돌리면 시작과 끝이 툭 끊겨 기계처럼 보인다.
사인은 양 끝에서 속도가 0에 수렴하니 저절로 부드럽게 들어갔다 나온다.
이징 라이브러리 없이 함수 하나로 해결되는 부분이다.
값은 싸다
이 모든 모션이 프레임마다 하는 일은 결국 ref로 잡아둔 객체의 위치·회전·스케일 값을 덮어쓰는 것뿐이다.
새로 만드는 객체도 없고 React 리렌더도 일으키지 않는다.
사인 몇 번과 곱셈 몇 번이라 비용도 사실상 없다.
애니메이션 클립을 재생하고 블렌딩하는 것보다 오히려 가볍다.
다 만들고 나서 분명해진 게 있다.
똑같은 구·캡슐 덩어리인데, 모션을 입히기 전과 후의 인상이 완전히 달랐다.
귀여움은 모델 디테일이 아니라 움직임에서 나온다.
정적인 스탠포드 버니보다 통통 튀는 구 덩어리가 훨씬 살아 있었다.
다음 편은 이 토끼와 터널을 황혼 톤으로 칠한 툰 셰이딩 이야기다.