CN107943479B - 图形用户界面中物理边界的定义方法、装置和设备 - Google Patents

Abstract

本发明实施例提供一种图形用户界面中物理边界的定义方法、装置和设备，该方法包括：获取待显示于所述图形用户界面上的目标物体的边界形态，根据所述边界形态将所述目标物体的边界拆分为至少两个分组，每个分组中包含一段直线边界或者曲线边界，采用预先定义基本图形的边界绘制组成每个分组中的直线边界或者曲线边界，对每个分组内的组成直线边界或者曲线边界的基本图像赋予刚体的物理属性，完成所述目标物体的边界的定义，直接在编辑器中进行设置，并且可以由基本图形组成非常复杂的曲折形状的边界，可与图形界面设计中的边界更精确的贴合。

Description

图形用户界面中物理边界的定义方法、装置和设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种图形用户界面中物理边界的定义方法、装置和设备。

背景技术

目前，在手游用户界面(User Interface，UI)中模拟现实中的障碍、碰撞、反弹等物理效果，目前常用的游戏开发软件Cocos，自带2D物理引擎可对简单的边界进行定义，但是对于边界较为复杂的物理世界，则一般需要借助辅助工具进行定义其边界。

对于游戏中简单的游戏物体外形可通过手动书写代码实现，然而当游戏物体的形状变得丰富而复杂时，手动书写代码定义物体外形是不现实的，这时需要借助一些定点绘制工具、通过可视化的界面绘制出想要的多边形。而组成这些多边形的顶点数据，将会以C++代码的形式给出，经过拷贝粘贴，就可以将复杂的多边形生成代码放到自己的类中。

然而，上述方法虽然实现了可视化，但是由于编辑过程中缺乏与UI设计的对照，因此无法直观快速地实现物理世界边界与UI控件边界的准确对位。

发明内容

本发明实施例提供一种图形用户界面中物理边界的定义方法、装置和设备，用于解决上述方案中由于编辑过程中缺乏与UI设计的对照，因此无法直观快速地实现物理世界边界与UI控件边界的准确对位问题。

本发明实施例第一方面提供一种图形用户界面中物理边界的定义方法，包括：

获取待显示于所述图形用户界面上的目标物体的边界形态，根据所述边界形态将所述目标物体的边界拆分为至少两个分组；每个分组中包含一段直线边界或者曲线边界；

采用预先定义的基本图形的边界绘制组成每个分组中的直线边界或者曲线边界；

对每个分组内的组成直线边界或者曲线边界的基本图像赋予刚体的物理属性，完成所述目标物体的边界的定义。

在一种具体实现方式中，所述方法还包括：

通过2D物理引擎定义所述基本图形，所述基本图形包括：三角形图形、矩形图形和圆形图形中的至少一个。

在一种具体实现方式中，所述采用预先定义的基本图形的边界绘制组成每个分组中的直线边界或者曲线边界，包括：

根据用户的操作在每个分组中的直线边界或者曲线边界内侧设置若干锚点，并在所述分组中的直线边界或者曲线边界的外侧设置一个公共中心点，按照相邻的两个锚点和公共中心点绘制成一个三角形图形、两个锚点绘制成矩形图形、设置的圆心和一个锚点绘制成圆形图形的方式，绘制出所述分组中的所有的直线边界或者曲线边界。

在一种具体实现方式中，所述获取待显示于所述图形用户界面上的目标物体的边界形态，根据所述边界形态将所述目标物体的边界拆分为至少两个分组，包括：

将所述目标物体的边界中按照预设方向依次根据线形不同进行拆分，将曲线边界和直线边界拆分在不同的分组，且每个分组中只包括一段直线边界或者一段曲线边界。

本发明实施例第二方面提供一种图形用户界面中物理边界的定义装置，包括：

第一处理模块，用于获取待显示于所述图形用户界面上的目标物体的边界形态，根据所述边界形态将所述目标物体的边界拆分为至少两个分组；每个分组中包含一段直线边界或者曲线边界；

