点击上方亿元程序员+关注和★星标
引言
哈喽大家好,最近笔者看到有小伙伴吐槽:
编辑器为什么没有快速隐藏显示组件的快捷键??
好家伙,Creator都快4.0了,怎么能没有这样的功能?
于是 笔者去文档翻了翻,还真没找到,小伙伴还提到隔壁Unity的就在菜单上:

功夫不负有心人 ,终于在菜单文件->快捷键->scene->toggle-active-selected-node中找到了快捷键h:

试了一下 ,的确可以用,但是好像有点小BUG,操作后,通过ctrl+z没办法撤回操作。
言归正传 ,本期带大家一起来看看,如何在Cocos游戏开发中,自定义快捷键 实现显示/隐藏节点 、调整节点的渲染层级。
如果 对你或你的小伙伴有帮助,可以点赞 和爱心 和分享三连哦~
本文源工程可在文末获取,小伙伴们自行前往。
为什么要用快捷键?
在 游戏开发中,我们拼UI的时候,经常由于大图片或者其他内容的遮挡,我们想要找到指定内容的时候比较困难。
所以我们需要先将部分内容隐藏,隐藏节点的常规操作就是通过鼠标选择节点,然后再移动鼠标到属性面板去反勾选那个小框框:

操作非常不流畅,调整节点的渲染层级也是如此,想要拖动到同级节点的上面/下面的时候,眼花很容易拖到子节点或者父节点那里去,让人抓狂。

所以啊,我们一起来看看实例。
上实例
1.创建插件
想要自定义快捷键 ,首先要创建我们的插件,通过菜单扩展->创建扩展打开扩展创建面板,选择一个空白模板进行创建。

2.定义快捷键
关于自定义快捷键,官方文档还是有比较详细的描述的:

我们 在插件的package.json中定义下面三个消息以及三个快捷键:
- setActive(alt+shift+a):显示/隐藏节点。
- setSiblingIndex_up(alt+shift+=):节点向上移动一层。
- setSiblingIndex_down(alt+shift+-):节点向下移动一层。

3.实现setActive方法
首先 我们在main.ts中,实现我们的setActive方法。

其中关键的步骤:
-
获取选择的节点 : 通过
Editor.Selection.getSelected('node')获取当前选择的节点数组(可多选)。
-
查询节点信息 : 通过
Editor.Message.request('scene', 'query-node', nodes[0])查询节点信息,注意这个不是我们开发时的cc.Node,获取是否隐藏可以通过node.active.value获取。
-
修改节点属性 :通过
set-property消息修改。
-
记录undo数据 :上面提到的官方的隐藏接口可能缺少这个,导致无法撤回。开始记录和结束记录要成对出现。

4.实现setSiblingIndex方法
我们 把上移和下移的逻辑写到一起,通过offset传入上下移动的步数。

其中关键的步骤:
-
获取选择的节点: 同上。
-
查询节点信息: 同上上。
-
查询选择的节点的父节点信息 : 通过
node.parent.value.uuid拿到父节点的uuid,再通过上面的方法获得父节点信息。
-
查询节点的层级 :通过父节点信息
children数组找出节点的层级。
-
修改节点层级 :
target是要调整位置的项的下标,offset是要调整的偏移。
-
记录undo数据:同上上上。
-
调用 :上传
-1,下传1。
5.效果演示
隐藏/显示节点:

修改层级:

结语
以上就是今天的全部内容,小伙伴们可以自行扩展,如有不足还请指出。
我们常常说到不要重复造轮子,但是轮子都没有的话,只能拿起扳手了。
小伙伴们还有哪些想要实现的功能?
本文源工程 可通过私信 发送 Shortcut 获取。
我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。
实不相瞒,想要个赞 和爱心 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!
推荐专栏:
点击下方灰色按钮+关注。