게임을 더 게임답게 만드는 법

타격이 발생한 순간 게임 시간만 아주 짧게 멈춘다. 뇌는 이 정지를 「충격 때문에 세상이 멈췄다」로 읽는다. 격투 게임의 타격감은 거의 전부 여기서 나온다. 투자 대비 효과가 이 목록에서 가장 크다.

우리 기본값은 0.1배다. 완전히 멈추면 「멈췄다」가 아니라 「끊겼다」로 읽히는 경우가 많아서다. 다만 격투 게임처럼 완전 정지(0배)를 쓰는 장르도 있다 — 타격이 드물고 한 방이 무거운 게임에서는 정지가 오히려 정답이고, 그쪽 전통은 프레임 단위로 정지 길이를 표에 박아 관리한다. 연사·다타격이면 0.1배를 기본으로 둔다.

• 기본값: 4프레임 ≈ 67ms, 그동안 시간 배율 ×0.1
• 약한 타격 30~50ms / 보통 60~80ms / 처형·보스 킬 120~150ms
• 연사 무기는 발사당 20ms 이하 또는 아예 빼라 (아래 부작용 참고)
• 정지 길이는 실시간으로 재야 한다. 게임 시간으로 재면 영원히 안 끝난다.

let hitStopUntil = 0;                 // 실시간 기준 종료 시각(ms)

function hitStop(ms = 67) {
  hitStopUntil = Math.max(hitStopUntil, performance.now() + ms);
}

function frame(nowMs) {
  const rawDt = Math.min((nowMs - last) / 1000, 1 / 20);   // 스파이크 컷
  last = nowMs;

  const frozen  = nowMs < hitStopUntil;
  const timeMul = frozen ? 0.1 : 1;     // 0 이 아니라 0.1
  const dt = rawDt * timeMul;

  world.update(dt);      // 물리·엔티티
  fx.update(dt);         // 파티클도 같이 느려져야 한 덩어리로 보인다
  ui.update(rawDt);      // UI·입력 폴링은 실시간
  render();
}

// 호출부
onBulletHitEnemy(e) { hitStop(67); blink(e); setSquashX(e, 0.6); }

카메라 위치에 시간 함수로 만든 진동 오프셋을 더한다. 우리는 주파수가 다른 사인파 두 개로 간다(X 1.1, Y 1.7). 결정론적이라 재현과 디버그가 쉽고 코드가 두 줄이다. 두 주파수가 같으면 흔들림이 대각선 한 줄로 뭉개지므로 반드시 다르게 둔다.

펄린 노이즈 셰이크도 널리 쓰이는 정석이고, 사인파보다 더 자연스럽다 — 축마다 1D 노이즈를 하나씩 두고 시간을 흘리면 된다(감쇠를 제곱으로 주는 「트라우마」 방식과 조합하는 구현이 유명하다). 난수 자체가 나쁜 게 아니다. 문제는 매 프레임 독립 난수를 쓰는 경우로, 그때만 프레임레이트에 따라 흔들림의 성격이 달라진다. 노이즈든 사인파든 시간의 함수이기만 하면 된다.

감쇠는 선형(남은 시간 비율)이다. 지수 감쇠를 쓰면 꼬리가 길게 남아 「진동이 안 멈추는」 느낌이 난다.

• 진폭 상수 2.5 화면 픽셀 × power × 남은비율 — 변환 불필요(이미 픽셀)
• 발사: 0.1초 / power 0.2 → 최대 0.5px. 거의 안 보이는 수준이 정답
• 착지: 0.6*pow 초 / power 0.8*pow, pow = clamp((낙하셀-2)/6, 0, 1)
• 달리기 발걸음: 0.3초 / power 0.2
• 주파수는 프레임 카운터 기준이므로 dt 루프에선 f = elapsedSec * 60

const cam = { shakeLeft: 0, shakeTotal: 0, shakePow: 1 };

// 새 셰이크가 들어와도 진행 중인 더 긴 셰이크를 잘라먹지 않는다.
// (그냥 덮어쓰면 약한 셰이크가 강한 셰이크를 끊어버린다)
function shake(sec, pow = 1) {
  if (sec <= cam.shakeLeft) { cam.shakePow = Math.max(cam.shakePow, pow); return; }
  cam.shakeLeft = cam.shakeTotal = sec;
  cam.shakePow  = pow;
}

function shakeOffset(elapsedSec, dt) {
  if (cam.shakeLeft <= 0) return [0, 0];
  cam.shakeLeft -= dt;
  const ratio = Math.max(0, cam.shakeLeft / cam.shakeTotal);   // 선형
  const f = elapsedSec * 60;
  return [
    Math.cos(f * 1.1) * 2.5 * cam.shakePow * ratio,
    Math.sin(0.3 + f * 1.7) * 2.5 * cam.shakePow * ratio,
  ];
}

// three.js 라면 카메라 위치가 아니라 부모 Object3D 에 더한다
// (추적 로직과 셰이크를 분리해야 서로 싸우지 않는다)

