一种UI描边特效的高性能渲染方法与流程

本发明涉及游戏技术领域，尤其涉及一种ui描边特效的高性能渲染方法。

背景技术：

在游戏中，为了实现ui描边这种特效，需要对ui图片的描边进行渲染。

目前，渲染ui图片的描边通常有如下两种做法：

一种方法是，通过图像处理技术，实时检测出图像的边缘，在边缘的基础上对图像外扩渲染出描边，此方法需要通过大量的计算得到要渲染特效的区域，效率比较低，要达到很好的渲染效果，需要有大量渲染消耗。

另一种方法是，直接通过图像处理软件(比如photoshop)将原有图片资源处理成一张带有外发光特效的ui图片资源并在游戏中直接使用。这种方法虽然简单，但是每张需要特效的ui图片都要额外存储一张对应的带特效的图片资源，即该方法会导致两张ui图片的存在，需要较大的存储开销，并且描边的颜色不可调节。

技术实现要素：

本发明的目的在于提供一种ui描边特效的高性能渲染方法，从而解决现有技术中存在的前述问题。

为了实现上述目的，本发明采用的技术方案如下：

一种ui描边特效的高性能渲染方法，包括如下步骤：

s1，清除ui图片中完全透明区域的rgb通道信息，得到图片a；

s2，对所述图片a增加ui描边特效，得到图片b；

s3，将所述图片a中完全透明区域和所述图片b中对应区域进行比对，将有差别的透明度信息存入所述图片a中完全透明区域中对应像素点的rgb通道中，得到图片c；

s4，对所述图片c不同透明区域进行正常渲染或描边特效渲染。

优选地，s4按照如下方法进行实施：

对所述图片c的不透明区域进行正常渲染，对所述图片c的半透明区域和完全透明区域进行描边特效渲染。

优选地，按照如下方法对所述图片c的不透明区域进行正常渲染：将所述不透明区域的rgb通道原值和a通道原值相乘得到rgb通道新值，该rgb通道新值与a通道原值构成rgba最终颜色值，并按该最终颜色值对所述图片c的不透明区域进行渲染。

优选地，按照如下方法对所述图片c的半透明区域进行描边特效渲染：在自定义的描边颜色值和rgb通道原值之间，用a通道原值做线性插值，得到rgb通道新值，该rgb通道新值与a通道原值构成rgba最终颜色值，并按该最终颜色值对所述图片c的半透明区域进行渲染。

优选地，按照如下方法对所述图片c的完全透明区域进行描边特效渲染：将所述完全透明区域的rgb三个通道中存储的透明度信息之和与自定义的描边颜色值相乘得到rgb通道新值，所述完全透明区域的rgb通道中存储的透明度信息为a通道新值，该rgb通道新值与该a通道新值构成rgba最终颜色值，并按该最终颜色值对所述图片c的完全透明区域进行渲染。

优选地，s1之前还包括：

s01，获取ui图片的rgba通道信息；

s02，根据透明度信息将所述ui图片划分为不透明区域、半透明区域和完全透明区域。

优选地，s1具体按照如下方法进行实施：遍历所述ui图片的每一个像素点，针对每一个像素点，如果该像素点a通道信息所表示的数值为零，则将像素点rgb三个通道信息所表示的数值设置为零。

优选地，s3中，所述将所述图片a中完全透明区域和所述图片b中对应区域进行比对，具体按照如下方法进行实施：对所述图片a的每一个像素点，如果所述图片a的像素点透明度信息所表示的数值为0，则在所述图片b中找到对应位置的像素点，并确定该像素点透明度信息所表示的数值，记录非0的数值。

优选地，s3中，所述将有差别的透明度信息存入所述图片a中完全透明区域中对应像素点的rgb通道中，具体按照如下方法进行实施：将所述图片b中像素点透明度信息的非0数值存储在图片a对应像素点的rgb通道中，其中，若透明度的数值为a,则rgb三个通道中存储的数值分别为a/3。