第二处理模块，用于采用预先定义的基本图形的边界绘制组成每个分组中的直线边界或者曲线边界；

第三处理模块，用于对每个分组内的组成直线边界或者曲线边界的基本图像赋予刚体的物理属性，完成所述目标物体的边界的定义。

可选的，所述装置还包括：

第四处理模块，用于通过2D物理引擎定义所述基本图形，所述基本图形包括：三角形图形、矩形图形和圆形图形中的至少一个。

可选的，所述第二处理模块具体用于：

根据用户的操作在每个分组中的直线边界或者曲线边界内侧设置若干锚点，并在所述分组中的直线边界或者曲线边界的外侧设置一个公共中心点，按照相邻的两个锚点和公共中心点绘制成一个三角形图形、两个锚点绘制成矩形图形、设置的圆心和一个锚点绘制成圆形图形的方式，绘制出所述分组中的所有的直线边界或者曲线边界。

可选的，所述第一处理模块具体用于：

将所述目标物体的边界中按照预设方向依次根据线形不同进行拆分，将曲线边界和直线边界拆分在不同的分组，且每个分组中只包括一段直线边界或者一段曲线边界。

本发明实施例第三方面提供一种设备，包括：存储器和处理器；

所述存储器用于存储计算机指令；所述处理器用于运行所述存储器存储的所述计算机指令实现第一方面任一实现方式提供的图形用户界面中物理边界的定义方法。

本发明实施例第四方面提供一种存储介质，包括：可读存储介质和计算机指令，所述计算机指令存储在所述可读存储介质中；所述计算机指令用于实现第一方面任一实现方式提供的图形用户界面中物理边界的定义方法。

本发明实施例第五方面提供一种程序产品，包括：该程序产品包括计算机指令(即计算机程序)，该计算机指令存储在可读存储介质中。设备的至少一个处理器可以从可读存储介质读取该计算机指令，至少一个处理器执行该计算机指令使得设备实施前述任一实施方式提供的图形用户界面中物理边界的定义方法。

本发明实施例提供的图形用户界面中物理边界的定义方法、装置和设备，设备根据图形用户界面设计中目标物体的边界形态，将所述目标物体的边界拆分为若干个只包括一段直线或者曲线的分组，然后根据用户的操作采用预先定义的基本图形绘制组成每个分组中的直线边界或者曲线边界，对每个分组内的组成直线边界或者曲线边界的基本图像赋予刚体的物理属性，完成所述目标物体的边界的定义，直接在编辑器中进行设置，并且可以由基本图形组成非常复杂的曲折形状的边界，可与图形用户界面设计中的边界更精确的贴合。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其它的附图。

图1为本发明实施例提供的图形用户界面中物理边界的定义方法实施例一的流程图；

图2为本发明实施例提供的图形用户界面中物理边界的定义方法实施例二的流程图；

图3a为本发明实施例提供的目标物边界拆分示意图；

图3b为本发明实施例提供的分组内采用中心点和锚点绘制边界示意图；

图4为本发明实施例提供的图形用户界面中物理边界的定义装置实施例一的结构示意图；

图5为本发明实施例提供的图形用户界面中物理边界的定义装置实施例一的结构示意图；

图6为本发明实施例提供的设备实施例的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

针对现有的方案中编辑过程中缺乏与UI设计的对照，因此无法直观快速地实现物理世界边界与UI控件边界的准确对位的问题，本发明实施例提供一种物理边界的定义方法，对界面中的物理引擎边界进行调节，在UI编辑器或者编辑软件中预先设置基本图形，对UI设计的目标直接进行编辑，可以实现非常复杂曲折的形状，与UI设计精确贴合，并且调整方便。

图1为本发明实施例提供的图形用户界面中物理边界的定义方法实例一的流程图。如图1所示，该方案的执行主体为笔记本电脑、个人计算机(personal computer，PC)等中的终端设备或者可根据用户操作进行图形用户界面编辑的设备，该图形用户界面中物理边界的定义方法的具体实现步骤为：

