Frontend 캐릭터 애니메이션, 픽셀 스프라이트 프레임으로 자연스럽게

미니홈 캐릭터 애니메이션이 좀 밋밋하다는 피드백을 받았습니다. 뭔가 좀 더 살아있는 느낌을 주고 싶었는데, 픽셀 스프라이트 프레임 애니메이션으로 개선해보니 확실히 달라지더라고요. 특히 가만히 서 있을 때(idle)의 움직임이 중요했습니다.

시도와 함정

처음에는 단순히 스프라이트 시트만 교체하면 될 줄 알았습니다. 그런데 기존 애니메이션 로직과 충돌하는 부분이 좀 있더라고요.

// 기존 애니메이션 로직 (간략화)
function updateCharacterAnimation(state) {
  if (state === 'walking') {
    // 걷기 애니메이션 프레임 변경 로직
  } else if (state === 'idle') {
    // 멈춰있는 애니메이션 프레임 변경 로직
  }
  // ...
}

새로운 스프라이트 시트를 적용했더니, 'idle' 상태에서 프레임이 뚝뚝 끊기거나 어색하게 멈추는 현상이 발생했습니다. 마치 로봇처럼요.

원인

알고 보니 기존 애니메이션 로직에서 'idle' 상태의 프레임 전환 타이밍이 너무 빠르거나, 스프라이트 시트의 프레임 구성과 맞지 않았던 것이 문제였습니다. 픽셀 스프라이트의 디테일을 살리려면 각 프레임의 노출 시간을 좀 더 세밀하게 조절해야 했습니다.

해결

결국 'idle' 상태의 애니메이션 로직을 수정했습니다. 각 프레임의 노출 시간을 늘리고, 미묘한 움직임을 추가해서 좀 더 자연스럽게 보이도록 했습니다.

// 개선된 애니메이션 로직 (간략화)
function updateCharacterAnimation(state) {
  if (state === 'walking') {
    // 걷기 애니메이션 프레임 변경 로직
  } else if (state === 'idle') {
    // idle 상태 프레임 변경 로직
    const idleFrames = characterSpriteSheets['idle']; // 예: ['idle_01.png', 'idle_02.png', 'idle_03.png', 'idle_02.png']
    const frameDuration = 200; // 각 프레임 노출 시간 (ms)
// 현재 프레임 인덱스 업데이트 및 루프 처리
const currentFrameIndex = Math.floor((Date.now() % (idleFrames.length * frameDuration)) / frameDuration);
characterRenderer.setFrame(idleFrames[currentFrameIndex]);

}
// ...
}

특히 idleFrames 배열에 ['idle_01.png', 'idle_02.png', 'idle_03.png', 'idle_02.png'] 처럼 약간의 움직임(02 -> 03 -> 02)을 넣고 frameDuration을 조절해서 부드럽게 보이도록 했습니다.

결과

• 캐릭터의 'idle' 상태가 훨씬 자연스럽고 생동감 있게 보입니다.
• 사용자들의 캐릭터 상호작용에 대한 긍정적인 반응이 늘었습니다.
• 전반적인 미니홈의 시각적 퀄리티가 향상되었습니다.

정리 — 같은 함정 안 빠지려면

• [ ] 스프라이트 시트 교체 시, 기존 애니메이션 로직과의 호환성을 반드시 확인하세요.
• [ ] 특히 'idle' 상태의 애니메이션은 캐릭터의 생동감을 결정하는 중요한 요소입니다. 프레임 구성과 노출 시간을 세밀하게 조절하세요.
• [ ] 미묘한 움직임(예: 숨 쉬는 듯한)을 추가하면 'idle' 상태가 훨씬 자연스러워집니다.
• [ ] 각 프레임의 노출 시간을 조절할 수 있는 로직을 마련해두는 것이 좋습니다.