《Cocos 游戏联机实战》2.3 回滚与追帧

// assets/scripts/net/snapshot-ring.ts
export class SnapshotRing<T> {
  private readonly slots: (T | undefined)[];
  private readonly frames: number[];
  private readonly capacity: number;

  constructor(capacity: number) {
    this.capacity = capacity;
    this.slots = new Array<T | undefined>(capacity);
    this.frames = new Array<number>(capacity).fill(-1);
  }

  set(frame: number, state: T): void {
    const i = ((frame % this.capacity) + this.capacity) % this.capacity;
    this.slots[i] = state;
    this.frames[i] = frame;
  }

  get(frame: number): T | undefined {
    const i = ((frame % this.capacity) + this.capacity) % this.capacity;
    return this.frames[i] === frame ? this.slots[i] : undefined;
  }
}

// assets/scripts/net/rollback.ts
import { Fixed, fxAdd, fxFromFloat, fxMul } from './fixed';
import { SnapshotRing } from './snapshot-ring';

export interface RaceState {
  x0: Fixed; vx0: Fixed;   // 玩家 0
  x1: Fixed; vx1: Fixed;   // 玩家 1
}

const ACCEL = fxFromFloat(0.25);
const FRICTION = fxFromFloat(0.9);

export function stepRace(s: RaceState, keys: number): RaceState {
  const a0 = (keys & 1) === 1 ? ACCEL : 0;   // bit0：玩家 0 按右
  const a1 = (keys & 2) === 2 ? ACCEL : 0;   // bit1：玩家 1 按右
  const vx0 = fxMul(fxAdd(s.vx0, a0), FRICTION);
  const vx1 = fxMul(fxAdd(s.vx1, a1), FRICTION);
  return { x0: fxAdd(s.x0, vx0), vx0, x1: fxAdd(s.x1, vx1), vx1 };
}

// 给定每帧组合输入，直接重演（回滚的「标准答案」）
export function replay(inputs: number[]): RaceState[] {
  let s: RaceState = { x0: 0, vx0: 0, x1: 0, vx1: 0 };
  const out: RaceState[] = [];
  for (const keys of inputs) {
    s = stepRace(s, keys);
    out.push(s);
  }
  return out;
}

export class RollbackSim {
  private readonly ring: SnapshotRing<RaceState>;
  private readonly local: number[] = [];
  private readonly remote: number[] = [];
  private head = -1;   // 已模拟到的最后一帧

  constructor(history = 120) {
    this.ring = new SnapshotRing<RaceState>(history);
    this.ring.set(0, { x0: 0, vx0: 0, x1: 0, vx1: 0 }); // 帧 0 之前的状态
  }

  lastFrame(): number { return this.head; }

  // stateAt(f) = 帧 f 开始前的状态
  stateAt(frame: number): RaceState {
    const s = this.ring.get(frame);
    if (!s) throw new Error(`snapshot for frame ${frame} evicted`);
    return s;
  }

  // 预测推进一帧：本地输入已知，远端未知则沿用上一帧
  predictStep(localKeys: number): void {
    const f = this.head + 1;
    this.local[f] = localKeys;
    this.remote[f] = this.remote[f] ?? this.remote[f - 1] ?? 0;
    this.simulate(f);
    this.head = f;
  }

  // 收到远端第 frame 帧的真实输入；返回是否发生了回滚
  applyRemote(frame: number, remoteKeys: number): boolean {
    const predicted = this.remote[frame];
    this.remote[frame] = remoteKeys;
    if (predicted === remoteKeys) return false;   // 预测对了，什么都不用做
    for (let f = frame; f <= this.head; f += 1) this.simulate(f); // 回滚重演
    return true;
  }

  private simulate(frame: number): void {
    const before = this.ring.get(frame);
    if (!before) throw new Error(`missing snapshot ${frame}`);
    const keys = this.local[frame] | this.remote[frame];
    this.ring.set(frame + 1, stepRace(before, keys));
  }
}

import { describe, expect, it } from 'vitest';
import { replay, RollbackSim } from '../net/rollback';

describe('回滚重演', () => {
  it('预测输入与真实输入不同时，回滚后状态与直接重算一致', () => {
    const sim = new RollbackSim();
    sim.predictStep(1);   // 帧 0：本地按右（bit0）
    sim.predictStep(1);   // 帧 1
    sim.predictStep(1);   // 帧 2

    // 帧 2 的远端真实输入其实是「按右」（bit1），与预测（沿用 0）不同
    expect(sim.applyRemote(2, 2)).toBe(true);   // 发生了回滚

    // 「标准答案」：帧 2 的组合输入从一开始就是 1 | 2 = 3
    const direct = replay([1, 1, 1 | 2]);
    // stateAt(3) 是跑完帧 2 之后的状态，逐位相等
    expect(sim.stateAt(3)).toEqual(direct[2]);
  });

  it('预测正确时不回滚', () => {
    const sim = new RollbackSim();
    sim.predictStep(1);
    expect(sim.applyRemote(0, 0)).toBe(false);
  });
});

// 返回本渲染帧应该执行的逻辑步数
export function catchUpSteps(lag: number, maxPerFrame = 3): number {
  if (lag <= 0) return 1;                       // 不落后：每帧 1 步
  return Math.min(1 + lag, maxPerFrame);        // 落后越多补越多，但有上限
}

import { _decorator, Component } from 'cc';

const { ccclass } = _decorator;

// 与 L1 的 RollbackSim 对接的最小接口（真实工程从 net/rollback 引入）
interface RollbackLike {
  applyRemote(frame: number, keys: number): boolean;
  predictStep(localKeys: number): void;
}

@ccclass('RollbackDriver')
export class RollbackDriver extends Component {
  private sim: RollbackLike | null = null;
  private readonly pendingRemote = new Map<number, number>();

  // 远端输入可能迟到，先存着，到帧循环里再统一应用
  onRemoteInput(frame: number, keys: number): void {
    this.pendingRemote.set(frame, keys);
  }

  update(): void {
    if (!this.sim) return;
    for (const [frame, keys] of this.pendingRemote) {
      this.sim.applyRemote(frame, keys);   // 预测错了会在这里回滚重演
    }
    this.pendingRemote.clear();
    this.sim.predictStep(0);               // 本地输入 + 预测远端，推进一帧
  }
}