步骤S101，获取待显示于图形用户界面上的目标物体的边界形态，根据边界形态将目标物体的边界拆分为至少两个分组；每个分组中包含一段直线边界或者曲线边界。

在本实施例中，在手机游戏或者网络游戏的设计中，设计人员可根据具体的游戏设置在图形用户界面或者UI中设计出界面设计图，其中包括多个目标物，以弹珠游戏为例，UI设计中可以包括弹珠台，弹珠等，在具体应用中，弹珠台的边缘和角应该是与物理世界中的边界一样具有物理刚性的边界，而不应该只是一条线，因此需要对设计中的线条赋予刚性。

本步骤中，将UI设计中的待赋予刚性的目标物的边界进行拆分成若干个组，按照目标物的边界形态，例如弹珠台四个边以及四个圆角，可拆分成为八个组，每个组中包括一段直线的边界或者曲线边界。在进行边界的拆分中，优选的将曲线和直线分开在不同的组中，且每个组中只包括一段边界即可。

步骤S102，采用预先定义的基本图形的边界绘制组成每个分组中的直线边界或者曲线边界。

在本步骤中，需要在软件程序中使用2D物理引擎创建简单形态的刚体，即基本图形，例如：三角形图形、矩形图形和圆形图形，任何复杂的边界形态均可以采用这几个图形组合画出。曲线可以采用很多段较短的直线组成，例如用很多三角形的边组成曲线图形，球体边界可以直接采用圆形图形绘制，直线可以采用三角形或者矩形图案绘制等方式，将S101中各个分组中的直线或者曲线边界进行绘制。

步骤S103，对每个分组内的组成直线边界或者曲线边界的基本图形赋予刚体的物理属性，完成目标物体的边界的定义。

在本步骤中，在对每个分组内的直线边界或者曲线边界进行绘制后，软件程序将组成上述每个分组内的直线边界或者曲线边界的基本图形与物理引擎中的刚体相对应，对每个分组内的边界赋予物理属性。

在本发明实施例的技术方案中，应理解，一个物理世界就是各种刚体、夹具、约束等物理引擎中基本对象相互作用的集合。刚体是指物理世界中十分坚硬的物质，物理引擎假定刚体都是不会发生形变的，它上面任意两点之间的距离都保持不变。在使用物理引擎的游戏界面中，刚体通常都对应着游戏中一个具有具体外形的物体。

本实施例提供的图形用户界面中物理边界的定义方法，通过2D物理引擎定义简单的基本图形，在游戏设计过程中，对UI设计中的目标物的边界复杂形态进行拆分，将其拆分为多个分组，然后对每个分组中的直线边界或者曲线边界采用基本图形进行绘制，然后赋予基本图形物理刚性，完成目标物体的物理边界的定义，该过程大大降低设计难度，并且可以根据实际情况进行调整，能够实现复杂形状的定义，能够与UI设计精确贴合。

图2为本发明实施例提供的图形用户中物理边界的定义方法实施例二的流程图，如图2所示，在上述实施例的基础上，S102之前还包括：

步骤S104，通过2D物理引擎定义所述基本图形。

在本步骤中，在软件程序中的2D物理引擎定义三角形、矩形以及圆形中的至少一个基本图形，以便在后续复杂图形的物理边界定义过程中，可用该些基本图形绘制复杂的边界。

可选的，基本图形包括：三角形图形、矩形图形和圆形图形中的至少一个。

应理解，圆形：可中心点大小+半径长度确定一个圆，程序软件可根据中心点位置信息和半径画出精确的圆。

矩形：矩形通过两个点(左下，右上)确定，高度特别小的矩形可以用来模拟直线，由于因为物理引擎是基于一种迭代机制来检测碰撞的，直线比较容易出现穿插等穿帮现象，因此最好采用矩形进行定义。

三角形：三角形可以通过三个点确定，三角形作为基本的图元可以组合构建任意规则形状的图形。

