[2021新坑] SSRShaderFX && Creator

[quote=“supersuraccoon, post:1, topic:103617”]
己的作用，慢慢地推进这个项目，希望这次能比上一次走的更远。也算是 2021 的第一个目标。
[/quote大佬

大佬能分享下，creator制作的编辑器如何作为creator插件的吗？
如果能直接用creator做插件的界面那是最好的。

给大佬递茶

懵逼着进来懵逼着看完，只想说大佬牛逼~

给大佬递茶

这个你可以参考下这个：

现在只有一个比较大的问题没解决，就是在 dock 状态下，会报错，我暂时没去解决。

2020-01-12

说实话写这种编辑器，技术难度可能不大，但是细节繁多，比较考验设计方式。

这几天，继续推进了 Editor 框架，暂时取名 SSRDigraphEditor，然后把框架设计重构了下。
接着就是推进了一些比较难实现的技术点，以此反过来修改，完善框架设计。

下面列出的，是一些已经实现的和打算实现的功能点。

Canvas / 画布

• [x] Zoom In / 放大

• [x] Zoom Out / 缩小

  

  canvas_zoom_in_out800×450

• [ ] Zoom Reset / 重置

• [ ] Zoom to Fit / 缩放到合适大小

• [ ] Zoom to Target / 以目标为中心缩放

• [x] Drag to Move / 拖动

  

  canvas_move800×450

• [ ] Auto Fit / 自动大小

• [x] Drag to Select / 拖动选择对象

• [x] Drag to Deselect / 拖动反选对象

  

  group_select_deselect800×450

Gridline / 网格

• [x] Zoom / 缩放 ( 随 Canvas )
• [ ] Configurable Style / 可定样式

Panel / 面板

• [x] Zoom / 缩放 ( 随 Canvas )

• [x] Drag to Move / 拖动

• [x] Multi Panels Move / 多选移动

  

  group_selection_move800×450

• [x] Create / 新建

  

  panel_create800×450

• [x] Remove / 删除

• [x] Restore / 恢复

• [ ] Auto Dim / 未用置灰

• [ ] Configurable Style / 可定制样式

Slot / 插槽

• [ ] Auto Dim / 未用置灰
• [x] Output / 输出
• [x] Input / 输入
• [x] Connect / 连接
• [x] Disconnect / 断开
• [x] Multi-Output / 多输出
• [x] SIngle-Input / 单输入
• [ ] Connection Type Check / 连接插槽类型检查
• [ ] Auto Hightlight Hint / 配合连接自动高亮提示
• [ ] Auto Selection / 配合连接自动选择插槽连接
• [ ] Configurable Style / 可定制样式

Connection / 连接

• [x] Zoom / 缩放 ( 随 Canvas )

• [x] Add / 新增

• [x] Remove / 删除

• [x] Auto Layout / 自动布局

• [x] Drag OutputSlot to Connect / 拖动新建链接

  

  connection_link800×450

• [x] Drag Input Slot to Disconnect / 拖动断开链接

  

  connection_drag_to_disconnect800×450

• [x] Drag Input Slot to Reconnect / 拖动重新连接

  

  connection_drag_to_reconnect800×450

• [x] Data Flow Animation / 数据流动画

• [x] Group Drop Hint Animation / 组拖入提示动画

• [ ] Configurable Style / 可定制样式

Digraph / 有向图

• [x] Node Connect / 节点建立连接

• [x] Node Disonnect / 节点断开连接

• [x] TraverseDF / 深度遍历

• [x] Generate Panel Digraph / 生成面板有向图

  

  digraph800×450

Group / 组

• [x] Zoom / 缩放 ( 随 Canvas )

• [x] Group Selection / 新建组 ( 根据选中 Panels )

  

  group_create800×450

• [x] Ungroup Selection / 拆分组

• [x] Drag to Group / 拖入组 ( 将独立 Panel 拖入组中 )

  

  group_drag_to_group800×450

• [x] Ungroup Panel / 拆分单一面板

  

  group_ungroup_panel800×450

• [x] Move in Group / 组内移动 ( 组内移动 Panel )

  

  group_move_in_group800×450

• [x] Group Connection to Panel / 组对面板连接

  

  group_connection_to_panel800×450

• [x] Group Connection to Group / 组对组连接

  

  group_connection_to_group800×450

• [x] Auto Fit / 自动大小 ( 根据组中 Panel )

• [x] Group Move / 组移动

• [x] Drag to Move / 拖动

  

  group_move800×450

• [x] Shrink / 收缩

• [x] Expand / 展开

  

  group_shrink_expand800×450

• [ ] Configurable Style / 可定制样式

ToolBar / 工具栏

• [ ] Configurable Style / 可定制样式

ContextMenu / 上下文菜单

• [ ] Configurable Style / 可定制样式

Command Pattern/ 命令模式

• [x] Undo / 撤销

• [x] Redo / 重做

• [x] History List / 历史记录列表

  

  command_pattern_undo_redo800×450

• [ ] Replay / 重放

HotKey / 快捷键

• [ ] Configurable HotKey / 可定制快捷键

Scene/ 场景

• [ ] Import / 导入
• [ ] Export / 导出
• [ ] Drag to Import / 拖入导入
• [ ] Drag to Export / 拖出导出
• [ ] Autosave / 自动保存
• [ ] Replay / 重放

Plugin / 插件

• [x] Auto Resize / 缩放适配

• [x] Float / 悬浮

  

  plugin_float800×450

• [ ] Dock / 停靠

• [x] Plugin to Scene / 消息交互

• [x] Scene to Plugin / 消息交互

Misc / 杂项

• [ ] Native / 原生
• [ ] App / 应用

给大佬点赞，希望能坚持做下去

这个太牛逼了。。。

图都看不到……

膜拜，支持大佬

诸位，还想老老实实的上班么？

大佬啊，一直想做类似这功能的，类似unity编辑

工具界面都做得这么酷炫，爱了爱了

膜拜大神，弱弱问一下 这个开源了吗？

跪了，我连一个简单的热更新插件都搞得草不垃圾的，大佬这也太酷炫了吧，牛逼（破音）

膜拜巨佬～

2020-01-16

这几天在功能上没有什么大推进，因为前面已经把一些难点快速的，用肮脏的代码实现了，算是做了可行性层面的探索。

然后这几天，主要做的点如下：

代码重构

花了很多时间，因为缺乏类似编辑器的开发经验，所以需要在实际的看到了一些功能的实现方式后，才能反过来对框架的结构做出合理的设计。

界面设计

除了框架的优化，代码的重构，界面也做了简单的设计，更进一步的向着标准化的应用软件布局靠近。

app22272×1274

app12276×1278

功能点:

Panel / 面板

Auto Dim / 未用置灰

panel_auto_dim800×450

Slot / 插槽

Connection Type Check / 连接插槽类型检查

slot_type_check800×450

Auto Hightlight Hint / 配合连接自动高亮提示

slot_hint800×450

Auto Selection / 配合连接自动选择插槽连接

slot_auto_connect800×450

功能还有不少没做的，bug 也还有不少，但是一些重点，难点的功能都实现的差不多了。
接下来打算实际的使用这个编辑器框架，尝试快速的做一个应用场景，来从使用层面上，来对框架做一下检验。

super~~~~牛逼～～～～

2020-01-17

今天按照计划，实际使用这个框架来做一些东西，这里自然选择了 shader editor 作为尝试的对象。

下面是主要尝试的一些功能。

UI / 界面

• [x] 界面优化，将大部分 cc.Graphics 绘制的对象替换成图片

panel_uniform2266×1274

Panel / 面板

• [x] Uniforms / 增加 Uniforms 部分

Slot / 插槽

• [x] Slot Type Improvement / 插槽类型，名称显示改进

ContextMenu / 上下文菜单

• [x] Mouse Right Click Popup Menu / 鼠标右击上下文菜单显示

• [x] Realtime filter / 实时查找过滤

contextmenu_filter800×450

Shader Editor / Shader 编辑器

• [x] Shader Code Realtime Generation / 代码自动生成，基于 Digraph

shader_editor_demo_1800×450

虽然还有些小问题，代码也是不讲究的，只是为了先做一些可行性的尝试，不过可以看到，基本想要的功能的雏形已经可以看到了。

还要继续努力 ~~~