CN113694523A - 基于移动端app的h5游戏显示方法、装置及计算机设备 - Google Patents

基于移动端app的h5游戏显示方法、装置及计算机设备 Download PDF

Info

Publication number
CN113694523A
CN113694523A CN202111003331.7A CN202111003331A CN113694523A CN 113694523 A CN113694523 A CN 113694523A CN 202111003331 A CN202111003331 A CN 202111003331A CN 113694523 A CN113694523 A CN 113694523A
Authority
CN
China
Prior art keywords
mobile terminal
page
game
terminal app
rendering
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111003331.7A
Other languages
English (en)
Inventor
吉小龙
陆谦
翁阳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Bilibili Technology Co Ltd
Original Assignee
Shanghai Bilibili Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Bilibili Technology Co Ltd filed Critical Shanghai Bilibili Technology Co Ltd
Priority to CN202111003331.7A priority Critical patent/CN113694523A/zh
Publication of CN113694523A publication Critical patent/CN113694523A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • AHUMAN NECESSITIES
    • A63SPORTS; GAMES; AMUSEMENTS
    • A63FCARD, BOARD, OR ROULETTE GAMES; INDOOR GAMES USING SMALL MOVING PLAYING BODIES; VIDEO GAMES; GAMES NOT OTHERWISE PROVIDED FOR
    • A63F13/00Video games, i.e. games using an electronically generated display having two or more dimensions
    • A63F13/50Controlling the output signals based on the game progress
    • A63F13/52Controlling the output signals based on the game progress involving aspects of the displayed game scene
    • AHUMAN NECESSITIES
    • A63SPORTS; GAMES; AMUSEMENTS
    • A63FCARD, BOARD, OR ROULETTE GAMES; INDOOR GAMES USING SMALL MOVING PLAYING BODIES; VIDEO GAMES; GAMES NOT OTHERWISE PROVIDED FOR
    • A63F13/00Video games, i.e. games using an electronically generated display having two or more dimensions
    • A63F13/60Generating or modifying game content before or while executing the game program, e.g. authoring tools specially adapted for game development or game-integrated level editor
    • A63F13/63Generating or modifying game content before or while executing the game program, e.g. authoring tools specially adapted for game development or game-integrated level editor by the player, e.g. authoring using a level editor
    • AHUMAN NECESSITIES
    • A63SPORTS; GAMES; AMUSEMENTS
    • A63FCARD, BOARD, OR ROULETTE GAMES; INDOOR GAMES USING SMALL MOVING PLAYING BODIES; VIDEO GAMES; GAMES NOT OTHERWISE PROVIDED FOR
    • A63F2300/00Features of games using an electronically generated display having two or more dimensions, e.g. on a television screen, showing representations related to the game
    • A63F2300/30Features of games using an electronically generated display having two or more dimensions, e.g. on a television screen, showing representations related to the game characterized by output arrangements for receiving control signals generated by the game device
    • A63F2300/308Details of the user interface
    • AHUMAN NECESSITIES
    • A63SPORTS; GAMES; AMUSEMENTS
    • A63FCARD, BOARD, OR ROULETTE GAMES; INDOOR GAMES USING SMALL MOVING PLAYING BODIES; VIDEO GAMES; GAMES NOT OTHERWISE PROVIDED FOR
    • A63F2300/00Features of games using an electronically generated display having two or more dimensions, e.g. on a television screen, showing representations related to the game
    • A63F2300/60Methods for processing data by generating or executing the game program
    • A63F2300/66Methods for processing data by generating or executing the game program for rendering three dimensional images

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本申请公开了一种基于移动端APP的H5游戏显示方法、装置及计算机设备,该方法包括:通过JS引擎构建虚拟环境,在所述虚拟环境下建立H5页面模板;将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定;获取待显示的目标H5游戏的资源数据,确定出所述H5页面模板上的资源渲染方法;触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,从而更新所述移动端APP页面对应的Native视图。本申请还提供一种计算机可读存储介质。本申请将H5游戏数据在JS引擎下执行的渲染操作与移动端OpenGL ES下的移动端APP页面的渲染操作绑定,并实现同步执行渲染操作,从而缩短了渲染耗时,提高了渲染效率。

Description