可选的，实施例一种的S101中根据用户界面UI设计中目标物体的边界形态，将所述目标物体的边界拆分为至少两个分组的一种具体实现方式为：

步骤S1011，将目标物体的边界中按照预设方向依次根据线形不同进行拆分，将曲线边界和直线边界拆分在不同的分组，且每个分组中只包括一段直线边界或者一段曲线边界。

可选的，实施例一种的S102中采用预先定义的基本图形的边界绘制组成每个分组中的直线边界或者曲线边界的一种具体实现方式为：

步骤S1021，根据用户的操作在每个分组中的直线边界或者曲线边界内侧设置若干锚点，并在所述分组中的直线边界或者曲线边界的外侧设置一个公共中心点，按照相邻的两个锚点和公共中心点绘制成一个三角形图形、两个锚点绘制成矩形图形、设置的圆心和一个锚点绘制成圆形图形的方式，绘制出所述分组中的所有的直线边界或者曲线边界。

在本步骤中，对每个分组中的直线边界或者曲线边界，曲线外设置一个公共中心点，然后在曲线或者直线上设置多个锚点，相邻锚点和公共中心点可以组成三角形，因此每个分组中的曲线可被多个三角形构成，可以在UI编辑器中定义一个树形的锚点结构来描述UI资源物理性状。

本实施例提供的几种图形用户界面中物理边界的定义方法，直接在编辑器中进行基本图形定义，对复杂边界进行定义过程中，所见即所得，设置简单，调整方便，可设置非常复杂曲折的形状，与UI设计可精确贴合，有效降低设计难度，并提高设计效率。

在上述两个实施例的基础上，下面以弹珠游戏为例，对该方案的具体实现过程进行说明。在该方案中，首先，软件程序使用2D物理引擎，创建一个简单形态的刚体，例如三角形。

在具体应用过程中，图3a为本发明实施例提供的目标物边界拆分示意图。如图3a所示，在UI编辑器中，根据设计中的弹珠台的形状(图中以其中一个角为例)，按照直线和曲线将其拆分为3个分组A，B，C，每个分组包含一段直线或者一段曲线。

图3b为本发明实施例提供的分组内采用中心点和锚点绘制边界示意图。如图3b所示，通过三角形的拼接模拟出弹珠球的初始运动轨道。多边形可以通过多个三角形的拼接获得。该方案中，在每个分组内侧，紧贴边界设置若干锚点，在该组外侧设置一个公共中心点，每两个相邻点与中心点构成一个三角形，从而将每个分组拆分为多个相邻的三角形。当然三角形也可以模拟直线。在ui编辑器里定义了一个树形的用来描述ui资源物理性状的锚点结构。

以弹珠台为例，physic_node为物理根节点。每个节点都会携带一个类型信息(ui编辑器里可以设置)。类型有4种：

1.三角形；2.矩形；3.圆形；4.物理形状集合，也即由多个几何体集合而成的复合形态，锚点的命名规则是node_[0-9]+，例如：

1、三角形需要通过三个锚点node_1，node_2，node_3画出；

2、矩形需要通过两个锚点node_1，node_2画出；

3、圆形通过center+node两个锚点画出；

4、复合形可以通过组合图元画出，例如：弹珠台的外框边界的部分可在编辑器里锚点的结构如下(省略号部分表示其他的结构类似，不做一一说明)：

最后，在采用基本图形将每个分组中的边界绘制完成之后，程序将三角形与物理引擎中的刚体相对应，赋予其刚体的物理属性。

对目标物UI分组，并通过锚点将其边界拆分为若干线段，各自与一个公共锚点围合成的三角形，实现与目标物UI边界的精确对应，程序将物理引擎中的刚体与UI编辑器中的三角形对应，从而将刚体的物理属性赋予UI控件。通过此方法调节物理引擎边界，主要设置直接在UI编辑器中进行，所见即所得，设置简单，调整方便，可设置非常复杂曲折的形状，与UI设计可精确贴合。