本发明的有益效果是：本发明提供的ui描边特效的高性能渲染方法，通过首先清除ui图片中完全透明区域的rgb通道信息后，得到图片a，在图片a中增加ui描边特效，得到图片b，将图片a与图片b进行比对，找到有差别的透明度信息，并将该有差别的透明度信息存入图片a中对应像素点的rgb通道中，得到图片c，对图片c的不同透明区域进行正常渲染或描边特效渲染。该方法中，通过将特效信息存储在不影响图像正常渲染的内容中，既不影响正常渲染，又能够利用存储的特效信息进行描边特效渲染，由于特效信息是在渲染之前就存储的，所以无需在渲染过程中实时计算，渲染效率和渲染质量上大幅提升，渲染消耗大幅降低；另外，特效信息只需要存储在原有的ui图片中，而无需保存另一张图片，所以无需较大的存储开销，并且描边的颜色可自定义调节。因此，采用本发明提供的方法，提高了ui图片描边特效渲染性能。

附图说明

图1是本发明提供的ui描边特效的高性能渲染方法流程示意图；

图2是原始ui图片的示意图；

图3是图片a的示意图；

图4是图2和图3在比对工具下的显示效果图；

图5是图片b的示意图；

图6是图片c的示意图；

图7是图3和图6在比对工具下的显示效果图；

图8是图片的渲染效果示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不用于限定本发明。

如图1所示，本发明实施例提供了一种ui描边特效的高性能渲染方法，按照如下步骤进行实施：

s1，清除ui图片中完全透明区域的rgb通道信息，得到图片a；

s1之前还包括：

s01，获取ui图片的rgba通道信息；

s02，根据透明度信息将所述ui图片划分为不透明区域、半透明区域和完全透明区域。

一张ui图片的颜色信息有4个颜色通道，4个通道分别存储了图像的rgba信息，即r-红色，g-绿色，b-蓝色和a-透明度信息。根据透明度信息可以将图像分为3个区域：不透明区域，半透明区域和完全透明区域。具体的区分的方法是：透明度信息所表示的数值为1时，表示不透明；数值为0到1之间时表示半透明；数值为0表示完全透明。

在完全透明的区域里，虽然rgb这3个通道里的信息没有用，但还是会有信息存在，为了后续将特效信息存储在该区域时，该原有的rgb信息不会对特效信息产生干扰和影响，本发明中，首先将其清除，这里清除rgb通道信息是指将rgb通道中的信息所表示的数值设置为零。具体的可以按照如下方法进行实施：

遍历ui图片的每一个像素点，如果像素点a通道信息所表示的数值为零，则将对应的rgb三个通道的信息所表示的数值设置为零，达到清除无用信息的目的。遍历完后，保存修改后的图片信息，即得到图片a。

上述方法中，由于ui图片的完全透明区域，其a通道信息所表示的数值为零，所以，在实际实施过程中，将完全透明区域的所有像素点的rgb三个通道的信息所表示的数值设置为零，从而避免后续对描边特效渲染的干扰。

s2，对所述图片a增加ui描边特效，得到图片b；

其中，可以在photoshop等图像处理软件中，对所述图片a增加ui描边特效，确定需要描边的区域，并修改这些区域的全透明像素为半透明或不透明的描边像素。

具体的可以采用如下方法进行实施：在图像处理软件photoshop中打开图像，打开图层样式界面，勾选描边选项，调节想要的描边大小，描边选项下的另一些调节参数可以任意。调节好后对图片进行保存，得到图片b。

s3，将所述图片a中完全透明区域和所述图片b中对应区域进行比对，将有差别的透明度信息存入所述图片a中完全透明区域中对应像素点的rgb通道中，得到图片c。

该步骤中，把图片a和图片b进行比对，这里需要将图片a中完全透明区域的像素点和图片b中对应区域进行比对。图片a进行了步骤s2的处理后，原有的完全透明区域的a通道信息发生了变化，其中可能有一部分完全透明区域变成了半透明或不透明区域。所以，图片a的完全透明区域与图片b中的对应区域的透明状态可能是有差别的，本发明中，通过比对图片a与图片b，将两张图片中有差别的透明度信息找出来，并将变化了的透明度信息存入图片a对应像素点的rgb通道中，得到图片c。

