界面混合渲染方法、装置、设备及存储介质与流程

本发明涉及游戏，尤其涉及一种界面混合渲染方法、装置、设备及存储介质。

背景技术：

1、在对游戏界面进行界面开发时，通常使用h5界面开发或者原生技术开发，以及h5和原生技术做混合开发，在h5和原生技术做混合开发时，当客户端显示界面同时原生界面和h5界面时，会出现界面遮挡问题。正常遮挡关系是根据界面层级决定覆盖关系，由于原生界面和h5界面使用完全不同技术对界面进行渲染，无法表现出正常的层级遮挡关系。原生界面按照层级关系表现正常的遮挡关系，当嵌入h5界面时，遮挡关系出现错误，处在第二层的h5界面，却遮挡了第三层的原生界面。

2、为了避免以上的问题，常规作为有两种，一种是h5界面始终在最前方显示，当需要显示其他界面时，需要将h5界面进行隐藏。另外一种做法，原生界面和h5界面平铺分布于不同的区域，因此也不存在遮挡问题。当需要显示第三层原生界面时，隐藏第二层的h5界面，然而这些做法都无法很好的体现h5界面和原生界面之间的层级关系。

技术实现思路

1、本发明的主要目的在于解决现有的h5技术和原生技术进行页面开发时，无法体现开发的h5界面和原生界面之间的层级关系的技术问题。

2、本发明第一方面提供了一种界面混合渲染方法，方法包括：

3、通过游戏引擎对预设的第一待渲染界面进行加载并遍历所述第一待渲染界面的界面节点，其中所述界面节点包括原生界面节点和h5界面节点；

4、当所述游戏引擎遍历的界面节点为原生界面节点时，通过游戏引擎根据所述原生界面节点进行渲染绘制，得到对应的第一渲染数据；

5、当所述游戏引擎遍历的界面节点为h5界面节点时，通过游戏引擎向预设的浏览器内核发送h5界面渲染请求，其中，所述h5界面渲染请求包括h5界面节点的h5界面参数；

6、通过所述浏览器内核基于所述h5界面渲染请求中的h5界面参数进行h5界面的加载和绘制，得到对应的第二渲染数据，并将所述第二渲染数据传递至所述游戏引擎；

7、通过所述游戏引擎根据所述第一渲染数据和所述第二渲染数据将所述第一待渲染界面绘制在预设的前端界面上。

8、本发明第二方面提供了一种界面混合渲染装置，包括：

9、节点遍历模块，用于通过游戏引擎对预设的第一待渲染界面进行加载并遍历所述第一待渲染界面的界面节点，其中所述界面节点包括原生界面节点和h5界面节点；

10、第一渲染模块，用于当所述游戏引擎遍历的界面节点为原生界面节点时，通过游戏引擎根据所述原生界面节点进行渲染绘制，得到对应的第一渲染数据；

11、请求发送模块，用于当所述游戏引擎遍历的界面节点为h5界面节点时，通过游戏引擎向预设的浏览器内核发送h5界面渲染请求，其中，所述h5界面渲染请求包括h5界面节点的h5界面参数；

12、第二渲染模块，用于通过所述浏览器内核基于所述h5界面渲染请求中的h5界面参数进行h5界面的加载和绘制，得到对应的第二渲染数据，并将所述第二渲染数据传递至所述游戏引擎；

13、界面绘制模块，用于通过所述游戏引擎根据所述第一渲染数据和所述第二渲染数据将所述第一待渲染界面绘制在预设的前端界面上。

14、本发明第三方面提供了一种界面混合渲染装置，包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；所述至少一个处理器调用所述存储器中的所述指令，以使得所述界面混合渲染设备执行上述的界面混合渲染方法的步骤。

15、本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的界面混合渲染方法的步骤。

