Shader Editor | Cocos Store

Shader Editor v5.2.0

类别: Creator扩展插件

作者: supersuraccoon

Creator版本要求: v3.1.0

支持平台: HTML5

评分

售价: ¥ 288.00 (个人)

介绍

购买注意

最新版本 v3.0.0 开始，编辑器支持 Creator v3.x 的所有版本，但是有以下注意事项，请详细阅读后再考虑购买：

支持 Creator v3.x 版本，指的是：

用户可以在 CocosStore 的 v3.x 分类中搜索到本插件
插件下载后，可以在 Creator v3.x 中以插件模式启动运行
插件还是只能制作 2d特效, 只是制作的特效，可以导出基于 builtin-unlit.effect 的特效文件，直接在 Creator v3.x 中使用

支持 Creator v3.x 版本，并不是指：

Shader 编辑器已经使用 Creator v3.x重写
Shader 编辑器中能预览 3d 模型

因此，如果:

购买者是要进行 Creator v2.x 游戏开发，那么推荐购买
购买者是要进行 Creator v2.x / v3.x 游戏开发，且侧重于前者，那么也推荐购买
购买者只是要进行 Creator v3.x 游戏开发，那么请谨慎考虑后再决定购买

视频演示可以看这里: ShaderEditor 3D Support on BiliBili

总结一下，如果是看中 3d 功能而想要购买本插件的话，请慎重考虑，因为本插件目前对 3d 的支持是很有限的。

0x00 About && 关于

首先，这两篇帖子记录所有的开发过程，有兴趣的可以翻阅一下:

分享一下最近业余时间在做的一个库 SSRShaderFX

[2021新坑] SSRShaderFX && Creator

然后用最简单的一句话介绍这个项目，就是:

用 Cocos Creator 制作的可视化 Shader 编辑器。

再来看几个用编辑器制作的 Shader 特效:

gif

当然所有的特效都可以在游戏中直接使用，效果和编辑器中完全一致。

编辑器参考的对象是 Unity3D 中的 Shader Graph 。

0x01 Features && 功能

虽然是第一版，编辑器功能还是比较多的，这里抽取一些特性列举一下:

多引擎无侵入是修改，完全纯净实现
支持 Creator 原生插件模式同时提供网页版的 Cloud / 云 模式，使用方便
大量内置特效组件，目前版本 (v1.0.0) 为 140+ (当前版本多为基础组件，后续会添加更多复杂组件)

制作后导出特效为 Creator 原生支持的 .mlt + .effect 文件，因此可以方便的使用在各种平台上
全中文化(双语切换)，编辑器所有功能全部中文化，包括所有组件的说明，文档
完整，丰富的在线文档，同时编辑器中内置同样完整的文档，包括大量演示视频及示例工程项目(可下载直接运行)

SSRShaderFX Editor 在线文档

上面提到了有丰富的在线文档，各位开发者可以在购买前就通过这个文档链接先了解编辑器的一些功能。

在线试玩版 1.0.0 - Preview

此外，还可以通过上面的试玩版链接，简单的体验编辑器的一些基础功能。

但请注意试玩版本和正式版相差较大，试玩版只提供了非常基础的功能和有限的组件数量。

0x02 How to Use / 如何使用

Plugin / 插件模式

插件模式使用非常简单，在 Cocos Store 中购买插件后，即可在 Creator 编辑器的菜单栏中，看到 Shader 编辑器的选项，点击打开即可。

gif

Cloud && 云模式

云模式的编辑器使用方式更为简单，打开任何浏览器(兼容性请看下面章节的列表)，访问编辑器的网址即可直接使用，再通过使用 Cloud 提供的项目上传下载功能，可以轻松的实现 Plugin 和 Cloud 模式之间的项目同步功能。

0x03 Account && 账号

编辑器目前支持两种模式:

Offline / 离线模式

离线模式不会进行账号的登录操作，可以在没有网络的情况下方便的使用，但是要注意:

编辑器的部分功能在离线模式下无法使用，如云端的项目上传下载功能
Cloud / 云 模式下，无法使用离线模式 (需要登录使用)

Online / 在线模式

在线模式需要账号登录，此外一些云相关的功能，都需要在 在线模式 下使用。

