使用指南

入门路径 / Hello World:打印第一条消息

从创建 .sgw 工作流到连接加载事件和打印字符串,完成第一个可运行的 Script Graph。

16

这个教程只做一件事:让 Cocos Creator 的运行界面里出现你的第一条 Script Graph 输出。

听起来简单,但走完这一遍之后,你会真正把 Script Graph 的最短闭环——创建 → 连线 → 编译 → 挂接 → 运行——一次性理清楚。这条路径通了,后面所有教程都是在它上面加节点。

本页目标和验收标准

不要急着学复杂节点,先把这条最短闭环跑通:

创建 .sgw
  → 放入入口节点
  → 连接执行流
  → 保存并编译
  → 挂到场景节点
  → 运行时看到输出

完成后,请确认这三件事都成立:

条件为什么它重要
工作流能编译说明文件类型、节点和连线没有基础错误,编译器认得这张图
组件能挂到场景节点说明 .sgw 已经变成 Cocos 认得的可运行组件
运行时能看到 Hello Script Graph说明入口触发、执行线传递、日志输出这三段都打通了

三个条件里只要有一个不成立,就先停下来把它排查掉。后面所有教程都会默认你已经理解这条最短链路,跳过这一步很快就会陷入”到底哪里没跑通”的迷雾。

你需要准备什么

  • 一个 Cocos Creator 3.8.x 项目。
  • 已安装并启用 Script Graph 扩展。
  • 场景里有一个可以挂组件的节点,例如 CanvasGameRoot,或干脆新建一个空节点叫 HelloWorldRoot

第一步:创建一个 .sgw

.sgw 是 Script Graph 的核心文件——你在画布上放的每一个节点、拉的每一条线,最终都会保存到这个文件里。

  1. 在 Cocos Creator 的资源管理器里选中 assets 或任意目录。
  2. 右键,选择 脚本图流(Script Graph Workflow)
  3. 保持默认名字,或改成 HelloWorld.sgw
  4. 双击这个文件,工作流编辑面板会打开。
  5. 首次打开时会问你选主类型——选「组件」

为什么选组件?因为组件工作流和场景节点的关系最直观:它跟普通组件一样挂在节点上,跟随场景生命周期触发。函数库、类、接口、枚举、结构体是后面组织复用逻辑用的,不适合作为你的第一张图。

第二步:放两个节点,连一条线

在画布上放这两个节点:

节点用途参考
加载事件组件被加载时触发一次事件节点
打印字符串输出一段文本,用来”看到”执行到了这里调试节点

然后做两件事:

  1. 把「加载事件」的执行输出连到「打印字符串」的执行输入
  2. 把「打印字符串」的文本输入改成:
Hello Script Graph

这条线的意思是:“当组件被加载,就继续执行打印节点。” 就这么简单。

第三步:保存、编译、挂接

  1. 保存工作流(Cmd/Ctrl + S)。
  2. 点击工作流面板里的编译按钮,让它生成一个可挂接的组件脚本。
  3. 回到场景,把生成的组件挂到 HelloWorldRoot
  4. 点运行预览。

如果一切正常,你会在控制台屏幕调试输出里看到 Hello Script Graph——恭喜,你的第一张 Script Graph 已经跑起来了。

一个小建议:这里不要急着加更多节点。先确认输出稳定出现,再动图。入门阶段最常见的坑不是”节点不会用”,而是分不清”没触发/没编译/没挂接/日志被过滤”到底是哪种情况——先把这四种确认下来,你会省下很多以后的调试时间。

你刚刚学到了什么

用一句话概括:在 Script Graph 里,一个组件想跑起来,需要”文件类型 + 事件入口 + 执行流 + 挂接场景节点”这四件事同时成立。

再拆一次:

  • 工作流用 .sgw 保存,是脚本的载体。
  • 组件工作流需要挂到场景节点,才会跟随场景生命周期跑。
  • 事件节点是执行入口——没有入口,后面所有节点都不会执行
  • 执行流决定顺序,数据输入决定用什么值。
  • 打印节点是最小的排查工具,用它可以确认某条执行线到底有没有跑到。

万一没有输出

按下面顺序检查,命中率最高:

  1. .sgw 首次打开时选的是不是”组件”类型?(不是的话,重建一个新文件——这个类型改不了)
  2. 「加载事件」是否已经连到「打印字符串」的执行输入?(数据线接错位置也算没连)
  3. 工作流是否已经保存并且编译过?(只保存不编译,改动不会生效)
  4. 编译生成的组件是否已经挂到运行场景的节点上?
  5. 控制台是否被日志过滤级别隐藏了调试输出?

仍然没结果?读 编译、运行和日志排查,那里把所有可能的失败点都列出来了。

搞定这一页,你已经站在 Script Graph 的地基上了。接下来,就是把这张图拓展成真实的玩法逻辑。