YYKA Shader 编辑器 · 插件介绍
一款为 Cocos Creator 量身打造的可视化 Shader（着色器）编辑器。用「节点连线」代替手写 GLSL：拖拖拽拽搭出着色逻辑，画布下方实时预览，右侧同步生成
.effect文本，一键导出到资产库并创建材质。无需懂着色器语法，也能做出溶解、描边、水波、全息、金属等效果。
- 面板入口：顶部菜单 YYKA插件 → Shader编辑器（面板标题「YYKA Shader 编辑器」）
- 帮助入口：面板内
F1，或菜单 帮助 → 使用帮助 - 适用引擎：Cocos Creator 3.8.8 及以上
✨ 功能特性
1. 自研 Canvas 节点编辑器
- 画布式节点图：左侧节点库拖拽添加，输出端口拖到输入端口连线；单输入端口重复连线自动替换。
- 断线重连、框选多选、节点折叠、注释框、对齐（≥2 节点）与分布（≥3 节点）、关键字定位节点。
- 画布左上角悬浮工具条 + 单行顶部工具条；右键上下文菜单；多标签页文档（新建 / 切换 / 关闭 / 双击重命名）。
- 撤销 / 重做、复制粘贴、全选、自动适配视图。
2. 丰富的内置节点库（100+ 节点，覆盖输入 / 常量 / 数学 / 向量 / 颜色 / 逻辑 / 程序化 / UV / 几何 / 输出）
- 输入与纹理：UV0、时间、浮点数、颜色、纹理采样（带真实图像选择器）。
- 数学全家桶：加减乘除、插值、钳制、幂、开方、取整、阶跃 / 平滑阶跃、重映射、指数 / 对数、三角函数、点乘 / 叉乘 / 归一化 / 反射 / 折射等。
- 程序化噪声：简单噪声、梯度噪声、Voronoi、棋盘、白噪声。
- UV 变换：平铺偏移、旋转、扭曲、极坐标、径向切变、序列帧。
- 几何与环境：世界坐标 / 法线、视线方向、屏幕坐标、切线 / 副切线、菲涅尔、反射向量。
- 输出节点：Unlit、Surface（PBR），以及高级「最终结果覆写」。
3. 双着色模式
- Unlit：不依赖光照，适合 2D 特效、UI、贴图流动。
- Surface：基于引擎标准 PBR 表面着色器，适合材质类效果（金属、玻璃、冰晶等），支持自发光、金属度、粗糙度、法线、透明度等通道。
- 一套图逻辑，导出时自动适配两种目标。
4. 实时预览（WebGL2）
- 画布下方独立预览视口，节点参数改动即时生效。
- 影棚式渐变背景 + 地面网格 + 接触阴影，物体与地面关系清晰、有空间感。
- 相机可旋转 / 缩放；支持上传真实贴图，按采样器资产异步加载并缓存。
- 预览编译错误会列出并可点击定位到对应节点。
5. 特效库（33 个预置特效，9 大分类）
- 材质 / PBR、表面特效、2D 扭曲 / 波、溶解 / 过渡、光照 / 边缘、屏幕 / 后处理、颜色 / 调整、UV / 纹理、程序化。
- 卡片式缩略图预览、关键词搜索；点击即在新图标签页打开为可编辑节点图，可在此基础上二次创作。
6. 一键导出与集成
- 导出 Effect：把当前图编译为
.effect写入资产库。 - 导出并校验：导出后检查引擎导入状态，把诊断回灌到代码视图。
- 创建材质：依据 effect 生成
.mtl材质资源。 - 应用到选中：把材质应用到场景中选中的节点（自动处理 MeshRenderer / Sprite，必要时补组件）。
- 导出 PNG：把当前画布视图导出为图片（走系统保存对话框）。
7. 子图与自定义节点
- 封装为子图：选中若干节点折叠为一个子图实例，复杂图结构清晰、可复用。
- 子图管理：重命名 / 插入实例 / 删除；双击实例进入内部编辑，面包屑返回上级。
- 自定义节点：定义输入 / 输出端口与 GLSL 主体，保存后即可在节点库中像内置节点一样使用。
8. 顺手的使用体验
- 深色 / 浅色主题自动跟随 Cocos 编辑器。
- 完整快捷键自定义（录制改键、冲突提示、一键恢复默认）。
- 中文 / English 双语界面（跟随编辑器语言）。
- 图以文本 JSON 保存与传输，便于版本管理与复用。
📋 使用说明
快速上手
- 打开面板：菜单 YYKA插件 → Shader编辑器。
- 从左侧节点库拖拽节点到画布；分类可折叠，顶部可搜索。
- 拖动输出端口到输入端口建立连线；单输入端口重复连线会自动替换旧连线。
- 拖拽输入端口上的已有连线可断线重连；在空白处拖动可框选多选。
- 每个图需要一个输出节点（Unlit / Surface）作为着色结果终点。
- 画布底部为实时预览，右侧代码视图实时生成
.effect文本并显示诊断。 - 顶部标签栏管理多个图文档：新建 / 切换 / 关闭，双击标签可重命名。
节点与连线
- 连线：输出端口 → 输入端口；命中输入端口上的已有连线并拖动可改接。
- 右键菜单：在节点 / 连线 / 注释框上右键（不拖动）弹出上下文菜单。
- 断开全部连线：右键节点；删除：右键菜单或
Delete键。 - 折叠节点：双击节点标题栏折叠 / 展开；子图实例双击进入内部编辑。
- 注释框：工具栏「注释框」添加，可拖动与编辑文本。
- 对齐 / 分布：选中多个节点后用工具栏对齐（≥2 个）与分布（≥3 个）。
- 定位：画布左下角输入关键字，回车或点「定位」高亮并居中匹配节点。
模式与导出
- 模式：顶部工具栏在 Unlit / Surface 间切换，决定生成代码的着色目标。
- 实时预览：画布下方 WebGL 预览，节点参数即时生效；编译错误会列出并可定位。
- 导出 Effect：把当前图编译为
.effect写入资产库。 - 导出并校验：导出后检查引擎导入结果，诊断回灌代码视图。
- 创建材质：依据 effect 生成
.mtl材质资源。 - 应用到选中：把生成的材质应用到场景中选中的节点。
- 导出 PNG：把当前画布视图导出为图片。
导出 / 创建材质 / 应用到选中前会检查重名，若资产库已存在同名资源会先请你确认覆盖；保存图时会校验名称，空名或
Untitled会被拒绝。
子图与自定义节点
- 封装为子图：选中若干节点后点工具栏「封装为子图」，选区被折叠为一个子图实例。
- 子图管理：工具栏「子图管理」可对子图定义重命名 / 插入实例 / 删除。
- 进入编辑：双击子图实例进入内部编辑，顶部面包屑可返回上级或主图。
- 自定义节点：工具栏「自定义节点」定义输入 / 输出端口与 GLSL 主体，保存后即可在节点库使用。
特效库
- 打开方式：菜单 文件 → 特效库…（独立弹窗）。
- 支持分类浏览与关键词搜索，点击任一特效即在新图标签页打开为可编辑节点图。
快捷键（可在「使用帮助 → 快捷键」页签中改键）
| 动作 | 默认按键 |
|---|---|
| 撤销 / 重做 | Ctrl+Z / Ctrl+Y、Ctrl+Shift+Z |
| 删除选中 | Delete、Backspace |
| 全选 | Ctrl+A |
| 新建图 | Ctrl+N |
| 打开图 | Ctrl+O |
| 保存图 | Ctrl+S |
| 导入 Effect | Ctrl+Shift+I |
| 导出 Effect | Ctrl+E |
| 导出 PNG | Ctrl+Shift+E |
| 适配视图 | F |
| 放大 / 缩小 | Ctrl+= / Ctrl+- |
| 使用帮助 | F1 |
⚙️ 引擎与环境要求
| 项目 | 要求 |
|---|---|
| Cocos Creator | 3.8.8 及以上（3.x） |
| 操作系统 | Windows / macOS（随 Cocos Creator 编辑器运行） |
| 浏览器内核 | 编辑器内置 Electron，预览依赖 WebGL2 |
| 网络 | 无需联网：依赖已随插件打包，安装即用 |
| Node.js | 用户无需单独安装；插件运行期依赖（Vue、fs-extra）已内置 |
| 磁盘 | 约 15 MB |
安装方式：把插件文件夹 / 压缩包放入项目的 extensions/yyka-shader-editor 目录，或通过 Cocos Creator 的扩展管理器导入，然后重新加载扩展即可。安装过程不执行任何联网安装脚本。
🖥️ 平台支持情况
- 插件本体（编辑器扩展）：跟随 Cocos Creator 编辑器，支持 Windows 与 macOS。
- 导出的产物（
.effect/.mtl）：可用于 Cocos Creator 3.x 支持的全平台，包括 Web、iOS、Android、HarmonyOS、Windows / macOS 原生，以及微信 / 抖音等主流小游戏平台。你在预览中搭好的效果，导出后即可在发布版本中运行。
📜 更新日志
1.0.0（首个正式版）
- 自研 Canvas 节点编辑器：拖拽建图、连线 / 断线重连、框选、折叠、注释框、对齐分布、定位、多标签页。
- 100+ 内置节点，覆盖输入、常量、数学、向量、颜色、逻辑、程序化噪声、UV、几何与输出。
- Unlit / Surface 双模式；Surface 基于引擎标准 PBR 表面着色器。
- WebGL2 实时预览：影棚背景、地面网格、接触阴影、相机旋转缩放、真实贴图上传。
- 一键导出：导出 Effect、导出并校验、创建材质、应用到选中、导出 PNG。
- 特效库：33 个预置特效、9 大分类，点击即在新图打开为可编辑节点图。
- 子图封装与管理、自定义节点（自定义端口与 GLSL 主体）。
- 深色 / 浅色主题跟随编辑器；中文 / English 双语；快捷键自定义与冲突提示。
- 导出重名查重确认、保存名称校验、Toast + 状态栏双通道反馈。
- 发布包内置运行期依赖、零联网安装；发布产物做代码混淆。
❓ 常见问题 FAQ
Q：安装后需要联网或执行 npm install 吗？
A：不需要。依赖已随插件内置，安装即纯文件拷贝，零联网、零构建。
Q：装完没看到面板 / 提示 Panel not defined？
A：安装或更新后请在扩展管理器里重新加载扩展。面板入口是菜单 YYKA插件 → Shader编辑器。
Q：要求哪个 Cocos Creator 版本？
A：3.8.8 及以上。版本不符时编辑器可能拒绝加载插件。
Q：导出的 effect 在编辑器里报编译错误怎么办？
A：用「导出并校验」，编辑器会把引擎导入诊断回灌到右侧代码视图，按提示定位到问题节点。若用了手写 GLSL 的复杂逻辑，建议改用「自定义节点」承载。
Q：纹理节点接上贴图却不显示？
A：纹理采样节点未接 UV 时会回退到网格 UV（不会只采样到 (0,0)）；同时确认图像选择器里已选中真实图片而非占位贴图。
Q：为什么导入别人的 effect 后有些节点变成「自定义代码」？
A：导入采用「不丢信息」原则：能结构化的节点会还原为节点图，识别不了的手写 GLSL 会回退为「自定义代码」节点，保证逻辑完整可用。
Q：改了默认快捷键怎么办？
A：在「使用帮助 → 快捷键」页签点「改键」录制新组合（Esc 取消）；冲突会有提示；点「恢复默认」可还原。
Q：导出的材质没应用到物体上？
A：请先在场景中选中目标节点再点「应用到选中」；插件会处理 MeshRenderer 的 material 与 Sprite 的 customMaterial，必要时自动补组件。
Q：会覆盖我已有的资源吗？
A：不会静默覆盖。导出 / 创建材质 / 应用到选中前会查重，若存在同名资源会弹 Toast 请你确认后再覆盖。
Q：怎么卸载？
A：关闭编辑器，删除项目 extensions/yyka-shader-editor 目录即可；已导出的 effect / mtl 属你的项目资源，不受影响。
⚠️ 购买须知
本产品为付费虚拟插件商品，一经购买成功概不退款，请支付前谨慎确认购买内容。
购买后获得对应版本授权，仅限授权范围内使用；
插件仅支持标注的 Cocos Creator 版本，请确认引擎版本符合要求再下单；
不包含定制开发服务，如有定制需求可单独咨询；
严禁二次分发、转售、反编译本插件。
📞 联系我们
如遇问题、有定制需求或希望增加动画 / 功能，欢迎联系作者：
公众号：智能运营咖
关键词
Shader、着色器、可视化编辑器、节点编辑器、Node Editor、Shader Graph、Cocos Creator、Cocos 插件、Effect、材质、PBR、Unlit、Surface、实时预览、WebGL、特效、溶解、描边、水波、全息、金属、玻璃、冰晶、程序化噪声、Voronoi、UV 动画、子图、自定义节点、导出 Effect、创建材质、一键导出、图形化编程、无需写代码
感谢用户的内容
感谢每一位选择 YYKA Shader 编辑器的开发者。是你们在使用中提出的每一条建议——从节点库的交互、预览的空间感，到导出的查重与提示——让这个工具一步步变得更好用、更顺手。
如果你在项目中用它做出了满意的效果，欢迎把作品或截图分享给我们；也欢迎随时反馈问题与新想法，你的每一条声音都会直接进入后续版本的迭代清单。
愿它能为你的创作省下时间，把精力留给真正的创意。
—— YYKA 团队