一种游戏界面中图像的显示方法及装置

摘要

本发明公开了一种游戏界面中图像的显示方法及装置，显示方法包括以下步骤：1)将待显示的图像进行模糊化处理，并得到模糊图像；2)将步骤1)得到的模糊图像的各个像素点的像素值与目标颜色对应的像素值进行点积运算，将各个像素点的点积运算后得到的值归一化操作到0～255的范围，得到着色效果图；3)叠加显示步骤：在待显示的图像的原图底部叠加上所述着色效果图进行叠加显示，显示出有渲染效果的图像。本发明的显示方法及装置，显示图像中内容的不同等级状态时，耗费的资源少、处理效率低且适用性广。

权利要求

1.一种游戏界面中图像的显示方法，其特征在于：包括以下步骤：

1)将待显示的图像进行模糊化处理，并得到模糊图像；

2)将步骤1)得到的模糊图像的各个像素点的像素值(r，g，b)与目标颜色对应的像素值(r1，g1，b1)进行点积运算：r×r1，g×g1，b×b1，将各个像素点的点积运算后得到的值归一化操作到0～255的范围，得到着色效果图；

3)叠加显示步骤：在待显示的图像的原图底部叠加上所述着色效果图进行叠加显示，显示出有渲染效果的图像。

2.根据权利要求1所述的图像的显示方法，其特征在于：在所述步骤2)后还包括步骤

2’)，对所述着色效果图进行放大偏移处理，包括：a)根据如下公式得到着色效果图中各个像素点经放大偏移处理后的像素值：Ai＝(Bi+offset)×scale，其中，Ai表示像素点i经放大偏移处理后的像素值，Bi表示着色效果图中像素点i的像素值，offset为预设的偏移量，scale为预设的放大倍数；b)对步骤a)得到的各个像素点的像素值进行归一化操作到0～

255的范围后得到经放大偏移处理后的着色效果图；所述步骤3)中叠加上经放大偏移处理后的着色效果图。

3.根据权利要求1所述的图像的显示方法，其特征在于：所述步骤1)中，所述模糊化处理时模糊半径在1个像素点至5个像素点的范围内。

4.根据权利要求1所述的图像的显示方法，其特征在于：所述步骤1)中，采用高斯模糊处理方法进行模糊处理。

5.根据权利要求4所述的图像的显示方法，其特征在于：高斯模糊处理时，对图像进行横向、纵向模糊处理，得到模糊图像。

6.根据权利要求1至5中任一所述的图像的显示方法，其特征在于：所述待显示的图像为游戏界面中虚拟物品的图像。

7.根据权利要求6所述的图像的显示方法，其特征在于：所述虚拟物品为游戏玩家的头像、装备或技能。

8.根据权利要求1所述的图像的显示方法，其特征在于：所述游戏界面为移动终端上的游戏界面。

9.根据权利要求8所述的图像的显示方法，其特征在于：所述移动终端为手机、掌上游戏机或者平板电脑。

10.一种游戏界面中图像的显示装置，其特征在于：包括模糊处理模块、着色模块和叠加显示模块，所述模糊处理模块用于将待显示的图像进行模糊化处理，并输出模糊图像；所述着色模块用于将所述模糊图像的各个像素点的像素值(r，g，b)与目标颜色对应的像素值(r1，g1，b1)进行点积运算：r×r1，g×g1，b×b1，将各个像素点的点积运算后得到的值归一化操作到0～255的范围，输出着色效果图；所述叠加显示模块用于在待显示的图像的原图底部叠加上所述着色效果图进行叠加显示，显示出有渲染效果的虚拟物品图像。

11.根据权利要求10所述的图像的显示装置，其特征在于：还包括放大偏移模块和归一化处理模块，所述放大偏移模块用于对根据如下公式得到各个像素点经放大偏移处理后的像素值：Ai＝(Bi+offset)×scale，其中，Ai表示像素点i经放大偏移处理后的像素值，Bi表示着色效果图中像素点i的像素值，offset为预设的偏移量，scale为预设的放大倍数；所述归一化处理模块用于对所述放大偏移模块得到的各个像素点的像素值进行归一化操作到0～255的范围后得到经放大偏移处理后的着色效果图；所述叠加显示模块用于在叠加显示时叠加上经放大偏移处理后的着色效果图。

说明书

一种游戏界面中图像的显示方法及装置

【技术领域】

[0001] 本发明涉及一种游戏界面中图像的显示方法及装置。【背景技术】

