CN111857717A

CN111857717A - Ui编辑方法、装置、设备及计算机可读存储介质

Info

Publication number: CN111857717A
Application number: CN202010741976.XA
Authority: CN
Inventors: 谈志超
Original assignee: Netease Hangzhou Network Co Ltd
Current assignee: Netease Hangzhou Network Co Ltd
Priority date: 2020-07-29
Filing date: 2020-07-29
Publication date: 2020-10-30
Anticipated expiration: 2040-07-29
Also published as: CN111857717B

Abstract

本发明提供一种UI编辑方法、装置、设备及计算机可读存储介质。本发明的方法，通过响应于对UI的编辑指令，根据所述UI的布局文件，展示所述UI的布局编辑界面，所述UI的布局文件包括所述UI的布局信息，不包括所述UI的交互逻辑；根据所述布局编辑界面中的UI编辑操作，更新所述UI的布局信息和逻辑对象；响应于对所述布局编辑界面的UI保存操作，将所述UI的布局信息保存到所述UI的布局文件中，将所述UI的逻辑对象保存到地图文件中，能够实现UI的布局与逻辑的解耦，不会导致编辑冲突。并且UI布局文件独立于地图文件，允许UI布局文件在编辑器内跨越多个游戏复用。

Description

UI编辑方法、装置、设备及计算机可读存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种UI编辑方法、装置、设备及计算机可读存储介质。

背景技术

UI(User Interface，用户界面)资源是一种特殊的游戏美术资源，其负责游戏与玩家的交互，是一个游戏不可或缺的内容。无论是通过游戏引擎，还是通过游戏编辑器进行游戏内容的编辑，都不可能避免进行UI界面布局及其交互逻辑的开发。

现有的引擎附带的UI编辑器，如Unity，属于闭环管理，文件形式为prefab，仅可由Unity打开，不可脱离Unity进行编辑，UI界面布局与UI交互逻辑融合在同一文件中，UI开发涉及美术UI界面的开发和程序员交互逻辑的开发，UI界面布局和交互逻辑的工作流无法解耦，多人协作对同一文件修改时极容易引起冲突，导致UI界面不可用。

发明内容

本发明提供一种UI编辑方法、装置、设备及计算机可读存储介质，用以解决现有的UI编辑器UI界面布局和交互逻辑的工作流无法解耦，多人协作对同一文件修改时极容易引起冲突，导致UI界面不可用的问题。

本发明的一个方面是提供一种UI编辑方法，包括：

响应于对UI的编辑指令，根据所述UI的布局文件，展示所述UI的布局编辑界面，所述UI的布局文件包括所述UI的布局信息，不包括所述UI的交互逻辑；

根据所述布局编辑界面中的UI编辑操作，更新所述UI的布局信息和逻辑对象；

响应于对所述布局编辑界面的UI保存操作，将所述UI的布局信息保存到所述UI的布局文件中，将所述UI的逻辑对象保存到地图文件中。

本发明的另一个方面是提供一种UI编辑装置，包括：

界面展示模块，用于响应于对UI的编辑指令，根据所述UI的布局文件，展示所述UI的布局编辑界面，所述UI的布局文件包括所述UI的布局信息，不包括所述UI的交互逻辑；

布局编辑模块，根据所述布局编辑界面中的UI编辑操作，更新所述UI的布局信息和逻辑对象；

布局编辑保存模块，用于响应于对所述布局编辑界面的UI保存操作，将所述UI的布局信息保存到所述UI的布局文件中，将所述UI的逻辑对象保存到地图文件中。

本发明的另一个方面是提供一种UI编辑设备，包括：

处理器，存储器，以及存储在所述存储器上并可在所述处理器上运行的计算机程序；

其中，所述处理器运行所述计算机程序时实现上述所述的UI编辑方法。

本发明的另一个方面是提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序被处理器执行时实现上述所述的UI编辑方法。

本发明提供的UI编辑方法、装置、设备及计算机可读存储介质，通过响应于对UI的编辑指令，根据所述UI的布局文件，展示所述UI的布局编辑界面，所述UI的布局文件包括所述UI的布局信息，不包括所述UI的交互逻辑；根据所述布局编辑界面中的UI编辑操作，更新所述UI的布局信息和逻辑对象；响应于对所述布局编辑界面的UI保存操作，将所述UI的布局信息保存到所述UI的布局文件中，将所述UI的逻辑对象保存到地图文件中，能够实现UI的布局与逻辑的解耦，不会导致编辑冲突。并且UI布局文件独立于地图文件，允许UI布局文件在编辑器内跨越多个游戏复用。

附图说明

图1为本发明实施例一提供的UI编辑方法流程图；

图2为本发明实施例一提供的UI管理窗口的示意图；

图3为本发明实施例一提供的UI的布局编辑界面的示意图；

图4为本发明实施例二提供的UI布局结构的示意图；