셰이크와 완전히 다른 메커니즘이다. 셰이크는 진동, 범프는 한 방향으로 확 밀렸다가 지수적으로 돌아오는 것. 방향이 있으므로 「어디서 충격이 왔는지」를 전달한다. 총을 오른쪽으로 쏘면 카메라가 왼쪽으로 밀린다.

줌 범프는 세 번째 메커니즘 — 기준 줌에 얹는 별도 항이라, 카메라 추적이나 줌 연출과 간섭하지 않는다.

• 감쇠: 위치 범프 0.85^tmod(약 6프레임 = 0.1s면 40%), 줌 범프 0.9^tmod
• 발사 3px(발사 반대 방향) / 대시 6px / 착지 10px × pow / 발걸음 0.5px
• 줌 범프 +0.03 (기준 줌의 3%). 착지는 0.03 × pow
• 범프는 카메라 목표 위치가 아니라 최종 렌더 오프셋에 더한다

let bumpX = 0, bumpY = 0, bumpZoom = 0;

const camBump     = (x, y) => { bumpX += x; bumpY += y; };
const camBumpAng  = (a, d) => { bumpX += Math.cos(a)*d; bumpY += Math.sin(a)*d; };
const camBumpZoom = (z)    => { bumpZoom = z; };          // 더하지 않고 덮어쓴다

function updateCamera(dt, elapsed) {
  const k = dt * 60;                       // tmod
  bumpX *= Math.pow(0.85, k);
  bumpY *= Math.pow(0.85, k);
  bumpZoom *= Math.pow(0.90, k);

  const [sx, sy] = shakeOffset(elapsed, dt);
  const zoom = baseZoom + bumpZoom;

  // canvas 2D
  view.x = -focusX + (canvas.width / zoom) * 0.5 - bumpX + sx;
  view.y = -focusY + (canvas.height / zoom) * 0.5 - bumpY + sy;
  view.x = Math.round(view.x * zoom) / zoom;   // 픽셀아트면 반올림
}

// 발사 시:  camBump(-dir * 3, 0);  shake(0.1, 0.2);
// 대시 시:  camBump(dir * 6, 0);   camBumpZoom(0.03);

애니메이션 12원칙의 첫 번째. 한 축을 줄이면 다른 축을 늘려서 부피가 보존되는 것처럼 보이게 한다. 스프라이트 하나만 있어도 점프·착지·피격·대시가 전부 다르게 보이기 시작한다.

구현은 sqY = 2 - sqX — 진짜 부피 보존(1/s)이 아니라 합을 보존하는 싼 근사다. 0.5~1.5 구간에서는 눈으로 구분되지 않고, 나눗셈이 없어 0 근처에서 폭발하지 않는다.

• 복원: sq += (1 - sq) * min(1, 0.2 * tmod) — 프레임당 20%, 약 0.08~0.12초면 원상복구
• 점프 squashX 0.55 (세로로 쭉) / 더블점프 0.66
• 대시 squashX 1.3 (가로로 납작) / 발사 squashX 1.2
• 적 피격 squashX 0.6
• 착지 squashY = 1 - 0.5*p, p = 0.2 + 0.8*clamp(낙하셀/6,0,1) → 최소 0.9, 최대 0.5
• 피벗은 발밑(0.5, 1.0). 중심으로 두면 캐릭터가 땅을 뚫거나 뜬다

function setSquashX(e, sx) { e.sqX = sx;     e.sqY = 2 - sx; }
function setSquashY(e, sy) { e.sqX = 2 - sy; e.sqY = sy;     }

function updateSquash(e, dt) {
  const k = Math.min(1, 0.2 * dt * 60);
  e.sqX += (1 - e.sqX) * k;
  e.sqY += (1 - e.sqY) * k;
}

// canvas 2D — 피벗을 발밑에 두고 그린다
ctx.save();
ctx.translate(e.x + e.sprOffsetX, e.y);          // e.y = 발바닥
ctx.scale(e.dir * e.scaleX * e.sqX, e.scaleY * e.sqY);
ctx.drawImage(img, -w / 2, -h, w, h);
ctx.restore();

// three.js — mesh.scale 에 곱하고, geometry 를 미리 y=0 바닥 기준으로 옮겨둔다
mesh.scale.set(baseS * e.sqX, baseS * e.sqY, baseS * e.sqX);

맞은 대상을 한 프레임 동안 흰색으로 태운다. 「맞았다」를 전달하는 가장 값싼 방법이고, 스프라이트가 어떤 색이든 통한다. 중요한 건 색을 바꾸는 게 아니라 더하는 것(additive) — 실루엣과 디테일이 살아 있어야 한다.

감쇠율을 RGB 마다 다르게 준다(0.60 / 0.55 / 0.50). 파랑이 먼저 빠져서 흰색 → 노란색 → 원래색으로 자연스럽게 식는다. 세 값을 같게 두면 그냥 회색으로 흐려진다.