[0002] 随着移动终端的广泛应用，在移动终端上开发游戏的需求也越来越大。目前，在在移动平台的游戏中，玩家用户随着对游戏的深入以及玩家等级提升，玩家的头像、所拥有的物品装备、技能等都会升级。现有的游戏中，一般使用图像图标外部添加品质框的形式表现头像、装备、技能等的等级，不同颜色的品质框，例如灰色，绿，蓝，紫，橙色，分别表示不同级别的高低。生成效果图像的方法，如图1所示，多以第一层品质框图像资源100叠加第二层物品图像资源200再叠加第三层底部背景颜色图像资源300来实现，例如红色框蓝色背景的服饰图像表示相对高等级的装备，蓝色框蓝色背景的服饰图像表示相对低等级的装备。这样，在设计游戏界面的图像显示时，至少需要如下3个图片元素：1、品质框，2、物品图片，3、底部背景。程序实现时，需要对每一物品编写上述3个图片元素的组合显示效果。这种显示方法存在以下缺点：

[0003] 1、资源耗费大：大量的品质框、不同等级表现的单个物品占用了大量的游戏开发资源，一旦弃用则会出现资源浪费。

[0004] 2、显示处理效率低：图像的显示是一个读取和输出的过程，对于看似一张图像的图标，显示时需要读取输出至少3个图片资源，不利于快速表现。尤其是手机等移动端，图形处理能力弱于电脑端，需要严格控制图像的显示处理成本。

[0005] 3、局限性大：品质框的重复调用只限于外形外观较为规整、方便陈列展示的图像图标，例如游戏中的头像、服装、技能图像图标，对于不便于陈列展示的图像(游戏界面中的场景、房屋、树木、河流等)无法通过添加品质框的方式表现其等级。对于此类图像，则需要对同一个物品图像生成多种不同等级状态的图像资源，工作量极大。生成的大量图像资源导入游戏程序中，也会使得整个游戏程序的体量因此而增加。

[0006] 4、直观效果差：对于装备、技能等虚拟物品显示不同等级时，只能在包裹或装备栏里通过品质框判断虚拟物品的不同等级，当物品图像脱离品质框直接配备到游戏角色身上时，不能很直观的判断出角色装备的物品的等级。【发明内容】

[0007] 本发明所要解决的技术问题是：弥补上述现有技术的不足，提出一种游戏界面中图像的显示方法及装置，显示具有不同等级状态内容的图像时，耗费的资源少、处理效率低且适用性广。

[0008] 本发明的技术问题通过以下的技术方案予以解决：

[0009] 一种游戏界面中图像的显示方法，包括以下步骤：1)将待显示的图像进行模糊化处理，并得到模糊图像；2)将步骤1)得到的模糊图像的各个像素点的像素值与目标颜色对应的像素值进行点积运算，将各个像素点的点积运算后得到的值归一化操作到0～255的范围，得到着色效果图；3)叠加显示步骤：在待显示的图像的原图底部叠加上所述着色效果图进行叠加显示，显示出有渲染效果的图像。

[0010] 一种游戏界面中图像的显示装置，包括模糊处理模块、着色模块和叠加显示模块，所述模糊处理模块用于将待显示的图像进行模糊化处理，并得到模糊图像；所述着色模块用于将所述模糊图像的各个像素点的像素值与目标颜色对应的像素值进行点积运算，将各个像素点的点积运算后得到的值归一化操作到0～255的范围，输出着色效果图；所述叠加显示模块用于在待显示的图像的原图底部叠加上所述着色效果图进行叠加显示，显示出有渲染效果的虚拟物品图像。

[0011] 本发明与现有技术对比的有益效果是：

[0012] 本发明的游戏界面中图像的显示方法及装置，将待显示的图像模糊化处理后，在模糊图像上着色上目标颜色信息得到着色效果图，然后将原图底部叠加该着色效果图进行叠加显示，即得到具有目标颜色渲染效果的图像。这样，通过图像上渲染的不同的颜色即可定义表现不同的等级状态。不再像现有技术那样通过品质框区分实现，从而省去了品质框的图片资源使用，降低了资源耗费，且显示处理时只需要读取输出两个图片资源，提升了处理效率。再者，通过渲染颜色来实现等级划分，从而不再局限于可展示陈列的物品的等级划分，游戏界面中任何图像均可以通过上述方法渲染出不同的颜色从而显示出不同的等级效果，方法的可适用对象非常广。本发明的显示方法可直接利用代码调动图形处理器(GPU)进行图像的渲染呈现，可充分调用GPU的灵活性，更快捷的读取和显示图像，从而对于移动端游戏的图像呈现更有优势。由于可直接利用代码调动GPU进行图像的渲染呈现，省去了部分png源资源的制作，降低了资源耗费，且通过调动GPU辅助处理可大大降低移动端CPU的处理压力，更利于图形的快速、流畅的呈现。【附图说明】

[0013] 图1是现有技术中显示图像的等级效果时的资源组合状态示意图；

[0014] 图2是本发明具体实施方式的游戏界面中的图像的显示方法的流程图；

