CN106814949A - 一种cocos游戏编辑器控件界面管理方法 - Google Patents

Abstract

本发明涉及一种cocos游戏编辑器控件界面管理方法。所述管理方法包括，将控件以竖型列表的形式展现，竖型列表中的每个单元格对应一个控件；与控件对应的单元格内显示有该控件的标识，其特征在于，将竖型列表的最上方视为根节点，所述竖型列表中的控件的渲染优先级根据其距离根节点的远近依次增大或减小；本发明通过将编辑过程中使用的控件以竖型列表的形式展现，并根据控件距离根节点的远近关系设置渲染优先级，同时可以采用拖动的方式增减使用的控件、改变控件优先级；使得用户可以在更加简洁的界面下操作所有使用的控件，并对控件进行复制、粘贴、属性设置等操作，方便了用户使用，改善了用户体验。

Description

一种 cocos 游戏编辑器控件界面管理方法

技术领域

本发明涉及一种cocos游戏编辑器控件界面管理方法。

背景技术

cocos编辑器是cocos的工具，包括UI编辑器、动画编辑器等，其界面通常包括如图1所示的菜单栏、工具栏、对象面板、资源面板、画布面板、属性面板、动画面板、输出窗口、状态栏九部分组成。

为了方便游戏开发人员的操作，cocos提供了大量的控件来实现不同的游戏效果。由于控件数量较多，且每个控件都需要设置像动画属性等的参数，而控件的管理界面空间有限，当使用的控件数量很多后势必会超出管理界面的空间范围，但是由于整个编辑器的范围有限，如果采用多个界面对已使用控件进行管理的话，会造成用户操作过程不连贯、显示不直观的问题。

综上，现有的控件管理界面让用户操作不方便，用户体验较差。

发明内容

本发明的目的在于克服现有技术中由于管理界面空间有限，造成使用控件较多后，对每个控件的操作（如设置动画属性等参数）时，界面控件不足的问题，提供一种在不扩大现有界面的前提下，使得用户可以很好的管理所使用的控件的控件界面管理方法。

为了实现上述发明目的，本发明提供了以下技术方案：

一种cocos游戏编辑器控件界面管理方法，将控件以竖型列表的形式展现，竖型列表中的每个单元格对应一个控件；与控件对应的单元格内显示有该控件的标识，将竖型列表的最上方视为根节点，所述竖型列表中的控件的渲染优先级根据其距离根节点的远近依次增大或减小。

进一步的，所述竖型列表的各个单元格中还显示有对应控件的显示状态、锁定状态、控件类型中的一种或几种的标识。

进一步的，拥有子控件的控件定义为父控件，每个父控件对应的单元格还显示有展开标识，当用户点击所述展开标识时，对应父控件的所有子控件以竖型列表的形式展现在所述父控件对应单元格的下方；同时所述展开标识变为收起标识；

当用户点击所述父控件上的收起标识时，所述父控件的子控件全部隐藏。

进一步的，通过将控件栏中的控件直接拖动至竖型列表中的方式添加控件。

进一步的，所述竖型列表中的控件通过拖拽的方式改变位置，从而调整其渲染优先级。

进一步的，右键点击控件对应的单元格后弹出菜单，所述菜单中包括剪切、粘贴、复制、粘贴、删除以及属性标识，所述属性标识包括一属性子菜单，属性子菜单中包含有该控件对应的位置、选择、缩放、倾斜、颜色、图片、层级、显示标识。

进一步的，所述属性标识的属性子菜单中部分属性标识默认为选中状态，并标识有选中标识。

进一步的，所述单元格上还包含有对应控件的隐藏标识，当用户点击所述隐藏标识，对应控件隐藏，同时所述隐藏标识变为显示标识，用户点击所述显示标识后，对应控件显示。

进一步的，所述单元格上还包含对应控件的锁定标识，当用户点击所述锁定标识，对应控件被锁定；同时，所述锁定标识变为解锁标识，当用户点击所述解锁标识，所述控件解除锁定。

进一步的，以上的各个标识为文字标识和/或图形标识。

与现有技术相比，本发明的有益效果：本发明通过将编辑过程中使用的控件以竖型列表的形式展现，并根据控件距离根节点的远近关系设置渲染优先级，同时可以采用拖动的方式增减使用的控件、改变控件优先级；使得用户可以在更加简洁的界面下操作所有使用的控件，并对控件进行复制、粘贴、属性设置等操作，方便了用户使用，改善了用户体验。

附图说明：

图1为现有技术中cocos界面的典型布局。

图2为本发明提供的控件界面示例。

图3为本发明中一父控件及其子控件示例。

图4为本发明中单一控件右键菜单示例。

图5为本发明中多选控件时右键菜单示例。

图6为本发明中控件的显示标识、隐藏标识示例。