根据上述分析可知，图片a与图片b比对找到的透明度差异的像素实际上就是描边区域像素，将这些像素的透明度存储在图片a对应像素点的rgb通道中(该差异的透明度信息等分存储在rgb三个分量中)，则这些像素的颜色可以由额外参数动态进行指定，从而可以确定描边特效渲染所需的完备信息(哪些像素用什么样的rgba进行渲染)，并根据这些信息完成后续对图片c的描边特效渲染。

由于该步骤中比对出来的有差别的透明度信息都是存储在图片a的完全透明区域的rgb通道中的，而完全透明区域的rgb通道信息不会对正常渲染产生影响，所以，图片c可以用做正常的ui渲染。而同时，由于在完全透明区域的rgb通道中，包括有差别的透明度信息，而该有差别的透明度信息为步骤s2处理后的描边特效信息，所以，利用该描边特效信息，图片c还可以用做描边特效渲染。

所以，本发明提供的方法，通过将特效信息存储在不影响图像正常渲染的内容中，既不影响正常渲染，又能够利用存储的特效信息进行描边特效渲染，由于特效信息是在渲染之前就存储的，所以无需在渲染过程中实时计算，图片自身直接包含描边像素区域信息，不需要使用耗时的边缘检测方法来确定描边像素区域，因此渲染效率大幅提升，渲染消耗大幅降低；而且图片的描边特效最终会重现美术手工设置的效果，和一些动态计算效果的方式相比，渲染质量更高；另外，特效信息只需要存储在原有的ui图片中，而无需保存另一张图片，所以无需较大的存储开销，并且描边的颜色可自定义调节，渲染更加人性化。在该步骤s3中，具体可以按照如下方法将所述图片a中完全透明区域和所述图片b中对应区域进行比对：

对所述图片a的每一个像素点，如果所述图片a的像素点透明度信息所表示的数值为0，则在所述图片b中找到对应位置的像素点，并确定该像素点透明度信息所表示的数值，记录非0的数值。

当图片a的像素点透明度信息所表示的数值为0，图片b中对应位置的像素点透明度信息所表示的数值非0时，说明通过步骤s2的处理，在图片a的完全透明区域出现了不透明或半透明区域，即存在差别透明度信息，或者说该差别透明度信息为步骤s2的处理效果。

另外，具体可以按照如下方法将有差别的透明度信息存入所述图片a中完全透明区域中对应像素点的rgb通道中：

将所述图片b中像素点透明度信息的非0数值存储在图片a对应像素点的rgb通道中，其中，若透明度的数值为a,则rgb三个通道中存储的数值分别为a/3。

上述方法中，通过将透明度信息分开存储在rgb三个通道，而不是存储在一个通道中，可以降低渲染描边特效时纹理采样带来的锯齿感。该步骤中，将图片b中像素点透明度信息的非0数值存入图片a对应像素点的rgb通道中，即将步骤2处理后产生的差别透明度信息存入图片a的完全透明区域，或者说将步骤2中增加的ui描边特效信息存入到图片a的完全透明区域。

s4，对所述图片c不同透明区域进行正常渲染或描边特效渲染。具体按照如下方法进行实施：

首先，获取所述图片c的rgba通道信息；根据透明度信息将所述图片c划分为不透明区域、半透明区域和完全透明区域。

然后，采用如下方法对上述三个区域进行正常渲染或描边特效渲染：

其中，将所述不透明区域的rgb通道原值和a通道原值相乘得到rgb通道新值，该rgb通道新值与a通道原值构成rgba最终颜色值，并按该最终颜色值对所述图片c的不透明区域进行正常渲染。