• 유지 0.06초(약 4프레임) 동안 최대 밝기 고정
• 이후 프레임당 r *= 0.60, g *= 0.55, b *= 0.50 → 총 잔상 약 0.15초
• 플레이어 피격은 더 길게(0.1s 유지) + 무적 시간 동안 알파 깜빡임을 별도로

function blink(e, r = 1, g = 1, b = 1) { e.bk = [r, g, b]; e.bkHold = 0.06; }

function updateBlink(e, dt) {
  if (!e.bk) return;
  const k = dt * 60;
  if (e.bkHold > 0) { e.bkHold -= dt; return; }
  e.bk[0] *= Math.pow(0.60, k);
  e.bk[1] *= Math.pow(0.55, k);
  e.bk[2] *= Math.pow(0.50, k);
  if (e.bk[0] < 0.01) e.bk = null;
}

// canvas 2D: 스프라이트를 그린 뒤 같은 실루엣을 additive 로 덧칠
drawSprite(e);
if (e.bk) {
  ctx.save();
  ctx.globalCompositeOperation = 'lighter';
  ctx.globalAlpha = 1;
  ctx.drawImage(tintedCache(e, e.bk), ...);   // 흰색으로 칠한 캐시본
  ctx.restore();
}

// three.js: material.emissive.setRGB(...e.bk)  — 재질 인스턴스를 공유하지 말 것

플랫포머가 「반응이 안 좋다」는 인상을 주는 원인의 8할은 이 둘이 없어서다. 둘 다 플레이어를 위한 거짓말이고, 제대로 작동하면 플레이어는 있다는 사실조차 모른다.

• 코요테 시간 — 발이 땅에서 떨어진 뒤에도 잠깐 점프를 받아준다. 「분명히 눌렀는데 안 뛰었다」를 없앤다.
• 입력 버퍼 — 착지 직전(또는 조작 잠금 중)에 누른 점프를 버려두지 않고 큐에 넣었다가, 가능해지는 순간 실행한다. 「연속 점프가 씹힌다」를 없앤다.

같이 넣어야 한다. 하나만 넣으면 반대쪽 구멍이 그대로 남는다.

• 코요테: 0.15초면 관대한 편. 일반적으로 80~120ms 가 무난, 정밀 플랫포머는 60ms
• 입력 버퍼: 100~150ms
• 점프 초속 0.45 셀/프레임 = 7.2 px/frame ≈ 430 px/s / 더블점프 0.52 ≈ 500 px/s
• 중력 0.05 셀/프레임² ≈ 2,880 px/s²
• 상승 중 중력 완화: gravityMul = 0.1 + 0.9*(1 - ratio) 를 점프 후 0.1초(더블점프 0.3s, 대시 0.2s) 적용 → 정점이 뜨는 느낌이 난다
• 공중 가속 0.019 > 지상 가속 0.015 — 공중 제어를 오히려 더 준다. 지상 정지 마찰 0.85^tmod

const COYOTE = 0.15, BUFFER = 0.12;
let coyote = 0, jumpBuf = 0;
let reduceGrav = 0, reduceGravMax = 0;     // 남은 시간 / 그때 정한 전체 길이

function setReduceGrav(sec) { reduceGrav = sec; reduceGravMax = sec; }

function updateHero(dt, input) {
  const k = dt * 60;

  coyote  = onGround ? COYOTE : Math.max(0, coyote - dt);
  jumpBuf = input.jumpPressedThisFrame ? BUFFER : Math.max(0, jumpBuf - dt);

  if (jumpBuf > 0 && coyote > 0 && !controlsLocked) {
    vy = -430;              // px/s
    jumpBuf = 0; coyote = 0;   // 소비 즉시 비운다
    setReduceGrav(0.1);        // 상승 구간 중력 완화 (더블점프면 0.3)
    setSquashX(hero, 0.55);
    fx.jumpSmoke(hero.x, hero.y);
  }

  // 가변 점프 높이: 버튼을 떼면 상승을 잘라낸다
  if (!input.jumpDown && vy < 0) vy *= Math.pow(0.5, k);

  reduceGrav = Math.max(0, reduceGrav - dt);
  const ratio = reduceGravMax > 0 ? reduceGrav / reduceGravMax : 0;
  const gMul  = 0.1 + 0.9 * (1 - ratio);   // 완화 직후 0.1배 → 끝나면 1배
  vy += 2880 * gMul * dt;

  // 좌우: 가속 + 지수 마찰 (즉시 최고속도로 만들지 않는다)
  if (input.right) vx += (onGround ? 864 : 1094) * dt;
  else if (input.left) vx -= (onGround ? 864 : 1094) * dt;
  else if (onGround) vx *= Math.pow(0.85, k);
}

착지는 게임에서 가장 자주 일어나는 「충격」이다. 그런데 대부분의 프로토타입은 vy = 0; onGround = true; 로 끝낸다. 무게가 사라진다.

제대로 된 착지는 한 이벤트가 6개 시스템을 동시에 건드린다 — 카메라 범프 / 셰이크 / 줌 범프 / 스쿼시 / 조작 잠금 / 먼지 / 주변 적 밀어내기. 그리고 전부 낙하 높이에 비례한다. 이 「강도 스케일링」이 핵심이다. 한 칸 내려온 것과 절벽에서 떨어진 것이 같은 연출이면 둘 다 가짜가 된다.