图7为本发明中控件的锁定标识、解锁标识示例。

具体实施方式

下面结合附图及具体实施例对本发明作进一步的详细描述。但不应将此理解为本发明上述主题的范围仅限于以下的实施例，凡基于本发明内容所实现的技术均属于本发明的范围。

如图2所示，本实施例为解决现有cocos游戏编辑界面中，当使用的控件增多时，现有的控件管理界面不能方便的对各个控件进行操作管理的问题，提供一种采用竖型列表对已使用控件进行管理操作的控件界面管理方法，将游戏编辑过程中已使用控件以竖型列表的形式展现，竖型列表中的每个单元格对应一个控件；与控件对应的单元格内显示有该控件的标识，该标识可以是文字标识，也可以是图形标识，同时，将竖型列表的最上方视为根节点，所述竖型列表中的控件的渲染优先级根据其距离根节点的远近依次增大或减小；本实施例中，以竖型列表中控件的渲染优先级根据其距离根节点的远近关系依次增大为例，如图3所示，由于label1比button1控件距离根节点更远，因此其渲染优先级更高，当label1控件与button1控件重叠使用时，label1控件的渲染效果会遮挡button1控件的渲染效果；应说明的是，图3中label1的阴影效果为鼠标悬停效果，即当鼠标悬停在任意单元格时，该单元格响应鼠标悬停操作，单元格背景显示为阴影。

进一步的，所述竖型列表的各个单元格中还显示有对应控件的显示状态、锁定状态、控件类型中的一种或几种的标识，该标识同样可以为文字表示或图形标识；单元格中显示控件类型用于在用户对空间进行改名后，还能第一时间明白该控件是何种类别。

进一步的，拥有子控件的控件定义为父控件，每个父控件对应的单元格还显示有展开标识，如图2所示，本实施例中，展开标识用一个角向下的三角形表示，当用户点击所述展开标识时，对应父控件的所有子控件以竖型列表的形式展现在所述父控件对应单元格的下方；同时所述展开标识变为收起标识；本实施例中，所述收起标识采用一个角为水平指向的三角形表示。

当用户点击所述父控件上的收起标识时，所述父控件的子控件全部隐藏。

进一步的，通过将控件栏中的控件直接拖动至竖型列表中的方式添加控件。但应注意的是，新加控件在竖型列表中的位置应与其现有逻辑一致，即，当要把如图2中的Label1控件从控件列表中新加入竖型列表中时，其仅能加入到与其逻辑等级相同的Button1控件同一列表中（Button1控件与Label1控件均为Sprite1的子控件），而不能加入到与其不存在直接逻辑关系的Mainscene控件下；但在一些实施例中，Label1控件可以从Sprite1控件下拖动至Sprite2控件下，从而从Sprite1控件的子控件变为Sprite2控件的子控件。

用户能直接将控件栏的控件拖动到控件和控件之间作为这两个控件的父控件的子控件，并插入到这两个控件之间；同时，原有父控件没有子控件时不显示展开标识或收起标识，当起包含有子控件后，显示展开标识或收起标识；用户可根据控件是否显示展开标识或收起标识判断该控件是否包含子控件。

进一步的，所述竖型列表中的控件通过拖拽的方式改变位置，从而调整其渲染优先级，用户能拖动控件列表中的控件调整层级、父子关系，调整后在渲染区的渲染效果保持同步；此时所述控件的位置同样应在其原有的逻辑下调整；同样如图2所示，Label1控件可通过拖拽与Button1控件调整位置，从而改变两者的渲染优先级，但显然不能通过拖拽将Label1拖拽至其父控件Sprite1控件上方。

进一步的，右键点击控件对应的单元格后弹出如图4所示的菜单，所述菜单中包括剪切、粘贴、复制、粘贴、删除以及属性标识，所述属性标识包括一属性子菜单，属性子菜单中包含有该控件对应的位置、选择、缩放、倾斜、颜色、图片、层级、显示标识；同时，本实施例中，菜单中各个选项对应的单元格中还显示有该选项的快捷操作方式；如，Shift键+选择控件为连续选择控件：Ctrl键（Mac 下为Command）+选择控件为不连续选择控件： Ctrl+A（Mac 下为Command+A）为全选控件；多选控件后画布上相应的控件也需要有选中效果，渲染区控件选中效果参考画布（渲染区）PRD文档；应注意的是，当用户选择多选控件后，右键单击弹出如图5所示的菜单，菜单包含剪切、粘贴、复制、粘贴、删除以及对齐标识，其中对齐标识下包含有对齐子菜单；该对齐子菜单包含左对齐、水平中齐、右对齐、顶对齐、垂直中齐、底对齐、垂直平均分布、水平平均分布等标识；其用于对被多选的控件进行相应操作；而当用户选择控件剪切或复制后进行粘贴时，粘贴的控件在选中的控件同级最后增加新的控件，渲染区上控件在x轴、y轴都有一定位移，命名规则为”控件类型_X”,X是数字并递增。