注意目前并没有在编辑中加入开放注册的功能，购买插件的开发者，可以通过下面的方式获取账号:

在论坛通过私信的方式( @supersuraccoon ) ，将购买插件时使用的用户名发送给我，我会将创建好的账号信息和在线地址返回
添加 ShaderFXEditor 用户QQ群: 209992699，将购买插件时使用的用户名私信给我，我会将创建好的账号信息和在线地址返回

0x04 Platform Compatibility && 平台兼容性

下面列出的，是不同模式的编辑器在不同操作系统，不同浏览器及 Creator 编辑器中的兼容性测试结果。

Cloud Version / 云模式

macOS Catalina 10.15.6

Browser / Features	Startup / 启动	Import Export / 导入导出	Cloud / 云功能	FX in Creator / 特效使用
Google Chrome 85.0.4183.83	√	√	√	√
Firefox 80.0.1	√	√	√	√
Safari 13.1.2 (15609.3.5.1.3)	√	√	√	√

Windows 10 版本1909(操作系统内部版本18363.1440)

Browser / Features	Startup / 启动	Import Export / 导入导出	Cloud / 云功能	FX in Creator / 特效使用
Google Chrome 89.0.4389.82	√	√	√	√
Firefox 2021.3 87.0	√	√	√	√
Edge 89.0.774.68	√	√	√	√

Plugin Version / 插件模式

macOS Catalina 10.15.6

Version / Features	Startup / 启动	Import Export / 导入导出	Cloud / 云功能	FX in Creator / 特效使用
`Cocos Creator v2.3.4`	√	√	√	√
`Cocos Creator v2.4.0`	√	√	√	√
`Cocos Creator v2.4.1`	√	√	√	√
`Cocos Creator v2.4.2`	√	√	√	√
`Cocos Creator v2.4.3`	√	√	√	√
`Cocos Creator v2.4.4`	√	√	√	√

0x05 Summary && 总结

Shader 编辑器是自己一直想要做的东西，现在算来在 2017 年 cocos2d-js v3.1x 时代就开始开发了，期间断断续续，在趟过了无数的坑之后，现在终于在 Creator 这个平台上实现了0到1 的突破。

从最前面发的两个帖子也可以看到，现在的 Creator 版本比起 4年前的 cocos2dx 版本已经是有了质的变化。

Plan / 计划

当然现在这个版本的内容的完成度，距离自己想要做的，可能只有 (20%)。

下面列出的是一些已经完成技术可行性的功能点，其实很多功能已经在之前做的 SSRShaderFX Gallery 中有了基本的实现 :

More Premade FX / 更多的预制特效

这些特效来源于这些年收集和自己编写的特效，将其制作成预制组件加入编辑器，再借助编辑器配合其他的组件的使用，可以衍生出更多的特效。
Spine Support / 骨骼动画支持

目前的游戏骨骼动画的使用频率是非常高的，因此导出特效对骨骼动画的支持也是必然需要的，这一功能应该在下一版本中就会放出
Spine Preview / 骨骼动画支持

目前编辑中制作的特效可以实时的预览在各种 cc.Sprite 上使用的效果，但是并没加入骨骼动画的实时预览功能，因此考虑加入类似之前做的 SSRShaderFX Gallery 项目中骨骼动画预览效果。当然还希望加入更多的效果，比如允许用户导入自己的骨骼动画。
Tween Support / 动画支持

得益于 Creator 目前的 Tween 的设计方式，配合 unform 的设置，可以在 Shader 的基础上，再方便的追加程序级的动画控制，这也在 SSRShaderFX Gallery 已经有了实现。
Tween Preview / 动画预览

接着上面，既然有了 Tween 的动画支持，那么能够在编辑器中直接预览，查看效果，那自然是最好的选择，参考:
RenderComponent Support Solution / 渲染控件支持方案

上面的提到的 Spine 动画只是 Creator 中渲染组件的一种，想要做到所有的渲染组件都能够享受到制作的特效，那么光靠导出的 .mtl + .effect 肯定是不够的，需要一些代码的支撑， SSRShaderFX Gallery 中已经基本支持了下面这些渲染对象:
- 字体类（包含 Cache Mode: None / Bitmap / Char ）
  - AtlasFont
  - BMFont
  - TTFFont
  - SystemFont