• 강도 pow = clamp((낙하셀 - 2) / 6, 0, 1) → 2셀(32px) 이하는 무반응, 8셀에서 최대
• 카메라 범프 0, 10*pow px / 셰이크 0.6*pow 초, power 0.8*pow / 줌 범프 0.03*pow
• 스쿼시 squashY = 1 - 0.5*p2, p2 = 0.2 + 0.8*clamp(낙하셀/6,0,1)
• 조작 잠금: 4셀 초과 → 0.3*p3초 + 걷기 잠금 0.75*p3초 / 이하 → 0.06초 + vx *= 0.7
• 먼지: 3셀 이상일 때만, 20개, 수명 0.3~0.9s
• 주변 적: 4셀 이상 낙하 시 12셀 이내 적에게 거리 비례로 dy = -rnd(0.3,0.4)*pow

function onLand(fallCells) {
  const pow = clamp((fallCells - 2) / 6, 0, 1);
  if (pow <= 0 && fallCells < 3) { lockControls(0.06); vx *= 0.7; return; }

  camBump(0, 10 * pow);
  shake(0.6 * pow, 0.8 * pow);
  camBumpZoom(0.03 * pow);

  const p2 = 0.2 + 0.8 * clamp(fallCells / 6, 0, 1);
  setSquashY(hero, 1 - 0.5 * p2);

  if (fallCells > 4) {
    const p3 = clamp((fallCells - 4) / 2, 0, 1);
    lockControls(0.3 * p3);
    walkLock(0.75 * p3);          // 조작은 풀렸지만 걷기는 아직 (비틀거림)
  } else {
    lockControls(0.06);
    vx *= 0.7;
  }

  if (fallCells >= 3) fx.landSmoke(hero.x, hero.footY, 1);

  if (fallCells >= 4) for (const m of mobs) {          // 지면을 타고 전달되는 충격
    const p = 1 - clamp(distCells(hero, m) / 12, 0, 1);
    m.vBump.x += dirTo(hero, m) * rand(0.1, 0.2) * p * 960;
    m.vBump.y  = -rand(0.3, 0.4) * p * 960;
  }
}

이 문서에서 가장 중요한 구조적 원칙. 엔티티의 위치에 영향을 주는 경로를 세 층으로 나눈다.

1. sprOffsetX — 순수 시각. 그리기 좌표에만 더해진다. 물리·판정에 영향 0. 감쇠 0.8^tmod.
2. vBump — 외부 충격 속도(넉백). 마찰 0.93. 플레이어 입력과 따로 계산되므로 서로 싸우지 않는다.
3. vBase — 플레이어(또는 AI)가 만든 속도. 마찰 0.9.

이동 = vBase + vBump 의 합, 렌더 = 이동 결과 + sprOffsetX.

카탈로그에 gunRecoilVisual 과 gunRecoilMovement 가 따로 있는 이유가 정확히 이것이다. 하나는 그림을 밀고, 하나는 몸을 민다. 대부분의 상황에서 시각 오프셋만으로 충분하고, 실제 이동은 조준을 방해한다. 적 넉백을 vBump 로 처리하는 이유도 같다 — vBase 에 넣으면 적 AI 의 이동 의도를 덮어쓴다.

같은 분리는 스쿼시(레시피 4)에도 적용된다. sqX/sqY 는 렌더 스케일일 뿐 히트박스를 건드리지 않는다. 히트박스는 절대 연출을 따라가지 않는다.

• 시각 반동 sprOffsetX += -dir * rnd(1, 3) px, 감쇠 0.8^tmod(약 0.1초면 사라짐)
• 실제 반동 vBase.x += -dir * rnd(0, 0.01) 셀/프레임 ≈ 0~10 px/s — 대단히 작다
• 적 넉백 첫 타 vBump += (dir*rnd(0.040,0.060), -0.05) ≈ 38~58 px/s, 마찰 0.93 → 총 이동 약 9~14px
• 연타(0.4초 이내) 넉백은 rnd(0.005, 0.010) 로 약 1/6. 안 그러면 적이 화면 밖으로 날아간다
• 마찰: 입력 속도 0.9 / 충격 속도 0.93 (충격이 조금 더 오래 남는다)

// --- 엔티티 상태 ---
e.vBase = { x: 0, y: 0 };   // 플레이어/AI 가 만든 속도
e.vBump = { x: 0, y: 0 };   // 외부 충격
e.sprOffsetX = 0;           // 그림만

function shoot(e, dir) {
  e.sprOffsetX += -dir * rand(1, 3);            // 레이어 1 (그림)
  e.vBase.x    += -dir * rand(0, 0.01) * 960;   // 레이어 3 (아주 약하게)
  camBump(-dir * 3, 0);
  shake(0.1, 0.2);
  setSquashX(e, 1.2);
  fx.muzzle(e); fx.cartridge(e); flash(0xffcc00, 0.04, 0.1);
}

