可视化编程，让不会写代码的人都能做自己心目中的游戏！

千石抚子 · 发表于 2023-2-22 15:38:02

本帖最后由天晴于 2023-11-17 10:54 编辑

更新于2023-02-27
工程源码：

bpeditor.rar (670.43 KB, 下载次数: 137)

2023-11-17 10:54 上传

点击文件名下载附件
使用预览:

使用方式
解压压缩文件，把此项目的 UI/BPinnerUI 文件夹放到自己项目UI文件夹下，然后把此项目内的JavaScripts/MWBlueprint 的文件夹复制到自己项目JavaScripts文件夹下，至于ui-generate，程序可以自己在编辑器内一键导出，然后看着相关错误进行一些导入路径修改，也可以直接复制此项目的ui-generate
也可以直接在此工程上进行开发，直接把testUI的相关代码和ui文件删除就是一个很好的空项目了）
然后参照此项目的 PreDefine.ts 编写此编辑器可调用函数，具体写法在下面的程序篇。这个脚本也可以直接使用，除了一个测试的UI点击触发事件，其他的都是些公共逻辑函数库，不耦合任何特定项目
此工具建议仅用于客户端逻辑，如果是配合服务器的话，也仅做客户端对服务器的请求，具体执行消息通知函数需要程序自行去维护。
如果服务器也运作的话，相对于仅客户端逻辑维护更难，也可能会出现一些不可预知BUG。
使用上分为程序篇和策划篇，当然都可以看一下，这个工具其实也可以当成一个脱离代码语法的，对程序设计思路进行辅助学习的工具
如果愿意查看内部实现逻辑，详细可以看看这个脚本BlueprintLogic ，核心在于构造函数constructor内的两个运行时构建逻辑，根据相关数据，构建出对应的运行时函数，以及各种取值的递归调用返回。目前还是很简单的线性语句调用，简单的and,or条件判断。
程序篇

将以上的各种操作完成后，进行相关项目初始化：

在游戏入口脚本，一般是GameStart.ts 脚本内，定义1个字符串参数，用于此逻辑设计导出的值承接：

此工具区分为编辑模式和运行模式，建议在GameStart.ts 内定义一个布尔值参数，也可以自己去实现相关选择方案。
- 进入编辑模式代码：需要拿到上面提到的json字符串，也可以为空，但不要有不符合格式的字符串，不然会导致编辑模式的运行错误。
- 进入实际游戏运作，调用 BPLogicManager.run() 函数就可以了：
  
  整个工具调用代码大概如图所示：

添加一些自定义的函数库，可供给编辑模式使用

打开 PreDefine 脚本，可以找到一个 BPEventCollect 的类定义，可以看到这个类下面的所有函数成员都带有一个 @BPLogicManager.bpEvent 的装饰器，这个装饰器就是用于给编辑模式对此事件函数的可视化信息处理装饰器参数含义分别是
- “事件描述” ,
- 编辑模式可以提供给事件的参数的描述信息组，
- 事件参数的类型限制枚举组，
- 事件触发时提供的参数描述组，
- 事件触发时提供的参数类型限制枚举组
    然后这个函数就是程序可以自己去编写的具体如何监听此事件的方式逻辑了，函数参数提供的类型需要与装饰器的事件参数类型限定枚举对应。目前仅支持了 string,number,boolean  根据枚举名也能够很清晰的了解到相关对应关系
    注：事件函数的定义，第一个参数一定要是类型为 BlueprintLogic 的对象
    示例解析：
取值函数同理参照PreDefine脚本的 BPGetValueCollect 类定义，需要给可用函数一个 @BPLogicManager.bpGetValueFunc 装饰器，装饰器含义：
- 取值函数描述
- 函数参数类型限制枚举组
- 该函数可以返回的值的类型枚举
  同上，这个函数的参数定义，以及可以返回的类型，也需要跟上面装饰器的定义一一对应上
  示例解析：
具体执行动作函数的定义，也就是游戏运行时，在触发了上面的事件后，可以调用到这里的具体函数执行逻辑。类似的，也需要一个装饰器，参照 PreDefine 脚本的 BPDoAction 类定义，需要给函数一个@BPLogicManager.bpDoAction 的装饰器，装饰器含义：
- 执行函数的描述
- 所需的参数类型限制枚举组
    同上，这个函数的参数定义需要与装饰器定义的枚举一致
    示例解析：
  
    至此，程序对该逻辑设计工具的工作就是这些了，额外的，也可以去修改美化下编辑模式UI的显示，目前我只是提供了一些最简易的画面。

策划篇在程序对此工具的导入以及相关初始化工作完成后，依照其给出的进入编辑模式的方式，运行游戏，打开编辑模式。理论上，可以配制出任何想要的运行逻辑，不过太过复杂的逻辑建议还是让程序去自行完成，因为这个工具本质是对一组json数据在运行时逻辑上的含义解释并执行，相对于直接编写ts代码来说性能上还是有些缺陷。
主界面介绍打开游戏并进入编辑模式后，会出现这样的一个画面

左侧的是全局变量编辑区
左上角“新建事件”按钮会创建一个事件触发编辑画面
“导出”按钮，则会弹出一个根据目前的编辑信息，导出的json字符串，这个字符串复制下来交给程序用于运行时的调用，就是执行编辑的各种逻辑了。
全局变量创建全局变量有三种类型可供选择，分别点击三个按钮“字符”“数字”“布尔值”，下面的滚动列表会对应切换为相关类型的已经定义好的各种全局变量，然后下面的那个 “新建当前类型全局变量”按钮顾名思义，就是依据上面标蓝的类型，新建一个未命名的对应类型的全局变量

首先选中想要的变量类型。选中后相关按钮会变蓝，表示选择的这种类型变量，当然也可以让程序去修改选择样式，这个变蓝只是我这里提供的简单处理方式。
各种变量含义：
- 字符串可以表示各种字符，比如名称，标签之类的会用到的字符，在这里可以预定义。
- 数字类型的变量可以用于进行一些数学计算，比如 “+，-，×，÷”之类的，有一些预定义的函数参数变量需要这种类型的参数。
- 布尔值仅会存在2个值 0或1。0表示非,false,失败之类的含义。1表示true,确定这类含义，比如一个玩家的生存状态就只有死亡或存活，引申过来这里就对应表示了 0死亡 1存活
点击“新建当前类型全局变量”按钮

新建变量后，都会是“未命名”，值为 “null” 的变量，并且不会保存，如果此时切换到其他类型列表，之前创建的这个“未命名”变量会被移除。如果需要持久化，点击“未命名”这个字，会弹出一个对话框，提示设置变量名，注意，这个对话框之后会经常遇到，每次打开，会根据需求的类型，对输入做限制，如果没有符合限制的输入，这个对话框无法关闭！
在对话框内输入首个字符是字母的文本之后，点击确定，就可以看到之前点击的字符变成了输入的字符，比如我这里输入了abc,这里也就变成了abc的样子

同理，对这个变量内容做修改，也是一样的操作，点击null,并在对话框内输入想要设置的值。这里有所区别的就是，内容会根据上面选择的变量类型不同，有不一样的输入限制。比如选择的数字，新建的数字，如果输入的内容不是数字的话，会无法退出对话框。

事件触发逻辑创建本工具最核心的逻辑就在这里，可以通过创建一个个的事件触发逻辑体，来完成实现游戏内的各种运行效果

然后是一些条件定义，首先是选择条件的执行逻辑，目前提供了3种，默认是选择第一个，只判断首条件，其他两个，顾名思义，就是这个条件组是可以有多条的，而执行条件判断，可以选择必须满足所有条件才会往下走，还是只需要满足定义的任何一条，就可以往下走
这里我定义了一个条件就是，玩家的布娃娃状态是否为false 也就是通常的跑酷类项目判断条件吧，玩家在正常状态下才能跳跃。具体操作：

最后，就是设置执行行为，也就是在触发相关事件，并且设置的条件也通过了，这里就是实际后果了，动作跟条件一样，也可以有多条，其中，每条具体动作可以为自己设置单独的小条件，不过为了逻辑简单，这个小条件只能设一条，而如果想做更复杂的判断，建议另外开一条触发事件来进行。
我这里设置了玩家在按下跳跃后判断是否布娃娃，不是，就执行一次跳跃，并设置有一个全局变量用于计数，每次跳跃全局变量+1，如果全局变量是10的倍数（全局变量%10==0）则将玩家放到原点
具体操作如下：

最后点击导出按钮，将会弹出一个对话框，也就是制作出来的逻辑的json表示，将这堆字符复制下来交给程序处理就完事儿了！[backcolor=rgba(254,212,164,0.8)]注意，总共会有两个对话框，第一次复制完后，点击确认，对话框的字符会换为另外一组字符，都要复制下来！
下面看看以上教程制作的逻辑的实际运行结果
因为0%10也是0，所以第一下也会进行原点位置设置