- UI 类
  - Button
  - CheckBox
  - EditBox
  - PageView
  - ProgressBar
  - ScrollView
  - Slider
  - Toggle
- 静态类（包含 Type: Simple / Sliced / Tiled / Filled / Mesh Size Mode: Custom / Trimmed / Raw ）
  - Sprite
  - SpriteAtlas
- 动画类
  - DragonBones
  - Spine
  - SpriteAnime
  - Particle
- 其他类
  - Graphics
  - Mask
  - MotionStreak
  - TiledMap
FBO Support / FBO 支持

有了各式各样的特效以后，如果配合上 FBO ，那么就可以制作更多的酷炫效果，最常见的就是屏幕后期特效，当然还有更多酷炫的玩法。在我之前发布过的一款插件中，已经有了非常成熟的解决方案:

[cc.RenderTexture cc.Camera FBO] 截图, 放大镜, Shader 伴侣

SSRFBONodeComponent in CocosStore

当然如何将其合理的集成进编辑器中，还是需要好好考虑
SSRShadeFX Toy 实时预览生成的 shader ，对其修改并即时生效，取这个名字，是希望最后能够做到类似 Shadertoy 一样的在线编辑器:
More to Come / 还有更多

Purchase notice / 购买须知

购买前请仔查看前面的 [平台兼容性] 列表，确保自己的系统可以使用插件 (虽然云版本只要有浏览器基本就能用)
购买内容并不包含编辑器源码，当然如果对某些技术点的实现感兴趣，欢迎来帖子询问
上面的计划表虽然列出了很多内容而且大部分已经基本有了现成的实现，但是最终是否会被做进编辑器也并不能确定，毕竟是一个人空余时间做的项目。当然从这个项目持续了4年多可以看出，个人还是非常的希望能把这个项目做到 120%+ 的。

个人开发不易，希望各位支持正版。

希望能有更多的 Creator 用户支持这个编辑器，后期随着功能的逐步增加，售价也会逐步提高，但是已经购买的用户可以免费的享受后面插件的所有更新。

v2.0.0 发布

[Fix]

extension GL_OES_standard_derivatives : enable 导致导出的特效在手机上无效
Project 面板上的 uniform 变量名有时存在同步出错的问题

[Refine]

进一步自动类型匹配

允许 sampler2D 输出类型与 vec4 类型直接相连

[Feature]

新增 特效组件 功能 (下载，删除，克隆)

在线文档: FX Component
新增 用户自定义组件 功能 (上传，下载，删除，克隆，发布)

在线文档: Custom Component
新增 组件编辑器 功能，支持组件的可视化编辑，实时预览调试

在线文档: Component Builder

在线文档: Missing Component
新增 缺失组件找回 功能
新增 特效组件 60+ 列表:

AsciiArt / 字符画

AverageBlur / 均值模糊

BarrelBlur / 桶状模糊

BlackHole / 黑洞扭曲

BlackWhite8Bit / 黑白像素风

BlackWhiteComics / 黑白漫画风

BlackWhiteFire / 黑白火焰

BlackWhitePencil / 黑白铅笔画

BluePrint / 蓝图风格

BurnOut / 燃烧殆尽

CelShading / 卡通渲染

CircularFadeMask / 圆形渐隐遮罩

CircularFog / 圆形迷雾

ColorBurn / 色彩燃烧

ColorSketch / 彩色素描

Crosshatch / 交叉排线

CyberpunkStyle / 赛博朋克风

DirectionalBlur / 定向模糊

EdgeDilate / 边缘膨胀

EdgeErode / 边缘侵蚀

Emboss / 浮雕特效

FrozenBlue / 冰冻蓝风格

GameBoy8Bit / GameBoy像素

GaussianBlur / 高斯模糊

GoldenStyle / 黄金风格

GradientsDesert / 梯度沙漠色彩风

Halftone / 半色调

HeatDistort / 热扭曲

HexagonClipping / 蜂巢剪裁

HexagonPixel / 蜂巢像素

IcedStyle / 冰冻风格

IceFrosted / 冰霜

LateralChromaticAberration / 横向色差