图5为本发明实施例二提供的颜色输入编辑界面的示意图；

图6为本发明实施例二提供的自定义颜色区域的示意图；

图7为本发明实施例二提供的九宫切分设置界面的示意图；

图8为本发明实施例二提供的同一方向的两条切分线在位置重合时的九宫切分设置界面的示意图；

图9为本发明实施例二提供的锚点位置设置界面的示意图；

图10为本发明实施例二提供的按钮节点的备选事件类型的示意图；

图11为本发明实施例二提供的滚动列表节点的备选事件类型的示意图；

图12为本发明实施例二提供的输入框节点的备选事件类型的示意图；

图13为本发明实施例二提供的触发器列表的示意图；

图14为本发明实施例二提供的事件的已注册触发器显示的示意图；

图15为本发明实施例二提供的事件的多个已注册触发器的示意图；

图16为本发明实施例二提供的另一UI的布局编辑界面的示意图；

图17为本发明实施例二提供的模板信息编辑界面的示意图；

图18为本发明实施例二提供的一种导入模板界面的示意图；

图19为本发明实施例二提供的另一种导入模板界面的示意图；

图20为本发明实施例二提供的空白UI的示意图；

图21为本发明实施例二提供的添加模板之后UI的示意图；

图22为本发明实施例二提供的自定义模板的资源管理界面的示意图；

图23为本发明实施例二提供的布局文件存储路径的示意图；

图24为本发明实施例三提供的UI编辑装置的结构示意图；

图25为本发明实施例五提供的UI编辑设备的结构示意图。

通过上述附图，已示出本发明明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本发明构思的范围，而是通过参考特定实施例为本领域技术人员说明本发明的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

首先对本发明所涉及的名词进行解释：

UI：是指游戏内的一种2D美术资源，是指使用者与软件进行人机交互、执行操作逻辑的界面。

游戏编辑器：部分市面上的游戏所开放的可供玩家自主编辑游戏内容的平台。

自定义游戏：玩家在游戏编辑器中所编辑的游戏内容。

自定义UI：玩家在游戏编辑器中所自行编辑的UI界面。

官方UI：由游戏编辑器的制作方所制作和提供的，玩家只能有限度修改其中小部分内容的UI界面。

触发器：一种游戏逻辑编辑工具，用户可以使用该工具将程序预先制作好的游戏中的接口按照一定的程序逻辑编写，从而自定义游戏逻辑。

官方模板：为方便玩家快速上手自定义UI制作，由游戏编辑器制作方所制作和提供的一系列泛用UI，本身不包含逻辑，仅供玩家用以拷贝创建自定义UI，减少其自定义UI制作工作量。

编辑模式：进行自定义UI或者其他游戏逻辑、游戏内容编辑的模式，该模式下不会执行自定义游戏的逻辑。

运行模式：自定义游戏运行状态下的模式。

此外，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。在以下各实施例的描述中，“多个”的含义是两个以上，除非另有明确具体的限定。

本发明实施例提供的UI编辑方法具体应用于游戏编辑器，在游戏编辑器的编辑模式下，提供独立的UI编辑界面，能够对UI的布局和交互逻辑进行自定义开发。自定义开发的UI的布局信息将以独立的布局文件存储，UI的交互逻辑的信息以存储在地图文件的逻辑对象中，UI的逻辑对象至少包括：UI的名称、布局文件的路径信息和事件注册信息。UI的逻辑对象用于将UI布局中的控件与UI注册的逻辑事件关联起来，UI布局人员只需开发UI布局，以及为UI布局中的控件注册逻辑事件，无需开发实现逻辑事件的程序，程序开发人员只需实现逻辑事件的触发器的程序开发，无需关系页面布局，实现UI界面布局和交互逻辑的工作流的解耦合，不会导致编辑冲突。并且UI布局文件独立于地图文件，允许UI布局文件在编辑器内跨越多个游戏复用。

下面以具体地实施例对本发明的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本发明的实施例进行描述。

图1为本发明实施例一提供的UI编辑方法流程图。本发明实施例针对现有的UI编辑器UI界面布局和交互逻辑的工作流无法解耦，多人协作对同一文件修改时极容易引起冲突，导致UI界面不可用的问题，提供了UI编辑方法。本实施例中的方法应用于游戏编辑器所在的终端设备，该终端设备可以是智能手机、平板、AR设备等移动终端，也可以是游戏开发服务器等，在其他实施例中，该方法还可应用于其他设备。如图1所示，该方法具体步骤如下：

步骤S101、响应于对UI的编辑指令，根据UI的布局文件，展示UI的布局编辑界面，UI的布局文件包括UI的布局信息，不包括UI的交互逻辑。

本实施例中，在游戏编辑器的编辑模式下，提供独立的UI编辑器入口，点击UI编辑器入口即可进入自定义游戏内的UI编辑器的UI管理窗口。如图2所示，UI管理窗口中可以查看自定义游戏内所有已创建的自定义UI，并且可以在UI管理窗口中实现新建UI、删除已有UI等UI级别的管理操作。

