原文网址：https://www.youyong.top/article/1159af688f5e5
自插件商店上线以来，不少开发者纷纷踊跃贡献出自己的高品质插件。今天C姐给大家安利一发社区ID qbkivlin提交的visual-fsm（可视化状态机）付费插件。项目中有需要用到的小伙伴，不妨仔细参考下列使用说明后，亲自到插件商店下载使用。
原文网址：https://www.youyong.top/article/1159af688f5e5
visual-fsm插件
开始
状态机是游戏中进行流程控制的一大利器，状态机通常用{当前状态,事件}->{下一状态}的模型来描述流程中的一条通路。
下面将逐步描述 visual-fsm 的使用：
首先在商城下载 visual-fsm 插件。
打开 visual-fsm 插件。
visual-fsm插件主界面
visual-fsm插件的主界面分别左右两大部分，左边为状态机编辑界面，主要进行状态机的流程图编辑工作。右边为属性编辑界面，主要进行状态机中状态进入，状态离开，事件发生前，事件发生后四个位置的方法回调编辑工作。
创建状态机的状态
在左边界面左键双击就可以创建一个状态。
以相同的方式如法炮制，创造三个状态。
修改状态名称
双击状态就可以修改状态名称。
将状态修改为Idle、Run、Attack。
添加状态切换事件
按下 alt + q 切换到连线模式（link mode），可以在左下角看到模式切换提示。
鼠标左键按住Idle状态，指向Run状态，释放鼠标左键，就创建了一条从Idle指向Run的通路。
和修改状态机名称的方式一样，可以修改事件名。
如法炮制，添加三个状态的事件通路。
配置状态机初始状态
选中Idle状态，按下(alt + c) 就完成了初始状态的设置。
设置回调
回调可以在三个地方添加。
全局回调会监听所有状态或事件的回调。
状态回调会监听某个状态的进入和离开的回调。
事件回调会监听某个事件触发前和触发后的回调。
当某个事件触发时，回调的顺序为：
事件触发前=>全局事件触发前=>状态离开=>全局状态离开=>状态进入=>全局状态进入=>事件触发后=>全局事件触发后
首先添加状态回调，选中Idle状态，在右侧的属性面板中，鼠标左键单击enter数组下最前面的按钮添加回调。
同样的方式给所有的状态添加enter和 leave 回调，给所有的事件添加before和after回调。
全局回调的添加方式和逐个状态或事件的添加方式类似，只要聚焦左侧任何没有状态和事件的空白位置时，右侧属性面板就会显示全局回调属性编辑界面。如法炮制添加全局回调。
此时状态机的编辑工作就完成了。
导出状态机
按下 （alt + e），编辑状态机类名就可以导出状态机代码了。
状态机代码会保存在fsm目录中，同时会自动导出所依赖的状态机库代码。
编辑状态机类名
导出成功
状态机示例目录
状态机重新编辑
如果状态机需要重新编辑，只需要在资源管理器中聚焦HelloFsm，visual-fsm插件就会像inspector界面一样自动刷新和导入状态机。
在左下角会显示当前正在编辑的状态机文件名。
在修改完成后（为了方便后面演示，这里没有做任何修改），按 (alt + s)就可以保存编辑后的状态机。
使用状态机
导出的状态机还只是一个抽象类，需要我们自己去继承抽象类并实现状态机中的抽象回调和初始化状态机。
新建一份TypeScript脚本，用vscode打开脚本。
（记得要在cocos creator编辑器菜单栏中点击 开发者=>VS Code工作流=>添加TypeScript项目配置 才能提供代码提示支持）
让代码继承HelloFsm状态机代码。
这时在HelloFsm下回显示错误提示，这时点击一下类名，在最左边会提示一个灯泡。
点击灯泡，导入HelloFsm的引用。
这是在NewClass下又会显示错误。同样点击NewClass，点击最前面的灯泡，添加抽象回调的override空方法。
空回调
回调的参数依次为：事件名、当前状态、下一状态、自定义参数。回调添加log做提示即可，这里不是重点。
log测试
在onLoad进行状态机的初始化的状态切换驱动。
初始化和状态切换驱动
测试
将NewScript拖拽到层级管理器，运行游戏，按f12打开控制台。
可以看到流程控制的回调过程。
测试
其他
在插件界面按（alt + h）可以看到更多的帮助。
菜单栏
第一版的插件在win上运行良好，而在mac上快捷键全军覆没，在楠大的帮助下，bug修复。
为了避免类似的平台兼容问题和用户提示友好问题，最终和楠大商定添加一个顶部菜单栏。
顶部菜单栏
由于插件的panel type是html类型，导致原先electron的menu模块在page层不起作用。于是笔者我就捋起了秀发和双袖，默默地撸了一个菜单栏，效果看起来有点丑，望看官见谅。
菜单栏总共有8项菜单项。
其中导出、保存、切换模式、初始状态、帮助菜单项，走的是和第一版相同的逻辑代码。这里不再赘述。
这次更新主要扩展了导入功能和重置清空功能。
按下导入按钮，会弹出磁盘文件目录，默认是项目的asset目录或者asset/fsm目录。
导入功能
选择状态机代码后，示例这里选择HelloFms.ts，就可以导入状态机代码。
导入状态机
而重置清空功能，可以将编辑界面清空。
清空提醒
重置清空
visual-fsm（可视化状态机）插件已于近期上线Cocos插件商店付费板块。目前商店已经发布了数十款高品质插件，包括有「幼麟麻将」全套棋牌源码、Camera源码、SDK、Creator热更新、生成编译库等。有需要的朋友不妨从商店看看看看。
