ts行为树 + 可视化编辑器

npm version
License: ISC

插件地址

https://store.cocos.com/app/detail/8201

git仓库地址 (不含编辑器)

https://github.com/gongxh0901/kunpocc-behaviortree

简介

一个简洁、高效的 TypeScript 行为树库。
该库无任何依赖,理论上可用于所有js、ts项目。
作者主要使用此库作为游戏AI的实现。

什么是行为树

行为树(Behavior Tree)是一种用于描述和控制复杂行为逻辑的数据结构,最初在游戏AI领域大放异彩,现在已经广泛应用于机器人控制、自动化系统等领域。它简单、直观、可扩展,是真正解决实际问题的好工具。

行为树本质上是一个有向无环图,用树状结构来组织和执行行为逻辑。每个节点代表一个行为或决策,通过父子关系形成层次化的控制流。

特性

  • :wrench: 类型安全: 完整 TypeScript 支持
  • :package: 零依赖: 纯净实现,无第三方依赖
  • :arrows_counterclockwise: 状态管理: 分层黑板系统,数据隔离清晰

快速开始

安装

npm install kunpocc-behaviortree

内置demo (基于cocos creator 3.8.6)

项目根目录下的 bt-demo文件夹

GUI编辑器

插件审核中…
敬请期待

核心概念

状态类型

enum Status {
    SUCCESS,    // 成功
    FAILURE,    // 失败  
    RUNNING     // 运行中
}

节点类型

  • 组合节点: 包含多个子节点 (Composite)
  • 装饰节点: 有且只有一个子节点(Decorator)
  • 叶子节点: 不能包含子节点 (LeafNode)
  • 条件节点: 特殊的叶子节点 (Condition)

装饰器

自行实现的节点,通过装饰器把数据暴露给行为树编辑器

ClassAction - 行为节点装饰器
ClassCondition - 条件节点装饰器
ClassComposite - 组合节点装饰器
ClassDecorator - 装饰节点装饰器
prop - 属性装饰器

内置节点

组合节点 (Composite)

Selector - 选择节点
  • 选择第一个成功的子节点
Sequence - 顺序节点
  • 按顺序执行子节点,执行过程中子节点返回非SUCCESS,则返回子节点状态,全部成功返回SUCCESS
Parallel - 并行节点
  • 依次执行所有子节点(从左到右),全部成功才成功
  • 注意:这里的"并行"是逻辑概念,实际是顺序执行
RandomSelector - 随机选择节点
  • 随机选择一个子节点执行
ParallelAnySuccess - 并行任一成功
  • 依次执行所有子节点(从左到右),任一成功就成功

装饰节点 (Decorator)

ConditionDecorator - 条件装饰节点
  • 子类需实现

    /**
     * 判断是否满足条件
     * @returns 是否满足条件
     */
    protected abstract isEligible(): boolean;
    
Inverter - 反转节点
  • 反转子节点的成功/失败状态
LimitTime - 时间限制
  • 规定时间内, 向父节点返回子节点的结果,超时后返回失败
LimitTicks - 次数限制
  • 执行次数(子节点非RUNNNG状态)内,向父节点返回子节点的结果,超过次数后返回失败
Repeat - 重复节点
  • 重复执行指定次数
RepeatUntilSuccess - 重复直到成功
  • 设置最大重试次数
RepeatUntilFailure - 重复直到失败
  • 设置最大重试次数
WeightDecorator - 权重装饰节点
  • 用于随机选择节点的子节点的按权重随机

叶子节点 (LeafNode)

LeafNode - 叶子节点基类
WaitTicks - 次数等待节点
WaitTime - 时间等待节点

条件节点 (Condition)

Condition - 条件节点基类
  • 特殊的叶子节点,子类需实现

    /**
     * 判断是否满足条件
     * @returns 是否满足条件
     */
    protected abstract isEligible(): boolean;
    

黑板系统

黑板系统的作用

黑板系统(Blackboard System)是行为树中的数据共享中心,类似于传统 AI 系统中的黑板概念。它解决了行为树中节点间数据传递和状态共享的核心问题:

  • 数据传递:在不同节点间传递运行时数据
  • 状态管理:维护游戏对象的状态信息
  • 解耦设计:避免节点间直接依赖,提高代码可维护性
  • 上下文感知:让节点能够感知周围环境和历史状态

