《Cocos 游戏开发入门》3.3 批处理与 Draw Call

序列 A A B A A  → 3 次 Draw Call
序列 A A A A B  → 2 次 Draw Call

// src/render/recorder.ts
export interface DrawCommand {
  texture: string;   // 贴图标识；真实引擎里是纹理句柄
  material: string;  // 材质标识
  x: number; y: number; w: number; h: number;
}

export interface DrawCall {
  texture: string;
  material: string;
  count: number;     // 合并了多少条命令
}

export class RecordingRenderer {
  private readonly commands: DrawCommand[] = [];

  submit(cmd: DrawCommand): void {
    this.commands.push(cmd);
  }

  clear(): void {
    this.commands.length = 0;
  }

  flush(): DrawCall[] {
    const calls: DrawCall[] = [];
    let current: DrawCall | null = null;
    for (const cmd of this.commands) {
      const mergeable =
        current !== null &&
        current.texture === cmd.texture &&
        current.material === cmd.material;
      if (mergeable && current) {
        current.count += 1; // 同纹理同材质且连续 → 并入当前批次
      } else {
        current = { texture: cmd.texture, material: cmd.material, count: 1 };
        calls.push(current);
      }
    }
    return calls;
  }
}

// src/render/recorder.ts（续）
export function sortByTexture(commands: DrawCommand[]): DrawCommand[] {
  return [...commands].sort((a, b) => {
    if (a.texture !== b.texture) return a.texture < b.texture ? -1 : 1;
    return 0; // 同纹理保持原有先后（稳定排序）
  });
}

// 前提：commands 已按 layer 分桶，本函数只在桶内按纹理稳定排序
export function batchWithinLayer(commands: DrawCommand[]): DrawCommand[] {
  return sortByTexture(commands);
}

// test/recorder.test.ts
import { describe, it, expect } from 'vitest';
import { RecordingRenderer, sortByTexture } from '../src/render/recorder';

function cmd(texture: string, x = 0): {
  texture: string; material: string; x: number; y: number; w: number; h: number;
} {
  return { texture, material: 'default', x, y: 0, w: 16, h: 16 };
}

describe('batching', () => {
  it('相邻同纹理合并为一个 draw call', () => {
    const r = new RecordingRenderer();
    r.submit(cmd('atlas'));
    r.submit(cmd('atlas'));
    r.submit(cmd('atlas'));
    const calls = r.flush();
    expect(calls).toHaveLength(1);
    expect(calls[0].count).toBe(3);
  });

  it('纹理交替则批次翻倍', () => {
    const r = new RecordingRenderer();
    for (const t of ['a', 'b', 'a', 'b']) r.submit(cmd(t));
    expect(r.flush()).toHaveLength(4);
  });

  it('材质不同也会断批', () => {
    const r = new RecordingRenderer();
    r.submit(cmd('atlas'));
    r.submit({ ...cmd('atlas'), material: 'additive' });
    expect(r.flush()).toHaveLength(2);
  });

  it('按纹理重排后 draw call 下降', () => {
    const cmds = ['a', 'b', 'a', 'a'].map((t) => cmd(t));
    const r = new RecordingRenderer();
    for (const c of sortByTexture(cmds)) r.submit(c);
    expect(r.flush()).toHaveLength(2); // a a a b → 2 批
  });
});

import { _decorator, Component, Sprite, SpriteFrame, SpriteAtlas } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CoinSpawner')
export class CoinSpawner extends Component {
  @property(SpriteAtlas)
  coinAtlas: SpriteAtlas | null = null;

  @property(Sprite)
  template: Sprite | null = null;

  spawn(): void {
    if (!this.template || !this.coinAtlas) return;
    const frame: SpriteFrame | null = this.coinAtlas.getSpriteFrame('coin');
    if (frame) this.template.spriteFrame = frame;
  }
}

import { _decorator, Component, SpriteFrame, dynamicAtlasManager } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('AtlasConfig')
export class AtlasConfig extends Component {
  @property(SpriteFrame)
  bigBackground: SpriteFrame | null = null;

  start(): void {
    dynamicAtlasManager.enabled = true;
    dynamicAtlasManager.maxAtlasCount = 4;
    // 大背景不合图，避免把动态图集撑爆
    if (this.bigBackground) this.bigBackground.packable = false;
  }
}