CN114529705B - 一种三维引擎编辑器的界面布局处理方法 - Google Patents

Abstract

本发明涉及一种三维引擎编辑器的界面布局处理方法，其特征在于，包括以下步骤：S1、将预制底图平铺于三维引擎编辑器所创建的空白plane上；S2、启用系统的射线对底图进行扫描，获取并存储同时包含坐标值和颜色属性的特定数据；S3、对扫描存储的两条字典数据进行筛选，剔除辅助线之外的像素区域；S4、将两条字典中所包含的色值属性进行对比，匹配成功的生成最终的图层锚点，也即图层坐标系；S5、按照图层深度及图层锚点，依次进行图层拼接，快速完成平面布局。本发明实现三维引擎编辑器界面一键布局的功能，极大减少了手工量，同时又保证了图层层级和位置的准确性。

Description

一种三维引擎编辑器的界面布局处理方法

技术领域

本发明涉及一种三维引擎编辑器的界面布局处理方法。

背景技术

目前在三维引擎编辑器中想要完成界面布局工作只有两种办法，一种是将准备好的图层进行手动创建并按照设计进行手动拖入，这种方法操作较为简单，但需要用眼睛进行对正，准确度不够。另一种方法是通过设计人员提前标注坐标值，在编辑器中输入坐标值进行图层的布局排版，这种方法准确度有保证，但是操作非常繁琐。由于图层等属于外部导入资源，目前尚没有一种行之有效的方法能够减少开发者的手工布局时间。

发明内容

本发明提供了一种三维引擎编辑器的界面布局处理方法，旨在减少界面布局工作的人工依赖及用工成本，提高布局效率。

本发明采用的技术方案是：

一种三维引擎编辑器的界面布局处理方法，其特殊之处在于，包括以下步骤：

S1、将预制底图平铺于三维引擎编辑器所创建的空白plane上；

所述预制底图是通过预制辅助线的方式将图层数据预设于底图中，包括：在底图各图层左上角分别预制两条辅助线，分别为一条横轴线和一条纵轴线，线的色值定义为特定Color.x，线的颜色模式采用RGB模式，颜色具体值为{Color.x，Layer，Color.x}（R=Color.x，G =Layer，B=Color.x）；其中Layer为各图层对应的层级值，所述Layer值的大小取决于图层层级的深度，即图层的层级Layer值越大，图层显示越靠上，图层的层级Layer值越小，图层显示越靠下。

S2、启用系统的射线对底图进行扫描，获取并存储同时包含坐标值和颜色属性的特定数据；

以底图最左下点为原点建立坐标系，在底图的侧边获取某一侧边点坐标（0，β），基于该坐标点生成一条直线x=β作为纵向轴，启用系统内物理方法中的射线Ray，控制其沿横向轴移动扫描，射线每经过一个像素点时就会触发一次检测方法RaycastHit.textureCoord，方法执行后的返回值为Vector2（Nx，Ny），将返回值中的Nx值与底图的宽度值width相乘，即可得到该像素格在x轴的坐标值Tx；随后将每一个像素格的坐标值Tx与色值RGB以字典Dictionary<theX,Color>的形式进行存储；

同理，在底图的底边获取某一底边点坐标（γ，0），基于该坐标点生成一条直线y=γ作为横向轴，启用系统内物理方法中的射线Ray，控制其沿纵向轴移动扫描，射线每经过一个像素点时就会触发一次检测方法RaycastHit.textureCoord，方法执行后的返回值为Vector2（Nx，Ny），将返回值中的Ny值与底图的高度值height相乘，即可得到该像素格在y轴的坐标值Ty；随后将每一个像素格的坐标值Ty与色值RGB以字典Dictionary<theY,Color>的形式进行存储。

S3、对扫描存储的两条字典数据进行筛选，剔除辅助线之外的像素区域。

对S2扫描存储的两条字典循环遍历进行筛选处理，通过value查询，如果value中色值RGB满足{Color.x，α，Color.x}（α为任意值），则保留，反之则删除；经过筛选之后，字典Dictionary<theX,Color>中仅保留所有纵向辅助线所包含的x值，字典Dictionary<theY,Color>中仅保留所有横向辅助线所包含的y值。

