《Cocos 游戏开发实战》8.1 关卡编辑与配置表

// assets/scripts/core/level-def.ts
export type ObstacleType = 'block' | 'spike' | 'saw';

export interface ObstacleDef {
  type: ObstacleType;
  /** 相对关卡起点的 x 坐标，像素。 */
  x: number;
  /** 相对地面线的 y 坐标，像素，向上为正。 */
  y: number;
  w: number;
  h: number;
}

export interface CoinDef {
  x: number;
  y: number;
}

export interface LevelDef {
  id: string;
  name: string;
  /** 关卡滚动速度，像素/秒。 */
  speed: number;
  /** 终点线相对起点的距离，像素。 */
  goalX: number;
  obstacles: ObstacleDef[];
  coins: CoinDef[];
}

export interface LevelTable {
  version: number;
  levels: LevelDef[];
}

{
  "ver": "1.2.0",
  "importer": "directory",
  "imported": true,
  "uuid": "9b7d4c2a-1e58-4f0b-8a63-2f9c5d7e0b41",
  "files": [],
  "subMetas": {},
  "userData": {
    "isBundle": true,
    "bundleName": "bundle-levels",
    "priority": 1,
    "compressionType": {},
    "isRemoteBundle": false
  }
}

// assets/scripts/game/level-index.ts
import { _decorator, Component, JsonAsset } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('LevelIndex')
export class LevelIndex extends Component {
  @property({ type: JsonAsset, tooltip: '拖入 configs/levels.json 供编辑器内预览' })
  table: JsonAsset | null = null;

  /** 返回关卡数组；表为空时返回空数组而不是抛错。 */
  get levels(): unknown[] {
    const raw = this.table?.json as { levels?: unknown[] } | null | undefined;
    return raw?.levels ?? [];
  }

  levelAt(index: number): unknown | null {
    const list = this.levels;
    return index >= 0 && index < list.length ? list[index] : null;
  }
}

{
  "version": 1,
  "levels": [
    {
      "id": "level-01",
      "name": "教学关：只跳不躲",
      "speed": 300,
      "goalX": 3600,
      "obstacles": [
        { "type": "block", "x": 900, "y": -120, "w": 200, "h": 40 },
        { "type": "block", "x": 1800, "y": -120, "w": 200, "h": 40 },
        { "type": "block", "x": 2700, "y": -80, "w": 240, "h": 40 }
      ],
      "coins": [
        { "x": 700, "y": 40 },
        { "x": 900, "y": 80 },
        { "x": 1100, "y": 40 }
      ]
    },
    {
      "id": "level-02",
      "name": "尖刺初现",
      "speed": 340,
      "goalX": 4800,
      "obstacles": [
        { "type": "spike", "x": 1000, "y": -140, "w": 40, "h": 30 },
        { "type": "spike", "x": 1060, "y": -140, "w": 40, "h": 30 },
        { "type": "block", "x": 1600, "y": -120, "w": 180, "h": 40 },
        { "type": "saw", "x": 2400, "y": -60, "w": 64, "h": 64 }
      ],
      "coins": [
        { "x": 1600, "y": 60 },
        { "x": 2400, "y": 120 }
      ]
    }
  ]
}

// assets/scripts/game/level-exporter.ts
import { _decorator, Component, Node } from 'cc';
const { ccclass, property, executeInEditMode } = _decorator;

/** 一次性工具：把当前节点下手工摆的构件导出成 levels.json 片段。 */
@ccclass('LevelExporter')
@executeInEditMode
export class LevelExporter extends Component {
  @property({ tooltip: '导出时使用的关卡 id' })
  levelId = 'level-01';

  exportJson(): string {
    const obstacles: Record<string, unknown>[] = [];
    const coins: Record<string, unknown>[] = [];
    for (const child of this.node.children) {
      const p = child.position;
      const item = { x: Math.round(p.x), y: Math.round(p.y), name: child.name };
      if (child.name.startsWith('Coin')) coins.push(item);
      else obstacles.push(item);
    }
    return JSON.stringify({ id: this.levelId, obstacles, coins }, null, 2);
  }
}