基于移动端APP的H5游戏显示方法、装置及计算机设备
技术领域
本申请涉及互联网技术领域,尤其涉及一种基于移动端APP的H5游戏显示方法、装置及计算机设备。
背景技术
随着网络技术的发展,现在的网站信息量越来越大,一个网页上包含的图像、动画、布局、导航等等信息也极其丰富,网页的显示效果越来越动人。然而,网页在显示过程中需要加载的数据量也越来越多了。而对于网页的加载,一般都是根据用户的访问请求加载对应的网页,因此,网页包含的数据量越多,加载所需要的时间也就越长,用户等待的时间也就越长。
一般来说,页面资源通常会以H5(HTML5)页面形式进行显示,或者也可以直接在移动端APP页面进行显示。其中,H5页面是使用JavaScript语言开发的,运行在浏览器环境下。移动端APP无法直接运行JavaScript程序,只能通过WebView加载和显示页面资源。WebView相当于一个浏览器,WebView与外部模块只能通过文本通讯,从而获取待显示的数据资源。然而,通过WebView显示H5页面的过程中,需要构建很多环境状态,从而保证与Canvas渲染出来的页面效果,因此,也导致移动端APP的CPU和内存会额外消耗。H5游戏是H5页面的一种,H5游戏是基于H5实现的页面游戏。目前,由于H5页面在移动端APP上显示过程中渲染耗时,效率较低,限制了很多H5游戏移植到移动端APP的应用。
也就是说,现有技术中,移动端APP在显示H5游戏数据时,渲染过程耗时,效率低下。
发明内容
本申请提出一种基于移动端APP的H5游戏显示方法、装置及计算机设备,能够解决现有技术中移动端APP显示H5游戏的过程中渲染耗时,效率低下的问题。
首先,为实现上述目的,本申请提供一种基于移动端APP的H5游戏显示方法,所述方法包括:
通过JS引擎构建虚拟环境,在所述虚拟环境下建立H5页面模板;将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定;获取待显示的目标H5游戏的资源数据,确定出所述H5页面模板上的资源渲染方法;触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,从而更新所述移动端APP页面对应的Native视图。
在一个例子中,所述H5页面模板包括H5游戏对应的所有功能组件;所述将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定,包括:将所述H5页面模板的每一个类别的功能组件与移动端APP页面的相同类别的功能组件进行对象映射。
在一个例子中,所述确定出所述H5页面模板上的资源渲染方法,包括:根据所述目标H5游戏的资源数据确定出所述H5页面模板上的第一组件的资源渲染方法,所述第一组件为所述H5页面模板上的任一组件;所述触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,包括:触发所述移动端APP页面上对应的第二组件根据所述第一组件的资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,其中,所述第二组件与所述第一组件具有对象映射关系。
在一个例子中,所述将所述H5页面模板的每一个类别的功能组件与移动端APP页面的相同类别的功能组件进行对象映射,包括:将所述H5页面模板下的JS对象与所述移动端APP页面下的C++对象进行映射绑定,所述映射绑定包括JS方法绑定,常量绑定和枚举绑定。
在一个例子中,所述将所述H5页面模板下的JS对象与所述移动端APP页面下的C++对象进行映射绑定,包括:遍历出所述移动端App页面下所有的功能组件,查询出每一个功能组件对应的实现类和/或函数方法;通过JS引擎以及所述实现类和/或函数方法在所述虚拟环境下生成H5页面模板中的类模板和/或函数模板;将所述类模板和/或函数模板与所述移动端APP页面下的对应的功能组件进行绑定。
在一个例子中,所述获取待显示的目标H5游戏的资源数据包括:将所述目标H5游戏的资源数据存储至预设的共享内存,所述共享内存提供给所述H5页面模板的渲染进程和所述移动端APP页面的渲染进程进行调用。
在一个例子中,所述共享内存为所述JS引擎下的ArrayBuffer类型的存储单元。
在一个例子中,所述触发所述移动端APP页面上对应的第二组件根据所述第一组件的资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,包括:触发所述第二组件根据所述第一组件的资源渲染方法调用预设的OpenGL-ES接口并将所述目标H5游戏的资源数据渲染到所述Native视图。
在一个例子中,当所述目标H5游戏包括多个H5子页面时,所述方法还包括:将所述目标H5游戏的所有子页面的上下文分别存储到移动端APP页面下的上下文存储集;获取所述H5页面模板上从第一H5子页面切换到第二H5子页面的切换调用上下文的切换指令,其中,所述第一H5子页面和所述第二H5子页面为所述目标H5游戏下的任意两个子页面;根据所述切换指令直接从所述上下文存储集切换到对应的上下文用于所述移动端APP页面渲染。
此外,为实现上述目的,本申请还提供一种基于移动端APP的H5游戏显示装置,所述装置包括:
建立模块,用于通过JS引擎构建虚拟环境,在所述虚拟环境下建立H5页面模板;映射模块,用于将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定;获取模块,用于获取待显示的目标H5游戏的资源数据,确定出所述H5页面模板上的资源渲染方法;渲染模块,用于触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,从而更新所述移动端APP页面对应的Native视图。
进一步地,本申请还提出一种计算机设备,所述计算机设备包括存储器、处理器,所述存储器上存储有可在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现如上述的基于移动端APP的H5游戏显示方法的步骤。
进一步地,为实现上述目的,本申请还提供一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序可被至少一个处理器执行,以使所述至少一个处理器执行如上述的基于移动端APP的H5游戏显示方法的步骤。
相较于现有技术,本申请所提出的基于移动端APP的H5游戏显示方法、装置、计算机设备及计算机可读存储介质,能够通过JS引擎构建虚拟环境,在所述虚拟环境下建立H5页面模板;将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定;获取待显示的目标H5游戏的资源数据,确定出所述H5页面模板上的资源渲染方法;触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,从而更新所述移动端APP页面对应的Native视图。通过将H5游戏数据在JS引擎下执行的渲染操作与移动端OpenGL ES下的移动端APP页面的渲染操作绑定,并实现同步执行渲染操作,从而缩短了渲染耗时,提高了渲染效率。
附图说明
图1是本申请一实施例的应用环境示意图;
图2是本申请基于移动端APP的H5游戏显示方法一具体实施例的流程示意图;
图3是本申请一示例性例子JS引擎执行H5页面模板的组件注册的框架效果图;
图4是是本申请一示例性例子构建H5页面模板的流程效果图;
图5是本申请一示例性例子将JS环境下的组件执行对象映射到C++环境下的组件的效果图;
图6是本申请一示例性例子通过共享内存时序快速数据交互的流程效果图;
图7是是本申请一示例性例子移动终端APP显示H5游戏页面的流程效果图;
图8是本申请一示例性例子通过绑定Canvas消除上下文切换的流程效果图;
图9是本申请基于移动端APP的H5游戏显示装置一实施例的程序模块示意图;
图10是本申请计算机设备一可选的硬件架构的示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处所描述的具体实施例仅用以解释本申请,并不用于限定本申请。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
需要说明的是,在本申请中涉及“第一”、“第二”等的描述仅用于描述目的,而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此,限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外,各个实施例之间的技术方案可以相互结合,但是必须是以本领域普通技术人员能够实现为基础,当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在,也不在本申请要求的保护范围之内。
图1是本申请一实施例的应用环境示意图。参阅图1所示,所述计算机设备1与数据服务器2连接。在本实施例中,所述计算机设备1可作为手机、平板、便携设备或者其他具有显示功能的移动端电子设备;所述数据服务器2可作为手机、平板、便携设备、PC机或者服务器。当然,在其他实施例中,所述计算机设备1也可以作为独立的功能模块,然后附加到手机等移动终端上,从而实现将H5页面快速,高效地渲染显示到所述移动端的APP页面。
所述计算机设备1接收到用户触发的对于目标H5游戏的访问请求时,比如,用户通过点击或触控的方式通过所述计算机设备1提供的交互界面触发对于目标H5游戏的访问请求,则可以向所述数据服务器2发送所述目标H5游戏的资源请求,然后接收由所述数据服务器2发送过来的所述目标H5游戏的资源,然后渲染到所述计算机设备1预设的APP页面。具体包括:构建虚拟环境,并在所述虚拟环境下建立包括对应H5游戏的功能组件的H5页面模板;将所述H5页面模板的每一个类别的功能组件与移动端APP页面的相同类别的功能组件进行对象映射;获取待显示的目标H5游戏的资源数据,根据所述目标H5游戏的资源数据确定出所述H5页面模上的第一组件的资源渲染方法,所述第一组件为所述H5页面模板上的任一组件;触发所述移动端APP页面上对应的第二组件根据所述第一组件的资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,其中,所述第二组件与所述第一组件具有对象映射关系。
实施例一
图2是本申请基于移动端APP的H5游戏显示方法一实施例的流程示意图。可以理解,本方法实施例中的流程图不用于对执行步骤的顺序进行限定。下面以计算机设备1为执行主体进行示例性描述。
如图2所示,所述基于移动端APP的H5游戏显示方法可以包括步骤S200~S206。
步骤S200,通过JS引擎构建虚拟环境,在所述虚拟环境下建立H5页面模板。
步骤S202,将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定。
具体的,所述H5页面模板包括H5游戏对应的所有功能组件;所述计算机设备1将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定,包括:将所述H5页面模板的每一个类别的功能组件与移动端APP页面的相同类别的功能组件进行对象映射。
在本实施例中,所述计算机设备1接收到用户触发的对于目标H5游戏的访问请求时,比如,用户通过点击或触控的方式通过所述计算机设备1提供的交互界面触发对于目标H5游戏的访问请求,则可以向所述数据服务器发送所述目标H5游戏的资源请求,然后接收由所述数据服务器发送过来的所述目标H5游戏的资源。然而,由于所述计算机设备1为移动终端,并不支持JS语言的应用的运行,或者运行JS语言的应用会出错,因此,所述计算机设备1先构建一个虚拟环境,所述虚拟环境可以支持JS语言的应用的运行。
所述计算机设备1通过JS引擎实现对于支持JS语言的虚拟环境的构建,以及实现对于所述目标H5游戏在所述虚拟环境中执行渲染显示的过程。在本实施例中,所述计算机设备1构建好所述虚拟环境后,则在所述虚拟环境下建立H5页面模板。其中,所述H5页面模板仅包括H5游戏的功能组件,也就是H5页面的基本要素,比如Canvas,Canvas作为显示页面的画布,是渲染出H5页面的主体部分;而H5页面的其他要素的模板,为了减少没有必要的引擎消耗,可以选择性地不去建立。所述H5页面模板的建立,只是为了能够实现所述目标H5游戏的资源能够渲染到所述H5页面模板,从而完整显示出对应的页面效果。
当然,所述计算机设备1在建立H5页面模板的过程中,还会将所述H5页面模板的每一个类别的功能组件与移动端APP页面的相同类别的功能组件进行对象映射。
在本实施例中,所述计算机设备1通过所述H5页面模板的每一个类别的功能组件与移动端APP页面的相同类别的功能组件进行对象映射,包括:将所述H5页面模板下的JS对象与所述移动端APP页面下的C++对象进行映射绑定,所述映射绑定包括JS方法绑定,常量绑定和枚举绑定。其中,JS方法,是能够在对象上执行的动作,JS方法是包含函数定义的属性;常量和枚举可以对于JS方法中的属性值的描述。所述计算机设备1通过对H5页面模板下的JS对象和移动端APP页面下的C++对象进行映射绑定之后,那么,H5页面模板下的JS对象执行一个动作之后,移动端APP页面下的C++对象则能够根据映射关系执行对应的动作。
在本实施例中,所述计算机设备1通过预设的JS引擎将所述H5页面模板的每一个类别的功能组件与移动端APP页面的相同类别的功能组件进行对象映射,得到对象映射表。所述对象映射表描述了具有对象映射关系的两种之间的联动关系,比如,当其中一方执行一个动作后,另一方则执行相同的动作,或者执行对象映射表中描述的另一个动作。在本实施例中,由于所述计算机设备1需要将所述目标H5游戏完整,高效地渲染出来,因此,所述虚拟环境下的H5页面模板下的功能组件与所述移动端APP页面下的功能组件是一种执行相同动作的对象映射关系。
在一示例性例子中,所述计算机设备1将所述H5页面模板下的JS对象与移动端APP页面下的C++对象进行映射绑定,包括:遍历出所述移动端App页面下所有的功能组件,查询出每一个功能组件对应的实现类和/或函数方法;通过JS引擎以及所述实现类和/或函数方法在所述虚拟环境下生成H5页面模板中的类模板和/或函数模板;将所述类模板和/或函数模板与所述移动端APP页面下的对应的功能组件进行绑定。
如图3所示,图3是本申请一示例性例子JS引擎执行H5页面模板的组件注册的框架效果图。
在本实施例中,所述计算机设备1在所述C++环境下将H5页面下的功能组件要绑定的移动端App页面下的功能组件,包括注册函数和组件,注册到Register注册单元,从而得到注册函数集和组件类别集;其中,注册函数集中的每一个函数都能执行绑定,包括方法绑定BIND_FUNCTION,常量绑定BIND_CONST和枚举绑定BIND_ENUM;组件类别集则包括对应的注册类别执行REGISTER_CLASS_IMPLEMENT。通过对H5页面模板的组件注册,能够绑定到对象的方法、常量和枚举。因此,在虚拟环境下,可以通过查询注册单元查询出H5页面模板包括的功能组件,然后通过JS引擎接口构建H5页面模板。
请继续参阅图4,图4是本申请一示例性例子构建H5页面模板的流程效果图。
在本实施例中,所述计算机设备1先执行JS引擎对象构造函数回调,通过JS引擎构造函数来构造出JS对象模板,并通过类名从预设的函数集FunctionMap中查询注册函数集合;然后遍历函数集合,判断其中的函数是否为常规JS方法,如果是,则构造对应的JS方法模板;如果否,则继续判断是否为Get或Set方法,如果是,则构造JS属性模板;如果否,则判断为空对象;最后,根据构造的JS方法模板和JS属性模板,继续构造JS对象,构造函数方法模板,最终实现对H5页面模板的构建。
如图5所示,图5是本申请一示例性例子将JS环境下的组件执行对象映射到C++环境下的组件的效果图。其中,所述计算机设备1通过JS引擎接口实现JS环境下的组件与C++环境下的组件进行对象映射,也就是绑定BIND,至少包括方法绑定BIND_FUNCTION和常量绑定BIND_CONST。例如,JS环境下的WebGLRenderingContext,对象映射到C++环境下的BindingWebGLContext;然后再逐一对两个组件下的子组件进行对象映射,比如WebGLRenderingContext下的DEPTH_STENCIL对象映射到BindingWebGLContext下的GL_DEPTH_STENCIL_OES;然后再将DEPTH_STENCIL下的activeTexture():Void对象映射到GL_DEPTH_STENCIL_OES下的activeTexture():Void。通过以上方式,实现两个组件的全部对象映射。
步骤S204,获取待显示的目标H5游戏的资源数据,确定出所述H5页面模板上的资源渲染方法。
步骤S206,触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,从而更新所述移动端APP页面对应的Native视图。
具体的,所述计算机设备1确定出所述H5页面模板上的资源渲染方法,包括:根据所述目标H5游戏的资源数据确定出所述H5页面模板上的第一组件的资源渲染方法,所述第一组件为所述H5页面模板上的任一组件;所述计算机设备1触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,包括:触发所述移动端APP页面上对应的第二组件根据所述第一组件的资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,其中,所述第二组件与所述第一组件具有对象映射关系。
在本实施例中,所述计算机设备1在将所述H5页面模板上的组件与移动端APP页面上的组件进行对象映射之后,那么,则可以进一步根据所述目标H5游戏的资源数据确定出所述H5页面模板上的第一组件的资源渲染方法,比如虚拟执行将待显示的目标H5游戏的资源数据渲染到所述H5页面模板的过程,然后监控到需要执行的渲染方法;然后触发所述移动端APP页面上对应的第二组件根据所述第一组件的资源渲染方法执行对所述目标H5游戏的资源数据的渲染操。
在本实施例中,所述计算机设备1获取待显示的目标H5游戏的资源数据,包括:将所述目标H5游戏的资源数据存储至预设的共享内存,所述共享内存提供给所述H5页面模板的渲染进程和所述移动端APP页面的渲染进程进行调用。其中,所述共享内存为所述JS引擎下的ArrayBuffer类型的存储单元。在JS引擎里面有一个ArrayBuffer的类型存储单元,该类型可以存储二进制数据,并且可以通过JS引擎直接访问该内存空间。通过ArrayBuffer可以实现JS与外部模块,比如移动端的Native模块实现内存共享,通过共享内存规避大数据传输的性能损耗问题。而且,在回调外部模块时先将数据存在ArrayBuffer内,外部模块收到回调时通过ArrayBuffer获取到指向存储数据的内存空间的指针,通过指针直接访问内存处理数据,实现高效快捷的数据交互。
在一具体实施例中,所述计算机设备1触发所述移动端APP页面上对应的第二组件根据所述第一组件的资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,包括:触发所述第二组件根据所述第一组件的资源渲染方法调用预设的OpenGL-ES接口并将所述目标H5游戏的资源数据渲染到所述Native视图。
如图6所示,图6是本申请一示例性例子通过共享内存时序快速数据交互的流程效果图。
在本实施例中,所述计算机设备1在接收到目标H5游戏对应的数据资源后,一方面可以在JS环境下通过JS方法执行将所述目标H5游戏的资源数据构造ArrayBuffer类型数据,然后作为写入传输数据存储到共享内存;另一方面通过JS引擎接口将执行绑定函数的指令发送至C++环境,使得C++环境下触发回调函数方法,从而实现预设的绑定函数执行;所述绑定函数执行过程中,可以通过JS引擎接口获取所述目标H5游戏的数据资源对应的ArrayBuffer内存指针,然后通过该ArrayBuffer内存指针从共享内存中读取所述目标H5游戏的数据资源。通过构造ArrayBuffer数据,以及共享内存的方式,能够规避大数据传输的性能损耗问题。
如图7所示,图7是本申请一示例性例子移动终端APP显示H5游戏页面的流程效果图。
在本实施例中,移动终端执行APP启动后,先要获取基于JS语言,即JavaScript语言,的H5游戏页面对应的代码,比如H5游戏代码;然后将其注入到由JS引擎构建的Canvas模拟环境,也就是JS引擎中构建的模拟环境下的Canvas,并在模拟环境下编译运行H5游戏代码,接着,调用该Canvas的渲染接口,也就是WebGL/Canvas2D接口进行渲染操作;其中,由于所述JS引擎中构建的模拟环境中的对象与移动终端自身的移动端环境中的对象预先执行了映射绑定,因此,当JS引擎中构建的模拟环境中执行了调用WebGL/Canvas2D接口进行渲染操作时,移动端环境则触发调用预设的OpenGL ES接口执行渲染操作,也就是通过调用移动端OpenGL ES对执行与所述JS引擎中构建的模拟环境下Canvas执行的渲染操作相同的渲染操作,从而对移动端Native渲染视图执行视图更新。
当然,在另一具体实施例中,当所述目标H5游戏包括多个H5子页面时,所述计算机设备1还会执行以下步骤:将所述目标H5游戏的所有子页面的上下文分别存储到移动端APP页面下的上下文存储集;获取所述H5页面模板上从第一H5子页面切换到第二H5子页面的切换调用上下文的切换指令,其中,所述第一H5子页面和所述第二H5子页面为所述目标H5游戏下的任意两个子页面;根据所述切换指令直接从所述上下文存储集切换到对应的上下文用于移动端APP页面渲染。在本实施例中,所述目标H5游戏包括多个H5子页面时,为了避免没有意义的重复绘制,一般都会创建多个离屏的Canvas,这些Canvas一般都是存储碎片的局部场景,这些Canvas依赖独立的RenderContext,更新时需要切换到相应的RenderContext,频繁的更新会导致频繁的切换,大量的切换对性能的损耗不可忽视。
如图8所示,图8是本申请一示例性例子通过绑定Canvas消除上下文切换的流程效果图。
在本实施例中,JS环境下的CanvasA和CanvasB对象映射到C++环境下的BindingA和BindingB,而BindingA和BindingB则直接控制OpenGL ES环境下的ContextA和ContextB的显示。其中ContextA和ContextB对应的上下文分别为TextureA和TextureB。当OpenGL ES环境下的ContextA需要切换到ContextA的上下文TextureB时,只需要在JS环境下有CanvasA执行一个BindingCanvasB的方法,然后,C++环境下的BindingA则可以直接控制OpenGL ES环境下的ContextA执行BindingTextureB,从而实现将上下文切换到TextureB。
其中,虽然Cavans是相互独立的,但是模拟Canvas是通过OpenGL ES实现的,使用OpenGL ES的shareContext可以共享上下文,其他RenderContext可以直接方法显存里面的数据。这种方式没有标准的H5接口,需要在JS引擎里面绑定一个方法blBindCanvasTexture(),这个方法可以绑定任何Canvas。底层实现是通过Cavans去查找到对应的Texture,通过更新Texture直接更新Canvas。
综上所述,本实施例所提出的基于移动端APP的H5游戏显示方法能够通过JS引擎构建虚拟环境,在所述虚拟环境下建立H5页面模板;将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定;获取待显示的目标H5游戏的资源数据,确定出所述H5页面模板上的资源渲染方法;触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,从而更新所述移动端APP页面对应的Native视图。通过将H5游戏数据在JS引擎下执行的渲染操作与移动端OpenGL ES下的移动端APP页面的渲染操作绑定,并实现同步执行渲染操作,从而缩短了渲染耗时,提高了渲染效率。
实施例二
图9示意性示出了根据本申请实施例二的基于移动端APP的H5游戏显示装置的框图,该基于移动端APP的H5游戏显示装置可以被分割成一个或多个程序模块,一个或者多个程序模块被存储于存储介质中,并由一个或多个处理器所执行,以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段,以下描述将具体介绍本实施例中各程序模块的功能。
如图9所示,该基于移动端APP的H5游戏显示装置400可以包括建立模块410、映射模块420、获取模块430和渲染模块440,其中:
建立模块410,用于通过JS引擎构建虚拟环境,在所述虚拟环境下建立H5页面模板。
映射模块420,用于将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定。
获取模块430,用于获取待显示的目标H5游戏的资源数据,确定出所述H5页面模板上的资源渲染方法。
渲染模块440,用于触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,从而更新所述移动端APP页面对应的Native视图。
在示例性的实施例中,所述H5页面模板包括H5游戏对应的所有功能组件;所述映射模块420,还用于:将所述H5页面模板的每一个类别的功能组件与移动端APP页面的相同类别的功能组件进行对象映射;所述获取模块430,还用于:根据所述目标H5游戏的资源数据确定出所述H5页面模板上的第一组件的资源渲染方法,所述第一组件为所述H5页面模板上的任一组件;所述渲染模块440,还用于:触发所述移动端APP页面上对应的第二组件根据所述第一组件的资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,其中,所述第二组件与所述第一组件具有对象映射关系。
在示例性的实施例中,映射模块420,还用于:将所述H5页面模板下的JS对象与所述移动端APP页面下的C++对象进行映射绑定,所述映射绑定包括JS方法绑定,常量绑定和枚举绑定。包括:遍历出所述移动端App页面下所有的功能组件,查询出每一个功能组件对应的实现类和/或函数方法;通过JS引擎以及所述实现类和/或函数方法在所述虚拟环境下生成H5页面模板中的类模板和/或函数模板;将所述类模板和/或函数模板与所述移动端APP页面下的对应的功能组件进行绑定。
在示例性的实施例中,获取模块430,还用于,将所述目标H5游戏的资源数据存储至预设的共享内存,所述共享内存提供给所述H5页面模板的渲染进程和所述移动端APP页面的渲染进程进行调用。其中,所述共享内存为所述JS引擎下的ArrayBuffer类型的存储单元。
在示例性的实施例中,渲染模块440,还用于,触发所述第二组件根据所述第一组件的资源渲染方法调用预设的OpenGL-ES接口并将所述目标H5游戏的资源数据渲染到所述Native视图。以及,将所述目标H5游戏的所有子页面的上下文分别存储到移动端APP页面下的上下文存储集;获取所述H5页面模板上从第一H5子页面切换到第二H5子页面的切换调用上下文的切换指令,其中,所述第一H5子页面和所述第二H5子页面为所述目标H5游戏下的任意两个子页面;根据所述切换指令直接从所述上下文存储集切换到对应的上下文用于移动端APP页面渲染。
实施例三
图10示意性示出了根据本申请实施例三的适于实现基于移动端APP的H5游戏显示方法的计算机设备1的硬件架构示意图。本实施例中,计算机设备1是一种能够按照事先设定或者存储的指令,自动进行数值计算和/或信息处理的设备。例如,可以是具有网关功能的机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器,或者多个服务器所组成的服务器集群)等。如图10所示,计算机设备1至少包括但不限于:可通过系统总线相互通信链接存储器510、处理器520、网络接口530。其中:
存储器510至少包括一种类型的计算机可读存储介质,可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如,SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中,存储器510可以是计算机设备1的内部存储模块,例如该计算机设备1的硬盘或内存。在另一些实施例中,存储器510也可以是计算机设备1的外部存储设备,例如该计算机设备1上配备的插接式硬盘,智能存储卡(SmartMedia Card,简称为SMC),安全数字(Secure Digital,简称为SD)卡,闪存卡(Flash Card)等。当然,存储器510还可以既包括计算机设备1的内部存储模块也包括其外部存储设备。本实施例中,存储器510通常用于存储安装于计算机设备1的操作系统和各类应用软件,例如基于移动端APP的H5游戏显示方法的程序代码等。此外,存储器510还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器520在一些实施例中可以是中央处理器(Central Processing Unit,简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器520通常用于控制计算机设备1的总体操作,例如执行与计算机设备1进行数据交互或者通信相关的控制和处理等。本实施例中,处理器520用于运行存储器510中存储的程序代码或者处理数据。
网络接口530可包括无线网络接口或有线网络接口,该网络接口530通常用于在计算机设备1与其他计算机设备之间建立通信链接。例如,网络接口530用于通过网络将计算机设备1与外部终端相连,在计算机设备1与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(GlobalSystem of Mobile communication,简称为GSM)、宽带码分多址(Wideband Code DivisionMultiple Access,简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
需要指出的是,图10仅示出了具有部件510-530的计算机设备,但是应理解的是,并不要求实施所有示出的部件,可以替代的实施更多或者更少的部件。
在本实施例中,存储于存储器510中的基于移动端APP的H5游戏显示方法的程序代码还可以被分割为一个或者多个程序模块,并由一个或多个处理器(本实施例为处理器520)所执行,以完成本申请实施例。
实施例四
本实施例还提供一种计算机可读存储介质,计算机可读存储介质其上存储有计算机程序,计算机程序被处理器执行时实现以下步骤:
通过JS引擎构建虚拟环境,在所述虚拟环境下建立H5页面模板;将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定;获取待显示的目标H5游戏的资源数据,确定出所述H5页面模板上的资源渲染方法;触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,从而更新所述移动端APP页面对应的Native视图。
本实施例中,计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如,SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中,计算机可读存储介质可以是计算机设备的内部存储单元,例如该计算机设备的硬盘或内存。在另一些实施例中,计算机可读存储介质也可以是计算机设备的外部存储设备,例如该计算机设备上配备的插接式硬盘,智能存储卡(Smart Media Card,简称为SMC),安全数字(Secure Digital,简称为SD)卡,闪存卡(Flash Card)等。当然,计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中,计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件,例如实施例中基于移动端APP的H5游戏显示方法的程序代码等。此外,计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。
显然,本领域的技术人员应该明白,上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现,它们可以集中在单个的计算装置上,或者分布在多个计算装置所组成的网络上,可选地,它们可以用计算装置可执行的程序代码来实现,从而,可以将它们存储在存储装置中由计算装置来执行,并且在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤,或者将它们分别制作成各个集成电路模块,或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样,本申请实施例不限制于任何特定的硬件和软件结合。
以上仅为本申请实施例的优选实施例,并非因此限制本申请实施例的专利范围,凡是利用本申请实施例说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本申请实施例的专利保护范围内。

Claims (12)

1.一种基于移动端APP的H5游戏显示方法,其特征在于,所述方法包括:
通过JS引擎构建虚拟环境,在所述虚拟环境下建立H5页面模板;
将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定;
获取待显示的目标H5游戏的资源数据,确定出所述H5页面模板上的资源渲染方法;
触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,从而更新所述移动端APP页面对应的Native视图。
2.如权利要求1所述的基于移动端APP的H5游戏显示方法,其特征在于,所述H5页面模板包括H5游戏对应的所有功能组件;所述将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定,包括:
将所述H5页面模板的每一个类别的功能组件与移动端APP页面的相同类别的功能组件进行对象映射。
3.如权利要求2所述的基于移动端APP的H5游戏显示方法,其特征在于,
所述确定出所述H5页面模板上的资源渲染方法,包括:
根据所述目标H5游戏的资源数据确定出所述H5页面模板上的第一组件的资源渲染方法,所述第一组件为所述H5页面模板上的任一组件;
所述触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,包括:
触发所述移动端APP页面上对应的第二组件根据所述第一组件的资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,其中,所述第二组件与所述第一组件具有对象映射关系。
4.如权利要求2所述的基于移动端APP的H5游戏显示方法,其特征在于,所述将所述H5页面模板的每一个类别的功能组件与移动端APP页面的相同类别的功能组件进行对象映射,包括:
将所述H5页面模板下的JS对象与所述移动端APP页面下的C++对象进行映射绑定,所述映射绑定包括JS方法绑定,常量绑定和枚举绑定。
5.如权利要求4所述的基于移动端APP的H5游戏显示方法,其特征在于,所述将所述H5页面模板下的JS对象与所述移动端APP页面下的C++对象进行映射绑定,包括:
遍历出所述移动端App页面下所有的功能组件,查询出每一个功能组件对应的实现类和/或函数方法;
通过JS引擎以及所述实现类和/或函数方法在所述虚拟环境下生成H5页面模板中的类模板和/或函数模板;
将所述类模板和/或函数模板与所述移动端APP页面下的对应的功能组件进行绑定。
6.如权利要求1所述的基于移动端APP的H5游戏显示方法,其特征在于,所述获取待显示的目标H5游戏的资源数据,包括:
将所述目标H5游戏的资源数据存储至预设的共享内存,所述共享内存提供给所述H5页面模板的渲染进程和所述移动端APP页面的渲染进程进行调用。
7.如权利要求6所述的基于移动端APP的H5游戏显示方法,其特征在于,所述共享内存为所述JS引擎下的ArrayBuffer类型的存储单元。
8.如权利要求3所述的基于移动端APP的H5游戏显示方法,其特征在于,所述触发所述移动端APP页面上对应的第二组件根据所述第一组件的资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,包括:
触发所述第二组件根据所述第一组件的资源渲染方法调用预设的OpenGL-ES接口并将所述目标H5游戏的资源数据渲染到所述Native视图。
9.如权利要求1-8中任一项所述的基于移动端APP的H5游戏显示方法,其特征在于,当所述目标H5游戏包括多个H5子页面时,所述方法还包括:
将所述目标H5游戏的所有子页面的上下文分别存储到移动端APP页面下的上下文存储集;
获取所述H5页面模板上从第一H5子页面切换到第二H5子页面的切换调用上下文的切换指令,其中,所述第一H5子页面和所述第二H5子页面为所述目标H5游戏下的任意两个子页面;
根据所述切换指令直接从所述上下文存储集切换到对应的上下文用于所述移动端APP页面渲染。
10.一种基于移动端APP的H5游戏显示装置,其特征在于,所述装置包括:
建立模块,用于通过JS引擎构建虚拟环境,在所述虚拟环境下建立H5页面模板;
映射模块,用于将所述H5页面模板与移动端OpenGL ES下的移动端APP页面进行绑定;
获取模块,用于获取待显示的目标H5游戏的资源数据,确定出所述H5页面模板上的资源渲染方法;
渲染模块,用于触发所述移动端APP页面根据所述资源渲染方法执行对所述目标H5游戏的资源数据的渲染操作,从而更新所述移动端APP页面对应的Native视图。
11.一种计算机设备,其特征在于,所述计算机设备包括存储器、处理器,所述存储器上存储有可在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现如权利要求1-9中任一项所述的基于移动端APP的H5游戏显示方法的步骤。
12.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有计算机程序,所述计算机程序可被至少一个处理器执行,以使所述至少一个处理器执行如权利要求1-9中任一项所述的基于移动端APP的H5游戏显示方法的步骤。
CN202111003331.7A 2021-08-30 2021-08-30 基于移动端app的h5游戏显示方法、装置及计算机设备 Pending CN113694523A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111003331.7A CN113694523A (zh) 2021-08-30 2021-08-30 基于移动端app的h5游戏显示方法、装置及计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111003331.7A CN113694523A (zh) 2021-08-30 2021-08-30 基于移动端app的h5游戏显示方法、装置及计算机设备

Publications (1)

Publication Number Publication Date
CN113694523A true CN113694523A (zh) 2021-11-26

Family

ID=78656715

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111003331.7A Pending CN113694523A (zh) 2021-08-30 2021-08-30 基于移动端app的h5游戏显示方法、装置及计算机设备

Country Status (1)

Country Link
CN (1) CN113694523A (zh)

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080207322A1 (en) * 2005-03-21 2008-08-28 Yosef Mizrahi Method, System and Computer-Readable Code For Providing a Computer Gaming Device
US20110175923A1 (en) * 2009-08-28 2011-07-21 Amitt Mahajan Apparatuses, methods and systems for a distributed object renderer
US20130036196A1 (en) * 2011-08-05 2013-02-07 Xtreme Labs Inc. Method and system for publishing template-based content
CN103713891A (zh) * 2012-10-09 2014-04-09 阿里巴巴集团控股有限公司 一种在移动设备上进行图形渲染的方法和装置
US20150143227A1 (en) * 2013-11-18 2015-05-21 Microsoft Technology Licensing, Llc Enhanced event handler attachment
KR101580605B1 (ko) * 2014-06-27 2015-12-28 주식회사 디지털프로그 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법
CN110427586A (zh) * 2019-07-29 2019-11-08 苏州亿歌网络科技有限公司 一种页面显示方法、装置、设备及存储介质
CN112114808A (zh) * 2020-09-29 2020-12-22 深圳市欢太科技有限公司 页面渲染方法、装置、电子设备
CN112905939A (zh) * 2021-02-25 2021-06-04 平安普惠企业管理有限公司 Html5页面资源的加载方法、装置、设备及存储介质
CN112905179A (zh) * 2021-03-26 2021-06-04 中国建设银行股份有限公司 移动端h5页面生成方法、装置、电子设备和存储介质
CN113282360A (zh) * 2016-09-14 2021-08-20 阿里巴巴集团控股有限公司 2D canvas网页元素的渲染方法、装置及电子设备

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080207322A1 (en) * 2005-03-21 2008-08-28 Yosef Mizrahi Method, System and Computer-Readable Code For Providing a Computer Gaming Device
US20110175923A1 (en) * 2009-08-28 2011-07-21 Amitt Mahajan Apparatuses, methods and systems for a distributed object renderer
US20130036196A1 (en) * 2011-08-05 2013-02-07 Xtreme Labs Inc. Method and system for publishing template-based content
CN103713891A (zh) * 2012-10-09 2014-04-09 阿里巴巴集团控股有限公司 一种在移动设备上进行图形渲染的方法和装置
US20150143227A1 (en) * 2013-11-18 2015-05-21 Microsoft Technology Licensing, Llc Enhanced event handler attachment
KR101580605B1 (ko) * 2014-06-27 2015-12-28 주식회사 디지털프로그 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법
CN113282360A (zh) * 2016-09-14 2021-08-20 阿里巴巴集团控股有限公司 2D canvas网页元素的渲染方法、装置及电子设备
CN110427586A (zh) * 2019-07-29 2019-11-08 苏州亿歌网络科技有限公司 一种页面显示方法、装置、设备及存储介质
CN112114808A (zh) * 2020-09-29 2020-12-22 深圳市欢太科技有限公司 页面渲染方法、装置、电子设备
CN112905939A (zh) * 2021-02-25 2021-06-04 平安普惠企业管理有限公司 Html5页面资源的加载方法、装置、设备及存储介质
CN112905179A (zh) * 2021-03-26 2021-06-04 中国建设银行股份有限公司 移动端h5页面生成方法、装置、电子设备和存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
欧阳慧琴;陈福民;: "物理引擎与图形渲染引擎绑定的研究与实现", 计算机工程与设计, no. 21, pages 180 - 182 *

Similar Documents

Publication Publication Date Title
US11868785B2 (en) Application program page processing method and device
CN110691136B (zh) 数据交互方法、装置、电子设备及存储介质
CN108572965A (zh) 一种资源加载方法及装置
CN111639287A (zh) 一种页面处理方法、装置、终端设备及可读存储介质
CN109901834A (zh) 文档页面生成方法、装置、计算机设备和存储介质
CN107656729B (zh) 列表视图的更新装置、方法及计算机可读存储介质
CN111068328A (zh) 游戏广告配置表格的生成方法、终端设备及介质
CN111159597A (zh) 骨架屏的生成方法、系统、计算机设备及存储介质
CN111008290A (zh) 电网地理沿布图显示方法、装置、计算机设备和存储介质
CN115080016A (zh) 基于ue编辑器的扩展功能实现方法、装置、设备及介质
CN112114808A (zh) 页面渲染方法、装置、电子设备
CN111737614B (zh) 页面显示方法、装置、电子设备和存储介质
CN104714792A (zh) 多进程共享数据处理方法和装置
CN117234582A (zh) 一种项目代码处理方法、装置、电子设备及存储介质
CN107918643A (zh) 一种网页显示方法及终端
CN112068879A (zh) 基于配置化的客户端应用程序开发框架构建方法及装置
CN113694523A (zh) 基于移动端app的h5游戏显示方法、装置及计算机设备
CN112905931B (zh) 页面信息的展示方法、装置、电子设备及存储介质
CN114020187B (zh) 字体图标的显示方法、装置及电子设备
CN111581578B (zh) 接口请求处理方法和装置
CN114327395A (zh) 网页设计方法、装置、计算机设备、存储介质和产品
CN113885996A (zh) 用户界面的生成方法及装置
CN113961298A (zh) 一种页面切换方法、装置、设备及介质
CN114254232A (zh) 云产品页面生成方法、装置、计算机设备和存储介质
CN112817595A (zh) 界面渲染方法、装置、存储介质及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination