《Cocos 游戏联机实战》6.3 观战与回放

// net/replay/sim.ts
export interface FrameInput {
  tick: number;
  accel: -1 | 0 | 1;
}

export interface RaceState {
  tick: number;
  x: number;
  v: number;
}

const ACC = 2;
const MAX_V = 12;

export function step(prev: RaceState, input: FrameInput): RaceState {
  let v = prev.v + input.accel * ACC;
  if (v < 0) v = 0;
  if (v > MAX_V) v = MAX_V;
  return { tick: prev.tick + 1, x: prev.x + v, v };
}

// net/replay/replayer.ts
import { step, type FrameInput, type RaceState } from './sim';

export class Recorder {
  readonly frames: FrameInput[] = [];
  record(tick: number, accel: -1 | 0 | 1): void {
    this.frames.push({ tick, accel });
  }
}

export class Replayer {
  private readonly frames: FrameInput[];
  private readonly snapEvery: number;
  private readonly snapshots = new Map<number, RaceState>();

  constructor(frames: FrameInput[], snapEvery = 30) {
    this.frames = frames;
    this.snapEvery = snapEvery;
    this.build();
  }

  // 先跑一遍全程，每 snapEvery 帧留一张关键帧快照
  private build(): void {
    let s: RaceState = { tick: 0, x: 0, v: 0 };
    this.snapshots.set(0, s);
    for (const f of this.frames) {
      s = step(s, f);
      if (s.tick % this.snapEvery === 0) this.snapshots.set(s.tick, s);
    }
  }

  // 第 tick 帧之后的状态：从最近快照补跑，而非从 0 重来
  stateAt(tick: number): RaceState {
    let base = 0;
    for (const k of this.snapshots.keys()) if (k <= tick && k > base) base = k;
    let s = this.snapshots.get(base) as RaceState;
    for (const f of this.frames) {
      if (f.tick >= base && f.tick < tick) s = step(s, f);
    }
    return s;
  }

  finalState(): RaceState {
    const last = this.frames.length ? this.frames[this.frames.length - 1].tick + 1 : 0;
    return this.stateAt(last);
  }
}

// net/replay/replayer.test.ts
import { describe, expect, it } from 'vitest';
import { Recorder, Replayer } from './replayer';
import { step, type RaceState } from './sim';

function recordFrames(n: number): { rec: Recorder; live: RaceState } {
  const rec = new Recorder();
  let s: RaceState = { tick: 0, x: 0, v: 0 };
  for (let i = 0; i < n; i++) {
    const accel = ((Math.floor(i / 7) % 3) - 1) as -1 | 0 | 1;
    rec.record(i, accel);
    s = step(s, { tick: i, accel });
  }
  return { rec, live: s };
}

describe('Replayer', () => {
  it('回放结果与当时一致', () => {
    const { rec, live } = recordFrames(120);
    const rp = new Replayer(rec.frames, 30);
    expect(rp.finalState()).toEqual(live);
  });

  it('拖动进度后状态正确', () => {
    const { rec } = recordFrames(100);
    const truth: RaceState[] = [{ tick: 0, x: 0, v: 0 }];
    for (const f of rec.frames) truth.push(step(truth[truth.length - 1], f));
    const rp = new Replayer(rec.frames, 30);
    expect(rp.stateAt(45)).toEqual(truth[45]);
    expect(rp.stateAt(97)).toEqual(truth[97]);
  });
});

import { _decorator, Button, Component, Label, Slider } from 'cc';
import { Replayer } from './net/replay/replayer';

const { ccclass, property } = _decorator;

@ccclass('ReplayControls')
export class ReplayControls extends Component {
  @property(Slider)
  progress: Slider | null = null;
  @property(Label)
  timeLabel: Label | null = null;
  @property(Button)
  playButton: Button | null = null;

  private replayer: Replayer | null = null;
  private total = 0;
  private cursor = 0;
  private playing = false;
  private speed = 1;

  onLoad(): void {
    this.playButton?.node.on(Button.EventType.CLICK, this.toggle, this);
  }
  bind(replayer: Replayer, total: number): void {
    this.replayer = replayer;
    this.total = total;
    this.cursor = 0;
    this.render();
  }
  setSpeed(speed: number): void { this.speed = speed; }

  update(dt: number): void {
    if (this.progress) {
      const target = Math.round(this.progress.progress * this.total);
      if (target !== this.cursor) this.seek(target); // 用户拖动
    }
    if (this.playing) {
      this.cursor += Math.max(1, Math.round(dt * 60 * this.speed));
      if (this.cursor >= this.total) { this.cursor = this.total; this.playing = false; }
      this.render();
    }
  }
  seek(tick: number): void {
    this.cursor = Math.max(0, Math.min(this.total, tick));
    this.render();
  }
  private toggle(): void { this.playing = !this.playing; }
  private render(): void {
    const st = this.replayer?.stateAt(this.cursor);
    if (this.timeLabel) this.timeLabel.string = `tick ${this.cursor}${st ? ` · x=${st.x}` : ''}`;
    if (this.progress) this.progress.progress = this.total ? this.cursor / this.total : 0;
  }
}