Creator都快4.0了,怎么能没有这样的功能?

点击上方亿元程序员+关注和★星标

引言

哈喽大家好,最近笔者看到有小伙伴吐槽:

编辑器为什么没有快速隐藏显示组件的快捷键??

好家伙,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:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。

实不相瞒,想要个爱心 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐专栏:

知识付费专栏

你知道和不知道的微信小游戏常用API整理,赶紧收藏用起来~

100个Cocos实例

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列

点击下方灰色按钮+关注。

相关推荐
不务正业的前端学徒4 分钟前
docker+nginx部署
前端
不务正业的前端学徒9 分钟前
webpack/vite配置
前端
hhcccchh26 分钟前
学习vue第八天 Vue3 模板语法和内置指令 - 简单入门
前端·vue.js·学习
yyf1989052528 分钟前
Vue 框架相关中文文献
前端·javascript·vue.js
粥里有勺糖34 分钟前
开发一个美观的 VitePress 图片预览插件
前端·vue.js·vitepress
陟上青云1 小时前
一篇文章带你搞懂原型和原型链
前端
我的写法有点潮1 小时前
推荐几个国外比较流行的UI库(上)
前端·javascript·css
鹏多多1 小时前
jsx/tsx使用cssModule和typescript-plugin-css-modules
前端·vue.js·react.js
ssshooter2 小时前
复古话题:Vue2 的空格间距切换到 Vite 后消失了
前端·vue.js·面试
IamZJT_2 小时前
拒绝做 AI 的“饲养员” ❌:前端程序员在 AI 时代的生存与进化指南 🚀
前端·ai编程