数据隔离层次

黑板系统采用三层数据隔离设计,形成清晰的数据作用域:

1. 本地数据(Node Level)

  • 作用域:当前节点可见
  • 生命周期:随节点创建和销毁
  • 用途:节点内部状态、临时变量、私有数据

2. 树级数据(Tree Level)

  • 作用域:整棵行为树内所有节点可见
  • 生命周期:随行为树创建和销毁
  • 用途:树内节点间共享的状态、任务进度、策略参数

3. 全局数据(Global Level)

  • 作用域:所有行为树实例可见
  • 生命周期:应用程序生命周期
  • 用途:全局配置、静态数据、跨树共享状态

黑板的使用

import * as BT from "kunpocc-behaviortree";

// 设置全局数据 所有行为树实例可见
BT.globalBlackboard.set("playerPosition", {x: 100, y: 100});

// 在节点中使用黑板数据
export class BTAction extends BT.LeafNode {
    public tick(): BT.Status {
        // 获取全局数据
        const playerPosition = this.getGlobal<{x: number, y: number}>("playerPosition");
        console.log(playerPosition);

        // 设置树级数据
        this.setRoot("isDead", true);

        // 获取树级数据
        const isDead = this.getRoot<boolean>("isDead");
        console.log(isDead);

        // 设置节点数据
        this.set<boolean>("finished", true);

        // 获取节点数据
        const finished = this.get<boolean>("finished");
        console.log(finished);

        return BT.Status.SUCCESS;
    }
}
1赞

使用指南

本指南将详细介绍如何使用 kunpocc-behaviortree 库和行为树编辑器。

一、开发环境

  • 引擎版本:Cocos Creator 3.8.6

  • 编程语言:TypeScript

  • 支持引擎版本:Cocos Creator 3.7+

二、安装

  1. 安装 kunpocc-behaviortree

    npm install kunpocc-behaviortree
    
  2. 下载扩展插件(bt-editor)

  3. 项目脚本中引入库文件

    // 比如在项目代码目录下添加一个文件 header.ts
    // 写上如下代码
    import * as BT from "kunpocc-behaviortree";
    export { BT };
    
  4. 重启creator

  5. 启用插件

    • 在 Cocos Creator 中选择 扩展 -> 扩展管理器 -> 已安装扩展
    • 找到 bt-editor 并启用
  6. 打开扩展面板

    • 在 Cocos Creator 顶部菜单栏中选择 kunpo -> 行为树编辑器
  7. 创建第一颗行为树 (见下方 导出文件使用 部分)

三、自定义节点 (扩展编辑器节点池)

节点装饰器

装饰器系统是连接自定义节点和编辑器的桥梁
只有通过装饰器装饰的节点,才能在编辑器中的节点池中显示

@ClassAction - 行为节点装饰器

用于装饰执行具体逻辑的叶子节点。

@BT.ClassAction("NodeName", { name: "显示名称", group: "节点分组", desc: "节点描述" })
export class MyActionNode extends BT.LeafNode {
    public tick(): BT.Status {
        // 执行逻辑
        return BT.Status.SUCCESS;
    }
}

@ClassCondition - 条件节点装饰器

用于装饰判断条件的节点。

@BT.ClassCondition("ConditionName", { name: "条件名称", group: "条件分组", desc: "节点描述" })
export class MyCondition extends BT.Condition {
    protected isEligible(): boolean {
        // 返回判断结果
        return true;
    }
}

@ClassComposite - 组合节点装饰器

用于装饰控制子节点执行流程的组合节点。

@BT.ClassComposite("CompositeName", { name: "组合名称", group: "组合分组",  desc: "节点描述" })
export class MyComposite extends BT.Composite {
    public tick(dt: number): BT.Status {
        // 控制子节点执行逻辑
        for (const child of this.children) {
            const status = child._execute(dt);
            if (status !== BT.Status.SUCCESS) {
                return status;
            }
        }
        return BT.Status.SUCCESS;
    }
}