当用户需要对任一UI进行编辑时，通过点击UI管理窗口中的任一UI条目，向UI编辑器发送对当前选中的UI的编辑指令。

该步骤中，UI编辑器响应于对UI的编辑指令，进入该UI的布局编辑界面，并根据该UI的布局文件，将UI的局部信息显示在该UI的布局编辑界面(如图3所示)中。

本实施例中，UI的布局信息以布局文件的方式单独存储，UI的交互逻辑信息存储在游戏的地图文件中。

步骤S102、根据布局编辑界面中的UI编辑操作，更新UI的布局信息和逻辑对象。

本实施例中，UI的布局编辑界面可以包括以下至少一种：布局预览区域，布局结构区域，控件列表区域，节点属性区域，事件注册区域。其中，布局结构区域用于编辑UI的布局结构(如UI的节点树)。控件列表区域用于编辑备选节点控件，向用户提供常用的UI元素的控件。节点属性区域用于编辑UI中当前选中节点的属性信息。事件注册区域用于为UI中当前选中节点注册逻辑事件，实现UI布局与交互逻辑的关联。

用户可以在布局编辑界面中进行以下至少一种UI编辑操作：查看UI布局的预览，查看布局结构，增加指定控件类型的节点，编辑节点的控件类型，编辑节点的属性信息，注册节点的逻辑事件，等等。

UI编辑器根据布局编辑界面中的UI编辑操作，更新UI的布局信息和逻辑对象，以实现UI布局的编辑，以及布局中控件与逻辑事件的关联。

步骤S103、响应于对布局编辑界面的UI保存操作，将UI的布局信息保存到UI的布局文件中，将UI的逻辑对象保存到地图文件中。

本实施例中，UI的布局文件包括UI的布局信息，不包括UI的交互逻辑。其中，UI的布局文件可以是json文件。json文件中并不会包含与游戏逻辑相关的信息，只是单纯的描述一个UI的布局，因此实现了UI布局与逻辑的解耦。

在布局编辑界面中对UI编辑完成之后，用户可以通过UI保存操作将当前的UI保存。

例如，对布局编辑界面的UI保存操作可以是用户点击图3所示的布局编辑界面中的保存按钮的操作。

响应于对布局编辑界面的UI保存操作，UI编辑器将UI的布局信息保存到UI的布局文件中，将UI的逻辑对象保存到地图文件中，以实现将自定义开发的UI的布局信息存储为独立的布局文件，将UI的交互逻辑的信息存储到地图文件的逻辑对象中，UI的逻辑对象至少包括：UI的名称、布局文件的路径信息和事件注册信息。UI的逻辑对象用于将UI布局中的控件与UI注册的逻辑事件关联起来，UI布局人员只需开发UI布局，以及为UI布局中的控件注册逻辑事件，无需开发实现逻辑事件的程序，程序开发人员只需实现逻辑事件的触发器的程序开发，无需关系页面布局，实现UI界面布局和交互逻辑的工作流的解耦合，不会导致编辑冲突。

本发明实施例通过响应于对UI的编辑指令，根据UI的布局文件，展示UI的布局编辑界面，UI的布局文件包括UI的布局信息，不包括UI的交互逻辑；根据布局编辑界面中的UI编辑操作，更新UI的布局信息和逻辑对象；响应于对布局编辑界面的UI保存操作，将UI的布局信息保存到UI的布局文件中，将UI的逻辑对象保存到地图文件中，能够实现UI的布局与逻辑的解耦，不会导致编辑冲突。并且UI布局文件独立于地图文件，允许UI布局文件在编辑器内跨越多个游戏复用。

在上述实施例一的基础上，本实施例中，对根据布局编辑界面中的UI编辑操作，更新UI的布局信息和逻辑对象进行详细地说明。

本实施例中，布局编辑界面可以包括布局结构区域。布局结构区域用于编辑UI的布局结构。

本实施例中，UI的布局结构可以是树状结构(如图3中所示的节点树)，树的每一个节点即是一个控件节点。布局结构在编辑器运行过程中存放在内存里的数据结构形式为字典，保存为布局文件后其形式为json文件，节点的父子关系通过json文件中的关键词进行描述，例如，json文件中用“child_list”这一关键词引出当前节点的子节点的列表。这种格式对多人协作工具如SVN(subversion)和git等版本控制系统友好，可以很大程度的避免如Unity的prefab文件或MS Office Excel这种二进制文件在多人协作时产生冲突的场景。

另外，布局文件中并不包含与游戏逻辑相关的信息，只是单纯的描述一个UI的布局，因此实现了UI布局与逻辑的解耦。进一步地，游戏编辑器官方UI的布局文件也可以采用相同的格式存储，这样就可以直接套用官方UI的布局文件解析机制，更大程度地融入游戏的UI的整体管理。

