中文
resource-icon
Shader Editor v5.2.0
类别
Creator扩展 插件
作者
supersuraccoon
Creator版本要求
v3.1.0
支持平台
HTML5
评分
售价
¥ 288.00 (个人)

介绍

购买注意

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

支持 Creator v3.x 版本,指的是:

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

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

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

因此,如果:

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

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

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


0x00 About && 关于

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

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

[2021新坑] SSRShaderFX && Creator

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

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

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

gif

gif

gif

gif

gif

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

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

0x01 Features && 功能

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

  1. 多引擎无侵入是修改,完全纯净实现

  2. 支持 Creator 原生插件模式同时提供网页版的 Cloud / 云 模式,使用方便

  3. 大量内置特效组件,目前版本 (v1.0.0) 为 140+ (当前版本多为基础组件,后续会添加更多复杂组件)

    SSRShaderFX Editor Components
  1. 制作后导出特效为 Creator 原生支持的 .mlt + .effect 文件,因此可以方便的使用在各种平台上

  2. 全中文化(双语切换),编辑器所有功能全部中文化,包括所有组件的说明,文档

  3. 完整,丰富的在线文档,同时编辑器中内置同样完整的文档,包括大量演示视频及示例工程项目(可下载直接运行)

    gif


SSRShaderFX Editor 在线文档

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

在线试玩版 1.0.0 - Preview

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

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

0x02 How to Use / 如何使用

Plugin / 插件模式

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

gif

Cloud && 云模式

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

0x03 Account && 账号

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

Offline / 离线模式

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

  1. 编辑器的部分功能在离线模式下无法使用,如云端的项目上传下载功能

  2. Cloud / 云 模式下,无法使用离线模式 (需要登录使用)

Online / 在线模式

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

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

  1. 在论坛通过私信的方式( @supersuraccoon ) ,将购买插件时使用的用户名发送给我,我会将创建好的账号信息和在线地址返回
  2. 添加 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 编辑器是自己一直想要做的东西,现在算来在 2017cocos2d-js v3.1x 时代就开始开发了,期间断断续续,在趟过了无数的坑之后,现在终于在 Creator 这个平台上实现了0到1 的突破

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