在自定义的描边颜色值和rgb通道原值之间，用a通道原值做线性插值，得到rgb通道新值，该rgb通道新值与a通道原值构成rgba最终颜色值，并按该最终颜色值对所述图片c的半透明区域进行描边特效渲染。

其中，可以按照如下方法进行线性插值，得到rgb通道新值：设a通道原值a为[0,1]，则rgb通道新值＝自定义的描边颜色值*(1-a)+rgb通道原值*a。

将所述完全透明区域的rgb三个通道中存储的透明度信息之和与自定义的描边颜色值相乘得到rgb通道新值，所述完全透明区域的rgb通道中存储的透明度信息为a通道新值，该rgb通道新值与该a通道新值构成rgba最终颜色值，并按该最终颜色值对所述图片c的完全透明区域进行描边特效渲染。

实施例

本实施例中，如图2所示为需要描边特效渲染的原始ui图片。

按照本发明提供的方法，首先遍历图2所示图片的每一个像素点，如果像素点a通道信息所表示的数值为零，则将rgb三个通道中所表示的信息设置为零，达到清除无用信息的目的。得到图片a如图3所示。

正常情况下看图2和图3看不出区别，将图2和图3放到比对工具beyondcompare下来观察，打开软件后，使用文件比较功能，将图2所示图片拖入左边界面，将图3所示图片拖入右边界面后，就可以得到比较后的结果，如图4所示。经过数据清除，图3中某些像素点的rgb通道信息所表示的数值为0，而图2中对应位置像素点的rgb通道信息所表示的数值不为0。放在比对工具中就可以看到这些数值不相同的区域。图4中，中心部分的纯灰和灰白区域是两张图片相同的部分，线条围绕的边缘区域是不同部分。

在photoshop中打开图片a，打开图层样式界面，勾选描边选项，调节想要的描边大小，描边选项下的另一些调节参数可以任意。调节好后对图片进行保存，得到图片b如图5所示，对图片a的每一个像素点进行如下操作，如果图片a的像素点透明度信息所表示的数值为0，就去图片b中找到对应位置的像素点，得到透明度信息所表示的数值。如果数值不为0就表示图片a与图片b在该数值所对应的像素点上存在差异。

将得到的差异数值，存储在图片a中找到该差异的像素点的rgb通道中，得到图片c如图6所示。

正常情况下看图3和图6看不出区别，由于图3可以用作ui的正常渲染，所以图6可以用作ui的正常渲染。将图3和图6放到比对工具beyondcompare下来观察，可以显示出两者的差别，如图7所示。图7的中心部分的纯灰和灰白区域是两张图片相同的部分，边缘的深色区域是不同部分。其中，不同部分是由于图6所示的图片c在rgb通道中额外存储了比对信息所致。

接下来，对图6所示的图片c进行渲染，其中，对图片c的不透明区域进行正常渲染，对图片c的半透明区域进行描边特效渲染，对图片c的完全透明区域进行描边特效渲染，得到渲染后的图片如图8所示，其中，描边颜色可以采用自定义的颜色，比如可以使用黄色。

通过采用本发明公开的上述技术方案，得到了如下有益的效果：本发明提供的ui描边特效的高性能渲染方法，通过首先清除ui图片中完全透明区域的rgb通道信息后，得到图片a，在图片a中增加ui描边特效，得到图片b，将图片a与图片b进行比对，找到有差别的透明度信息，并将该有差别的透明度信息存入图片a中对应像素点的rgb通道中，得到图片c，对图片c的不同透明区域进行正常渲染或描边特效渲染。该方法中，通过将特效信息存储在不影响图像正常渲染的内容中，既不影响正常渲染，又能够利用存储的特效信息进行描边特效渲染，由于特效信息是在渲染之前就存储的，所以无需在渲染过程中实时计算，渲染效率和渲染质量上大幅提升，渲染消耗大幅降低；另外，特效信息只需要存储在原有的ui图片中，而无需保存另一张图片，所以无需较大的存储开销，并且描边的颜色可自定义调节。因此，采用本发明提供的方法进行ui描边特效渲染，具有高性能。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。