图4为本发明实施例提供的图形用户界面中物理边界的定义装置实施例一的结构示意图，如图4所示，本实施例提供的图形用户界面中物理边界的定义装置10包括：

第一处理模块11，用于获取待显示于所述图形用户界面上的目标物体的边界形态，根据所述边界形态将所述目标物体的边界拆分为至少两个分组；每个分组中包含一段直线边界或者曲线边界；

第二处理模块12，用于采用预先定义的基本图形的边界绘制组成每个分组中的直线边界或者曲线边界；

第三处理模块13，用于对每个分组内的组成直线边界或者曲线边界的基本图像赋予刚体的物理属性，完成所述目标物体的边界的定义。

本实施例提供的UI中物理边界的定义装置，用于执行前述任一实施例提供的方法的技术方案，其实现原理和技术效果类似，在此不再赘述。

在本发明UI中物理边界的定义装置的实施例二中，图5为本发明实施例提供的UI中物理边界的定义装置实施例二的结构示意图，如图5所示，在上述实施例一的基础上，该物理边界的定义装置10还包括：

第四处理模块14，用于通过2D物理引擎定义所述基本图形，所述基本图形包括：三角形图形、矩形图形和圆形图形中的至少一个。

在上述任一实施例的基础上，可选的，所述第二处理模块12具体用于：

根据用户的操作在每个分组中的直线边界或者曲线边界内侧设置若干锚点，并在所述分组中的直线边界或者曲线边界的外侧设置一个公共中心点，按照相邻的两个锚点和公共中心点绘制成一个三角形图形、两个锚点绘制成矩形图形、设置的圆心和一个锚点绘制成圆形图形的方式，绘制出所述分组中的所有的直线边界或者曲线边界。

可选的，所述第一处理模块11具体用于：

将所述目标物体的边界中按照预设方向依次根据线形不同进行拆分，将曲线边界和直线边界拆分在不同的分组，且每个分组中只包括一段直线边界或者一段曲线边界。

本实施例提供的图形用户界面中物理边界的定义装置，用来执行前述任一实施例提供的方法的技术方案，其实现原理和技术效果类似，在此不再赘述。

图6为本发明实施例提供的设备实施例的结构示意图，如图6所示，该设备20包括：存储计算机指令的存储器21和至少一个处理器22；处理器22用于运行所述存储器21存储的计算机指令。所述处理器22具体用于实现：

获取待显示于所述图形用户界面上的目标物体的边界形态，根据所述边界形态将所述目标物体的边界拆分为至少两个分组；每个分组中包含一段直线边界或者曲线边界；

采用预先定义的基本图形的边界绘制组成每个分组中的直线边界或者曲线边界；

对每个分组内的组成直线边界或者曲线边界的基本图像赋予刚体的物理属性，完成所述目标物体的边界的定义。

可选的：所述处理器22还用于：

通过2D物理引擎定义所述基本图形，所述基本图形包括：三角形图形、矩形图形和圆形图形中的至少一个。

所述处理器22还具体用于：

根据用户的操作在每个分组中的直线边界或者曲线边界内侧设置若干锚点，并在所述分组中的直线边界或者曲线边界的外侧设置一个公共中心点，按照相邻的两个锚点和公共中心点绘制成一个三角形图形、两个锚点绘制成矩形图形、设置的圆心和一个锚点绘制成圆形图形的方式，绘制出所述分组中的所有的直线边界或者曲线边界。

所述处理器22还具体用于：

将所述目标物体的边界中按照预设方向依次根据线形不同进行拆分，将曲线边界和直线边界拆分在不同的分组，且每个分组中只包括一段直线边界或者一段曲线边界。

本实施例提供的设备，用来执行前述任一实施例提供的方法的技术方案，其实现原理和技术效果类似，在此不再赘述。

本发明实施例还提供一种存储介质，包括：可读存储介质和计算机指令，所述计算机指令存储在所述可读存储介质中；所述计算机指令用于实现前述方法实施例提供的图形用户界面中物理边界的定义方法。