LiquidDistort / 液体扭曲

MangaFocusLines / 漫画集中线

Mosaic / 马赛克

NeonEdge / 霓虹描边

NightVision / 夜视特效

NormalLight / 法线光照

ObliqueLine / 斜线特效

OutlineColor / 描边着色

PencilSketch / 铅笔素描风

PoisonGreen / 中毒风格

PolkaDots / 圆点花纹

RadialBlur / 径向模糊

RectangleClipping / 矩形剪裁

SandStyle / 沙化风格

Scanlines / 扫描线

SectorWrap / 扇形环绕

SimpleDissolve / 简易消融

SnowCover / 积雪

StoneStyle / 石化

SurroundDistort / 环绕扭曲

Sway / 摇曳

Teleportation / 瞬间转移

ThermalVisual / 热成像

TVFlicker / 电视故障

UserCustomNode / 用户自定义组件

WaterTurbulence / 水面扰动

WindBlowing / 风吹扭曲

WoodStyle / 木纹风格

所有特效的演示视频: ShaderEditor FX List v2.0.0 on BiliBili

此外，补上一个编辑器内所有内置组件的演示视频: ShaderEditor Core List on BiliBili

v2.0.1 发布

这一版本主要加入了对 Spine 骨骼动画的支持。

Live Preview / 实时预览

骨骼动画文件的实时预览功能。

Spine 功能强大，支持的特性也很多，为了确保支持大部分的动画功能，官网提供的 Spine-Examples 都被拿来进行测试了:

Raptor
Goblins
Alien
Stretchyman
Mix-and-match
Power-up
Windmill
Owl

这些动画涵盖了下面这些功能点:

Frame-by-frame Animation
Mesh Attachments
Mesh Deformation
Weighted Mesh Attachments
Skins
Skin Bones
IK Constraints
Transform Constraints
Path Constraints
Additive Animation Blending

演示视频: ShaderEditor Spine FX on BiliBili

Animation && Skin List / 动画 && 皮肤列表

在 Spine 动画加载完成后，可以在编辑器的 Spine 面板上，看到加载好的动画和皮肤列表，通过下拉框选择可方便的选择想要的动画或是皮肤进行效果的预览。

Scale && Position Adjust / 缩放 && 位置调整

大部分 Spine 动画和静态的 cc.Sprite 单图不同，锚点通常不是在可视范围的中心点，大小也会随着 Animation 的切换而变化，因此编辑器提供了实时调整缩放，位置的功能。

Drag-and-Drop Update / 文件拖放更新

Spine 动画的切换和 cc.Sprite 纹理切换的方式一样，只需要简单的将动画文件拖放到面板即可，编辑器会自动解析，更换动画。

注意，一套完整的动画文件至少应该由三个部分组成:

.json
.png
.atlas / .txt

这些文件需要一起拖放到面板上，否则无法正确的加载动画。

Output to Shader / 输出到 Shader

有了上面这些最基本的预览功能支持之后，接着就是最重要的部分了，毕竟单纯的预览动画没有什么太大的意义，最终要的还是要结合编辑器，结合输出的 Shader 进行实时的预览。

v2.1 对原来的 MainTexture 面板进行了扩展，加入了 Spine 动画的选项，选择 Spine 骨骼动画，就会将 Spine 动画作为主纹理，结合正在编辑的 Shader 特效输出到 Output 面板。

最后，就是和以前一样，制作调整特效，只是现在，所有的特效都可以在 Spine 动画上，实时的看到最终的效果，真正的做到所见即所得。

有了 Spine 动画的预览功能，给特效的制作主要带了这些帮助:

部分重度 uv 依赖特效，是无法在骨骼动画上使用的，通过预览，可以确认制作的特效是否能在骨骼动画表现正常
部分非重度 uv 依赖特效，是可以在骨骼动画上使用的，只不过这些特效需要和静态纹理不一样的参数设置，才能达到比较好的效果，通过实时预览调整，可以找到最合适的参数设置
几乎所有非 uv 依赖的特效，都是可以在骨骼动画上使用的

下面是一些特效库中的特效和 Spine 动画联合使用时在编辑器中的效果。

演示视频: ShaderEditor Spine FX on BiliBili