function hitEnemy(m, fromDir) {
  const first = !m.recentlyHit;                 // 0.4초 쿨다운
  const p = first ? rand(0.040, 0.060) : rand(0.005, 0.010);
  m.vBump.x += fromDir * p * 960;               // 레이어 2 (넉백)
  if (first) m.vBump.y = -0.05 * 960;
  m.recentlyHit = 0.4;
  blink(m); setSquashX(m, 0.6); fx.blood(m, fromDir);
}

function stepEntity(e, dt) {
  const k = dt * 60;
  e.x += (e.vBase.x + e.vBump.x) * dt;          // 합으로 이동
  e.y += (e.vBase.y + e.vBump.y) * dt;
  e.vBase.x *= Math.pow(0.90, k);
  e.vBump.x *= Math.pow(0.93, k);
  e.sprOffsetX *= Math.pow(0.80, k);            // 물리와 무관하게 따로 감쇠
}

const drawX = e.x + e.sprOffsetX;               // 렌더에서만 합류

히트스톱이 「찰나의 정지」라면 슬로모는 「예고된 느림」이다. 목적이 다르다 — 대표적인 용처는 대시다. 타격감이 아니라 움직임을 예측할 시간을 주기 위해서다.

구현의 세 가지 요령:

• 여러 슬로모는 곱으로 누적한다. 0.8 × 0.5 = 0.4. 더하기로 하면 겹칠 때 0 이하로 떨어진다.
• 진입은 빠르게, 복귀는 천천히. 보간 계수를 비대칭으로 둔다 — 느려질 때 0.6, 돌아올 때 0.2. 반대로 하면 「느려지는 게 늦게 오고 갑자기 정상으로 돌아오는」 최악의 조합이 된다.
• 최종 배율에 바닥을 깐다: 0.2 + 0.8*cur. 슬로모 배율이 0 이 되어도 게임은 20% 속도로 계속 돈다.

• 대시: 0.4초 / 배율 0.8 (20% 감속). 대시 지속 중 매 프레임 갱신
• 보간: 감속 0.6 / 복귀 0.2 (프레임당)
• 최종 시간 배율 timeMul = 0.2 + 0.8 * cur → cur 0.8 일 때 실제 0.84배
• 슬로모 잔여 시간은 실시간으로 차감한다(안 그러면 안 끝난다)
• 연출용 슬로모(보스 처치 등)는 0.3~0.5배 × 0.5~1.0초 정도가 상한

const slowMos = new Map();
let cur = 1;

function addSlowMo(id, sec, factor = 0.3) {
  const s = slowMos.get(id);
  if (s) { s.f = factor; s.t = Math.max(s.t, sec); }
  else slowMos.set(id, { t: sec, f: factor });
}

function updateSlowMo(realDt) {
  for (const [id, s] of slowMos) {
    s.t -= realDt;                       // 실시간으로 차감
    if (s.t <= 0) slowMos.delete(id);
  }
  let target = 1;
  for (const s of slowMos.values()) target *= s.f;   // 곱으로 누적

  // 느려질 땐 빠르게(0.6), 정상으로 돌아올 땐 천천히(0.2)
  cur += (target - cur) * (target > cur ? 0.2 : 0.6);
  if (Math.abs(cur - target) <= 0.001) cur = target;

  return 0.2 + 0.8 * cur;                // 바닥 20%
}

// 프레임에서 히트스톱과 곱해서 쓴다
const timeMul = updateSlowMo(rawDt) * (frozen ? 0.1 : 1);

파티클을 「예쁘게 뿌리는 것」으로 생각하면 실패한다. 파티클은 전부 역할이 정해져 있고 수명이 역할에 맞게 극단적으로 다르다.

• 순간 이펙트(총구·임팩트·대시) — 수명 0.03~0.12초. 눈에는 「번쩍」으로만 남는다. 개수가 많고 아주 짧다.
• 중간 이펙트(먼지·연기) — 0.3~2초. 움직임의 흔적을 그린다.
• 흔적(탄피·피·탄흔) — 2~15초. 「여기서 싸웠다」는 기록을 남긴다. 이게 없으면 전투 후 공간이 처음과 똑같아진다.

그리고 하나의 이펙트가 여러 층으로 이루어진다. 총구 화염은 「긴 선 1개 + 코어 6개 + 방사형 잔선 10개」의 3층이다. 단일 스프라이트 하나로는 절대 같은 밀도가 나오지 않는다.

// --- 풀 (매 발사마다 객체를 만들면 GC 가 프레임을 먹는다) ---
const POOL = Array.from({ length: 2048 }, () => ({ alive: false }));
let cursor = 0;
function alloc() {
  for (let i = 0; i < POOL.length; i++) {
    const p = POOL[(cursor + i) % POOL.length];
    if (!p.alive) { cursor = (cursor + i + 1) % POOL.length; p.alive = true; return p; }
  }
  return null;                                  // 가득 차면 버린다 (절대 늘리지 않는다)
}