Plan / 计划

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

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

  1. More Premade FX / 更多的预制特效

    SSRShaderFX Editor Premade Components

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

  2. Spine Support / 骨骼动画支持

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

  3. Spine Preview / 骨骼动画支持

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

    Plan

  4. Tween Support / 动画支持

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

  5. Tween Preview / 动画预览

    接着上面,既然有了 Tween 的动画支持,那么能够在编辑器中直接预览,查看效果,那自然是最好的选择,参考:

    Plan

  6. RenderComponent Support Solution / 渲染控件支持方案

    上面的提到的 Spine 动画只是 Creator 中渲染组件的一种,想要做到所有的渲染组件都能够享受到制作的特效,那么光靠导出的 .mtl + .effect 肯定是不够的,需要一些代码的支撑, SSRShaderFX Gallery 中已经基本支持了下面这些渲染对象:

    Plan

    • 字体 类( 包含 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
  7. FBO Support / FBO 支持

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

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

    SSRFBONodeComponent in CocosStore

    Plan

    当然如何将其合理的集成进编辑器中,还是需要好好考虑

  8. SSRShadeFX Toy 实时预览生成的 shader ,对其修改并即时生效,取这个名字,是希望最后能够做到类似 Shadertoy 一样的在线编辑器:

    Plan

  9. More to Come / 还有更多

Purchase notice / 购买须知

  1. 购买前请仔查看前面的 [平台兼容性] 列表,确保自己的系统可以使用插件 (虽然云版本只要有浏览器基本就能用)

  2. 购买内容并不包含编辑器源码,当然如果对某些技术点的实现感兴趣,欢迎来帖子询问

  3. 上面的计划表虽然列出了很多内容而且大部分已经基本有了现成的实现,但是最终是否会被做进编辑器也并不能确定,毕竟是一个人空余时间做的项目。当然从这个项目持续了4年多可以看出,个人还是非常的希望能把这个项目做到 120%+ 的。

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

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


v2.0.0 发布

[Fix]

  1. extension GL_OES_standard_derivatives : enable 导致导出的特效在手机上无效

  2. Project 面板上的 uniform 变量名有时存在同步出错的问题

[Refine]

  1. 进一步自动类型匹配

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

[Feature]

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

    在线文档: FX Component

  2. 新增 用户自定义组件 功能 (上传,下载,删除,克隆,发布)

    在线文档: Custom Component

  3. 新增 组件编辑器 功能,支持组件的可视化编辑,实时预览调试

    在线文档: Component Builder

    在线文档: Missing Component

  4. 新增 缺失组件找回 功能

  5. 新增 特效组件 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 骨骼动画的支持。

1

1

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 动画的预览功能,给特效的制作主要带了这些帮助:

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

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

演示视频: ShaderEditor Spine FX on BiliBili

  • Bloom / 泛光

  • SnowCover / 积雪

  • NeonEdge / 霓虹描边

  • NormapLight / 法线光照


v3.0.0 发布

v3.0.0 开始,编辑器可以在 Creator v3.x 系列中以插件模式运行。

1

同时,支持导出基于 builtin-unlit 的特效文件,可以在 Creator v3.x 中直接使用。

1

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

虽然目前对 3d 的支持还十分有限,但这对于 Shader 编辑器来说已经是一个不小的进步了,后续在进一步完善 2d 功能的同时,也会尝试再开发一些 3d 对应的功能,敬请期待。


v4.0.0 发布

v4.0.0 版本开始,编辑器对内容越来越多的在 线特效库 进行了大幅度的优化和增强。

主要内容包括:

  1. 新增专栏分类功能,更好的将相同类型特效分类,方便用户浏览 png png

  2. 新增 Shader 代码快速浏览功能,无需下载即可查看源码并复制 png

  3. 新增 快速一键导出 Creator 专用 Effect (2d/ 3d-unlit) 功能,无需下载特效组件,可直接导出使用 png png png

演示视频:

ShaderEditor v4.0.0 Update on BiliBili


v5.0.0 发布

在先特效库所有功能和 ShaderGallery 一致,并同步到了最新的特效库:

  • Checkerboard
  • Clover
  • Color4Gradients
  • ColorInvert
  • DancingFloor
  • DoodleDistort
  • FastMotionBlur
  • FishEyeDistort
  • FlowLight
  • HeartBeat
  • Kaleidoscope
  • PixelExplosion
  • ShapeCircle
  • ShapeRectangle
  • SingleColor
  • SmoothClipping
  • SmoothRegularPolygon
  • SmoothSegment
  • SpiralCircles
  • SpiralDistort
  • UnderWaterDistort
  • UVAnimation
  • UVOffset
  • UVPolar
  • UVRadialShear
  • UVRotate
  • UVScale
  • UVSpherize
  • UVTilingAndOffset
  • UVTwirl
  • VScaneBeam
  • ZigZagCircle

演示视频:

ShaderGallery FX Update4 on BiliBili


5.1.0 发布

====== Bugfix ======

  1. 修复附属纹理拖拽方式更新问题
  2. 修复附属纹理显示尺寸问题

====== Feature ======

新增特效,视频地址:

ShaderGallery FX Update5 on BiliBili

  1. AnimatedBokehBlue
  2. AnimatedGlow
  3. BallOfFire
  4. BinocularsMas
  5. BlockyDissolv
  6. BlockyTile
  7. BlueFlame
  8. BurningFade
  9. CartoonVideoStyle
  10. CeramicGlowMosaic
  11. ColorCycling
  12. ColorizePosterize
  13. CrosshatchFade
  14. CrossWarpFade
  15. CurlNoiseFade
  16. DimLight
  17. DisintegrationFade
  18. ElectricBall
  19. ElectricFlash
  20. ElectricSinusoin
  21. ErosionFade
  22. FilmBurnFade
  23. FloatingBubble
  24. FloatingSmoke
  25. Geyse
  26. GlitchFade
  27. GridFlipFade
  28. HeatDistortEx
  29. InfernoFire
  30. Interstellae
  31. LevelFilter
  32. LumaFade
  33. MatrixColorFilter
  34. MatrixTerminal
  35. MinimalistStyle
  36. NoiseFade
  37. PixelOffsetFade
  38. PointsHatching
  39. RadialAtmosphere
  40. RadialFlare
  41. RainbowFilter
  42. RainDropRipple
  43. RevealFade
  44. RippleFade
  45. ScatterBlue
  46. ShinyLight
  47. ShutterFade
  48. SketchyStippling
  49. SliceFade
  50. SnowFall
  51. SnowFlake
  52. SolarizationFilter
  53. SpaceRinge
  54. SpeckleCrossFade
  55. VColorization
  56. VolcanoAirFlow
  57. WaterWaveFade
  58. WindBlowFade
  59. ZoomBlurFad

此外,作者开通了公众号,会时不时的分享一些开发相关的技术文章,欢迎关注支持:

1


下一个版本,会变得更好 ~


下面是作者的其他一些插件,如果有感兴趣的,可以支持一下,感谢 ~

01.SSRFBONodeComponent_Banner.png 02.SSRSVGComponent_Banner.png 03.SSRSVGWriterComponent_Banner.png 04.SSRShaderFXEditor_Banner.png 05.SSRLoSComponent_Banner.png 06.SSRFogOfWarComponent_Banner.png 07.SSRCreatorPluginAdaptor_Banner.png 08.SSRShaderFXTutorial_Banner.png 09.SSRDnDComponent_Banner.png 10.SSRShaderGallery_Banner.png 11.SSRDynamicMaterial_Banner.png 12.SSRBluePrintStarterKit_Banner.png 13.SSRPostProcessingFX_Banner.png 14.SSRDeviceMotion_Banner.png 15.SSRGridCCLContour_Banner.png 16.SSRWorkCollection_Banner.png 17.SSRScreenSplitFX_Banner.png 18.SSRShaderConverter_Banner.png

用户评分

平均评分
(4.46)
共有 13 位用户参与评分

评论

daichengyi 2022-11-16 14:53

发现升级到3.6.2就有很多shader用不了

xutao2811 2022-09-02 01:46

买 了怎么打开插件,求

XDM2020 2022-08-29 13:50

刚购买了!怎么打开插件???

MarcusM0 2022-07-31 11:01

和作者进行了深入交流,已经帮助解决和提供了解决方案。作者很热情,也愿意倾听反馈。最终的购买体验很好

MarcusM0 2022-07-30 19:14

在2dx下过了一遍描边的几个内置特效,全部阵亡,描边错误

MarcusM0 2022-07-30 18:34

非常不好用,笨重且教程不说使用本身,一直在强调shader如何以及他的创作经历。还好我自己会一些shader。如果我不会,是万万不可能从这个插件本身来指导如何使用的(但这仅从使用层面来讲不应该)。我随便用几张png透明背景的sprite,加上一个outline的导出的effect,描边3张图片里2张是有问题的,整个背景透明处被认为是"边"。这根本没有办法使用。没有耐心再往下看了,我会处理退款的

作者

兄弟实在不好意思,插件不能达到你想要的预期效果,如果方便的话,可以加一下我的微信:13621897004,我退款给你,实在抱歉啊。

zzt0123 2022-06-23 21:50

买了之后发现 害的登录 没账号没密码 不知道改怎么办了

作者

兄弟感谢支持,离线也可以用的,麻烦加一下我的qq,我给你创建一个在线版本的账号: 453951749

冰箱上的静静 2022-06-01 16:14

老哥,求通过一下QQ群

Coder咸鱼 2022-04-15 10:47

求加qq

lmc199393 2021-12-15 14:35

购买了,加QQ群怎么没反应

作者

不好意思,加慢了,实在抱歉

  • 1
  • 2
  • 3

2020 © Cocos.com版权所有

增值电信业务经营许可证:闽B2-20160169

闽ICP备14002653号-6

闽公网安备 35020302033941号