V7投稿|一个可以自动生成代码的超实用插件

使用场景

我们在开发游戏的时候,游戏的UI会占用我们大部分时间~当我们辛苦拼好UI后,还有一个繁琐的步骤~
那就是在代码中获取我们需要用到的节点。
1.通过@property(xxx)的方式去拖拽
2.直接在代码中cc.find去获取所需要的节点

但是在复杂的界面里,可能需要操作很多节点。上面两种方式都得写一大串!
7a7475188851702a6e952ff39e95e07a
所以我决定写个插件冷静下 :rofl: :rofl: :rofl:
(源码在最后~~)
插件展示
9kdfy-jrycr
em。。大概就这样,其实也是模仿了一下FGUI的代码导出
image
image
UIMain继承了auto_UIMain~,所以我们实际操作的UI脚本是UIMain,与节点获取的auto_UIMain脚本独立开了,这样我们的插件就可以自由的操作了~

讲道理,使用了这个插件后,我们只需要按照我们设置好的命名规范去命名节点,我们的代码中就会自动生成代码了。啊~解放双手,专注于游戏本身~起飞!
**7b71eac173c18c902e57e4efa37916f2

如何使用
image
我在插件中列了一些命名规范比如:
btnXXX就会被自动匹配为cc.Node
(这里为啥不被匹配为cc.Button,是因为代码中封装了一套传入node添加事件的方法,不必在乎这些细节)
xxxNode就会被自动匹配为cc.Node
xxxImg就会被自动匹配为cc.Sprite
(注意前缀和后缀)
这些配置大家都可以自由配置的哈
目前项目中,当我们创建UIxxx的预制体时,如:UIGame
或者创建Itemxxx预制体时如:ItemHouse
会自动生成脚本

然后我们每次在预制体中命名了指定格式的节点时。如btnTest,headImg,numTxt。。。等
我们的脚本就会自动刷新~所以我们在脚本中就可以轻松获取到这些节点。如this.btnTest,this.headImg。。。。

。。。。。。。。。。

为啥要通过指定命名去生成代码呢
主要是有几个考虑点
1.如果所有节点都显示,那在复杂UI里面根本顶不住。而且全部显示显示也很low :rofl:当然还有性能原因
2.开发者要用到哪个节点,再去命名哪个节点。这样对于开发者来说也能达到结构和思路的清晰
3.当然是这样操作之后命名就规范了,代码规范是程序员的职业抄手,命名如果不规范。那还如何体现我们的高端大气上档次了
060b1bcd58549d665ccc186a4f9b3e73
插件原理
原理其实比较简单
image
在进入预制体或者文件发生改变时,去递归遍历这个预制体文件里的数据,匹配到符合我们配置的节点名称,且计算出路径

插件不足之处
没有完美的插件~~所以我们滴插件也是有些小问题的
如果存在同名的节点的话。那可能是会有问题的。所以最好是避免同名。
比如在一个预制体中命名了两个btnVideo节点
这里暂时未做处理,后续会考虑在第二次命名和之前的命名冲突时。会出现错误提示、且本次命名不生效。
还有就是,在auto_xxx文件中。仍然使用的cc.find,他的性能的确没有拖拽的方式好~,(但是差距微乎其微啦)
代码放到这里啦~
CocosFrame.zip (1.5 MB)
-------------- 分界线---------------------------------------------
结束语
这次的分享就到这里了~希望对大家有所帮助~
这也是我第一次写这么长的帖子 :rofl:,其实俺也是新手 - -哈哈,有问题的地方多多包涵哈~
大家有什么宝贵的意见,请多多指出哈~稳的~
2.0优化版本在这里
https://forum.cocos.org/t/topic/157030/14?u=1091136215

9赞

很棒!搞出了之前我设想了但是没有去实现的东西,牛批!

4d9497606bd58c47824bd591c98d4b22

可以在参赛页面回复下

好滴好滴~已经回复啦~

很实用的功能,节省的时间可以喝茶了

学习一下!

我自己也有一个类似的插件, 给小组内的小伙伴用过一段时间, 反响还不错.
但是大家反馈有一个点, 这种类型的插件, 对于团队负责人来说在组内推广是不错的, 同时作为个人使用也是没问题的, 但是没办法大范围的适用, 毕竟每个团队都有自己的规范, 大家的喜好不一样.
不过还是感谢楼主的分享, 给楼主点赞

哈哈一起学习

好东西 mark

我这两天会把插件再优化和分离一下~这样体验更好一点~

大佬真的太强了

大佬,等你好消息,这个插件非常不错 :smile:

插件2.0来啦~
项目工程在这里CocosFrame.zip (950.3 KB)
这次主要是整合了一下工具,让开发者能更方便的使用这个工具了
1.新增前缀,后缀,全字匹配配置界面
80e10a2862b5269c4174ffd3aad25af6
{0D77897D-86F0-4c03-9697-1B834A9D6BF6}
(界面做的有点丑,多多包涵 :rofl: :rofl:
我们可以在界面中修改后直接点击确定按钮即可,修改后不用退出cocos,只需要保存预制体或者打开预制体就能生效
";"用来隔开每一项
":"用来隔开匹配字段和cc的类型
前缀 就是btnxxx,testxxx等
后缀 就是xxxNode,xxxImg,xxxTxt
全字匹配 这个就是变量名和我们的字段完全一致才会匹配了
我们也可以通过修改packages下的cfg.json配置表来修改
image
两种方式都可以啦
这样玩家就可以自行配置,自己确定命名规范了
需要注意的是,如果前缀,后缀,或者全字匹配存在相同的元素。比如 btnNode这个变量同时符号前缀缀,那我们的匹配顺序是按照 前缀-后缀-全字匹配 这个顺序来的。这个不影响我们实际使用

2.存在满足条件的相同命名时,会在编辑器中的控制台打印错误提示

13235285c9d072a57bab743e78b1d5cc
错误提示会清晰的告诉开发者,哪些变量重复了,且路径在哪里。这样开发者就可以进行修改了~
为了防止开发者匹配到的并不是自己期望的节点~所以做了错误提示~。
错误提示并不会影响代码的正常运行。如果存在多个相同的变量,默认会匹配到节点树从上往下的第一个。

3.错误命名矫正。
a8aeaf7ac0e074f4233342844cc54374
因为new Node是满足后缀条件的所以如果直接在代码中写入,则会有空格。会导致命名报错。所以匹配的变量名如果
存在空格时。我是把空格替换成了下划线"_"
57d45adc76130ca51139016971c981d6
暂时只做了空格矫正,如果有小伙伴感兴趣也可以在这里继续修改
5d31edd770b2f1a753fb212b6028a624
结束语:
以上就是全部内容了~,插件中的模板文件这些都是在packages下的.txt文件中,开发者可以根据自己的实际项目情况,自定义修改~
希望这个插件对大家有帮助~ (摸鱼时写的:laughing:)

1赞

终于等到大佬你了,太强了

稳的~~~~

大佬 改写生成文件的js脚本后 引擎内不生效是咋回事啊 需要做其他操作吗

需要把后缀改成.js
image
image

能支持3.x吗?

3.x的逻辑也差不多的,只是需要改下扩展插件。我过两天同步上来吧~

1赞