S4、将两条字典中所包含的色值属性进行对比，匹配成功的生成最终的图层锚点，也即图层坐标系。

遍历两条字典中的全部Value值，选取Value（即RGB）中α值相同的键值对，将两个键值对中的key值重新组合为Vector2（theX，theY），新生成的二维数组连同图层深度值α以新字典Dictionary<Vector2，int>的格式重新进行存储，最终从底图中提取出图层锚点与层级深度，生成图层属性坐标系，如图3。

S5、按照图层深度及图层锚点，依次进行图层拼接，快速完成平面布局。

遍历新字典Dictionary<Vector2，int>，将数据逐条取出，从图层资源列表中查找对应项，按照图层深度，新建Image图层并进行逐层锚点赋值，最终在一层一层的叠加下，快速完成布局。

本发明通过预制底图，将数据提前预值到图层内，在Unity编辑器下，通过两次射线扫描，识别所有辅助线将存储的数据提取转化为局部列表数据，根据局部列表数据中层级序列号的顺序，依次读取图层信息并按列表数据中的二位坐标进行赋值，实现了一键布局的功能，极大减少了手工量，同时又保证了图层层级和位置的准确性。

附图说明

图1为实施例一的三维引擎编辑器的界面布局处理方法的流程图；

图2为示例预制底图示意图；

图3为图层属性坐标图。

具体实施方式

下面将通过实施例和应用例的方式对本发明的具体技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。

实施例一

一种三维引擎编辑器的界面布局处理方法，包括以下步骤：

S1、在Unity编辑器内创建一块空白Plane，并将预制底图赋于表面材质。

所述预制底图通过预制辅助线的方式将图层数据预设于底图中，包括：在底图各图层左上角分别预制两条辅助线，包括一条横轴线和一条纵轴线，线的色值定义为特定Color.x，线的颜色模式采用RGB模式，颜色具体值为{Color.x，Layer，Color.x}（R=Color.x，G =Layer，B=Color.x）；其中Layer为各图层对应的层级值，所述Layer值的大小取决于图层层级的深度，即图层的层级Layer值越大，图层显示越靠上，图层的层级Layer值越小，图层显示越靠下。

S2、分别用鼠标从底图的底边和侧边各选择一点，以最左下点为原点（0，0）建立坐标系，当选择底图侧边时，获取侧边点坐标（0，β），由该点生成一条直线x=β作为纵向轴，同时启用系统内物理方法中的射线Ray，控制其沿直线x=β进行移动，射线每经过一个像素点时就会触发一次检测方法RaycastHit.textureCoord，方法执行后的返回值为Vector2（Nx，Ny），将返回值中的Nx值与底图的宽度值width相乘，即可得到该像素格在x轴的坐标值Tx。随后将每一个像素格的色值RGB与坐标Tx值以字典Dictionary<theX,Color>的形式进行存储。

同理当选择底边坐标点（γ，0）时，由底边所选点生成直线y=γ作为横向轴，启用系统内物理方法中的射线Ray，控制其沿纵向轴移动扫描，射线每经过一个像素点时就会触发一次检测方法RaycastHit.textureCoord，方法执行后的返回值为Vector2（Nx，Ny），将返回值中的Ny值与底图的高度值height相乘，即可得到该像素格在y轴的坐标值Ty；随后将每一个像素格的坐标值Ty与色值RGB以字典Dictionary<theY,Color>的形式进行存储。

S3、将扫描存储的两条字典进行循环遍历筛选处理，通过value查询，如果value中RGB满足{Color.x，α，Color.x}（α为任意值），则保留，反之则删除。经过筛选之后，Dictionary<theX,Color>中仅剩纵向的所有辅助线所包含的x值，Dictionary<theY,Color>中仅剩横向所有辅助线所包含的y值。