用户任何在竖型列表中对控件的操作（如移动、复制、添加、删除），该控件在舞台或渲染区也会作出同步调整；单击单元格表示选中该单元格对应的控件；一些实施例中，用户可选择用上下键调节焦点的方式选择单元格，当被选中单元格为父控件时，用户可选择用左右键展开或隐藏该父控件的子控件。

进一步的，所述属性标识的子菜单中部分属性标识默认为选中状态，并标识有选中标识，如图4所示，本实施例中所述选中标识为对号。

进一步的，所述单元格上还包含有对应控件的隐藏标识，图6中MainScene控件中深色眼睛的图形即为隐藏标识；当用户点击所述隐藏标识，对应控件隐藏，同时所述隐藏标识变为显示标识，图6中sprite1控件中浅色眼睛的图像即为显示标识；用户点击所述显示标识后，对应控件显示；当父控件状态切换为隐藏状态后，子控件的显示状态变为半透明以表示由于父控件隐藏，子控件的显示效果被覆盖，但仍可以修改。

进一步的，所述单元格上还包含对应控件的锁定标识，本实施例中，图7中Sprite1控件中深色锁子的图形即为锁定标识，当用户点击所述锁定标识，对应控件被锁定；同时，所述锁定标识变为解锁标识，图7中Button1控件中浅色锁子图形即为解锁标识；当用户点击所述解锁标识，所述控件解除锁定；锁定控件后子控件在舞台上也被锁定，该锁定状态不影响预览游戏和最终输出的效果；应注意的是，当父控件被锁定后，子控件的锁定状态变为半透明以表示由于父控件锁定，子控件的锁定效果被覆盖；被锁定的控件不能进行如下操作：a)再渲染区通过单击选择或者框选选中该控件；b)无法在列表中选中该控件；c)不能再列表中拖动该控件；d)不能将其他控件拖动到该控件下作为子控件；e)在控件的竖型列表、渲染区全选和多选需要排除已锁定的控件。

以上所有标识均可根据需要选用图像标识或文字标识；对于文字标识，用户可选择双击单元格的方式修改其对应控件的名称。

Claims (10)

1.一种cocos游戏编辑器控件界面管理方法，将控件以竖型列表的形式展现，竖型列表中的每个单元格对应一个控件；与控件对应的单元格内显示有该控件的标识，其特征在于，将竖型列表的最上方视为根节点，所述竖型列表中的控件的渲染优先级根据其距离根节点的远近依次增大或减小。

2.如权利要求1所述的控件界面管理方法，其特征在于，所述竖型列表的各个单元格中还显示有对应控件的显示状态、锁定状态、控件类型中的一种或几种的标识。

3.如权利要求1所述的控件界面管理方法，其特征在于，拥有子控件的控件定义为父控件，每个父控件对应的单元格还显示有展开标识，当用户点击所述展开标识时，对应父控件的所有子控件以竖型列表的形式展现在所述父控件对应单元格的下方；同时所述展开标识变为收起标识；

当用户点击所述父控件上的收起标识时，所述父控件的子控件全部隐藏。

4.如权利要求1所述的控件界面管理方法，其特征在于，通过将控件栏中的控件直接拖动至竖型列表中的方式添加控件。

5.如权利要求1所述的控件界面管理方法，其特征在于，所述竖型列表中的控件通过拖拽的方式改变位置，从而调整其渲染优先级。

6.如权利要求1所述的控件界面管理方法，其特征在于，右键点击控件对应的单元格后弹出菜单，所述菜单中包括剪切、粘贴、复制、粘贴、删除以及属性标识，所述属性标识包括一属性子菜单，属性子菜单中包含有该控件对应的位置、选择、缩放、倾斜、颜色、图片、层级、显示标识。

7.如权利要求6所述的控件界面管理方法，其特征在于，所述属性标识的属性子菜单中部分属性标识默认为选中状态，并标识有选中标识。

8.如权利要求1所述的控件界面管理方法，其特征在于，所述单元格上还包含有对应控件的隐藏标识，当用户点击所述隐藏标识，对应控件隐藏，同时所述隐藏标识变为显示标识，用户点击所述显示标识后，对应控件显示。

9.如权利要求1所述的控件界面管理方法，其特征在于，所述单元格上还包含对应控件的锁定标识，当用户点击所述锁定标识，对应控件被锁定；同时，所述锁定标识变为解锁标识，当用户点击所述解锁标识，所述控件解除锁定。

10.如权利要求1至9任一项所述的控件界面管理方法，其特征在于，本方法中的各个标识为文字标识和/或图形标识。