《Cocos 游戏开发入门》4.2 固定步长物理与渲染插值

// 可变 dt 下，一步可能跨过地面
p.y += p.vy * dt;
if (p.y <= GROUND) {
  p.y = GROUND;
  p.vy = 0;
}

const FIXED_STEP = 1 / 60;   // 固定步长（秒）
let accumulator = 0;

function frame(now: number): void {
  const dt = (now - last) / 1000;
  last = now;

  accumulator += dt;                       // 把真实时间攒起来
  while (accumulator >= FIXED_STEP) {      // 攒够一步就跑一步
    step(FIXED_STEP);                      // 注意：传的是固定步长，不是 dt
    accumulator -= FIXED_STEP;
  }

  render(accumulator / FIXED_STEP);        // 剩下的零头交给渲染插值
}

const MAX_SUB_STEPS = 5;

let steps = 0;
while (accumulator >= FIXED_STEP && steps < MAX_SUB_STEPS) {
  step(FIXED_STEP);
  accumulator -= FIXED_STEP;
  steps += 1;
}
// 超出的时间直接丢弃，游戏表现为「慢动作」而不是「卡死」
if (steps === MAX_SUB_STEPS) accumulator = 0;

// 逻辑每步记录「上一步」和「当前」两个位置
prevX = currX;
currX = currX + vx * FIXED_STEP;

// 渲染时按 alpha 混合，alpha ∈ [0, 1)
const drawX = prevX + (currX - prevX) * alpha;

export interface TimeSource {
  now(): number;   // 单调递增的毫秒时间戳（可以是小数）
}

export interface StepStats {
  steps: number;   // 本帧实际执行的固定步数
  alpha: number;   // 本帧的插值系数 [0, 1)
}

export class FakeTime implements TimeSource {
  private t: number;

  constructor(startMs = 0) {
    this.t = startMs;
  }

  now(): number {
    return this.t;
  }

  advance(ms: number): void {
    this.t += ms;
  }
}

const US_PER_SECOND = 1_000_000;

export class Clock {
  readonly fixedStep: number;
  readonly maxSubSteps: number;

  private readonly fixedStepUs: number;
  private readonly time: TimeSource;
  private accumulatorUs = 0;   // 用整数微秒累加
  private lastMs: number | null = null;

  constructor(time: TimeSource = realTime, options: ClockOptions = {}) {
    this.time = time;
    this.fixedStep = options.fixedStep ?? 1 / 60;
    this.maxSubSteps = options.maxSubSteps ?? 5;
    this.fixedStepUs = Math.round(this.fixedStep * US_PER_SECOND);
  }

tick(step: () => void): StepStats {
  const nowMs = this.time.now();
  if (this.lastMs === null) {
    this.lastMs = nowMs;                 // 第一帧只对齐基准
    return { steps: 0, alpha: 0 };
  }

  // 关键：对增量取整，而不是对绝对时间戳取整
  const elapsedMs = Math.max(0, nowMs - this.lastMs);
  this.lastMs = nowMs;
  const elapsedUs = Math.round(elapsedMs * 1000);   // 增量 → 整数微秒

  const maxElapsedUs = this.fixedStepUs * this.maxSubSteps;
  this.accumulatorUs += Math.min(elapsedUs, maxElapsedUs);

  let steps = 0;
  while (this.accumulatorUs >= this.fixedStepUs) {
    step();
    this.accumulatorUs -= this.fixedStepUs;
    steps += 1;
  }

  return { steps, alpha: this.accumulatorUs / this.fixedStepUs };
}

import { describe, expect, it } from 'vitest';
import { FakeTime } from '../core/clock';
import { Game } from '../game';

const STEP_MS = (1 / 60) * 1000;

describe('Clock 固定步长', () => {
  it('1 秒切成 60 步', () => {
    const time = new FakeTime();
    const game = new Game({ time });
    let total = 0;
    for (let i = 0; i < 60; i += 1) {
      time.advance(STEP_MS);
      total += game.frame();
    }
    // 第一帧只对齐基准；剩下 59 帧各推进 1 步。
    // 因为用整数微秒累加，这个数字精确，不需要容差。
    expect(total).toBe(59);
  });

  it('单帧卡顿不会触发死亡螺旋：最多补 5 步', () => {
    const time = new FakeTime();
    const game = new Game({ time });
    time.advance(STEP_MS);
    game.frame();
    time.advance(5000);        // 卡了 5 秒
    expect(game.frame()).toBe(5);
  });
});