@ClassDecorator - 装饰节点装饰器

用于装饰修改单个子节点行为的装饰节点。

@BT.ClassDecorator("DecoratorName", { name: "装饰名称", group: "装饰分组", desc: "节点描述" })
export class MyDecorator extends BT.Decorator {
    public tick(dt: number): BT.Status {
        // 装饰逻辑,修改子节点行为
        return this.children[0]._execute(dt);
    }
}

节点属性装饰器 (扩展节点参数)

为节点添加可在编辑器中配置的参数。

@BT.ClassAction("NodeName", { name: "显示名称", group: "节点分组", desc: "节点描述" })
export class MyNode extends BT.LeafNode {
    // 基础类型参数
    @BT.prop({  type: BT.ParamType.string,  description: "动画名称", defaultValue: "idle" })
    private animationName: string = "idle";

    @BT.prop({  type: BT.ParamType.float, description: "速度",  min: 0, max: 10, step: 0.1, defaultValue: 1.0 })
    private speed: number = 1.0;

    @BT.prop({  type: BT.ParamType.bool,  description: "是否循环" })
    private loop: boolean = false;

    // 对象参数
    @BT.prop({ 
        type: BT.ParamType.object, 
        description: "位置信息", 
        properties: {
            x: { type: BT.ParamType.int, min: 0 },
            y: { type: BT.ParamType.int, min: 0 }
        }
    })
    private position: { x: number, y: number };

    // 数组参数
    @BT.prop({
        type: BT.ParamType.array,
        description: "巡逻点列表",
        itemType: BT.ParamType.object,
        itemProperties: {
            x: { type: BT.ParamType.float },
            y: { type: BT.ParamType.float },
            name: { type: BT.ParamType.string }
        }
    })
    private patrolPoints: Array<{ x: number, y: number, name: string }>;
}

参数类型详解

类型 BT.ParamType 描述 支持属性
整数 int 整数类型 min, max, step, defaultValue
浮点数 float 浮点数类型 min, max, step, defaultValue
字符串 string 字符串类型 defaultValue
布尔 bool 布尔类型 defaultValue
对象 object 对象类型 properties
数组 array 数组类型 itemType, itemProperties

四、编辑器介绍

快捷键

  • 打开编辑器: Ctrl+Shift+K (Windows) / Cmd+Shift+K (Mac)
  • 导出配置: Ctrl+Shift+L (Windows) / Cmd+Shift+L (Mac)

菜单访问

在 Cocos Creator 顶部菜单栏中选择 kunpo -> 行为树编辑器

编辑器功能介绍

行为树编辑器提供了一个直观的可视化界面,让你可以轻松创建和管理复杂的行为树结构。

核心功能

可视化节点编辑
  • 拖拽创建:从左侧节点库拖拽节点到画布中
  • 分组管理:节点按功能分组显示,便于查找
  • 实时预览:节点显示类型图标和描述信息
属性参数配置
  • 智能表单:根据@prop装饰器自动生成配置界面
  • 类型校验:支持数字、字符串、布尔值、对象、数组等类型
  • 默认值:自动填充装饰器中定义的默认值
  • 约束验证:支持最小值、最大值、步长等约束条件
连接线管理
  • 可视连接:通过拖拽连接点创建父子关系
  • 自动布局:连接线自动避让,保持界面整洁
  • 连接验证:防止创建非法的节点连接关系
画布操作
  • 缩放平移:鼠标滚轮缩放,拖拽平移画布
  • 多选操作:支持框选多个节点进行批量操作
节点管理
  • 别名设置:为节点设置有意义的别名,便于理解
  • 复制粘贴:快速复制节点及其子树结构
  • 删除操作:删除节点时自动清理相关连接
