跳到主要内容

借助 AI 开发

PlayCanvas Engine 应用是普通的 JavaScript 或 TypeScript 项目，能够读取文件、编辑代码和运行命令的编程助手都可以参与开发。请向助手提供与人类贡献者相同的引擎参考资料和验证步骤。

提示

如果代码保存在 PlayCanvas Editor 项目中，请改用 VS Code 扩展。

选择 AI 客户端与操作界面​

客户端操作界面适用场景
Cursor代码编辑器行内修改、可视化差异审查，以及以编辑器为中心的智能体工作流程
Claude Code命令行、IDE 集成，以及 Claude Desktop 的 Code 标签页在终端、编辑器或桌面工作区中处理整个仓库，并查看可视化差异和应用预览
OpenAI Codex命令行、IDE 扩展，以及 ChatGPT 桌面应用中的 Codex在终端、编辑器或桌面工作区中进行本地实现与审查，支持并行对话和工作树

各客户端的套餐和支持平台不同。最新安装方式和可用情况请查阅官方文档。

添加 PlayCanvas 工作流程​

PlayCanvas Skills 为兼容的 AI 编程智能体提供面向 Engine、React 和 Web Components 应用的专用流程。使用 create-playcanvas 创建的新项目默认包含这些技能。在现有项目中可以运行：

npx skills add playcanvas/skills

对于 Claude Code，也可从 Anthropic 目录安装 PlayCanvas 插件。每个客户端只采用一种安装方式。安装完成后开始新的智能体对话，让客户端发现技能。

提供项目上下文​

先安装项目依赖，再从仓库根目录启动助手，使其能够访问 PlayCanvas 包、TypeScript 声明、脚本和项目现有代码模式。

将实际开发命令与项目约定写入客户端读取的仓库指令，例如 AGENTS.md、CLAUDE.md 或 Cursor Rules。指令应简洁，并包含：

  • 开发、代码检查、测试和构建命令。
  • 源码目录与生成文件目录。
  • 浏览器支持和性能限制。
  • 判断任务完成所需的可观察结果。

尽可能将共享指导写在 AGENTS.md 中。Claude Code 可以通过仅包含以下内容的 CLAUDE.md 复用它：

@AGENTS.md

只有确实属于特定客户端的指令，才需要保存在独立的客户端配置文件中。

引导助手查阅以下 PlayCanvas 资料，而非凭记忆调用 API：

编写前优先复用引擎代码​

编写相机控制、角色控制器、补间动画、水面、天空、后期效果或 XR 代码前，先检查通过 playcanvas/scripts/* 提供的生产级引擎脚本。

遇到不熟悉的引擎功能时，先寻找对应引擎示例，再调整其中的引擎初始化与更新逻辑。应将示例作为可阅读和移植的实现参考，而非直接导入的模块。

描述目标及其验证方式​

每次提出一个可观察的结果、需要保留的限制，以及证明结果的检查方式。例如：

修改前先检查这个 PlayCanvas Engine 项目。复用现有代码模式，
查阅已安装的 PlayCanvas 类型或官方 API 参考，不要猜测 API。

在保留[限制条件]的前提下实现[目标结果]。运行[测试或构建命令]，
启动应用，测试[交互]，检查浏览器控制台，并说明修改内容及结果有效的证据。

起初只启用当前任务所需的集成。添加浏览器 MCP 服务器前，先检查所选桌面客户端的内置浏览器或应用预览是否已经满足验证需求。否则，先选择一种浏览器工具，仅在另一种工具能补足缺失能力时再添加。

  • **Context7 MCP：**客户端适合通过 MCP 查询资料时，可检索其收录的 PlayCanvas Engine 文档。权威内容优先使用上文的官方 AI 可读文档。
  • **Playwright MCP：**在浏览器中启动和操作应用，测试用户流程并截取画面。
  • **Chrome DevTools MCP：**以控制台、网络或性能诊断为主要任务时，可用它代替 Playwright。
  • **PlayCanvas VS Code 扩展：**将编辑器管理的文本资源映射为本地文件，供 Cursor 等编程助手处理。

验证每项修改​

检查源码不能证明交互行为正确。接受结果前，应完成：

  1. 审查完整差异，排除无关修改。
  2. 在项目提供相应工具时，运行针对性测试、代码检查和生产构建。
  3. 启动应用，检查浏览器控制台是否出现新错误或警告。
  4. 通过真实浏览器输入测试修改后的交互。外观使用截图验证；状态、数量、位置等行为使用运行时查询验证，不应通过修改状态伪造证据。
  5. 对复杂状态，可考虑提供仅开发环境使用的 window.snapshot()，返回可 JSON 序列化的数据，不暴露修改状态的方法。
  6. 修复并重新验证失败的检查，测试受影响的浏览器或设备，并说明未验证的内容。

AI 工具官方文档​

OpenAI​

Anthropic​

Cursor​