// --- 공통 스텝: 모든 파티클이 같은 식을 쓴다 ---
function stepParticle(p, dt) {
  const k = dt * 60;
  p.dy += p.gy * k;
  p.x += p.dx * k; p.y += p.dy * k;
  p.dx *= Math.pow(p.frict, k); p.dy *= Math.pow(p.frict, k);
  p.scaleX *= Math.pow(p.scaleXMul ?? 1, k);
  p.rotation += p.dr * k;
  p.life -= dt;
  if (p.fadeAfter !== undefined && p.life < p.fadeAfter)
    p.alpha = p.life / p.fadeAfter;
  if (p.life <= 0) p.alive = false;
  if (p.onUpdate) p.onUpdate(p);                // 바운스·벽 부착 등
}

// --- 총구 화염: 3층 ---
function muzzle(x, y, dir) {
  const long = alloc();                                   // ① 긴 선
  Object.assign(long, { x, y, dx: 0, dy: 0, gy: 0, frict: 1,
    scaleX: dir * rand(1.5, 2), scaleY: rand(1.2, 1.4), life: 0.12, add: true });

  for (let i = 0; i < 6; i++) {                           // ② 코어
    const p = alloc(); if (!p) break;
    Object.assign(p, { x: x + rand(-1, 1), y: y + rand(-1, 1),
      dx: 0, dy: 0, gy: 0, frict: 1, scaleX: dir * rand(0.7, 1.5),
      life: rand(0.03, 0.06), add: true });
  }

  const n = 10;                                           // ③ 방사형 잔선
  for (let i = 0; i < n; i++) {
    const a = (dir > 0 ? 0 : Math.PI) - 0.9 + 1.8 * (i + 1) / n + rand(-0.1, 0.1);
    const p = alloc(); if (!p) break;
    Object.assign(p, { x, y, rotation: a,
      dx: Math.cos(a) * rand(4, 8), dy: Math.sin(a) * rand(4, 8),
      gy: 0, frict: rand(0.82, 0.84), life: rand(0.03, 0.06), add: true });
  }
}

Juice It or Lose It 의 핵심은 사실 파티클이 아니라 이것이다. 값이 즉시 바뀌지 않게 만드는 것 하나로 화면 전체의 인상이 바뀐다. 카메라가 없는 장르(방치 · 경영 · 서사 · 퍼즐)에서는 이게 주스의 거의 전부다.

세 가지 용도로 쓴다.

• 숫자 보간 — 점수 · HP · 자원이 목표값까지 굴러간다. 실제 값은 즉시 바뀌고 보이는 값만 따라간다.
• 등장 오버슛 — 스케일 0 → 1 을 easeOutBack 으로 넘겨 살짝 튀게 한다. 팝업 · 카드 · 획득 표시.
• 순차 지연(stagger) — 목록이 한꺼번에 나타나지 않고 30~50ms 씩 밀려 들어온다. 같은 내용이 훨씬 비싸 보인다.

• 숫자 카운트업 0.3~0.5초. 큰 수라고 시간을 늘리지 말고 자릿수를 줄여 처리한다
• 등장 스케일 0 → 1, easeOutBack 0.25~0.35초, 오버슛 계수 1.70158(CSS 로는 cubic-bezier(.34,1.56,.64,1))
• 순차 지연 항목당 30~50ms, 전체가 0.4초를 넘지 않게. 10개가 넘으면 지연을 줄인다
• 버튼 · 카드 눌림 0.92 → 1, 0.1초 (→ 레시피 12)
• 화면 전환 페이드 0.2~0.3초. 그 이상은 연출이 아니라 기다림이다
• 보간은 프레임 독립으로 — v += (target - v) * (1 - Math.pow(0.001, dt / T)), T 는 수렴 시간
• HUD 는 실시간 dt로 돌린다. 히트스톱 · 슬로모에 숫자까지 멈추면 멈춘 것처럼 보인다

// --- 이징 5개 (t: 0~1) ---
const easeOutQuad    = t => 1 - (1 - t) * (1 - t);
const easeOutCubic   = t => 1 - Math.pow(1 - t, 3);
const easeInOutCubic = t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2;
const easeOutBack    = t => { const c = 1.70158;
  return 1 + (c + 1) * Math.pow(t - 1, 3) + c * Math.pow(t - 1, 2); };
const easeOutElastic = t => (t === 0 || t === 1) ? t
  : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * (2 * Math.PI / 3)) + 1;

// --- 숫자 카운트업 ---
const hud = { score: 0, shown: 0, pop: 0 };

function addScore(n) { hud.score += n; hud.pop = 0.12; fx.popText('+' + n); }

function updateHud(rawDt) {                     // 실시간 dt (히트스톱 영향 없음)
  const k = 1 - Math.pow(0.001, rawDt / 0.4);   // 0.4초 수렴, 프레임 독립
  hud.shown += (hud.score - hud.shown) * k;
  if (Math.abs(hud.score - hud.shown) < 0.5) hud.shown = hud.score;

  hud.pop = Math.max(0, hud.pop - rawDt);       // 변한 항목만 튄다
  scoreEl.textContent   = Math.round(hud.shown);
  scoreEl.style.transform = 'scale(' + (1 + 0.18 * easeOutQuad(hud.pop / 0.12)) + ')';
}