例如，图4提供了一个UI布局结构的示例，用于存储图4中所示的UI布局结构的json文件的内容如下：

本实施例中，根据布局编辑界面中的UI编辑操作，更新UI的布局信息和交互逻辑信息，可以包括：

响应于对布局结构区域中节点的拖拽操作，根据拖拽操作的终止位置，更新节点在UI的布局结构中的位置。

示例性地，根据拖拽操作的终止位置，确定拖拽操作终止时节点被拖动到布局结构中的位置，将该节点从原来的位置移动到拖拽操作终止时节点在布局结构中的位置。

例如，布局编辑界面中的布局结构区域可以如图3中所示的节点树部分，通过对节点树中的某一节点实施直接拖拽，将该节点移动到树中的任意位置，这样无论在电脑还是手机端，操作都非常简便快捷。

在一种可能的实施方式中，如图3所示，布局编辑界面还可以包括控件列表区域，控件列表区域用于展示备选节点控件。其中备选节点控件包括多种节点控件类型，覆盖了所有常用的UI元素。

例如，备选节点控件至少包括：按钮、图片、文字、层、输入框、进度条、多选按钮、复选框、滑动条、裁剪节点等等常用节点控件。若有需要，还可以在备选节点控件中增加其他常用控件类型或者自定义控件类型，本实施例此处不做具体限定。

进一步地，根据布局编辑界面中的UI编辑操作，更新UI的布局信息和交互逻辑信息，还包括：

根据对备选节点控件中任一指定控件的创建操作，确定待创建节点在UI中的目标位置，在目标位置创建指定控件类型的节点。

具体地，根据对备选节点控件中任一指定控件的创建操作，确定待创建节点在UI中的目标位置，在目标位置创建指定控件类型的节点，包括：

根据将备选节点控件中的一指定控件拖拽到布局结构区域中目标位置的拖拽操作，在目标位置创建指定控件类型的节点；和/或，根据对备选节点控件中的一指定控件的确认创建操作，在UI中的预设默认位置创建指定控件类型的节点。

其中，UI中的预设默认位置可以是中心点的位置等，可以根据实际应用场景的需要进行设定和修改，本实施例此处不做具体限定。

在一种可能的实施方式中，如图3所示，布局编辑界面包括布局预览区域，可以在布局预览区域中显示UI的布局。

进一步地，还可以在布局预览区域中选中其中的一个节点。如图3所示，布局编辑界面包括节点属性区域，响应于对布局预览区域中的一个节点的选中操作，在节点属性区域编辑当前选中节点的属性信息。

其中，每种控件类型的节点可编辑的属性可以不同。例如，节点的属性可以是如图3中节点属性中所展示的字典的一个键值对。

本实施例中，节点属性均存在缺省默认，即UI的布局文件中关于节点对应属性缺省描述时，均有一个对应的默认值。当在节点属性区域显示节点的属性信息时，对于布局文件中缺省属性信息的节点，会显示节点缺省的属性信息对应的默认值。在实际运行时，也会根据节点属性的缺省默认值进行UI布局创建，这种方式能有效压缩布局文件的容量。

在一种可能的实施方式中，对于一些特殊的属性编辑，例如颜色输入、九宫切分、锚点设置等，为了方便手机端用户的使用，本实施例进行了编辑的优化。

示例性地，对于颜色输入属性的编辑，包括以下至少一种实现方式：

一种实现方式为：响应于对当前节点的颜色输入属性的设置操作，在颜色输入编辑界面显示至少一种推荐颜色，根据对任一推荐颜色的选择确认操作，确定输入的目标颜色。

例如，颜色输入编辑界面可以如图5所示，图5中以提供8种推荐颜色为例进行示例性的说明(图5中使用不同灰度填充的圆形区域可以对应不同的颜色，例如，白色、红色、绿色、黄色、黑色等等)，用户可以选中其中的一种推荐颜色，然后通过点击界面中的“确认”按钮，完成对选中的推荐颜色的选择确认操作。

可选地，根据对任一推荐颜色的选择确认操作，还可以是对任一推荐颜色的单击或者双击操作；或者，通过单击选中一种推荐颜色，通过双击或者滑动操作等等完成确认的操作；或者，还可以是在一种推荐颜色的位置画对勾的操作等等，本实施例此处不做具体限定。

另一种实现方式为：响应于对当前节点的颜色输入属性的设置操作，在颜色输入编辑界面显示自定义颜色区域，响应于自定义颜色提交操作，根据自定义颜色区域中基础颜色的值，确定输入的目标颜色。

自定义颜色区域可以提供用户自定义颜色的功能。例如，图6自定义颜色区域可以如图6所示，自定义颜色区域中，用户可以通过拖动滑动条的方式调整红色、绿色、蓝色三种颜色对应的值，以此来调整用户自定义的颜色，当用户调整到自己想要的颜色之后，通过点击界面中的“确认”按钮，完成对自定义颜色的提交操作。