16、上述界面混合渲染方法、装置、设备及存储介质，通过游戏引擎对预设的第一待渲染界面进行加载并遍历第一待渲染界面的界面节点，其中界面节点包括原生界面节点和h5界面节点；当游戏引擎遍历的界面节点为原生界面节点时，通过游戏引擎根据原生界面节点进行渲染绘制，得到对应的第一渲染数据；当游戏引擎遍历的界面节点为h5界面节点时，通过游戏引擎向预设的浏览器内核发送h5界面渲染请求，其中，h5界面渲染请求包括h5界面节点的h5界面参数；通过浏览器内核基于h5界面渲染请求中的h5界面参数进行h5界面的加载和绘制，得到对应的第二渲染数据，并将第二渲染数据传递至游戏引擎；通过游戏引擎根据第一渲染数据和第二渲染数据将第一待渲染界面绘制在预设的前端界面上。本方式中当浏览器内核或游戏引擎渲染过程遇到混合节点，请求另一方对界面进行绘制，最终生成渲染数据传回请求方，请求方再对渲染数据进行渲染，由于混合渲染，各界面存在层级关系，保证了各界面的遮挡效果正常。

17、本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

18、为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

技术特征：

1.一种界面混合渲染方法，其特征在于，所述界面混合渲染方法包括：

2.根据权利要求1所述的界面混合渲染方法，其特征在于，在所述通过游戏引擎对预设的第一待渲染界面进行加载并遍历所述第一待渲染界面的界面节点之前，还包括：

3.根据权利要求2所述的界面混合渲染方法，其特征在于，所述h5界面参数包括资源链接信息和界面尺寸信息；

4.根据权利要求3所述的界面混合渲染方法，其特征在于，在所述通过所述浏览器内核基于所述界面显示效果和所述h5界面资源进行绘制，得到对应的第二渲染数据之前，还包括：

5.根据权利要求4所述的界面混合渲染方法，其特征在于，所述通过所述浏览器内核基于所述界面显示效果、所述h5界面的h5界面资源和界面节点进行绘制，得到对应的第二渲染数据包括：

6.根据权利要求1所述的界面混合渲染方法，其特征在于，所述将所述第二渲染数据传递至所述游戏引擎包括：

7.根据权利要求1所述的界面混合渲染方法，其特征在于，所述通过所述游戏引擎根据所述第一渲染数据和所述第二渲染数据将所述第一待渲染界面绘制在预设的前端界面上包括：

8.根据权利要求1所述的界面混合渲染方法，其特征在于，所述混合渲染方法还包括：

9.根据权利要求8所述的界面混合渲染方法，其特征在于，在所述通过浏览器内核对预设的第二待渲染界面进行加载并遍历所述第二待渲染界面的界面节点之前，还包括：

10.根据权利要求9所述的界面混合渲染方法，其特征在于，所述通过所述浏览器内核根据所述第三渲染数据和所述第四渲染数据将所述第二待渲染界面绘制在所述前端界面上包括：

11.一种界面混合渲染装置，其特征在于，所述界面混合渲染装置包括：

12.一种界面混合渲染设备，其特征在于，所述界面混合渲染设备包括：存储器和至少一个处理器，所述存储器中存储有指令；

13.一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，其特征在于，所述指令被处理器执行时实现如权利要求1-10中任意一项所述界面混合渲染方法的步骤。

技术总结
本发明提供了一种界面混合渲染方法、装置、设备及存储介质，该方法包括：控制游戏引擎对待渲染界面进行加载并遍历待渲染界面的界面节点；当遍历原生界面节点时，根据原生界面节点进行渲染绘制，得到第一渲染数据；当遍历H5界面节点时，向浏览器内核发送H5界面渲染请求；浏览器内核基于H5界面渲染请求中的H5界面参数进行H5界面的加载和绘制，得到第二渲染数据，并传递至游戏引擎；游戏引擎根据第一渲染数据和第二渲染数据进行渲染绘制。本方式中当浏览器内核或游戏引擎渲染过程遇到混合节点，请求另一方对界面进行绘制，最终生成渲染数据传回请求方，请求方再对渲染数据进行渲染，由于混合渲染，各界面存在层级关系，保证了各界面的遮挡效果正常。

技术研发人员：柳杰
受保护的技术使用者：网易（杭州）网络有限公司
技术研发日：
技术公布日：2024/1/14