编辑器界面布局
┌─────────────────────────────────────────────────────────────────────────────┐
│                            顶部工具栏                                         │
│   [设置导出路径] [过滤行为树] [选择行为树▼] [导出配置]                             │
├─────────────┬─────────────────────────────────────────────┬─────────────────┤
│             │                                             │                 │
│   节点库    │                                              │    右侧面板      │
│  (左侧)     │                                              │                 │
│             │  ┌───────────────────────────────────────┐  │ ┌──────────────┐│
│ • 行为节点  │  │        画布工具栏                        │  │ │  行为树名称  │ │
│ • 条件节点  │  │ [缩放] [重置] [清空] [复制] [粘贴]         │  │ │  行为树描述  │ │
│ • 组合节点  │  └─────────────────────────────────────────┘  │ └──────────────┘ │
│ • 装饰节点  │                                            │                  │
│ • 内置节点  │  ┌─────────────────────────────────────────┐  │ ┌──────────────┐ │
│            │  │                                         │  │ │              │ │
│            │  │           画布操作区                     │  │ │  节点参数区   │ │
│            │  │                                        │  │ │              │ │
│            │  │  ┌─────┐                               │  │ │ • 节点名称    │ │
│            │  │  │根节点│                               │  │ │ • 参数配置    │ │
│            │  │  └──┬──┘                               │  │ │ • 描述信息    │ │
│            │  │     │                                  │  │ │ • 别名设置    │ │
│            │  │  ┌──▼──┐ ┌──────┐                      │  │ │              │ │
│            │  │  │子节点│ │子节点│                       │  │ └──────────────┘ │
│            │  │  └─────┘ └──────┘                      │  │                  │
│            │  │                                        │  │ ┌──────────────┐ │
│            │  │                                        │  │ │ [删除行为树]   │ │
│            │  └────────────────────────────────────────┘  │ │ [创建新树]    │ │
│            │                                              │ └──────────────┘ │
└────────────┴──────────────────────────────────────────────┴──────────────────┘

导出文件使用

在项目中使用导出配置

1. 配置文件格式
{
    "boss1": [
        {
            "id": "1758206972710_bhxebhy7o",
            "className": "Sequence",
            "parameters": {},
            "children": [
                "1758090634327_mf36nwkdt"
            ]
        },
        {
            "id": "1758090634327_mf36nwkdt",
            "className": "Selector",
            "parameters": {},
            "children": [
                "1758206988178_55b7kk5va"
            ]
        },
        {
            "id": "1758206988178_55b7kk5va",
            "className": "BTAnimation",
            "parameters": {
                "_name": "",
                "_loop": false
            },
            "children": []
        }
    ]
}
2. 配置文件放入项目资源目录

将从编辑器导出的JSON文件放入项目资源目录
自行加载配置数据

assets/
├── resources/
│   └── config/
│       ├── bt_config.json      // 所有行为树的信息都在这个里边
3. 创建行为树实例
  • BT.createBehaviorTree(config[“boss1”], entity);

  • 函数详解

// 工厂函数签名
function createBehaviorTree<T>(config: INodeConfig[], entity: T): BehaviorTree<T>

// 内部工作流程:
// 1. 验证配置格式
// 2. 创建节点映射表 (id -> config)
// 3. 递归创建节点树
//    - 通过className查找构造函数
//    - 根据节点类型选择创建方式
//    - 设置节点参数
//    - 建立父子关系
// 4. 返回行为树实例
3赞

交流群收人了

1赞

来来来,学习

98K大佬好 :7: :7: :7: :7:

高产似xx

:14::14::14::14::14::14: :2:

顶顶顶一下 :kissing_smiling_eyes: :kissing_smiling_eyes: :kissing_smiling_eyes:

插件限时半价,只此一天

向大佬学习 :face_with_monocle:

兄弟们,别默默的支持呀
记得加我微信好友

高产大哥,开源工具在你们公司也推广嘛

我们公司只有我一个项目组还在使用cocos
我们自己肯定是用的
就因为自己用,所以才会写这种工具

2025-11-27

fix: 修复粘贴节点顺序节点的子节点顺序错乱的bug

已提交审核,官方还没审。。。。

哈哈哈 连商店都没人维护了吗

过去这几天走上正轨可能就好了

主要没人发个公告什么的

是的,这一点很无语

我说这个修复这么熟悉呢,哦!原来是我提的 :rofl:

哈哈哈哈 老板好
自从你提了之后,我第二天改完就提审了,到现在还没过呢