从零构建技能编辑器：skill编辑器的核心原理与实战指南

14次阅读

共计 2948 个字符，预计需要花费 8 分钟才能阅读完成。

在游戏开发或自动化工具中，技能系统往往涉及复杂的逻辑组合。传统硬编码方式存在几个明显痛点：

维护成本高 ：每次调整技能效果都需要重新发布代码
协作效率低 ：策划与开发需要反复沟通逻辑细节
可视化缺失 ：无法直观看到技能作用范围和连招效果

举个典型场景：当需要实现一个 ” 对前方扇形区域造成伤害，并为友方添加护盾 ” 的技能时，传统方式需要编写大量状态判断代码，而编辑器可以通过拖拽节点快速搭建。

我们采用经典的三层架构：

flowchart TD
    subgraph 表现层
        A[节点面板] --> B[画布交互]
        B --> C[属性编辑器]
    end
    subgraph 逻辑层
        D[DSL 解析器] --> E[状态管理]
        E --> F[效果计算]
    end
    subgraph 存储层
        G[版本快照] --> H[协同数据]
    end

表现层 ：
基于 React 实现的可拖拽节点系统
使用 Konva.js 处理画布渲染
属性表单动态生成
逻辑层 ：
将节点关系转换为 DSL（领域特定语言）
Redux 管理编辑器状态
技能效果模拟计算
存储层 ：
基于 IndexedDB 的本地历史记录
配合 OT 算法的协同编辑

关键组件结构示例：

// 节点基类组件
interface SkillNodeProps {
  id: string;
  position: {x: number; y: number};
  data: NodeData;
}

const SkillNode = ({id, position, data}: SkillNodeProps) => {
  // 使用 react-dnd 实现拖拽
  const [{isDragging}, drag] = useDrag(() => ({
    type: 'NODE',
    item: {id},
    collect: (monitor) => ({isDragging: !!monitor.isDragging(),
    }),
  }));

  return (<Group x={position.x} y={position.y} ref={drag}>
      <Rect
        width={120}
        height={60}
        fill={isDragging ? '#ddd' : '#fff'}
        shadowBlur={5}
      />
      <Text text={data.name} fontSize={14} padding={10} />
    </Group>
  );
};

我们采用 JSON 格式的 DSL 定义技能逻辑：

interface SkillDSL {
  version: string;
  nodes: {[id: string]: {
      type: 'trigger' | 'condition' | 'action';
      params: Record<string, any>;
      outputs?: string[];};
  };
  edges: [string, string][]; // [sourceId, targetId]
}

// 示例：火球术技能
const fireballDSL: SkillDSL = {
  version: '1.0',
  nodes: {
    trigger1: {
      type: 'trigger',
      params: {key: 'Q'},
      outputs: ['condition1']
    },
    condition1: {
      type: 'condition',
      params: {distance: 10},
      outputs: ['action1']
    },
    action1: {
      type: 'action',
      params: {damage: 100, effect: 'burn'}
    }
  },
  edges: [['trigger1', 'condition1'],
    ['condition1', 'action1']
  ]
};

使用 Web Worker 处理复杂计算避免界面卡顿：

// worker.ts
self.onmessage = (e) => {const { dsl, characterState} = e.data;

  // 模拟技能效果计算
  const result = simulateSkill(dsl, characterState);

  self.postMessage({
    damage: result.damage,
    effects: result.effects
  });
};

// 主线程调用
const worker = new Worker('./worker.ts');
worker.postMessage({
  dsl: currentDSL,
  characterState: {...}
});

worker.onmessage = (e) => {updatePreview(e.data);
};

使用拓扑排序检测节点间的循环引用：

function detectCircular(dsl: SkillDSL): boolean {const visited = new Set<string>();
  const recStack = new Set<string>();

  function dfs(nodeId: string): boolean {if (!visited.has(nodeId)) {visited.add(nodeId);
      recStack.add(nodeId);

      for (const edge of dsl.edges) {if (edge[0] === nodeId) {const neighbor = edge[1];
          if (!visited.has(neighbor) && dfs(neighbor)) {return true;} else if (recStack.has(neighbor)) {return true;}
        }
      }
    }
    recStack.delete(nodeId);
    return false;
  }

  return Object.keys(dsl.nodes).some(dfs);
}

基于不可变数据的历史记录栈：

const history = {past: [] as SkillDSL[],
  present: null as SkillDSL | null,
  future: [] as SkillDSL[],

  push(state: SkillDSL) {if (this.present) {this.past.push(this.present);
    }
    this.present = state;
    this.future = [];},

  undo(): SkillDSL | null {if (this.past.length === 0) return null;

    this.future.unshift(this.present!);
    this.present = this.past.pop()!;

    return this.present;
  }
};

未来可以扩展的方向：