可选地，自定义颜色区域还可以提供用户自定义颜色标识的区域，用户可以为自定义的颜色指定颜色标识，后续再次进行颜色输入时，通过输入颜色标识就可以确定对应的颜色。其中，颜色标识可以是颜色编号(例如图6中所示)、颜色名称，等。

本实施例通过对颜色输入属性的编辑界面的优化，更加方面手机端用户进行颜色输入属性的编辑。

示例性地，对于九宫切分设置，可以采用如下方式实现：

响应于九宫切分设置指令，在九宫切分设置界面中显示两条竖直切分线和两条水平切分线，其中，当两条竖直切分线的位置重合时，位于下层的竖直切分线至少部分未被位于上层的竖直切分线覆盖；当两条水平切分线的位置重合时，位于下层的水平切分线至少部分未被位于上层的水平切分线覆盖。

在九宫切分设置中，由于九宫切分线在同一方向上允许完全重合，且UI响应逻辑为自上而下，必然会导致同一方向上的两条切分线重合时，只能拖动控制位于层级较上方的切分线而无法控制较下方的切分线。

为了实现当同一方向的两条切分线在位置重合时，位于下层的切分线不会被位于上层的切分线完全覆盖，导致用户无法选中位于下层的切分线，可以通过以下方式实现：

如图7所示，在九宫切分设置界面中显示不同长度的两条竖直切分线和不同长度的两条水平切分线，其中，两条竖直切分线中位于下层的竖直切分线的长度大于位于上层的竖直切分线的长度，两条竖直切分线中位于下层水平切分线的长度大于位于上层水平切分线的长度。这样，当同一方向的两条切分线在位置重合时(如图8所示)，位于下层的切分线比位于上层的切分线长，必定会有一部分位于下层的切分线未被位于上层的切分线覆盖，用户可以通过对未被覆盖部分的切分线的选中操作来选中。

可选地，如图7和图8所示，为了便于用户选中切分线，可以在每条切分线的一端增加端部图形，用户通过点击切分线的端部图形选中切分线，通过长按并拖拽切分线的端部图形操作对应切分线。

另外，为了实现当同一方向的两条切分线在位置重合时，位于下层的切分线不会被位于上层的切分线完全覆盖，导致用户无法选中位于下层的切分线，还可以调整竖直方向(或水平方向)的两条切分线在竖直方向(或水平方向)的位置，使得竖直方向(或水平方向)的两条切分线在水平方向(或竖直方向)上位置重合时，竖直方向(或水平方向)的两条切分线不会完全重合；或者还可以采用其他的方式实现，本实施例此处不做具体限定。

本实施例通过对九宫切分设置的界面的优化，当同一方向的两条切分线的位置重合时，依然可以控制任意一条切分线。

示例性地，对于锚点设置，具体可以采用如下方式实现：

响应于锚点设置指令，在锚点编辑界面中显示至少一个预设锚点位置；响应于对指定的预设锚点位置的确认操作，将指定的预设锚点位置确定为锚点位置。

可选地，根据经验值确定多个预设锚点位置，将多个预设锚点位置显示在锚点编辑界面中，供用户选择。当用户选择锚点编辑界面中的某一预设锚点位置，并进行确认操作之后，UI编辑器将指定的预设锚点位置确定为最终的锚点位置。

例如，如图9所示的锚点位置设置界面，可以设置9个常用锚点位置，9个锚点位置可以分别是(0,0)，(0,0.5),(0,1),(0.5,0),(0.5,0.5),(0.5,1),(1,0),(1,0.5),(1,1)。当用户选中其中一个锚点位置时，锚点图标将显示在选中的锚点位置在锚点编辑界面中的对应位置，当用户点击确认按钮之后，UI编辑器将当前选中的预设锚点位置确定为最终的锚点位置。

本实施例通过对锚点设置的编辑界面的优化，更加方便手机端用户进行常用锚点设置的编辑。

本实施例将UI布局编辑界面高度图形化，兼顾手机端和PC端交互优化，简单易用，用户可以快速上手。

在一种可能的实施方式中，如图3所示，布局编辑界面包括：事件注册区域。

进一步地，根据布局编辑界面中的UI编辑操作，更新UI的布局信息和交互逻辑信息，包括为当前节点注册逻辑事件，具体可以采用如下方式实现：

在事件注册区域中显示当前节点对应的备选事件类型；响应于对事件注册区域中的指定事件类型的注册操作，显示已有触发器，响应于对任一所示触发器的选择确认操作，生成指定事件类型的事件注册信息，并将指定事件类型的事件注册信息添加到UI的逻辑对象中，UI的逻辑对象至少包括：UI的名称、布局文件的路径信息和事件注册信息。

