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年游戏主程一起学习设计模式

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

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

相关推荐
wangan0947 分钟前
不带圆圈的二叉树
java·前端·javascript
狗哥哥8 分钟前
从零到一:打造企业级 Vue 3 高性能表格组件的设计哲学与实践
前端·vue.js·架构
疯狂平头哥10 分钟前
微信小程序真机预览-数字不等宽如何解决
前端
Drift_Dream12 分钟前
前端趣味交互:如何精准判断鼠标从哪个方向进入元素?
前端
hqk14 分钟前
鸿蒙ArkUI:状态管理、应用结构、路由全解析
android·前端·harmonyos
米思特儿林24 分钟前
NuxtImage 配置上传目录配置
前端
Mr_chiu32 分钟前
AI加持的交互革新:手把手教你用Vue3打造智能模板输入框
前端
精神状态良好33 分钟前
告别聊天式编程:引入 OpenSpec,构建结构化的 AI 开发工作流
前端
WangHappy37 分钟前
出海不愁!用Vue3 + Node.js + Stripe实现全球支付
前端·node.js
林希_Rachel_傻希希41 分钟前
手写Promise最终版本
前端·javascript·面试