S4、再次将两条字典中value进行遍历查询，选取两条数据中RGB中G值（即为上步骤中的α值）相同的key值，将两个key以x值、y值的形式重新组合为Vector2（theX，theY），连同G值（图层深度）以新字典Dictionary<Vector2，int>的格式进行存储，最终将图层锚点与层级深度从特制图层中提取了出来，生成了图层属性坐标系，如图3。

S5、遍历新字典Dictionary<Vector2，int>，将数据逐条取出，从图层资源列表中查找对应项，按照深度，新建Image图层并进行逐层锚点赋值，最终在一层一层的叠加下，快速完成布局。

本实施例的一种三维引擎编辑器的界面布局处理方法，解决了在Unity编辑器状态下只能通过手动拖动或输入坐标点完成排版的弊端，大幅减少工作时间，并优化了平面布局的准确性。

Claims (3)

1.一种三维引擎编辑器的界面布局处理方法，其特征在于，包括以下步骤：

S1、将预制底图平铺于三维引擎编辑器所创建的空白plane上；

S2、启用系统的射线对底图进行扫描，获取并存储同时包含坐标值和颜色属性的特定数据；

S3、对扫描存储的两条字典数据进行筛选，剔除辅助线之外的像素区域；

S4、将两条字典中所包含的色值属性进行对比，匹配成功的生成最终的图层锚点，也即图层坐标系；

S5、按照图层深度及图层锚点，依次进行图层拼接，快速完成平面布局；

所述S2中：

以底图最左下点为原点建立坐标系，在底图的侧边获取某一侧边点坐标（0，β），基于该坐标点生成一条直线x=β作为纵向轴，启用系统内物理方法中的射线Ray，控制其沿横向轴移动扫描，射线每经过一个像素点时就会触发一次检测方法RaycastHit.textureCoord，方法执行后的返回值为Vector2（Nx，Ny），将返回值中的Nx值与底图的宽度值width相乘，即可得到像素格在x轴的坐标值Tx；随后将每一个像素格的坐标值Tx与色值RGB以字典Dictionary<theX,Color>的形式进行存储；

同理，在底图的底边获取某一底边点坐标（γ，0），基于该坐标点生成一条直线y=γ作为横向轴，启用系统内物理方法中的射线Ray，控制其沿纵向轴移动扫描，射线每经过一个像素点时就会触发一次检测方法RaycastHit.textureCoord，方法执行后的返回值为Vector2（Nx，Ny），将返回值中的Ny值与底图的高度值height相乘，即可得到像素格在y轴的坐标值Ty；随后将每一个像素格的坐标值Ty与色值RGB以字典Dictionary<theY,Color>的形式进行存储；

所述S3中：

对S2扫描存储的两条字典循环遍历进行筛选处理，通过value查询，如果value中色值RGB满足{Color.x，α，Color.x}，则保留，反之则删除；经过筛选之后，字典Dictionary<theX,Color>中仅保留所有纵向辅助线所包含的x值，字典Dictionary<theY,Color>中仅保留所有横向辅助线所包含的y值；

所述S4中：

遍历两条字典中的全部value值，选取value中α值相同的键值对，将两个键值对中的key值重新组合为Vector2（theX，theY），新生成的二维数组连同图层深度值α以新字典Dictionary<Vector2，int>的格式重新进行存储，最终从底图中提取出图层锚点与层级深度，生成图层属性坐标系。

2.如权利要求1所述的一种三维引擎编辑器的界面布局处理方法，其特征在于，所述S1中：所述预制底图是通过预制辅助线的方式将图层数据预设于底图中，包括：在底图各图层左上角分别预制两条辅助线，包括一条横轴线和一条纵轴线，线的色值定义为特定Color.x，线的颜色模式采用RGB模式，颜色具体值为{Color.x，Layer，Color.x}。

3.如权利要求1所述的一种三维引擎编辑器的界面布局处理方法，其特征在于，所述S5中：

遍历新字典Dictionary<Vector2，int>，将数据逐条取出，从图层资源列表中查找对应项，按照图层深度，新建Image图层并进行逐层锚点赋值，最终在一层一层的叠加下，快速完成布局。

Images