其中，节点对应的备选事件类型是指节点可注册的逻辑事件类型。不同节点的备选事件类型可以不同。注册事件的逻辑可以以触发器的方式实现。在实际游戏过程中，当对应的事件类型被交互触发时，即会按注册顺序执行对应的触发器序列。

示例性地，若节点为按钮，节点的备选事件类型(如图10所示)可以包括：点击、点击开始、点击结束、拖拽、在控件外抬起和移动取消，等。

若节点为滚动列表，节点的备选事件类型(如图11所示)可以包括：被滚动和滚动结束，等。

若节点为输入框，节点的备选事件类型(如图12所示)可以包括：编辑内容确定，开始编辑，编辑内容改变，等。

可选地，还可以在事件注册区域中每个备选事件类型对应的事件显示区域显示已注册的事件。

例如，基于图10所示的事件注册区域，当用户点击一个备选事件类型右侧的带有“+”符号的按钮时，即对事件注册区域中的指定事件类型的注册操作时，UI编辑器显示自定义游戏中当前已存在的触发器列表，如图13所示，用户可以选择其中的至少一个触发器，用户点击确定按钮，也即进行了对任一所示触发器的选择确认操作时，UI编辑器会生成当前备选事件类型注册了至少一个触发器的事件注册信息，并将事件注册信息添加到当前UI的逻辑对象中，完成一个时间注册。如图14所示，在给“点击”这一事件类型注册触发器1对应事件之后，可以将已注册的触发器1显示在“点击”这一事件类型的对应区域(如图14所示“点击”这一事件类型的下方区域)。

另外，可以给单个控件的事件类型注册不止一个触发器(如图15所示)，已注册的多个触发器的执行顺序将按照注册的先后顺序进行。

进一步地，在初始化UI时，根据UI的逻辑对象中的事件注册信息，为UI中的节点注册交互事件。

本实施例中，事件注册虽然在UI编辑器内，但是并不属于UI布局本身的内容，而是属于游戏逻辑的部分。事件注册信息与自定义游戏的其他内容(包括触发器，不包括布局文件)一起存入地图文件中。在自定义游戏的运行时，展示自定义UI初始化之时，所注册的触发器事件才会真正的被注册到具体控件的交互事件中，所以是一种运行时动态注册的设计，以此实现逻辑与UI资源完全解耦，这样UI可跨游戏文件复用。

在一种可能的实施方式中，UI编辑器还可以执行以下处理：

响应于对布局编辑界面的存储为模板操作，根据当前的布局编辑界面的布局信息，生成模板文件，将模板文件存储在公用模板目录中，公用模板目录在地图文件之外。响应于模板导入触发操作，显示已有模板文件；响应于对指定模板文件的导入操作，根据指定模板文件，更新当前节点及其子节点的布局信息。

示例性地，生成模板文件时，UI编辑器可以根据当前的布局编辑界面的全部布局信息，生成模板文件，这样可以将当前的布局编辑界面的全部布局信息保存为模板文件。

示例性地，生成模板文件时，用户可以在布局编辑界面中选择部分布局信息，并触发对布局编辑界面的存储为模板操作，UI编辑器可以根据当前所选择的部分布局信息，生成模板文件，可以将所选择的部分布局信息保存为模板文件。

示例性地，UI的布局编辑界面中还可以包括存模板的入口，例如，图16中所示的“存储为模板”按钮。在UI开发过程中，用户可以选择将其UI布局的部分内容存储为模板，这个操作会将所选中的节点及其下所有子孙节点的布局内容另存为独立的json文件，并存放于公用模板目录，该公用模板目录是与地图无关的独立文件夹。该操作所保存的模板，可供用户在后续开发过程中，通过“导入模板”功能，直接复用到其他的界面中。

可选地，在将当前的布局内容存储为模板时，UI编辑器可以提供模板信息编辑界面(如图17所示)，用户可以通过模板信息编辑界面输入模板名称和模板备注等信息，UI编辑器还可以接收用户输入的模板名称和模板备注等信息，使用用户输入的模板名称命名生成的模板文件，并将用户输入的模板备注与生成的模板文件对应存储。

本实施方式中，在控件列表区域的备选节点控件中增加导入模板控件，导入模板控件实际上并不是一个标准的控件类型，而是一个完整的UI模板。将导入模板控件应用于某一节点时，UI编辑器提供导入模板界面(如图18和19所示)，导入模板界面用于展示已有模板，包括官方模板(如图18所示)和用户自定义的模板(如图19中所示的“我的模板”)。用户可以选择其中的一个模板应用于当前节点。被选择的模板对应的布局文件的所有布局内容会被直接拷贝当前选中的节点下，作为其子节点内容存在。

例如，在如图20所示的一个空白UI的根节点(如图20中的root)中快速添加一个双按钮确认框的模板之后得到的如图21所示的UI布局。

