걷기 애니메이션 개선: 프레임 교대 대신 총총 바운스 + 미세 기울임

두 걷기 프레임의 몸통 각도가 달라 교대 시 도리도리처럼 보이던 문제.
walk1 한 프레임에 hop 바운스와 ±3.4° 기울임으로 걷는 느낌을 냄.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
이 커밋은 다음에 포함됨:
kjs
2026-08-13 12:39:46 +09:00
co-authored by Claude Fable 5
부모 a9a47f9d7e
커밋 aa289c3616
+5 -7
파일 보기
@@ -411,19 +411,17 @@ export default function VillageView() {
y: anim.y, y: anim.y,
draw: () => { draw: () => {
shadow(anim.x, anim.y + 2, 11); shadow(anim.x, anim.y + 2, 11);
const frameName = working // 걷기는 프레임 교대 대신 한 프레임 + 총총 바운스 + 미세 기울임
? "work" // (두 걷기 프레임의 몸통 각도가 달라 교대 시 도리도리처럼 보이는 문제 회피)
: moving const frameName = working ? "work" : moving ? "walk1" : "idle";
? Math.floor(now / 180) % 2 === 0
? "walk1"
: "walk2"
: "idle";
const sprite = catFramesRef.current.get(frameName); const sprite = catFramesRef.current.get(frameName);
if (sprite) { if (sprite) {
const sh = 42; const sh = 42;
const sw = (sprite.width / sprite.height) * sh; const sw = (sprite.width / sprite.height) * sh;
const tilt = moving ? Math.sin(now / 150) * 0.06 : 0;
ctx.save(); ctx.save();
ctx.translate(anim.x, anim.y + bob); ctx.translate(anim.x, anim.y + bob);
ctx.rotate(tilt);
if (anim.flip) ctx.scale(-1, 1); if (anim.flip) ctx.scale(-1, 1);
ctx.drawImage(sprite, -sw / 2, -sh + 4, sw, sh); ctx.drawImage(sprite, -sw / 2, -sh + 4, sw, sh);
ctx.restore(); ctx.restore();