确定用户界面变更的方法及装置的制造方法

确定用户界面变更的方法及装置的制造方法
【专利摘要】本发明提供一种确定用户界面变更的方法及装置。该方法包括：获取游戏的两个版本的用户界面的子图信息；根据子图信息，获得两用户界面分别包含的子图；比对两用户界面中具有相同子图标识的子图；根据比对结果，确定用户界面是否变更。本发明通过自动化方式确定游戏的两个版本对应的用户界面是否有更新，提高了工作效率并降低出错率。
【专利说明】
确定用户界面变更的方法及装置
技术领域
[0001] 本发明设及用户界面，尤其设及一种确定用户界面变更的方法及装置。
【背景技术】
[0002] 使用游戏框架开发游戏的过程中，用户界面化ser Interface,简称:UI)的更新是 非常频繁的，并且在团队协作中监控每一次更新变动是保证项目质量的有效途径。接触过 游戏引擎的开发人员都会有类似感受:每次UI资源出现变更，都会比较担屯、。因为检查时候 没有比较直观的方法可W观察到，到底变更都设及哪些内容。而UI资源变更，出问题的话， 小至UI显示异常，大至客户端闪退。
[0003] 在当前阶段，对于游戏的两个版本对应的UI是否有更新，开发者是通过肉眼观察 进行判断的。但通过肉眼观察运种人工方式判断UI是否有更新是一项繁琐、劳累且容易出 错的工作。特别是，当数百个UI版面经历数千次的更新时，现有的做法费时费力，已难W满 足实际需要。

【发明内容】