示例性地，UI编辑器还可以提供自定义模板的资源管理界面，如图22所示，用户可以在资源管理界面中管理自己所有存储的自定义模板。具体可以对自定义模板进行重命名，修改备注，删除等操作。

其中，每个自定义模板都唯一对应公用模板目录里的一个同名的布局文件。例如，图22中所示的自定义模板对应的布局文件存储路径图23中所示。本实施例中，自定义模板与自定义UI不一样，自定义模板与地图文件完全解耦，没有任何地图相关逻辑，仅仅作为UI布局文件存在，也不属于任何一个地图的界面。这样，用户可以在任何地图中很方便的直接拷贝调用自定义模板，实现快速开发。

本发明实施例提供的方法，既可以帮助新手快速上手UI编辑的功能，不至于完全从零开始；同时允许玩家将复用性高的UI布局元素抽离出来，快速批量复用，大大提高开发效率。

本发明实施例提供的UI编辑方法，将UI布局设计与交互逻辑事件解耦，不会导致编辑冲突，UI布局文件允许编辑器内跨越多个游戏复用；将UI布局编辑界面高度图形化，兼顾手机端和PC端交互优化，并且内置官方模板的拷贝创建方法，简单易用快速上手；UI布局编辑具有极高自由度，原则上支持任意类型的UI界面，为玩家提供极大的创作自由度。

图24为本发明实施例三提供的UI编辑装置的结构示意图。本发明实施例提供的UI编辑装置可以执行UI编辑方法实施例提供的处理流程。如图24所示，该UI编辑装置30包括：界面展示模块301，布局编辑模块302和布局编辑保存模块303。

具体地，界面展示模块301用于响应于对UI的编辑指令，根据UI的布局文件，展示UI的布局编辑界面，UI的布局文件包括UI的布局信息，不包括UI的交互逻辑。

布局编辑模块302根据布局编辑界面中的UI编辑操作，更新UI的布局信息和逻辑对象。

布局编辑保存模块303用于响应于对布局编辑界面的UI保存操作，将UI的布局信息保存到UI的布局文件中，将UI的逻辑对象保存到地图文件中。

本发明实施例提供的装置可以具体用于执行上述实施例一所提供的方法实施例，具体功能此处不再赘述。

在上述实施例三的基础上，本实施例中，布局编辑界面包括：用于编辑UI的布局结构的布局结构区域，布局编辑模块还用于：响应于对布局结构区域中节点的拖拽操作，根据拖拽操作的终止位置，更新节点在UI的布局结构中的位置。

在一种可能的实施方式中，布局编辑界面包括：用于展示备选节点控件的控件列表区域，布局编辑模块还用于：根据对备选节点控件中任一指定控件的创建操作，确定待创建节点在UI中的目标位置，在目标位置创建指定控件类型的节点。

在一种可能的实施方式中，布局编辑模块还用于：

在一种可能的实施方式中，布局编辑界面包括：事件注册区域，布局编辑模块还用于：在事件注册区域中显示当前节点对应的备选事件类型；响应于对事件注册区域中的至少一个指定事件类型的选择增加操作，生成至少一个指定事件类型的事件注册信息，并将至少一个指定事件类型的事件注册信息添加到UI的逻辑对象中，UI的逻辑对象至少包括：UI的名称、布局文件的路径信息和事件注册信息。

在一种可能的实施方式中，布局编辑模块还用于：

在初始化UI时，根据UI的逻辑对象中的事件注册信息，为UI中的节点注册交互事件。

在一种可能的实施方式中，布局编辑模块还用于：

响应于对布局编辑界面的存储为模板操作，根据当前的布局编辑界面的布局信息，生成模板文件，将模板文件存储在公用模板目录中，公用模板目录在地图文件之外。

在一种可能的实施方式中，布局编辑模块还用于：

响应于模板导入触发操作，显示已有模板文件；响应于对指定模板文件的导入操作，根据指定模板文件，更新当前节点及其子节点的布局信息。

在一种可能的实施方式中，布局编辑界面包括：布局预览区域和节点属性区域，布局编辑模块还用于：在布局预览区域中显示UI的布局；响应于对布局预览区域中的一个节点的选中操作，在节点属性区域编辑当前选中节点的属性信息。

在一种可能的实施方式中，布局编辑模块还用于：

响应于对当前节点的颜色输入属性的设置操作，在颜色输入编辑界面显示至少一种推荐颜色，根据对任一推荐颜色的选择确认操作，确定输入的目标颜色；和/或，响应于对当前节点的颜色输入属性的设置操作，在颜色输入编辑界面显示自定义颜色区域，响应于自定义颜色提交操作，根据自定义颜色区域中基础颜色的值，确定输入的目标颜色。

在一种可能的实施方式中，布局编辑模块还用于：

本发明实施例提供的装置可以具体用于执行上述实施例二所提供的方法实施例，具体功能此处不再赘述。