本发明实施例还提供一种程序产品，包括：该程序产品包括计算机指令(即计算机程序)，该计算机指令存储在可读存储介质中。设备的至少一个处理器可以从可读存储介质读取该计算机指令，至少一个处理器执行该计算机指令使得设备实施前述方法实施例提供的图形用户界面中物理边界的定义方法。

在上述任一设备的实施例中，应理解，处理器可以是中央处理单元(英文：CentralProcessing Unit，简称：CPU)，还可以是其他通用处理器、数字信号处理器(英文：DigitalSignal Processor，简称：DSP)、专用集成电路(英文：Application Specific IntegratedCircuit，简称：ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：只读存储器(英文：read-only memory，缩写：ROM)、RAM、快闪存储器、硬盘、固态硬盘、磁带(英文：magnetictape)、软盘(英文：floppy disk)、光盘(英文：optical disc)及其任意组合。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (8)

1.一种图形用户界面中物理边界的定义方法，其特征在于，包括：

获取待显示于所述图形用户界面上的目标物体的边界形态，将所述目标物体的边界中按照预设方向依次根据线形不同进行拆分，将曲线边界和直线边界拆分在不同的分组，且每个分组中只包括一段直线边界或者一段曲线边界；

采用预先定义的基本图形的边界绘制组成每个分组中的直线边界或者曲线边界；

对每个分组内的组成直线边界或者曲线边界的基本图像赋予刚体的物理属性，完成所述目标物体的边界的定义。

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

通过2D物理引擎定义所述基本图形，所述基本图形包括：三角形图形、矩形图形和圆形图形中的至少一个。

3.根据权利要求1或2所述的方法，其特征在于，所述采用预先定义的基本图形的边界绘制组成每个分组中的直线边界或者曲线边界，包括：

根据用户的操作在每个分组中的直线边界或者曲线边界内侧设置若干锚点，并在所述分组中的直线边界或者曲线边界的外侧设置一个公共中心点，按照相邻的两个锚点和公共中心点绘制成一个三角形图形、两个锚点绘制成矩形图形、设置的圆心和一个锚点绘制成圆形图形的方式，绘制出所述分组中的所有的直线边界或者曲线边界。

4.一种图形用户界面中物理边界的定义装置，其特征在于，包括：

第一处理模块，用于获取待显示于所述图形用户界面上的目标物体的边界形态，将所述目标物体的边界中按照预设方向依次根据线形不同进行拆分，将曲线边界和直线边界拆分在不同的分组，且每个分组中只包括一段直线边界或者一段曲线边界；

第二处理模块，用于采用预先定义的基本图形的边界绘制组成每个分组中的直线边界或者曲线边界；

第三处理模块，用于对每个分组内的组成直线边界或者曲线边界的基本图像赋予刚体的物理属性，完成所述目标物体的边界的定义。

5.根据权利要求4所述的装置，其特征在于，所述装置还包括：

第四处理模块，用于通过2D物理引擎定义所述基本图形，所述基本图形包括：三角形图形、矩形图形和圆形图形中的至少一个。

6.根据权利要求4或5所述的装置，其特征在于，所述第二处理模块具体用于：

根据用户的操作在每个分组中的直线边界或者曲线边界内侧设置若干锚点，并在所述分组中的直线边界或者曲线边界的外侧设置一个公共中心点，按照相邻的两个锚点和公共中心点绘制成一个三角形图形、两个锚点绘制成矩形图形、设置的圆心和一个锚点绘制成圆形图形的方式，绘制出所述分组中的所有的直线边界或者曲线边界。

7.一种设备，其特征在于，包括：存储器和处理器；

所述存储器用于存储计算机指令；所述处理器用于运行所述存储器存储的所述计算机指令实现权利要求1至3任一项所述的图形用户界面中物理边界的定义方法。

8.一种存储介质，其特征在于，包括：可读存储介质和计算机指令，所述计算机指令存储在所述可读存储介质中；所述计算机指令用于实现权利要求1至3任一项所述的图形用户界面中物理边界的定义方法。

Images