MaaPipelineEditor

主题

kqcoxn
3302
12.3m

快速上手 ​

本节将在几分钟内带你从零开始使用 MaaPipelineExtremer (MPE) 复现 MaaFramework 官方文档（下称“MFW 文档”）的 应用实例（下称“实例”），并在此过程中介绍 MPE 的主要功能，您完全可以使用本章作为使用教程！

提示

本教程不含如何使用 MaaFramework，您需要在阅读前有一定 MFW 框架基础，并简单了解 Pipeline 在其中的作用，此篇教程仅提供导出 Pipeline 之前的步骤。

准备工作 ​

当然，在一切开始前，您需要根据 MFW 文档 开发思路 或 MFW 教程视频 配置好开发环境。

打开 Editor ​

MPE 的前端以 Web 页面的形式可自由部署，因此您可以在任意可以打开网页的程序中使用 Editor，例如浏览器、VSCode。

  • 在浏览器中使用：您可以直接访问部署好的 在线网页，或 自行部署。其中在线网页仅提供静态服务，信息储存在您的本地，除浏览量统计外开发组将不会知道您的任何信息。

  • 在类 VSCode IDE 中使用：VSCode 提供了官方的内嵌页面浏览功能，且此功能被绝大多数 fork（如 Cursor、Qoder 等）继承，您可以在 IDE 中使用Ctrl+Shift+P打开指令输入框，输入simple browser后回车即可打开浏览 tab，在网址框输入官方部署(https://mpe.codax.site/stable/)或您自行部署的 Editor 链接即可。

部署本地服务（可选） ​

本地服务集成了如文件管理等纯前端无法完成的功能，这是可增量的，您可以在 本地服务 小节查看启用方式，仅需一行命令即可使体验更加丝滑！

在本地服务启动时，命令行会便捷显示 MPE 网址，您可以按住Ctrl并点击网址快捷打开 Editor！

在本节讲解中不含本地服务相关功能，您可以在简单了解如何使用 Editor 后，在下一节查看详细的本地服务功能介绍！

使用本地一体集成包（可选） ​

如果您希望获得更便捷的本地化体验，可以下载 MaaPipelineExtremer (MPE) 一体集成包。集成包整合了 Editor 前端与 LocalBridge 本地服务，无需额外配置即可直接使用。，部署方式可参考 本地一体包 章节。

提示

对于各个使用方案的区别，您可以参考 产品矩阵 章节。

初识界面 ​

进入 Editor 后，您可以看到如下页面加载（点击图片可放大查看）：

在本章，各个模块的功能我们将在使用时简单讲解，更多细节请查看文档相关部分。

节点操作 ​

节点风格 ​

我们目前设计了三套节点风格，您可以按您的喜好在点击左上角设置按钮后自行切换：

您可以在使用时随时切换风格，且不用担心尺寸问题，我们提供了一套节点排版工具帮您迅速处理！

添加节点 ​

您可以直接右键面板区域，唤起模板与添加面板，并使用点击或回车添加到右键位置：

在左侧 节点工具 模块，我们也添加了一部分常用节点的按钮，在鼠标悬停时会有信息提示。

不同的节点模板仅用于快速初始化不同字段组合，创建后可自行调整任意字段。

例如，在实例中，我们需要创建一个 开始示例 节点，此节点不包含任何识别与动作，我们可以点击空节点模板：

这样，一个节点就会被添加至编辑区。

虽然空节点模板不含任何动作与识别，但仍然会将 recognition: "DirectHit" 与 action: "DoNothing" 渲染至操作区以做指示，此时若导出编译器会生成如下代码：

json
{
  "新建节点1": {
    "recognition": {
      "type": "DirectHit",
      "param": {}
    },
    "action": {
      "type": "DoNothing",
      "param": {}
    }
  }
}

修改节点字段 ​

在实例中，第二个节点为 进入显示，思路为识别到 XXX 后执行 Click 动作。

我们可以直接创建一个文本识别节点：

当我们已经选中一个节点时，再次创建节点会直接生成在已选节点的后方，并自动添加连接。

当有单独选中的节点时，编辑区右上角会显示 节点字段 面板，我们可以在这里配置当前选中节点的字段键值：

由于我们直接生成了一个 OCR 模板节点，相关字段已经被自动配置，在此节点上，我们仅需在 expected 字段中填写需要识别的文本即可，相关字段会同步显示在节点上。（此处 GIF 动图会丢失部分颜色，实际在编辑时会正常渲染字段灰底）

此时，我们已经完成了 进入显示 节点的配置，编译器会将此节点转换成如下代码：

json
{
  "新建节点2": {
    "recognition": {
      "type": "OCR",
      "param": {
        "expected": ["显示"]
      }
    },
    "action": {
      "type": "Click",
      "param": {}
    }
  }
}

修改节点名 ​

虽然 Pipeline 协议仅规定不出现重复的键名即可，但我们一般期望其具有一定语义性。

我们可以修改节点字段的 key 值来配置节点名：

同样的，节点名会直接渲染在节点上以做提示，此时编译器则会将 key 值编译为节点的键值：

json
{
  "进入显示": {
    "recognition": {
      /* ... */
    },
    "action": {
      /* ... */
    }
  }
}

添加字段 ​

在实例中，进入游戏二级菜单 需要我们进行 Swipe 滑动操作，此动作一般需要配置 begin 与 end 两个值。

MPE 并没有提供滑动模板，我们可以从创建一个空模板开始完成相关配置。

首先，使用空模板添加节点。当我们没有选中节点时，节点会出现在当前可视视口的最右侧，默认添加后自动追焦视口至节点位于中心状态。

修改节点名称为 进入游戏二级菜单，并将 action 调整为 Swipe：

MPE 针对每种数据类型配置了不同的输入方式，在此处我们通过下拉框的方式选择了 Swipe 值

当切换 recognition 或 action 值时，节点字段面板会自动筛选该字段可配置的值，我们可是使用右侧配置下拉选项添加字段，也可通过删除按键移除字段：

在添加后，我们可以如常修改相应的值，您可以将鼠标移动至字段名查看相关提示：

对于 [x, y, w, h] 类型字段，MPE 可接收一个标准数组，或将中括号省略，编译器会自动进行处理。

字段显示方式 ​

MPE 提供了三种字段面板显示模式,您可以在左上角设置中切换:

  • 固定模式：面板固定在右上角,传统的布局方式,适合大屏幕操作。
  • 拖动模式：面板可以自由拖动,切换不同节点或连接时会保持位置,方便灵活调整视图。
  • 内嵌模式：字段面板会直接显示在选中节点旁边,像在画布中直接编辑一样,视图更加紧凑。

您可以根据个人习惯和屏幕大小选择最适合的模式。内嵌模式还支持在设置中调整缩放比例(0.5-1.0),以获得最佳的视觉体验。

相关操作 ​

我们将剩余节点配置完成：

在此过程中，您可以直接拖拽节点调整其位置，按住 shift 框选多个节点，使用 Ctrl + C/V 快速复制粘贴节点，使用右下角排版工具对多个节点进行统一操作，使用 Delete 或 Backspace 键删除节点。

您可以自行练习，也可以直接将以下代码通过 导入 功能快速与此教程同步：

点击查看与复制代码
json
{
  "$__mpe_config_新建Pipeline1": {
    "$__mpe_code": {
      "prefix": "",
      "filename": "新建Pipeline1",
      "version": "v0.5.0"
    }
  },
  "开始示例": {
    "recognition": {
      "type": "DirectHit",
      "param": {}
    },
    "action": {
      "type": "DoNothing",
      "param": {}
    },
    "$__mpe_code": {
      "position": {
        "x": 1382,
        "y": 367
      }
    }
  },
  "进入显示": {
    "recognition": {
      "type": "OCR",
      "param": {
        "expected": ["显示"]
      }
    },
    "action": {
      "type": "Click",
      "param": {}
    },
    "$__mpe_code": {
      "position": {
        "x": 1639,
        "y": 368
      }
    }
  },
  "进入游戏二级菜单": {
    "recognition": {
      "type": "DirectHit",
      "param": {}
    },
    "action": {
      "type": "Swipe",
      "param": {
        "begin": [0, 0, 0, 0],
        "end": [1, 2, 3, 4]
      }
    },
    "$__mpe_code": {
      "position": {
        "x": 1934,
        "y": 455
      }
    }
  },
  "进入存储": {
    "recognition": {
      "type": "OCR",
      "param": {
        "expected": ["存储"]
      }
    },
    "action": {
      "type": "Click",
      "param": {}
    },
    "$__mpe_code": {
      "position": {
        "x": 1638,
        "y": 539
      }
    }
  },
  "进入无障碍": {
    "recognition": {
      "type": "OCR",
      "param": {
        "expected": ["无障碍"]
      }
    },
    "action": {
      "type": "Click",
      "param": {}
    },
    "$__mpe_code": {
      "position": {
        "x": 1637,
        "y": 710
      }
    }
  },
  "进入应用二级菜单": {
    "recognition": {
      "type": "DirectHit",
      "param": {}
    },
    "action": {
      "type": "DoNothing",
      "param": {}
    },
    "$__mpe_code": {
      "position": {
        "x": 1936,
        "y": 659
      }
    }
  }
}

连接操作 ​

端点 ​

每个常规节点包含四个端点，其含义分别如下图所示：

提示

文档中有较多配图的 jumpback 在左侧，是因为 0.14.2 版本前 mpe 将 jpb 作为字段单独处理，实际效果完全一样。

  • 节点右侧的端点为出口，分别会被编译为 next 与 on_error 字段。
  • 节点左侧为入口端点，接收任意出口连接，target 会直接编译，jump_back 会添加标记（详见节点属性）。

每个出口端点可以连接任意数量的入口端点，每个入口端点可以连接任意数量的出口端点，直接拖拽端点进行连接操作：

标签 ​

在每条连接中间会有数字标签，表示被编译为相应字段后在数组中的顺序，为创建连接的顺序，例如在本实例中上示操作会被编译为：

json
{
  "开始示例": {
    /* ... */
    "next": ["进入显示", "进入存储", "进入无障碍"],
    "on_error": ["识别超时"]
  },
  "进入存储": {
    /* ... */
    "next": ["进入游戏二级菜单", "进入应用二级菜单"]
  }
}

您可以通过左上角设置按键配置隐藏连接标签。

相关操作 ​

选中连接后，您可以使用 Delete 或 Backspace 键删除连接。

导出 ​

瞧，您已经使用 MPE 编写了第一个 Pipeline 文件！

至此，我们已经完成了实例的业务逻辑，我们可以使用右侧 JSON 面板对当前流程图进行预览或导出。

导出选项 ​

MPE 提供了灵活的导出方式：

  • 导出到粘贴板：将 Pipeline JSON 复制到剪贴板，便于快速粘贴到其他位置
  • 导出为文件：下载为 .json 文件到本地

在启用 LocalBridge 后支持：

  • 保存到文件：直接保存到本地服务管理的工作目录
  • 使用本地服务创建：通过本地服务 API 创建并管理 Pipeline 文件

配置处理方案

MPE 支持三种配置处理方案，可在配置面板中切换：

  • 集成导出：配置嵌入 Pipeline 文件，最稳定，适合完全使用 MPE 的项目
  • 分离导出：配置存储至独立 .{name}.mpe.json 文件，便于版本管理
  • 不导出：不保存任何配置，导入时触发自动布局

详细说明请参考 导入与导出文档。

再次导入 ​

MPE 支持多种导入方式，您可以根据实际需求选择：

从粘贴板导入 ​

复制需要导入的 Pipeline 文件代码（注意不是文件，是直接复制文件内的所有代码），点击 MPE 右侧 Pipeline JSON 面板的 从粘贴板导入 按钮，即可导入当前文件。

从文件导入 ​

您可以通过以下方式直接导入 .json 或 .jsonc 文件：

  1. 本地服务导入：使用本地服务快捷导入，详见下一小节。
  2. 拖拽导入：直接将 .json 或 .jsonc 文件拖拽到 MPE 页面的任意位置。
  3. 点击按钮导入：点击 MPE 右侧 Pipeline JSON 面板的 从文件导入 按钮，选择需要导入的文件。

MPE 会自动检测并兼容 v1 和 v2 协议格式，甚至支持在同一文件、同一节点中混合使用两种协议的节点。当使用分离导出模式时，本地服务导入会自动关联对应的 .{name}.mpe.json 配置文件。

接下来... ​

接下来，您可以阅读其他教程章节，也可以自行体验 MPE 的其余功能。

细节问题可在 MaaFramework 集成/开发交流群（595990173）中询问。