[0004] 本发明提供一种确定用户界面变更的方法及装置，W通过自动化方式确定游戏的 两个版本对应的UI是否有更新，提高工作效率并降低出错率。
[0005] 第一方面，本发明提供一种确定用户界面变更的方法，包括:获取游戏的两个版本 的用户界面的子图信息;根据所述子图信息，获得两用户界面分别包含的子图；比对两用户 界面中具有相同子图标识的子图；根据比对结果，确定所述用户界面是否变更。
[0006] 在第一方面的第一种实现方式中，上述比对两用户界面中具有相同子图标识的子 图之后，还包括：显示比对结果，其中，所述比对结果包括两用户界面中具有相同子图标识 的子图、子图比对结果和所述用户界面比对结果。
[0007] 在第一方面的第二种实现方式中，上述获取游戏的两个版本的用户界面的子图信 息，包括:按照键值对列表，分别从两用户界面的配置文件中获取单个子图的子图信息和子 图标识，其中，所述键值对列表中的键记录用户界面中子图的子图标识，所述键值对列表中 的值记录用户界面中子图的子图信息。
[000引在第一方面的第Ξ种实现方式中，上述子图信息包括:子图在用户界面中的位置、 子图在原始子图中的位置及所述原始子图的大小，其中，子图为剪切掉原始子图的透明区 域后得到的图片。上述根据所述子图信息，获得两用户界面分别包含的子图，包括:根据所 述原始子图的大小和所述子图在原始子图中的位置，获得所述子图信息对应的子图的层叠 样式表CSS样式参数;根据用户界面和所述子图在用户界面中的位置，获得第一子图；将所 述第一子图设置在所述CSS样式参数表征的第一块标签上，得到用户界面包含的一子图。
[0009]在第一方面的第四种实现方式中，上述原始子图的大小包括原始子图的宽度与高 度，所述子图在原始子图中的位置包括子图在原始子图中的纵坐标、横坐标、所述子图的高 度和宽度。因此，上述根据所述原始子图的大小和所述子图在原始子图中的位置，获得所述 子图信息对应的子图的css样式参数，包括:将所述原始子图的宽度与二倍边框线宽度进行 求和，获得所述CSS样式参数中的宽度;将所述原始子图的高度与二倍边框线宽度进行求 和，获得所述CSS样式参数中的高度;根据所述子图在原始子图中的位置，确定所述CSS样式 参数中的上留白及左留白；将所述原始子图的高度与所述子图在原始子图中的纵坐标的差 值，再减去所述子图的高度，获得所述CSS样式参数中的下留白；将所述原始子图的宽度与 所述子图在原始子图中的横坐标的差值，再减去所述子图的宽度，获得所述CSS样式参数中 的右留白。
[0010] 在第一方面的第五种实现方式中，子图信息还可W包括：用于表征子图是否有旋 转的信息，若所述用于表征子图是否有旋转的信息表示子图有旋转。基于此，上述根据用户 界面和所述子图在用户界面中的位置，获得第一子图之后，还包括:将所述第一子图W旋转 基点为基准沿逆方向旋转设定角度，所述设定角度为打包所述用户界面时，所述第一子图 所旋转的角度，所述旋转基点的横纵坐标均为所述子图的高度的二分之一。
[0011] 在第一方面的第六种实现方式中，上述比对两用户界面中具有相同子图标识的子 图，包括:获得所述两用户界面中具有相同子图标识的子图的直方图向量及两个直方图向 量之间的距离;若两个直方图向量的距离为零，则确定所述具有相同子图标识的子图的相 似度为100%。
[0012] 在第一方面的第屯种实现方式中，上述比对两用户界面中具有相同子图标识的子 图，还包括:若所述两个直方图向量的距离不为零，则分别将所述具有相同子图标识的子图 进行像素点归一化，得到第一向量和第二向量;根据所述第一向量和所述第二向量的点积， 得到所述两用户界面中具有相同子图标识的子图的相似度。
[0013] 第二方面，本发明提供一种确定用户界面变更的装置，包括:第一获取模块，用于 获取游戏的两个版本的用户界面的子图信息;第二获取模块，用于根据所述子图信息，获得 两用户界面分别包含的子图；比对模块，用于比对两用户界面中具有相同子图标识的子图； 确定模块，用于根据比对结果，确定所述用户界面是否变更。
[0014] 在第二方面的第一种实现方式中，该装置还包括：显示模块，用于显示比对结果， 其中，所述比对结果包括两用户界面中具有相同子图标识的子图、子图比对结果和所述用 户界面比对结果。
[0015] 在第二方面的第二种实现方式中，上述第一获取模块具体用于:按照键值对列表， 分别从两用户界面的配置文件中获取单个子图的子图信息和子图标识，其中，所述键值对 列表中的键记录用户界面中子图的子图标识，所述键值对列表中的值记录用户界面中子图 的子图信息。
[0016] 在第二方面的第Ξ种实现方式中，子图信息包括:子图在用户界面中的位置、子图 在原始子图中的位置及所述原始子图的大小，其中，子图为剪切掉原始子图的透明区域后 得到的图片。所述第二获取模块具体用于:根据所述原始子图的大小和所述子图在原始子 图中的位置，获得所述子图信息对应的子图的层叠样式表CSS样式参数;根据用户界面和所 述子图在用户界面中的位置，获得第一子图；将所述第一子图设置在所述CSS样式参数表征 的第一块标签上，得到用户界面包含的一子图。
[0017] 在第二方面的第四种实现方式中，所述原始子图的大小包括原始子图的宽度与高 度，所述子图在原始子图中的位置包括子图在原始子图中的纵坐标、横坐标、所述子图的高 度和宽度。则所述第二获取模块还用于:将所述原始子图的宽度与二倍边框线宽度进行求 和，获得所述CSS样式参数中的宽度;将所述原始子图的高度与二倍边框线宽度进行求和， 获得所述CSS样式参数中的高度;根据所述子图在原始子图中的位置，确定所述CSS样式参 数中的上留白及左留白；将所述原始子图的高度与所述子图在原始子图中的纵坐标的差 值，再减去所述子图的高度，获得所述CSS样式参数中的下留白；将所述原始子图的宽度与 所述子图在原始子图中的横坐标的差值，再减去所述子图的宽度，获得所述CSS样式参数中 的右留白。
[0018] 在第二方面的第五种实现方式中，所述子图信息还包括：用于表征子图是否有旋 转的信息。若所述用于表征子图是否有旋转的信息表示子图有旋转，则所述第二获取模块 还用于:将所述第一子图W旋转基点为基准沿逆方向旋转设定角度，所述设定角度为打包 所述用户界面时，所述第一子图所旋转的角度，所述旋转基点的横纵坐标均为所述子图的 高度的二分之一。
[0019] 在第二方面的第六种实现方式中，所述比对模块具体用于:获得所述两用户界面 中具有相同子图标识的子图的直方图向量及两个直方图向量之间的距离;若两个直方图向 量的距离为零，则确定所述具有相同子图标识的子图的相似度为100%。
[0020] 在第二方面的第屯种实现方式中，所述比对模块还用于:若所述两个直方图向量 的距离不为零，则分别将所述具有相同子图标识的子图进行像素点归一化，得到第一向量 和第二向量;根据所述第一向量和所述第二向量的点积，得到所述两用户界面中具有相同 子图标识的子图的相似度。
[0021] 本发明确定用户界面变更的方法及装置，通过获取游戏的两个版本的用户界面的 子图信息，并根据子图信息，获得两用户界面分别包含的子图；比对两用户界面中具有相同 子图标识的子图，根据比对结果，确定用户界面是否变更，从而实现通过自动化方式确定游 戏的两个版本对应的用户界面是否有更新，提高了工作效率并降低出错率。
【附图说明】
[0022] 为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现 有技术描述中所需要使用的附图做一简单地介绍，显而易见地，下面描述中的附图是本发 明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可W 根据运些附图获得其他的附图。
[0023] 图1为本发明确定用户界面变更的方法实施例一的流程图；
[0024] 图2为本发明确定用户界面变更的方法中比对结果示例图；
[0025] 图3为本发明确定用户界面变更的方法中子图与用户界面、原始子图的关系示例 图；
[0026] 图4为本发明确定用户界面变更的方法中CSS样式参数的示例图；
[0027] 图5为本发明确定用户界面变更的方法中获取子图过程的一示例图；
[0028] 图6为本发明确定用户界面变更的方法中获取子图过程的另一示例图；
[0029] 图7为本发明确定用户界面变更的方法中获取子图过程的另一示例图；
[0030] 图8为本发明确定用户界面变更的方法中旋转子图过程的示例图；
[0031] 图9为本发明确定用户界面变更的装置实施例一的结构示意图；
[0032] 图10为本发明确定用户界面变更的装置实施例二的结构示意图。
【具体实施方式】
[0033] 为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例 中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是 本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员 在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0034] 本发明实施例的说明书和权利要求书中的术语"包括"和"具有及他们的任何 变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产 品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于运 些过程、方法、产品或设备固有的其它步骤或单元。
[0035] 首先对本发明所设及的几个名词进行解释：
[0036] plist文件:在游戏框架中，会自动把很多张游戏图片打包成一个大图和一个对应 的配置文件，即属性列表(Propedy List,简称:piiSt)文件，在使用的时候通过该配置文 件解析出对应的子图。其中，属性列表文件是一种用来存储序列化后的对象的文件，其文件 扩展名为.plist,因此，通常被称为plist文件。本文提到的plist文件是游戏框架中所使用 的一种列表文件格式。
[0037] 层叠样式表（Cascading Style Sheets,简称：CSS):又称串样式列表、级联样式 表、串接样式表、层叠样式表、阶层式样式表，一种用来为结构化文档添加样式(字体、间距 和颜色等）的计算机语言，由W3C定义和维护。其中，结构化文档例如为超文本标记语言 巧yper Text Markup Language,简称：HTML)文档或可扩展标记语言化xtensible Markup Language，简称:XML)应用，等等。
[0038] 在游戏开发过程中，游戏框架自动把很多张游戏图片打包成一个大图和一个对应 的配置文件，由于该打包处理，一张大图中包含多张子图（即上述游戏图片），但一张大图中 只要存在任一子图的形状变更，或子图的数量变更时，打包后的大图即发生变更，即大图中 各个子图的排列分布也会因子图的变更而重新分布，因此，直接对比打包后的大图毫无意 义，但若UI的变更判断失误，将可能导致UI显示异常，设置客户端闪退等诸多问题。为了避 免运些问题，本发明提供一种自动化地确定用户界面变更的方法及装置，用于比对开发过 程中用户界面的变更情况。
[0039] 图1为本发明确定用户界面变更的方法实施例一的流程图。该实施例提供一种确 定用户界面变更的方法，该方法可W由确定用户界面变更的装置执行，该装置可W通过软 件和/或硬件的方式实现，该装置可W集成于例如电脑、手机等设备中。如图1所示，该方法 包括：
[0040] S101、获取游戏的两个版本的用户界面的子图信息。
[0041] 在开发过程中，设及多次用户界面的更新。其中，每一版本的用户界面与该游戏中 其他版本对应的同一用户界面均可能存在差异。运里所说的用户界面是指其在游戏中所发 挥的作用或对应的标识是相同的。例如，一游戏的登录界面，在不同的版本中，都称为登录 界面或其发挥的作用都是进入游戏。
[0042] 在确定要对比的两个版本后，可W逐一比对各用户界面，也可W对版本进行统一 比对，本发明不限制每次比对的用户界面的个数。另外，同时比对的版本也可W为Ξ个或更 多。为简便说明，本发明W两个版本的一个用户界面的比对为例进行说明。
[0043] 获取要比对的用户界面的子图信息。具体地，用户界面至少包含一个子图，首先需 获取该用户界面对应的子图信息，例如打包该用户界面的同时所生成的plist文件。
[0044] S102、根据子图信息，获得两用户界面分别包含的子图。
[0045] 两用户界面分别包含的子图个数可W相同或不同，即不同版本对应同一用户界面 的子图有增删等。运里进行举例说明，设定用户界面1包含4个子图，另一用户界面2包含5个 子图。其中，打包用户界面1得到plist文件l，plist文件1中包含4个子图对应的子图信息。 打包用户界面2得到plist文件2，plist文件2中包含5个子图对应的子图信息。
[0046] 基于上述设定，该步骤可W理解为，根据plist文件1得到的4个子图对应的子图信 息，获得用户界面1包含的4个子图；根据plist文件2得到的5个子图对应的子图信息，获得 用户界面2包含的5个子图。
[0047] S103、比对两用户界面中具有相同子图标识的子图。
[0048] 具体地，逐一比对两用户界面中具有相同子图标识的子图。其中，子图标识可W为 子图的名称或编号等可W唯一表征子图的信息，在运里本发明不予限制。
[0049] S104、根据比对结果，确定用户界面是否变更。
[0050] 其中，比对结果中包含了两用户界面是否存在差异的结果，若两用户界面存在差 异，即可确定用户界面有变更。具体地，对于两用户界面是否存在差异，可通过两用户界面 中具有相同子图标识的子图的相似度等来确定。例如，两子图的相似度为100%，说明两子 图相同；若两子图的相似度小于100%，说明两子图存在差异。
[0051] 该实施例通过获取游戏的两个版本的用户界面的子图信息，并根据子图信息，获 得两用户界面分别包含的子图；比对两用户界面中具有相同子图标识的子图，根据比对结 果，确定用户界面是否变更，从而实现通过自动化方式确定游戏的两个版本对应的用户界 面是否有更新，提高了工作效率并降低出错率。
[0052] 可选地，在S103之后，该确定用户界面变更的方法还可W包括：显示比对结果。其 中，该比对结果包括两用户界面中具有相同子图标识的子图、子图比对结果和用户界面比 对结果等，W便于测试人员检查和确认变更的位置是否必要和合理。
[0化3] 例如，图2示出一比对结果示例。参考图2,比对结果包括Ξ个部分：1、标识为"①" 的部分示出两用户界面的名称及其各自对应的plist文件的名称和两用户界面各自所属的 版本，其中，用户界面的名称在运里示例为"Login, png"，一用户界面所属的版本为 "version#18334"，其对应的plist文件的名称为"Login.plist"，另一用户界面所属的版本 为\6'3；[0]1#19391"，其对应的口1131:文件的名称为"1〇邑;[]1.口1131:";标识为"(1)"的部分示出 两用户界面中具有相同子图标识的子图及子图名称和子图比对结果(表示为相似度）；标识 为"③"的部分是两用户界面比对结果的总结，其可W包括存在差异的子图的子图标识，用 户点击该子图标识可W链接至标识为"②"部分中对应的子图。
[0054]在上述任一实施例中，S101可W包括:按照键值对列表，分别从两用户界面的配置 文件中获取单个子图的子图信息和子图标识。其中，键值对列表中的键记录用户界面中子 图的子图标识，键值对列表中的值记录用户界面中子图的子图信息。可选地，子图标识可W 具体为子图文件名，但本发明不W此为限制，子图标识只要能区分不同的子图即可。
[0055] 具体地，子图信息可W包括:子图在用户界面中的位置、子图在原始子图中的位置 及原始子图的大小。其中，由于游戏框架在将很多张游戏图片打包成一个大图时，会剪切掉 游戏图片的透明区域，因此，本发明中的子图为剪切掉原始子图的透明区域后得到的图片。
[0056] 其中，子图在用户界面中的位置是按照用户界面左上角为原点，记录子图到用户 界面上边的距离，和子图到用户界面左边的距离;还包含子图的尺寸，即宽和高。子图在原 始子图中的位置是按照原始子图左上角为原点，记录子图到原始子图上边的距离，即子图 在原始子图中的纵坐标，和子图到原始子图左边的距离，即子图在原始子图中的横坐标;还 包含子图的尺寸，即子图的高度和宽度。原始子图的大小包括原始子图的宽度与高度。
[0057] 另外，子图信息还可W包括：用于表征子图是否有旋转的信息。可选地，子图信息 还可W包括:子图在用户界面中的裁剪偏移量。其中，子图在用户界面中的旋转方式包括顺 时针90°-种;子图在用户界面中的裁剪偏移量包含是水平和竖直两个方向的裁剪偏移量。 [005引参考如下plist文件结构示例，说明子图信息。
[0化9]
[0060] 其中，该plist文件记录了一用户界面中的子图信息。可见，plist文件包括至少一 个键值对。每个键值对包含一个键和一个值，采用标签对<key 乂/key〉表示键，而紧接其后 的标签对则为运个键所对应的值。
[0061 ]如果值是<dictx/dict〉，则表示内容依然是一个键值对；
[0062] 如果值是<3付1雌〉</3付山肖〉，则表示内容是字符型，可W简单理解为文字类型；
[0063] 如果值是<付116/^〉或钟3136/〉，则表示布尔值真或布尔值假，可^理解为两种特殊 数值a和0。
[0064] 每一个键值对记录一个子图在用户界面中的信息。如上述plist文件结构示例中 方框中内容。其中，键里面记录的用户界面中子图的文件名为"Dice.png";值里面由4个字 符型键值对和1个布尔型键值对组成，即用户界面中子图的子图信息为方框中的"〈diet >……</dict>"部分。
[0065] W下是diet里面几个参数的解释：
[0066] 打ame: {{x,y}, {wi化h,hei曲t}}，表示子图在用户界面中的位置；
[0067] offset: {x，y}，表示子图在用户界面中的裁剪偏移量；
[0068] rotated: true/化Ise，用于表征子图是否有旋转的信息；
[0069] sourceColorRect: {{x,y}, {wi化h,hei曲t}}，表示子图在原始子图中的位置；
[0070] sourceSize: {wi化h,height}，表示原始子图的大小。
[0071] 参考图3,右下角是一个打包好的用户界面，用户界面中的黑色区域是裁剪透明区 域后的子图；左上角为原始子图，原始子图中的黑色区域与用户界面中的黑色区域相同。图 3还示出上述几个参数的具体含义，此处不再寶述。
[0072] 由于打包用户界面时会将原始子图的透明区域剪切掉，所W为了表现透明区域， 从用户界面中枢出子图后，需根据实际情况将子图填充到原始子图大小的区域里面，W还 原原始子图。
[0073] 在上述实施例的基础上，S102可W包括:根据原始子图的大小和子图在原始子图 中的位置，获得子图信息对应的子图的CSS样式参数;根据用户界面和子图在用户界面中的 位置，获得第一子图；将第一子图设置在CSS样式参数表征的第一块标签上，得到用户界面 包含的一子图。
[0074] 进一步地，上述根据原始子图的大小和子图在原始子图中的位置，获得子图信息 对应的子图的CSS样式参数，可W具体为:将原始子图的宽度与二倍边框线宽度进行求和， 获得CSS样式参数中的宽度;将原始子图的高度与二倍边框线宽度进行求和，获得CSS样式 参数中的高度;根据子图在原始子图中的位置，确定CSS样式参数中的上留白及左留白；将 原始子图的高度与子图在原始子图中的纵坐标的差值，再减去子图的高度，获得CSS样式参 数中的下留白；将原始子图的宽度与子图在原始子图中的横坐标的差值，再减去子图的宽 度，获得CSS样式参数中的右留白。
[0075] a.定义原始子图的边框。
[0076] 图4为CSS样式参数的介绍。其中：
[0077] CSS样式参数中的宽度wi化h:互=sou;rceSize.w+2(边框线宽度为l);
[0078] CSS样式参数中的高度height:b=sourceSize.h+2(边框线宽度为1);
[00巧]CSS 样式参数中的上留白 padding-top :pt = sou：TceColorRect.y;
[0080] CSS 样式参数中的左留白 padding-left: pi = sou：TceColorRect.x;
[0081 ] CSS 样式参数中的右留白 padding-right : pr = sourceSize .w- sourceColorRect.x-sourceColorRect.w;
[0082] CSS 样式参数中的下留白 padding-bottom : pb = sourceSize . h- sourceColorRect.y-sourceColorRect.h。
[0083] 所W，原始子图的边框的CSS样式参数为:width:哩x;hei曲t:畦X;padding:站px plpx pbpx prpxo
[0084] 下面是实际的例子，首先plist文件的定义如下：sourceSize.w=147 ; sourceSize .h = 60 ； sourceColorRect. x = 8 ； sourceColorRect. y = 7 ； sourceColorRect. w = 131 ;sourceColorRect.h = 46。
[00 化]经过计算得到:互=147+2 = 149 古=60+2 = 62 ；pt = 7 ;些=147-131-8 = 8;幽=60- 46-7 = 7 ;虹=8 ;得到原始子图的边框的CSS样式参数为：width : 149￡x; height: 62￡x ; p曰dding:7px 8px 7px 8px〇
[0086] 为了直观表示，已经将实际裁剪后的子图用黑色区域代替，可W看到黑色区域的 上下左右分别留了7px 8px 7px 8px的空白区域，图5示出实际裁剪效果（即第一块标签）。
[0087] b.获得第一子图。
[0088] 对于打ame: {{x,y}, {wi化h,hei曲t}}，那么对应的枢图CSS代码为：
[0089] 背景图片background-imageiurK '/site_media/Login_common_36453.png'）；
[0090] 宽度 wi 化 h:w =打 ame .wi 化 h;
[0091] 高度 height :h =打ame. height;
[0092] 背景图片 X轴偏移background-pos i t ion-x: bpx = -f rame. X;
[0093] 背景图片y 轴偏移 background-position-y: bpy = -frame. y;
[0094] 所有设置完的css样式参数为：
[0095] back邑round-ima邑e:url('/site_media/Lo邑in_common_36453.pn邑'）；width:wpx; height:hpx;b3ckground-position:bxpxbypx。
[0096] 运里要特别注意的一点是：如果图片有旋转过的话，width和height的数值要对 调。
[0097] 还是上面那个例子，从piist文件中得到打ame .width = 131;frame .height = 46; ;1^招111日.义=736;打日111日.7 = 496，而且没有旋转。经过计算得到：￥=131;11 = 46;13邱义=-736; bypx = -496;得到设置完的css样式参数：background-image :u;rl ('/site_media/Login_ common_36453. png '）；width:131px;height:46px;background-position:-736px-496px。
[0098] 从而，根据用户界面和子图在用户界面中的位置，获得第一子图。
[0099] C.将第一子图设置在CSS样式参数表征的第一块标签上，得到用户界面包含的一 子图，效果如图6所示，即将第一子图填充在图5所示的黑色区域内。
[0100] 需说明的是，通过上述实现方式得到用户界面包含的一子图是为了保证最后得到 的效果图和原始子图一致，也就是最终在程序中使用的图片一致。如果直接使用a.中的CSS 样式参数在用户界面上枢图，得到的结果会带上周围其他子图的内容，具体如图7所示。
[0101] 若用于表征子图是否有旋转的信息表示子图有旋转，则上述根据用户界面和子图 在用户界面中的位置，获得第一子图之后，该方法还可W包括:将第一子图W旋转基点为基 准沿逆方向旋转设定角度。该设定角度为打包用户界面时，该第一子图所旋转的角度。旋转 基点的横纵坐标均为子图的高度的二分之一。
[0102] 打包的时候，打包工具有时候会把图片顺时针旋转90°，W缩小打包之后的用户界 面的大小。在打包生成的plist文件中添加<467〉1'〇1曰16(1</467〉<付116/〉来表示子图是否有 旋转，并且只有顺时针旋转90° -种方式。所W，在解析到上述旋转标记时，只需要把旋转过 的图片逆时针旋转90°，即可还原原始子图的真实角度。
[0103] 将第一子图W旋转基点为基准沿逆方向旋转设定角度，该特征可W通过CSS3的旋 转（rotate)功能实现。CSS3 的旋转设及两个参数 transform :;ro1:ate(-90deg)和 transform- origin: 25.5px 25.5px，其中，前者是旋转角度:-90°表示逆时针旋转90° ;后者是旋转基 点，就是图片旋转时中屯、点的坐标。运里仅示例说明设定角度，本发明实施例不W此为限 审IJ，例如，当打包图片是旋转其他角度，在获取第一子图之后需逆方向旋转该其他角度。
[0104] 如图8所示，实线长方形表示子图，需要将该子图旋转到虚线长方形的位置，则旋 转基点就是阴影部分运个正方形的中屯、点。运样的话，transform-origin的属性就是 frame.h/2px frame.h/2px〇
[0105] W上通过具体实施例说明用户界面中子图的获取过程，接下来详细说明两用户界 面中具有相同子图标识的子图的比对过程。
[0106] -种实现方式中，S103可W包括:获得两用户界面中具有相同子图标识的子图的 直方图向量及两个直方图向量之间的距离;若两个直方图向量的距离为零，则确定具有相 同子图标识的子图的相似度为100%。例如，两个直方图向量之间的距离可采用计算两个直 方图向量的均方根的形式获得，但本发明不局限于此。
[0107] 进一步地，S103还可W包括:若两个直方图向量的距离不为零，则分别将具有相同 子图标识的子图进行像素点归一化，得到第一向量和第二向量;根据第一向量和第二向量 的点积，得到两用户界面中具有相同子图标识的子图的相似度。该实施例中，像素点归一化 是指对子图中红、绿、蓝W及透明像素求平均值，将子图转换成一向量。
[0108] 例如，游戏框架Cocos2d-x提供了 Cocos2d-HTML5引擎，是用脚本语言化vaScript 编写的，最大化保留了引擎的性能，并且应用程序编程接口（Application Programming Interface，简称:API)与游戏框架Cocos2cl非常接近。该Cocos2d-HTML5引擎是利用HTML5中 画图（Canvas)技术和JavaScript实现的。采用Canvas和JavaScript技术理论上也可W替代 本文的技术完成用户界面对比工具，本专利技术方案的应用不限定具体的游戏框架或引 擎，运里不再寶述。
[0109] 图9为本发明确定用户界面变更的装置实施例一的结构示意图。如图9所示，确定 用户界面变更的装置90包括:第一获取模块91、第二获取模块92、比对模块93和确定模块 94。
[0110] 其中，第一获取模块91用于获取游戏的两个版本的用户界面的子图信息。第二获 取模块92用于根据子图信息，获得两用户界面分别包含的子图。比对模块93用于比对两用 户界面中具有相同子图标识的子图。确定模块94用于根据比对结果，确定用户界面是否变 更。
[0111] 本实施例的装置，可W用于执行图1所示方法实施例的技术方案，其实现原理和技 术效果类似，此处不再寶述。
[0112] 可选地，确定用户界面变更的装置90还可W包括:显示模块95。该显示模块95用于 显示比对结果，其中，该比对结果包括两用户界面中具有相同子图标识的子图、子图比对结 果和用户界面比对结果。
[0113] 在上述实施例的基础上，第一获取模块91可具体用于:按照键值对列表，分别从两 用户界面的配置文件中获取单个子图的子图信息和子图标识。其中，键值对列表中的键记 录用户界面中子图的子图标识，键值对列表中的值记录用户界面中子图的子图信息。
[0114] 在上述实施例中，子图信息可W包括:子图在用户界面中的位置、子图在原始子图 中的位置及原始子图的大小，其中，子图为剪切掉原始子图的透明区域后得到的图片。第二 获取模块92可具体用于:根据原始子图的大小和子图在原始子图中的位置，获得子图信息 对应的子图的CSS样式参数;根据用户界面和子图在用户界面中的位置，获得第一子图；将 第一子图设置在css样式参数表征的第一块标签上，得到用户界面包含的一子图。
[0115] 进一步地，原始子图的大小包括原始子图的宽度与高度。子图在原始子图中的位 置包括子图在原始子图中的纵坐标、横坐标、子图的高度和宽度。基于此，则第二获取模块 92还可W用于:将原始子图的宽度与二倍边框线宽度进行求和，获得CSS样式参数中的宽 度;将原始子图的高度与二倍边框线宽度进行求和，获得CSS样式参数中的高度;根据子图 在原始子图中的位置，确定CSS样式参数中的上留白及左留白；将原始子图的高度与子图在 原始子图中的纵坐标的差值，再减去子图的高度，获得CSS样式参数中的下留白；将原始子 图的宽度与子图在原始子图中的横坐标的差值，再减去子图的宽度，获得CSS样式参数中的 右留白。
[0116] 另外，子图信息还可W包括：用于表征子图是否有旋转的信息。若该用于表征子图 是否有旋转的信息表示子图有旋转，则第二获取模块92还可W用于:将第一子图W旋转基 点为基准沿逆方向旋转设定角度，该设定角度为打包用户界面时，第一子图所旋转的角度， 旋转基点的横纵坐标均为子图的高度的二分之一。
[0117] 可选地，比对模块93可具体用于：获得两用户界面中具有相同子图标识的子图的 直方图向量及两个直方图向量之间的距离;若两个直方图向量的距离为零，则确定具有相 同子图标识的子图的相似度为100 %。
[0118] 作为本发明的一种实现方式，比对模块93还可W用于:若两个直方图向量的距离 不为零，则分别将具有相同子图标识的子图进行像素点归一化，得到第一向量和第二向量； 根据第一向量和第二向量的点积，得到两用户界面中具有相同子图标识的子图的相似度。
[0119] 本发明通过获取游戏的两个版本的用户界面的子图信息，并根据子图信息，获得 两用户界面分别包含的子图；比对两用户界面中具有相同子图标识的子图，根据比对结果， 确定用户界面是否变更，从而实现通过自动化方式确定游戏的两个版本对应的用户界面是 否有更新，提高了工作效率并降低出错率。
[0120] 图10为本发明确定用户界面变更的装置实施例二的结构示意图。参照图10,确定 用户界面变更的装置100包括:处理器110和存储器120。
[0121] 具体地，存储器120存储处理器110的可执行指令，当确定用户界面变更的装置100 运行时，处理器110与存储器120之间通信，处理器110调用存储器120中的可执行指令，用于 执行上述任一方法实施例。
[0122] 本实施例的装置，可W用于执行上述任一方法实施例的技术方案，其实现原理和 技术效果类似，此处不再寶述。
[0123] 本领域普通技术人员可W理解:实现上述各方法实施例的全部或部分步骤可W通 过程序指令相关的硬件来完成。前述的程序可W存储于一计算机可读取存储介质中。该程 序在执行时，执行包括上述各方法实施例的步骤;而前述的存储介质包括:R〇M、RAM、磁碟或 者光盘等各种可W存储程序代码的介质。
[0124] 最后应说明的是：W上各实施例仅用W说明本发明的技术方案，而非对其限制;尽 管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解:其依 然可W对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进 行等同替换；而运些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术 方案的范围。
【主权项】
1. 一种确定用户界面变更的方法，其特征在于，包括： 获取游戏的两个版本的用户界面的子图信息； 根据所述子图信息，获得两用户界面分别包含的子图； 比对两用户界面中具有相同子图标识的子图； 根据比对结果，确定所述用户界面是否变更。2. 根据权利要求1所述的方法，其特征在于，所述比对两用户界面中具有相同子图标识 的子图之后，还包括： 显示比对结果，其中，所述比对结果包括两用户界面中具有相同子图标识的子图、子图 比对结果和所述用户界面比对结果。3. 根据权利要求1所述的方法，其特征在于，所述获取游戏的两个版本的用户界面的子 图信息，包括： 按照键值对列表，分别从两用户界面的配置文件中获取单个子图的子图信息和子图标 识，其中，所述键值对列表中的键记录用户界面中子图的子图标识，所述键值对列表中的值 记录用户界面中子图的子图信息。4. 根据权利要求1所述的方法，其特征在于，所述子图信息包括:子图在用户界面中的 位置、子图在原始子图中的位置及所述原始子图的大小，其中，子图为剪切掉原始子图的透 明区域后得到的图片； 所述根据所述子图信息，获得两用户界面分别包含的子图，包括： 根据所述原始子图的大小和所述子图在原始子图中的位置，获得所述子图信息对应的 子图的层叠样式表CSS样式参数； 根据用户界面和所述子图在用户界面中的位置，获得第一子图； 将所述第一子图设置在所述CSS样式参数表征的第一块标签上，得到用户界面包含的 一子图。5. 根据权利要求4所述的方法，其特征在于，所述原始子图的大小包括原始子图的宽度 与高度，所述子图在原始子图中的位置包括子图在原始子图中的纵坐标、横坐标、所述子图 的高度和宽度，则所述根据所述原始子图的大小和所述子图在原始子图中的位置，获得所 述子图信息对应的子图的CSS样式参数，包括： 将所述原始子图的宽度与二倍边框线宽度进行求和，获得所述CSS样式参数中的宽度； 将所述原始子图的高度与二倍边框线宽度进行求和，获得所述CSS样式参数中的高度； 根据所述子图在原始子图中的位置，确定所述CSS样式参数中的上留白及左留白； 将所述原始子图的高度与所述子图在原始子图中的纵坐标的差值，再减去所述子图的 高度，获得所述CSS样式参数中的下留白； 将所述原始子图的宽度与所述子图在原始子图中的横坐标的差值，再减去所述子图的 宽度，获得所述CSS样式参数中的右留白。6. 根据权利要求4或5所述的方法，其特征在于，所述子图信息还包括：用于表征子图是 否有旋转的信息，若所述用于表征子图是否有旋转的信息表示子图有旋转，则所述根据用 户界面和所述子图在用户界面中的位置，获得第一子图之后，还包括： 将所述第一子图以旋转基点为基准沿逆方向旋转设定角度，所述设定角度为打包所述 用户界面时，所述第一子图所旋转的角度，所述旋转基点的横纵坐标均为所述子图的高度 的二分之一。7. 根据权利要求1~5中任一项所述的方法，其特征在于，所述比对两用户界面中具有 相同子图标识的子图，包括： 获得所述两用户界面中具有相同子图标识的子图的直方图向量及两个直方图向量之 间的距离； 若两个直方图向量的距离为零，则确定所述具有相同子图标识的子图的相似度为 100%〇8. 根据权利要求7所述的方法，其特征在于，所述比对两用户界面中具有相同子图标识 的子图，还包括： 若所述两个直方图向量的距离不为零，则分别将所述具有相同子图标识的子图进行像 素点归一化，得到第一向量和第二向量； 根据所述第一向量和所述第二向量的点积，得到所述两用户界面中具有相同子图标识 的子图的相似度。9. 一种确定用户界面变更的装置，其特征在于，包括： 第一获取模块，用于获取游戏的两个版本的用户界面的子图信息； 第二获取模块，用于根据所述子图信息，获得两用户界面分别包含的子图； 比对模块，用于比对两用户界面中具有相同子图标识的子图； 确定模块，用于根据比对结果，确定所述用户界面是否变更。10. 根据权利要求9所述的装置，其特征在于，还包括： 显示模块，用于显示比对结果，其中，所述比对结果包括两用户界面中具有相同子图标 识的子图、子图比对结果和所述用户界面比对结果。11. 根据权利要求9所述的装置，其特征在于，所述第一获取模块具体用于： 按照键值对列表，分别从两用户界面的配置文件中获取单个子图的子图信息和子图标 识，其中，所述键值对列表中的键记录用户界面中子图的子图标识，所述键值对列表中的值 记录用户界面中子图的子图信息。12. 根据权利要求9所述的装置，其特征在于，所述子图信息包括:子图在用户界面中的 位置、子图在原始子图中的位置及所述原始子图的大小，其中，子图为剪切掉原始子图的透 明区域后得到的图片； 所述第二获取模块具体用于:根据所述原始子图的大小和所述子图在原始子图中的位 置，获得所述子图信息对应的子图的层叠样式表CSS样式参数;根据用户界面和所述子图在 用户界面中的位置，获得第一子图；将所述第一子图设置在所述CSS样式参数表征的第一块 标签上，得到用户界面包含的一子图。13. 根据权利要求12所述的装置，其特征在于，所述原始子图的大小包括原始子图的宽 度与高度，所述子图在原始子图中的位置包括子图在原始子图中的纵坐标、横坐标、所述子 图的高度和宽度，则所述第二获取模块还用于： 将所述原始子图的宽度与二倍边框线宽度进行求和，获得所述CSS样式参数中的宽度； 将所述原始子图的高度与二倍边框线宽度进行求和，获得所述CSS样式参数中的高度； 根据所述子图在原始子图中的位置，确定所述CSS样式参数中的上留白及左留白； 将所述原始子图的高度与所述子图在原始子图中的纵坐标的差值，再减去所述子图的 高度，获得所述css样式参数中的下留白； 将所述原始子图的宽度与所述子图在原始子图中的横坐标的差值，再减去所述子图的 宽度，获得所述CSS样式参数中的右留白。14. 根据权利要求12或13所述的装置，其特征在于，所述子图信息还包括：用于表征子 图是否有旋转的信息，若所述用于表征子图是否有旋转的信息表示子图有旋转，则所述第 二获取模块还用于： 将所述第一子图以旋转基点为基准沿逆方向旋转设定角度，所述设定角度为打包所述 用户界面时，所述第一子图所旋转的角度，所述旋转基点的横纵坐标均为所述子图的高度 的二分之一。15. 根据权利要求9~13中任一项所述的装置，其特征在于，所述比对模块具体用于： 获得所述两用户界面中具有相同子图标识的子图的直方图向量及两个直方图向量之 间的距离； 若两个直方图向量的距离为零，则确定所述具有相同子图标识的子图的相似度为 100%〇16. 根据权利要求15所述的装置，其特征在于，所述比对模块还用于： 若所述两个直方图向量的距离不为零，则分别将所述具有相同子图标识的子图进行像 素点归一化，得到第一向量和第二向量； 根据所述第一向量和所述第二向量的点积，得到所述两用户界面中具有相同子图标识 的子图的相似度。
【文档编号】G06F9/44GK105824627SQ201610147249
【公开日】2016年8月3日
【申请日】2016年3月15日
【发明人】招成林, 赵春玉
【申请人】网易（杭州）网络有限公司