// --- 등장 오버슛 + 순차 지연 ---
function appear(el, i) {
  el.style.transition = 'none';
  el.style.transform  = 'scale(0)';
  setTimeout(() => {                            // 항목당 40ms
    el.style.transition = 'transform .3s cubic-bezier(.34,1.56,.64,1)';
    el.style.transform  = 'scale(1)';
  }, i * 40);
}

우리 게임은 대부분 모바일 터치가 주 조작이다. 그런데 터치에서 「반응이 느리다」의 원인은 연출이 아니라 이벤트 선택인 경우가 많다. click 은 브라우저가 더블탭 확대 여부를 판단할 때까지 기다린 뒤에야 온다.

그래서 순서를 뒤집는다 — pointerdown 에서 그림과 소리를 먼저 내보내고, 게임 로직은 그 뒤에 돌린다. 결과가 늦더라도 손끝의 반응은 즉시여야 한다.

• 반응은 pointerdown 에서. click 을 기다리지 않는다
• 버튼 스쿼시 0.92 → 1, 0.1초. 값을 더 내리면 버튼이 꺼지는 것처럼 보인다
• 탭 영역 44px 하한. 아이콘이 24px 여도 히트 영역은 44px 로 키운다
• touch-action: manipulation 으로 약 300ms 지연 제거, -webkit-tap-highlight-color: transparent 로 회색 사각형 제거
• navigator.vibrate([10]) 은 Android Chrome 계열에서만 동작하고 iOS Safari 는 무시한다. 있으면 좋은 보너스로 취급하고, 반드시 설정에서 끌 수 있게 한다
• 중요한 피드백은 터치 지점 위쪽에 띄운다 — 아래는 손가락이 가린다
• 연출 값은 PC 기준의 절반부터 시작한다. 화면이 작아 셰이크 · 파티클이 상대적으로 크게 보인다

/* CSS — 이 셋이 없으면 무엇을 얹어도 굼뜨다 */
.btn {
  touch-action: manipulation;              /* 더블탭 확대 대기(약 300ms) 제거 */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-width: 44px; min-height: 44px;       /* 시각 크기와 무관하게 히트 영역은 44px */
  transition: transform .1s ease-out;
}
.btn.down { transform: scale(0.92); }
body { overscroll-behavior: none; }        /* 풀투리프레시 차단 */

// pointerdown 에서 끝낸다
btn.addEventListener('pointerdown', (e) => {
  e.preventDefault();                            // 스크롤·확대 차단
  btn.classList.add('down');                     // ① 그림  (0.92 → 1)
  sfx.play('tap');                               // ② 소리  — 로직보다 먼저
  if (navigator.vibrate) navigator.vibrate(10);  // ③ 진동  — Android 만, iOS 는 무시
  fire();                                        // 게임 로직은 마지막
}, { passive: false });

const up = () => btn.classList.remove('down');
btn.addEventListener('pointerup', up);
btn.addEventListener('pointercancel', up);       // 손가락이 버튼 밖으로 나간 경우

3D 라고 원칙이 바뀌지는 않는다. 바뀌는 것은 어디에 값을 얹느냐와 값의 폭이다. 2D 수치를 그대로 옮기면 거의 전부 과해 보인다.

가장 중요한 하나 — 셰이크와 범프를 camera.position 에 직접 더하지 않는다. 카메라 위치는 추적 로직의 것이라, 같은 값을 두 주인이 쓰면 매 프레임 서로 덮어쓴다. 카메라를 부모 Group 에 넣고 흔드는 것은 그 Group 이다.

• 셰이크 · 범프는 부모 Group 의 position. 카메라는 추적 로직 전용
• 스쿼시는 mesh.scale, 폭은 0.85~1.15 — 2D 의 0.55~1.4 를 그대로 쓰면 고무가 된다(→ 레시피 4)
• 줌 범프 대신 FOV 범프 +2~3°, 감쇠 0.9^tmod. 카메라를 앞뒤로 움직이는 것보다 안전하다
• 피격 플래시는 material.emissive 0.6 → 0. 재질 인스턴스를 공유하지 않는다(공유하면 같은 종류의 적이 전부 같이 번쩍인다). 인스턴싱이면 onBeforeRender 에서 uniform 을 개체별로 넣는다
• 히트스톱 · 슬로모는 clock.getDelta() 에 배율을 곱하고, 애니메이션 믹서에도 같은 dt 를 넘긴다
• 파티클은 InstancedMesh 또는 Points 로 미리 최대 개수만큼 만들어 두고 재사용한다. 매번 new Mesh 는 프레임을 먹는다
• 그림자 · 접지가 타격감보다 먼저다. 유닛이 바닥에서 떠 보이면 어떤 연출도 가볍다

