《Cocos 游戏联机实战》4.2 服务器和解与重演

// assets/scripts/net/predict/sim.ts —— 追加
export function lerpState(a: PlayerState, b: PlayerState, t: number): PlayerState {
  return {
    x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t,
    vx: a.vx + (b.vx - a.vx) * t, vy: a.vy + (b.vy - a.vy) * t,
    onGround: b.onGround,
  };
}

// assets/scripts/net/predict/predictor.ts —— 追加到 Predictor
  /** 平滑收敛：把预测状态按 factor 比例朝 target 靠拢。 */
  nudge(factor: number, target: PlayerState): void {
    this.predicted = lerpState(this.predicted, target, factor);
  }

// assets/scripts/net/predict/reconciler.ts —— 纯 TS，无 cc 依赖
import { step, type PlayerState } from './sim';
import type { Predictor, Snapshot } from './predictor';

export interface ReconcileOptions {
  smoothThreshold: number; // 超过此误差直接硬切
  deadZone: number;        // 小于此误差视为噪声，不动
  smoothFactor: number;    // 平滑收敛系数 0–1
}

export interface ReconcileResult {
  hardCut: boolean;
  replayed: number; // 本次重演了多少个未确认输入
  error: number;
}

export class Reconciler {
  private options: ReconcileOptions;
  private lastReplayed = 0;

  constructor(options: ReconcileOptions) {
    this.options = options;
  }

  apply(predictor: Predictor, snapshot: Snapshot): ReconcileResult {
    const pending = predictor.dropAcked(snapshot.ackSeq);

    // 从权威状态出发，重放所有未确认输入，得到「本帧应有的状态」
    let replayed: PlayerState = { ...snapshot.state };
    for (const input of pending) replayed = step(replayed, input);

    const error = Math.hypot(
      predictor.state.x - replayed.x,
      predictor.state.y - replayed.y,
    );
    this.lastReplayed = pending.length;

    if (error > this.options.smoothThreshold) {
      predictor.reset(replayed); // 硬切：直接采用重演结果
      return { hardCut: true, replayed: pending.length, error };
    }
    if (error > this.options.deadZone) {
      predictor.nudge(this.options.smoothFactor, replayed); // 平滑收敛
    }
    return { hardCut: false, replayed: pending.length, error };
  }

  get replayCount(): number { return this.lastReplayed; }
}

import { describe, it, expect } from 'vitest';
import { FakeClock } from '../net/transport/fake-clock';
import { SimulatedTransport } from '../net/transport/simulated-transport';
import { Predictor, type Snapshot } from '../net/predict/predictor';
import { Reconciler } from '../net/predict/reconciler';
import { step, type PlayerState } from '../net/predict/sim';

const START: PlayerState = { x: 0, y: 0, vx: 0, vy: 0, onGround: true };

describe('4.2 和解与重演', () => {
  it('丢包 30% 下，预测位置仍收敛到服务端状态', () => {
    const clock = new FakeClock();
    const transport = new SimulatedTransport(clock,
      { latencyMs: 60, jitterMs: 10, loss: 0.3, reorder: 0.1 }, 42);
    const predictor = new Predictor(START);
    const reconciler = new Reconciler({ smoothThreshold: 20, deadZone: 0.5, smoothFactor: 0.5 });

    // 测试替身：服务端权威推进（真实服务端见服务端书稿）
    let server: PlayerState = { ...START };
    transport.onMessage((msg) => {
      if (msg.type === 'snapshot') reconciler.apply(predictor, msg.payload as Snapshot);
    });

    for (let frame = 0; frame < 180; frame++) {
      const moveX = frame % 20 < 10 ? 1 : 0;
      const seq = predictor.applyInput(moveX, false);
      server = step(server, { seq, moveX, jump: false });
      if (frame === 60 || frame === 120) server = { ...server, x: server.x + 6 }; // 权威修正
      transport.send({ type: 'snapshot', payload: { ackSeq: seq, state: { ...server } } });
      clock.advance(16);
      transport.pump();
    }
    clock.advance(300);
    transport.pump();

    expect(Math.abs(predictor.state.x - server.x)).toBeLessThanOrEqual(2);
  });
});

  it('误差超阈值时触发硬切', () => {
    const predictor = new Predictor(START);
    const reconciler = new Reconciler({ smoothThreshold: 20, deadZone: 0.5, smoothFactor: 0.5 });
    predictor.applyInput(1, false);
    predictor.applyInput(1, false);
    const bad: Snapshot = { ackSeq: -1, state: { ...START, x: 500 } };
    const res = reconciler.apply(predictor, bad);
    expect(res.hardCut).toBe(true);
    expect(res.replayed).toBe(2);
  });

import { _decorator, Component, Node } from 'cc';
import { Predictor, type Snapshot } from './predictor';
import { Reconciler } from './reconciler';
const { ccclass, property } = _decorator;

/** 快照消息的最小形态。完整定义（含房间、匹配等消息）见 5.1 的 net/session/session.ts */
interface NetMessage {
    type: string;
    payload?: unknown;
}

@ccclass('ReconcileDriver')
export class ReconcileDriver extends Component {
    @property(Node)
    playerNode: Node | null = null;

    private predictor = new Predictor({ x: 0, y: 0, vx: 0, vy: 0, onGround: true });
    private reconciler = new Reconciler({ smoothThreshold: 20, deadZone: 0.5, smoothFactor: 0.5 });

    /** 由 Session 的消息分发器调用（见 5.1） */
    onSnapshot(msg: NetMessage): void {
        if (msg.type !== 'snapshot') return;
        const res = this.reconciler.apply(this.predictor, msg.payload as Snapshot);
        if (res.hardCut) console.warn(`reconcile hard cut, error=${res.error.toFixed(1)}`);
    }

    lateUpdate() {
        const s = this.predictor.state;
        this.playerNode?.setPosition(s.x / 100, -s.y / 100, 0);
    }
}