[0015] 图3是本发明具体实施方式的图像显示方法中两幅图叠加的示意图；

[0016] 图4是本发明具体实施方式的图像显示方法显示出的图像的效果图；

[0017] 图5是本发明具体实施方式的图像显示方法设置优选步骤后的效果对比图；

[0018] 图6是本发明具体实施方式的图像显示装置的结构示意图；

[0019] 图7是本发明具体实施方式的图像显示装置的优选结构示意图。【具体实施方式】

[0020] 下面结合具体实施方式并对照附图对本发明做进一步详细说明。

[0021] 本发明的构思是通过突破传统的品质框与资源、背景颜色相结合的方式，采用着色技术以实现不同图片的品质和等级表现，资源耗费少，且该方式不受图片内容的外形外观限制，仅涉及两个图片的叠加，显示处理效率高。

[0022] 如图2所示，为本具体实施方式的游戏界面中图像的显示方法。游戏界面可为电脑或者移动终端上的游戏界面，优选地，在移动终端，如手机、掌上游戏机或者平板电脑上的游戏界面中应用。图像显示方法包括以下步骤：

[0023] 1)将待显示的图像进行模糊化处理，并得到模糊图像。

[0024] 图像模糊处理是较为成熟的技术。该步骤中，进行模糊化处理时，将模糊半径设置在1个像素点至5个像素点的范围内。根据对后续渲染效果的观察，模糊半径的设置会影响渲染后物品图像外围的渲染颜色尺寸大小，将半径设置在1～5个像素点范围时，外围渲染出的颜色尺寸效果适宜，既不至于太小，导致无法出现渲染的颜色效果，也不至于太大导致渲染效果过大影响视觉美观。

[0025] 优选地，选择高斯模糊技术实现上述模糊处理。高斯模糊的基本原理就是原像素点混合周围像素点生成目标模糊像素点。混合的方式有多种，常用的有四点采样、七点采样和九点采样，分别设置采样偏移和权重即可。本具体实施方式中采用效果较佳的九点采样。进一步优选地，高斯模糊处理时，对图像进行横向、纵向模糊处理，得到模糊图像。在横向和纵向上均进行模糊处理，使得模糊效果更加均匀，后续渲染效果也更好。

[0026] 2)将步骤1)得到的模糊图像的各个像素点的像素值与目标颜色对应的像素值进行点积运算，将各个像素点的点积运算后得到的值归一化操作到0～255的范围，得到着色效果图。

[0027] 本具体实施方式的显示方法，目标是给待显示图像外围叠加渲染不同的颜色，呈现不同颜色“发光”效果，从而区分图像不同的等级状态。因此该步骤中，如希望叠加上赋予玫红色效果，则模糊图像的各个像素点的像素值(r，g，b)与玫红色对应的像素值(r1＝222，g1＝88，b1＝199)进行点积运算。点积运算后，得到各个像素点经过r×r1，g×g1，b×b1运算后对应的值，然后将各个像素点运算后对应的值归一化调节到0～255的范围，作为各个像素点的像素值，进而得到着色效果图。类似地，如希望叠加上蓝色效果，则模糊图像的各个像素点的像素值(r，g，b)值与蓝色对应的像素值进行点积运算，然后归一化调节到0～255的范围。通过点积运算和归一化调节，使模糊图像被着色成相应的目标颜色。如图3所示，左侧下方的模糊图像即为附着灰色后的模糊图像。

[0028] 3)叠加显示步骤：在待显示的图像的原图底部叠加上所述着色效果图进行叠加显示，显示出有渲染效果的图像。

[0029] 如图3所示，为叠加时的状态示意图。图像的原图叠加上灰色着色的模糊图像，双层叠加显示得到外围带灰色渲染效果的显示图像。

[0030] 本具体实施方式的图像显示方法，通过模糊处理，保留原图的整体尺寸外围形状，着色上目标颜色后，将模糊图像作为底色图像叠加到原图图像上，形成外围渲染颜色的效果。由于是基于每个图像资源本身进行取点模糊渲染，渲染效果能够十分贴合图像内容外形，有很自然的显示效果。调节步骤2)中的目标颜色，即可方便地实现不同颜色的渲染。通过渲染上不同的颜色，可实现图像中内容的不同等级状态的呈现。而且如图4所示，从游戏界面中观察，为权杖这一虚拟物品渲染蓝色效果后，渲染的外围蓝色使得权杖产生一种外围“发光”的效果，呈现效果更加具有趣味性。通过渲染叠加不同的颜色表示不同等级状态，不再依靠展示列表中的品质框反映图像内容的等级，无需涉及品质框，从而节省了大量的品质框、背景颜色图片资源，降低了资源耗费。显示处理时针对两幅图片进行读取疏忽，可更加高效快速地呈现。而且由于不再依靠品质框显示等级，从而不再局限于可展示陈列的物品的等级划分，游戏界面中任何图像内容均可以通过上述方法渲染出不同的颜色从而显示出不同的等级效果，方法的可适用对象非常广。