// --- 셰이크·범프는 카메라가 아니라 부모 Group 에 ---
const rig = new THREE.Group();
rig.add(camera);              // camera.position 은 추적 로직의 것. 건드리지 않는다.
scene.add(rig);

let bumpX = 0, bumpY = 0, fovBump = 0;
const baseFov = camera.fov;

function updateRig(dt, elapsed) {
  const k = dt * 60;
  bumpX   *= Math.pow(0.85, k);
  bumpY   *= Math.pow(0.85, k);
  fovBump *= Math.pow(0.90, k);

  const [sx, sy] = shakeOffset(elapsed, dt);          // 레시피 2 그대로
  rig.position.set(bumpX + sx * U, bumpY + sy * U, 0); // U = 화면 1px 의 월드 길이
  camera.fov = baseFov + fovBump;                      // 줌 범프 대신 FOV (+2~3도)
  camera.updateProjectionMatrix();
}

// --- 피격 플래시: 재질을 공유하면 맞지 않은 적까지 번쩍인다 ---
mesh.material = sharedMaterial.clone();                // 개체마다 한 번만
function flashHit(m, v) { m.material.emissive.setScalar(v); }   // v: 0.6 → 0

// --- 스쿼시: geometry 를 미리 y=0 바닥 기준으로 옮겨둔다 ---
mesh.scale.set(s * e.sqX, s * e.sqY, s * e.sqX);       // sqX 는 0.85~1.15 안쪽

// --- 시간 배율은 clock delta 에 곱한다 ---
const raw = clock.getDelta();
const dt  = raw * timeMul;      // slowMo × hitStop
mixer.update(dt);               // 믹서도 같이 느려져야 한 덩어리로 보인다
particles.update(dt);
hud.update(raw);                // UI 만 실시간

실전에서 사운드는 위의 시각 연출을 전부 합친 것만큼 효과가 크다. 그런데 웹에서는 규칙 몇 개를 놓치면 바로 「기계음」이나 「딱딱거리는 잡음」이 되어 오히려 품질을 깎는다.

핵심은 셋이다. ① 같은 소리를 그대로 반복하지 않는다(피치 무작위화) ② 같은 순간에 같은 소리를 여러 번 내지 않는다 ③ 볼륨을 즉시 대입하지 않는다(딱 소리가 난다).

그리고 오디오 게임에서는 이 장이 곧 게임 그 자체다 — 시각의 3채널을 피치 · 좌우 팬 · 잔향으로 옮겨 「거리」와 「방향」을 전달한다.

• 반복음 피치 ±8% 무작위(playbackRate). 넘기면 다른 소리로 들린다
• 같은 id 의 중복 재생은 30~50ms 안에 1개만. 동시 재생 상한은 16개, 넘치면 오래된 것부터 끊는다
• 발사음은 알림이라 조금 길게, 타격음은 확인이라 짧고 날카롭게(80~150ms)
• AudioContext 는 첫 터치에서 생성 · resume(). 그 전에 만들면 suspended 로 남는다
• 슬로모 중에는 BGM 만 playbackRate 0.9. 효과음까지 내리면 둔해진다
• 볼륨은 gain.setTargetAtTime(v, now, 0.01~0.05) 지수 감쇠로. gain.value = 0 즉시 대입은 클릭 노이즈를 만든다
• 오디오 게임의 거리 — 팬 -1 ~ +1, 잔향은 드라이/웻 비율로(멀수록 웻을 올린다). 볼륨만으로는 거리가 안 읽힌다

let ctx = null, master = null;

// 첫 터치에서만 깨운다 (브라우저 자동재생 정책)
addEventListener('pointerdown', () => {
  if (ctx) { if (ctx.state === 'suspended') ctx.resume(); return; }
  ctx = new (window.AudioContext || window.webkitAudioContext)();
  master = ctx.createGain();
  master.gain.value = 1;
  master.connect(ctx.destination);
}, { capture: true });

const lastAt = new Map();

function play(id, buf, { vol = 1, pan = 0, pitch = 0.08 } = {}) {
  if (!ctx) return;
  const now = ctx.currentTime;
  if (now - (lastAt.get(id) ?? -1) < 0.03) return;   // 같은 순간엔 1개만
  lastAt.set(id, now);

  const src = ctx.createBufferSource();
  src.buffer = buf;
  src.playbackRate.value = 1 + (Math.random() * 2 - 1) * pitch;   // ±8%

  const g = ctx.createGain();
  g.gain.value = 0;
  g.gain.setTargetAtTime(vol, now, 0.01);      // 즉시 대입하면 딱 소리가 난다

  const p = ctx.createStereoPanner();
  p.pan.value = pan;                            // -1 왼쪽 ~ +1 오른쪽

  src.connect(g).connect(p).connect(master);
  src.start();
  return g;
}

function fadeOut(g, sec = 0.2) { g.gain.setTargetAtTime(0, ctx.currentTime, sec / 3); }

// 슬로모 중에는 BGM 만 내린다
bgm.playbackRate.value = slowMoActive ? 0.9 : 1;