图25为本发明实施例五提供的UI编辑设备的结构示意图。如图25所示，该设备100包括：处理器1001，存储器1002，以及存储在存储器1002上并可在处理器1001上运行的计算机程序。

其中，处理器1001运行计算机程序时实现上述任一方法实施例提供的UI编辑方法。

另外，本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机程序，计算机程序被处理器执行时实现上述任一方法实施例提供的UI编辑方法。

在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

本领域技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述的装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本发明旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求书指出。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求书来限制。

Claims

1.一种UI编辑方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述布局编辑界面包括：用于编辑UI的布局结构的布局结构区域，

根据所述布局编辑界面中的UI编辑操作，更新所述UI的布局信息和交互逻辑信息，包括：

响应于对所述布局结构区域中节点的拖拽操作，根据所述拖拽操作的终止位置，更新所述节点在所述UI的布局结构中的位置。

3.根据权利要求2所述的方法，其特征在于，所述布局编辑界面包括：用于展示备选节点控件的控件列表区域，

根据对所述备选节点控件中任一指定控件的创建操作，确定待创建节点在所述UI中的目标位置，在所述目标位置创建所述指定控件类型的节点。

4.根据权利要求3所述的方法，其特征在于，所述根据对所述备选节点控件中任一指定控件的创建操作，确定待创建节点在所述UI中的目标位置，在所述目标位置创建所述指定控件类型的节点，包括：

根据将所述备选节点控件中的一指定控件拖拽到所述布局结构区域中目标位置的拖拽操作，在所述目标位置创建所述指定控件类型的节点；

和/或，

根据对所述备选节点控件中的一指定控件的确认创建操作，在所述UI中的预设默认位置创建所述指定控件类型的节点。

5.根据权利要求1所述的方法，其特征在于，所述布局编辑界面包括：事件注册区域，

在所述事件注册区域中显示当前节点对应的备选事件类型；

响应于对所述事件注册区域中的至少一个指定事件类型的选择增加操作，生成所述至少一个指定事件类型的事件注册信息，并将所述至少一个指定事件类型的事件注册信息添加到所述UI的逻辑对象中，所述UI的逻辑对象至少包括：所述UI的名称、布局文件的路径信息和事件注册信息。

6.根据权利要求5所述的方法，其特征在于，根据所述布局编辑界面中的UI编辑操作，更新所述UI的布局信息和交互逻辑信息，还包括：

在初始化所述UI时，根据所述UI的逻辑对象中的事件注册信息，为所述UI中的节点注册交互事件。

7.根据权利要求1所述的方法，其特征在于，还包括：

响应于对所述布局编辑界面的存储为模板操作，根据当前的布局编辑界面的布局信息，生成模板文件，将所述模板文件存储在公用模板目录中，所述公用模板目录在地图文件之外。

8.根据权利要求7所述的方法，其特征在于，还包括：

响应于模板导入触发操作，显示已有模板文件；

响应于对指定模板文件的导入操作，根据所述指定模板文件，更新当前节点及其子节点的布局信息。

9.根据权利要求1-8中任一项所述的方法，其特征在于，所述布局编辑界面包括：布局预览区域和节点属性区域，所述方法还包括：

在所述布局预览区域中显示所述UI的布局；

响应于对所述布局预览区域中的一个节点的选中操作，在所述节点属性区域编辑当前选中节点的属性信息。

10.根据权利要求9所述的方法，其特征在于，所述方法还包括：

响应于对当前节点的颜色输入属性的设置操作，在颜色输入编辑界面显示至少一种推荐颜色，根据对任一推荐颜色的选择确认操作，确定输入的目标颜色；

和/或，响应于对当前节点的颜色输入属性的设置操作，在颜色输入编辑界面显示自定义颜色区域，响应于自定义颜色提交操作，根据所述自定义颜色区域中基础颜色的值，确定输入的目标颜色。

11.根据权利要求1-8中任一项所述的方法，其特征在于，所述方法还包括：

响应于九宫切分设置指令，在九宫切分设置界面中显示两条竖直切分线和两条水平切分线，其中，当所述两条竖直切分线的位置重合时，位于下层的竖直切分线至少部分未被位于上层的竖直切分线覆盖；当所述两条水平切分线的位置重合时，位于下层的水平切分线至少部分未被位于上层的水平切分线覆盖。

12.根据权利要求1-8中任一项所述的方法，其特征在于，所述方法还包括：

响应于锚点设置指令，在锚点编辑界面中显示至少一个预设锚点位置；

响应于对指定的预设锚点位置的确认操作，将所述指定的预设锚点位置确定为锚点位置。

13.一种UI编辑装置，其特征在于，包括：

14.一种UI编辑设备，其特征在于，包括：

其中，所述处理器运行所述计算机程序时实现如权利要求1至12中任一项所述的方法。

15.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至12中任一项所述的方法。