[0031] 优选地，本方法适用对象非常广，针对图像内容为虚拟物品的图像进行显示时，效果更佳，表现在直观效果较好。虚拟物品可为游戏玩家的头像、装备或技能等。当虚拟物品的图像通过渲染外围不同颜色来区分不同等级时，不仅在展示列表上可观察到虚拟物品的等级状态，当虚拟物品配备到游戏角色身上后，物品图像上一起携带渲染的用于区分等级的颜色信息，也即物品被配备到游戏角色身上后，也可从物品渲染的颜色识别到等级信息，如图4所示，权杖渲染了蓝色，可知代表某一等级的权杖。这样，玩家可以从游戏角色身上配备的虚拟物品直观地了解到等级信息，解决了以往无法从角色装备物品后的游戏界面中直接判断等级信息的问题，直观效果好，提升了游戏的趣味性。

[0032] 进一步优选地，将上述着色后的效果图经过放大偏移处理后再叠加至原图底部，可使效果图呈现更加高亮的效果，与原图更好的贴合，从而整体渲染效果更加均匀饱满，不至于出现某些部位渲染不到位或者渲染后不够明亮的情形。具体地，图像显示方法在所述步骤2)后还包括步骤2’)(流程图上未示意出)，包括以下步骤：

[0033] a)根据如下公式得到着色效果图中各个像素点经放大偏移处理后的像素值：Ai＝(Bi+offset)×scale，其中，Ai表示像素点i经放大偏移处理后的像素值，Bi表示着色效果图中像素点i的像素值，offset为预设的偏移量，scale为预设的放大倍数。该步骤中，偏移量和放大倍数的值可先设置，然后根据呈现的效果图的反馈不断反复调节取值，从而根据效果设计目标调整为合适的取值即可。

[0034] b)对步骤a)得到的各个像素点的像素值进行归一化操作到0～255的范围后得到经放大偏移处理后的着色效果图。前一步骤将图像中像素点的像素值偏移放大后，该步骤将其归一化调节到0～255的范围，从而便于形成一幅图像。

[0035] 上述得到的图像即为放大偏移处理后的着色效果图，相应地，步骤3)中叠加时，原图叠加上经放大偏移处理后的着色效果图得到具有渲染效果的图像。得到的渲染效果具有更加均匀饱满的特点。具体地，如图5所示，c图为着色蓝色的效果图，d图为着色枚红色的效果图，同时d图在显示处理过程中还包括上述放大偏移处理步骤，则d图得到的渲染颜色更加饱满明亮，“发光”效果更加强烈，即渲染效果更加形象逼真。

[0036] 本具体实施方式中还提供一种游戏界面中图像的显示装置，如图6所示，为装置的结构示意图，包括模糊处理模块400、着色模块500和叠加显示模块600。模糊处理模块400用于将待显示的图像进行模糊化处理，并输出模糊图像。着色模块500用于将模糊图像的各个像素点的像素值与目标颜色对应的像素值进行点积运算，将各个像素点的点积运算后得到的值归一化操作到0～255的范围，输出着色效果图。叠加显示模块600用于在待显示的图像的原图底部叠加上着色效果图进行叠加显示，显示出有渲染效果的虚拟物品图像。

[0037] 通过该显示装置，渲染叠加不同的颜色表示不同等级状态，不再依靠展示列表中的品质框反映图像内容的等级，无需涉及品质框，从而降低了资源耗费，显示处理时也可更加高效快速地呈现。而且由于不再依靠品质框显示等级，从而不再局限于可展示陈列的物品的等级划分，游戏界面中任何图像内容均可以通过上述方法渲染出不同的颜色从而显示出不同的等级效果，方法的可适用对象非常广。

[0038] 优选地，如图7所示，显示装置还包括放大偏移模块700和归一化处理模块800，放大偏移模块700用于对根据如下公式得到各个像素点经放大偏移处理后的像素值：Ai＝(Bi+offset)×scale，其中，Ai表示像素点i经放大偏移处理后的像素值，Bi表示着色效果图中像素点i的像素值，offset为预设的偏移量，scale为预设的放大倍数。归一化处理模块800用于对所述放大偏移模块得到的各个像素点的像素值进行归一化操作到0～255的范围后得到经放大偏移处理后的着色效果图。叠加显示模块600用于在叠加显示时叠加上经放大偏移处理后的着色效果图。通过增设放大偏移模块和归一化处理模块，从而使得渲染效果更加均匀饱满，“发光”效果更加形象逼真。

[0039] 以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下做出若干替代或明显变型，而且性能或用途相同，都应当视为属于本发明的保护范围。