Page rendering method, device, medium and electronic device

Abstract

The present disclosure relates to a page rendering method, device, medium and electronic equipment, the method comprising: obtaining a code file of a target page to be rendered in a target game, wherein the code file is a code implemented based on a cross-platform development framework; determining a display mode of the target page; if the display mode of the target page is a mixed sorting mode, generating a texture identifier corresponding to the target page; determining a target display level corresponding to the texture identifier in the target game based on the texture identifier; and rendering content corresponding to the target page in a game page corresponding to the target display level in the target game based on a game rendering engine and the texture identifier. Thus, the code of the target page can be reused in multiple terminal devices, while achieving mixed sorting between the content display of the target page and the game page in the target game.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more specifically, to a page rendering method, apparatus, medium, and electronic device. Background Technology

[0002] There are many UI rendering methods for mobile devices, such as the common native UI rendering methods of Android and iOS, and the UI rendering methods for H5 pages in WebView. Game applications also have self-rendering engines, such as Unity and Cocos. However, the above rendering methods are not universal. If it is necessary to develop target pages for multiple game applications, the relevant technologies usually use H5 pages to achieve reuse on mobile clients and PCs. However, H5 pages are difficult to integrate seamlessly with game pages in game applications. Summary of the Invention

[0003] This summary section is provided to briefly introduce the concepts, which will be described in detail in the detailed description section below. This summary section is not intended to identify key or essential features of the claimed technical solution, nor is it intended to limit the scope of the claimed technical solution.

[0004] In a first aspect, this disclosure provides a page rendering method, the method comprising:

[0005] Obtain the code file of the target page to be rendered in the target game, wherein the code file is code implemented based on a cross-platform development framework;

[0006] Determine the display mode of the target page;

[0007] If the display mode of the target page is a mixed sorting mode, then generate a texture identifier corresponding to the target page;

[0008] Based on the texture identifier, the target display level corresponding to the texture identifier is determined in the target game;

[0009] In the target game and the game page corresponding to the target display level, the content corresponding to the target page is rendered based on the game rendering engine and the texture identifier.

[0010] Secondly, this disclosure provides a page rendering apparatus, the apparatus comprising:

[0011] The first acquisition module is used to acquire the code file of the target page to be rendered in the target game, wherein the code file is code implemented based on a cross-platform development framework;

[0012] The first determining module is used to determine the display mode of the target page;

[0013] The generation module is used to generate a texture identifier corresponding to the target page if the display mode of the target page is a mixed sorting mode.

[0014] The second determining module is used to determine the target display level corresponding to the texture identifier in the target game based on the texture identifier;

[0015] The first rendering module is used to render the content corresponding to the target page in the target game and the game page corresponding to the target display level, based on the game rendering engine and the texture identifier.

[0016] Thirdly, this disclosure provides a computer-readable medium having a computer program stored thereon, which, when executed by a processing device, implements the steps of the method described in the first aspect.

[0017] Fourthly, this disclosure provides an electronic device, comprising:

[0018] A storage device on which computer programs are stored;

[0019] A processing device for executing the computer program in the storage device to implement the steps of the method described in the first aspect.

[0020] The above technical solution enables code development of the target page based on a cross-platform development framework, achieving code reuse across multiple devices and effectively reducing development workload and technical requirements. Furthermore, during page rendering, the target display layer of the game page in the target game, used to display the content of the target page, is determined by the texture identifier corresponding to the target page. This allows for a mixed sorting of the target page's content display and the game page within the target game, facilitating integration between the target page and the game page and improving the smoothness of the game application's operation.

[0021] Other features and advantages of this disclosure will be described in detail in the following detailed description section. Attached Figure Description

[0022] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale. In the drawings:

[0023] Figure 1 This is a flowchart of a page rendering method provided according to one embodiment of the present disclosure;

[0024] Figure 2This is a diagram illustrating the hierarchical rendering methods in different rendering engines;

[0025] Figure 3 This is a schematic diagram of a page display in a game application provided according to one embodiment of the present disclosure;

[0026] Figure 4 This is an illustration of adding a target page display in a game application according to another embodiment of this disclosure;

[0027] Figure 5 This is a block diagram of a page rendering apparatus provided according to one embodiment of the present disclosure;

[0028] Figure 6 A schematic diagram of the structure of an electronic device suitable for implementing embodiments of the present disclosure is shown. Detailed Implementation

[0029] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0030] It should be understood that the steps described in the method embodiments of this disclosure may be performed in different orders and / or in parallel. Furthermore, the method embodiments may include additional steps and / or omit the steps shown. The scope of this disclosure is not limited in this respect.

[0031] The term "comprising" and its variations as used herein are open-ended inclusions, meaning "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Definitions of other terms will be given in the description below.

[0032] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0033] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0034] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0035] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0036] For example, upon receiving a user's active request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.

[0037] As an optional but non-limiting implementation, in response to a user's active request, sending a prompt message to the user can be done via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose "agree" or "disagree" to provide personal information to the electronic device.

[0038] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.

[0039] Meanwhile, it is understood that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and related provisions.

[0040] Figure 1 The diagram shown is a flowchart of a page rendering method according to an embodiment of the present disclosure. Figure 1 As shown, the method may include:

[0041] In step 11, the code file of the target page to be rendered in the target game is obtained. The code file is code implemented based on a cross-platform development framework.

[0042] The code implemented using a cross-platform development framework can be reused across multiple platforms without requiring different code development for different clients of the target game, nor does it require different development based on different programming languages. For example, the cross-platform development framework can be the React Native framework platform. React Native is a JavaScript framework that combines React with native code, rendering React components as native platform components. It allows for front-end page development based on JSX, mixed JS, CSS, HTML, etc., while developers can use JavaScript for page development. The React Native framework employs native development, using front-end code (such as JS code) to write business logic, and inherently supports rendering UI pages using native components on both Android and iOS platforms.

[0043] In step 12, the display mode of the target page is determined. The display mode can represent how the target page is displayed in the target game. Display modes can include mixed sorting mode, full-page mode, and window mode, etc. The target page can be an activity page added to the target game, such as a page developed for the target game's anniversary celebration, fan activities, etc.

[0044] For example, the display mode of the target page can be pre-configured, and its display mode can be determined based on the configuration information of the target page. The configuration information corresponding to the target page can be implemented through configuration files or fields, and this disclosure does not limit this.

[0045] In step 13, if the display mode of the target page is a mixed sorting mode, then the texture identifier corresponding to the target page is generated.

[0046] In this step, if the display mode of the target page is a mixed sorting mode, it means that the target page needs to be displayed in a mixed manner with the pages in the target game. If the target page is not the top-level page in the target game, the target page is inserted into the game page of the target game for display. The game page in the target game is used as the carrier for drawing the content of the target page. By sorting and displaying multiple game pages in the target game, the mixed arrangement of the target page display is achieved.

[0047] Furthermore, a rendering thread can be created to render the target page. Accordingly, the texture identifier can be generated based on the glGenTextures function. In OpenGL interface rendering, glGenTextures is a function used to generate textures, which can generate a texture ID (TextureID) as a unique identifier for the texture content corresponding to the target page, so that the corresponding target page can be uniquely determined based on the texture identifier.

[0048] In step 14, the target display layer corresponding to the texture identifier is determined in the target game based on the texture identifier.

[0049] In this embodiment, the game pages in the target game can be rendered as Unity pages based on the game rendering engine, and the various game pages are displayed in a hierarchical combination. Therefore, when the display mode of the developed target page is a mixed sorting mode, it means that the display hierarchy corresponding to the target page and the game page needs to be determined.

[0050] Furthermore, since the texture identifier uniquely identifies the target page, in this embodiment, the target display level corresponding to the texture identifier can be determined in the target game based on the texture identifier. In the target game, based on the binding relationship between the texture identifier and the target display level, a mixed sorting between the game page carrying the content of the target page corresponding to the texture identifier and the game pages inside the target game can be achieved.

[0051] The texture identifier can be a Texture ID, which identifies the memory address of each texture in the GPU memory. Each GPU texture (i.e., the canvas used to display the target page) has a unique Texture ID. Therefore, the texture identifier of the target page can be associated with the target display layer in the target game. This allows for reserving a scene for the target page in the target game, and then determining the corresponding target display layer based on the texture identifier. When displaying a game page at the target display layer, the corresponding target page can be identified based on its texture identifier, allowing the target page to be inserted into the target game for display.

[0052] In step 15, in the target game and the game page corresponding to the target display level, the content corresponding to the target page is rendered based on the game rendering engine and texture identifier.

[0053] In this embodiment, the content corresponding to the target page is carried by the game page in the target game. For example, the target page can be determined based on the texture identifier, and then the content description code of the target page can be rendered through the code file to display the specific content in the target page.

[0054] Therefore, the above technical solution allows for code development of the target page based on a cross-platform development framework, enabling code reuse across multiple devices and effectively reducing development workload and technical requirements. Furthermore, during page rendering, by determining the target display level of the game page in the target game for displaying the target page's content using the texture identifier corresponding to the target page, a mixed sorting of the target page's content display and the game page in the target game is achieved. This facilitates the integration of the target page and the game page, improving the smoothness of the game application's operation.

[0055] In one possible embodiment, the ReactNative framework platform incorporates the Three.js framework and the React-three-fiber framework into its JSI framework, enabling the target page's code file to be rendered based on the OpenGL interface.

[0056] In the embodiments of this disclosure, the rendering of the target page can be implemented using code developed on the React Native framework platform based on the OpenGL interface in the game rendering engine. If the display mode of the target page is determined to be a mixed sorting mode, the OpenGL environment can be initialized. This involves creating an OpenGL environment on the target page and creating relevant OpenGL configurations based on parameters from the target game, such as obtaining parameters EGLContext, EGLDisplay, and EGLConfig from the target game, thereby achieving environment configuration. The configuration of the OpenGL environment parameters can employ commonly used environment configuration methods in the art, and this disclosure does not limit this approach.

[0057] OpenGL (Open Graphics Library) is a cross-language, cross-platform application programming interface (API) used for rendering 2D and 3D vector graphics. For example... Figure 2 The diagram shown illustrates the hierarchical rendering methods in different rendering engines. Figure 2As shown, the underlying rendering engines of Android, the React Native framework, and games (such as Unity) all employ CPU / GPU rendering. On Android, to facilitate simpler rendering of more 2D UI elements, a layer above this uses components and a rendering framework provided by the Skia library. This encapsulates native Android components; in other words, Android UI can be understood as being based on Skia's rendering method. In game rendering engines, the next layer typically uses underlying 3D technologies such as OpenGL / Vulkan to render the UI. Therefore, when adding new target pages to a game, the significant differences in rendering principles and development languages ​​make it difficult to integrate the UI-level rendering.

[0058] In this embodiment of the disclosure, the cross-platform development framework is the ReactNative framework platform. The ReactNative framework platform can be built based on the ReactNative framework. The JSI framework in the ReactNative framework can be used to support OpenGL interface rendering, so that the code developed based on the framework platform of this disclosure can also be applied to OpenGL interface rendering. This allows the target page and the game application to be rendered based on the same rendering interface, thereby realizing the rendering fusion between the target page and the game page.

[0059] Furthermore, the JSI framework incorporates the Three.js framework and the React-three-fiber framework. The Three.js framework is an open-source framework that defines 3D APIs, enabling rapid support for both OpenGL front-end development and 3D development frameworks. The React-three-fiber framework is also included to allow the React Native framework to support Three.js, thus enabling the rendering of 3D pages.

[0060] Therefore, through the aforementioned cross-platform development framework, the JSI framework within the React Native framework can achieve connectivity with the OpenGL interface. This allows the APIs in the Three.js framework to remain consistent with mobile APIs under an OpenGL-based rendering engine. This technical solution enables the use of OpenGL interface rendering capabilities to render the target page, ensuring consistency between the target page rendering method and the underlying rendering method in game applications. Furthermore, based on the cross-platform capabilities of the React Native framework itself, code files developed using this framework platform can simultaneously support cross-platform development for Android and iOS. Based on the developed code files, rendering reuse of target pages across multiple game platforms is achieved, simplifying the development and rendering process of target pages. Additionally, React Native-compatible pages exhibit high startup and memory performance, mitigating lag during target page loading and display and reducing excessive memory consumption on terminal devices, further improving page display efficiency and smoothness.

[0061] In one possible embodiment, prior to the step of determining the display mode of the target page, the method further includes:

[0062] Obtain a page configuration file, which contains the page identifier of the target page and the display mode of the target page. For example, the target page can be pre-configured, such as specifying its display mode. Then, a configuration file can be generated by associating the page identifier and display mode of the target page.

[0063] Accordingly, determining the display mode of the target page includes:

[0064] The page configuration file is queried based on the page identifier of the target page, and the display mode in the query result is determined as the display mode of the target page.

[0065] Therefore, the display mode corresponding to the target page can be quickly and accurately determined based on this configuration file, so that the target page can be displayed according to different display modes in the future.

[0066] As an example, the target display level corresponding to the target page is determined in the target game based on the configuration script corresponding to the target page, wherein the configuration script indicates the correspondence between the page and the display level.

[0067] For example, the target page can be pre-configured, such as specifying its display hierarchy. Figure 3The diagram illustrates the page display within the target game. Pages G1 and G2 are game pages within the target game. Pattern g1 represents the content displayed on page G1, and pattern g2 represents the content displayed on page G2. For example, for target page A, its corresponding display layer can be set to the second layer, meaning it needs to be mixed with pages G1 and G2. Figure 4 The diagram illustrates the addition of a target page display to a target game. Pattern a represents the content displayed on page A. In this case, the display hierarchy of target page A can be configured, and a configuration script can be generated. For example, this configuration script can be a Lua script.

[0068] Accordingly, when the target game starts, the configuration script can be loaded, and the display level corresponding to the newly added target page can be determined based on the configuration script. There is no need to modify the internal parameters of the game application, which facilitates the addition and configuration of target pages, and also supports the dynamic distribution and addition of target pages.

[0069] In one possible embodiment, the method for determining the target display layer corresponding to the texture identifier in the target game based on the texture identifier may include:

[0070] The texture identifier and the page identifier of the target page are sent to the target game so that the target game determines the display layer corresponding to the texture identifier and the page identifier as the target display layer corresponding to the texture representation.

[0071] The texture identifier uniquely identifies the target page. In this embodiment, since the target page is displayed as a game page within the target game, a display container corresponding to the target page needs to be requested within the target game. Accordingly, the texture identifier and page identifier corresponding to the target page can be passed through to the target game. The target game can determine the target display level corresponding to the target page based on the page identifier, and then associate the texture identifier with the game page corresponding to the target display level. For example, an external texture can be created using `Texture2D.CreateExternalTexture()`, which can create a carrier for displaying the target page within the target game. This function can include parameters `Width` and `Height` to determine the width and height of the created texture, and also includes `(IntPtr)TextureId`, which is the texture identifier corresponding to the target page. The parameters, parameter formats, and function implementation are conventional techniques in the art and will not be elaborated further here.

[0072] Therefore, through the above technical solution, during the rendering process of the target page, a texture identifier can be passed to the target game, so that the game page can be sorted based on the texture identifier in the target game, and the display level of the target page can be determined. This allows the page content corresponding to the texture identifier to be mixed and sorted with the game page inside the target game, realizing the integration of the target page and the game page, avoiding the target page from being directly displayed on the top layer and covering the game page, and meeting the user's usage needs.

[0073] In one possible embodiment, an exemplary method for rendering the content corresponding to the target page based on the game rendering engine and the texture identifier in the game page corresponding to the target display level in the target game may include:

[0074] The target code corresponding to the page content of the target page is determined from the code file based on the texture identifier;

[0075] The target code is rendered using an OpenGL interface corresponding to the game rendering engine, so as to render the content corresponding to the target page to the game page corresponding to the target display level.

[0076] The game page corresponding to the target display level is the page generated in the target game to display the target page. When the target page needs to be displayed in the target game, it can determine the texture identifier associated with the target display level to determine which page in the game should be rendered, and thus determine what content should be displayed on the game page.

[0077] For example, if a texture identifier corresponds one-to-one with a target page, then the target code corresponding to the content of the target page is determined from the code file based on the texture identifier. That is, the business code corresponding to the texture identifier is loaded. This business code is the target code used to describe the content of the target page. Then, it can be rendered based on the OpenGL interface to render the content corresponding to the target code into the game page, thereby realizing the display of the target page within the target game.

[0078] Therefore, through the above technical solution, when rendering the target page, the texture that should be drawn in the game page is determined based on the texture identifier of the target page, so as to draw the content of the target page into the game page, thereby realizing the display of the newly added target page within the game application and further simplifying the process of adding and rendering the target page.

[0079] In one possible embodiment, the method may further include:

[0080] If the display mode is full-page mode and the target page is a 3D page, then a display page corresponding to the target page, such as an activity, is created. This means an additional display page is created to hold the content corresponding to the target page. Specifically, in full-page mode, if the target page is displayed while the target game is showing animations and sounds, the game page in the target game needs to be interrupted. That is, the animations and sounds are interrupted before the target page in full-page mode is displayed.

[0081] Next, a target view is created to display the content of the open graphics interface, and the target view is mounted to the root view of the display page; then, the target view is rendered based on the code file to obtain the target page. For example, this target view can be an OpenGL view.

[0082] In this embodiment, if the display mode is full-page mode, it means that the target page needs to be displayed on a separate page, rather than through a page within the target game. In this case, it is necessary to create a carrier for the content of the target page. In full-page mode, a display page activity can be created as the display carrier for the target page.

[0083] Furthermore, if the target page is a 2D page, and native development is used in the ReactNative framework, which itself supports rendering UI pages through native components on both Android and iOS, then rendering can be performed based on the native components it provides. On Android, rendering can be performed through native TextView components, button components, etc. This rendering method can be based on the methods commonly used in this field, and will not be elaborated here.

[0084] If the target page is a 3D page, it requires OpenGL for rendering. This can be achieved using an OpenGL View. Within an activity, there is a corresponding root view (RootView) used to mount other subviews to render the page's content. Based on this, an OpenGL View can be created and mounted to the root view of the activity. Rendering is then performed within the OpenGL View based on the provided code, drawing the target page's content onto the OpenGL View and displaying it on the activity page.

[0085] Therefore, the above method enables the rendering of the target page in full-page mode. Code files developed using the React Native framework platform can achieve both 2D and 3D page rendering, facilitating multi-device compatibility during target page development and improving user experience. Furthermore, multiple display modes can be used to support the display methods of the target page in various scenes within the target game, increasing the diversity of target page rendering.

[0086] In one possible embodiment, the method may further include:

[0087] If the display mode is windowed mode and the target page is a 3D page, then a display window, such as a dialog, is created for the target page. In windowed mode, if the target page is displayed while the target game is showing animations and sounds, there is no need to interrupt the game page in the target game; that is, the target page in windowed mode is displayed while the animations and sounds are playing.

[0088] The root view of the display window is used as the Content property of the display window to create a target view for displaying content from the Open Graphics Interface, and this target view is then mounted to the root view of the display window. The target view is then rendered based on the code file to obtain the target page. For example, this target view can be an OpenGLView.

[0089] One approach is to embed a window using the dialog's Content property. This involves using the root view of the display window as the view to which the dialog is embedded, allowing the content of the target page to be rendered based on that root view. Similarly, the rendering methods for 2D and 3D pages in windowed mode are the same as those described in the full-page mode above, and will not be repeated here.

[0090] Therefore, through the above technical solution, the target page can be rendered and displayed in the game application through a dialog window, further increasing the display methods of the target page, improving the diversity of the target page, and thus enabling adaptation to more game applications, improving the compatibility and usability of target page development and rendering, and enhancing the user experience.

[0091] In one possible embodiment, the code file of the target page can be developed and uploaded to the cloud. In this case, in step 11, obtaining the code file of the target page to be rendered in the target game can be done by obtaining the code file of the target page to be rendered in the target game from the cloud when the target game starts. This facilitates the rapid rendering of the target page during the operation of the game application and improves the rendering and display efficiency of the target page.

[0092] For example, before rendering the target page, such as before determining the display mode of the target page, it can be checked whether the code file is accurately loaded locally. If the code file is not loaded locally, an exception message can be output so as to promptly remind relevant personnel to perform exception attribution and detection.

[0093] This disclosure also provides a page rendering apparatus, such as Figure 5 As shown, the device 10 includes:

[0094] The first acquisition module 100 is used to acquire the code file of the target page to be rendered in the target game, wherein the code file is code implemented based on a cross-platform development framework;

[0095] The first determining module 200 is used to determine the display mode of the target page;

[0096] The generation module 300 is used to generate a texture identifier corresponding to the target page if the display mode of the target page is a mixed sorting mode.

[0097] The second determining module 400 is used to determine the target display level corresponding to the texture identifier in the target game based on the texture identifier;

[0098] The first rendering module 500 is used to render the content corresponding to the target page in the target game and the game page corresponding to the target display level based on the game rendering engine and the texture identifier.

[0099] Optionally, the second determining module is further configured to:

[0100] The texture identifier and the page identifier of the target page are sent to the target game so that the target game confirms the display layer corresponding to the page identifier as the target display layer corresponding to the texture identifier.

[0101] Optionally, the first rendering module includes:

[0102] The first determining submodule is used to determine the target code corresponding to the page content of the target page from the code file based on the texture identifier;

[0103] The rendering submodule is used to render the target code through an open graphics interface corresponding to the game rendering engine, so as to render the content corresponding to the target page to the game page corresponding to the target display level.

[0104] Optionally, the device further includes:

[0105] The first creation module is used to create a display page corresponding to the target page if the display mode is full-page mode and the target page is a 3D page;

[0106] The first processing module is used to create a target view for displaying content from an open graphical interface, and to mount the target view to the root view of the display page;

[0107] The second rendering module is used to render the target page in the target view based on the code file.

[0108] Optionally, the device further includes:

[0109] The second creation module is used to create a display window for the target page if the display mode is window mode and the target page is a 3D page;

[0110] The third determining module is used to use the root view of the display window as the Content attribute of the display window;

[0111] The second processing module is used to create a target view for displaying content of the open graphical interface, and to mount the target view to the root view of the display window;

[0112] The third rendering module is used to render the target page in the target view based on the code file.

[0113] Optionally, the device further includes:

[0114] The first acquisition module is used to acquire a page configuration file before the first determining module determines the display mode of the target page, wherein the page configuration file contains the page identifier of the target page and the display mode of the target page;

[0115] The first determining module is further configured to:

[0116] The page configuration file is queried based on the page identifier of the target page, and the display mode in the query result is determined as the display mode of the target page.

[0117] Optionally, the cross-platform development framework is the ReactNative framework platform, which incorporates the Three.js framework and the React-three-fiber framework into its JSI framework, enabling the target page's code files to be rendered based on an open graphical interface.

[0118] The following is for reference. Figure 6This diagram illustrates a structural schematic of an electronic device 600 suitable for implementing embodiments of the present disclosure. The terminal devices in the embodiments of the present disclosure may include, but are not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers. Figure 6 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0119] like Figure 6 As shown, electronic device 600 may include a processing device (e.g., a central processing unit, a graphics processor, etc.) 601, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 602 or a program loaded from storage device 608 into random access memory (RAM) 603. RAM 603 also stores various programs and data required for the operation of electronic device 600. Processing device 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.

[0120] Typically, the following devices can be connected to I / O interface 605: input devices 606 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 607 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 608 including, for example, magnetic tapes, hard disks, etc.; and communication devices 609. Communication device 609 allows electronic device 600 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 6 An electronic device 600 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0121] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 609, or installed from a storage device 608, or installed from a ROM 602. When the computer program is executed by the processing device 601, it performs the functions defined in the methods of embodiments of this disclosure.

[0122] It should be noted that the computer-readable medium described in this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in connection with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0123] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol) and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.

[0124] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0125] The aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: acquire a code file of a target page to be rendered in a target game, wherein the code file is code implemented based on a cross-platform development framework; determine the display mode of the target page; if the display mode of the target page is a mixed sorting mode, generate a texture identifier corresponding to the target page; determine a target display layer corresponding to the texture identifier in the target game based on the texture identifier; and render the content corresponding to the target page in the game page corresponding to the target display layer in the target game based on the game rendering engine and the texture identifier.

[0126] Computer program code for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof, including but not limited to object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0127] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0128] The modules described in the embodiments of this disclosure can be implemented in software or hardware. The name of a module does not necessarily limit the module itself; for example, the first acquisition module can also be described as "a module that acquires the code file of the target page to be rendered in the target game".

[0129] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0130] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0131] According to one or more embodiments of this disclosure, Example 1 provides a page rendering method, wherein the method includes:

[0132] Obtain the code file of the target page to be rendered in the target game, wherein the code file is code implemented based on a cross-platform development framework;

[0133] Determine the display mode of the target page;

[0134] If the display mode of the target page is a mixed sorting mode, then generate a texture identifier corresponding to the target page;

[0135] Based on the texture identifier, the target display level corresponding to the texture identifier is determined in the target game;

[0136] In the target game and the game page corresponding to the target display level, the content corresponding to the target page is rendered based on the game rendering engine and the texture identifier.

[0137] According to one or more embodiments of this disclosure, Example 2 provides the method of Example 1, wherein determining the target display layer corresponding to the texture identifier in the target game based on the texture identifier includes:

[0138] The texture identifier and the page identifier of the target page are sent to the target game so that the target game confirms the display layer corresponding to the page identifier as the target display layer corresponding to the texture identifier.

[0139] According to one or more embodiments of this disclosure, Example 3 provides the method of Example 1, wherein rendering the content corresponding to the target page in the target game and the game page corresponding to the target display level based on the game rendering engine and the texture identifier includes:

[0140] The target code corresponding to the page content of the target page is determined from the code file based on the texture identifier;

[0141] The target code is rendered using an open graphics interface corresponding to the game rendering engine, so as to render the content corresponding to the target page into the game page corresponding to the target display level.

[0142] According to one or more embodiments of this disclosure, Example 4 provides the method of Example 1, wherein the method further includes:

[0143] If the display mode is full-page mode and the target page is a 3D page, then create a display page corresponding to the target page;

[0144] Create a target view for displaying content from the open graphical interface, and attach the target view to the root view of the display page;

[0145] The target page is obtained by rendering the code file in the target view.

[0146] According to one or more embodiments of this disclosure, Example 5 provides the method of Example 1, wherein the method further includes:

[0147] If the display mode is window mode and the target page is a 3D page, then a display window is created for the target page;

[0148] Use the root view of the display window as the Content property of the display window;

[0149] Create a target view for displaying content from the open graphical interface, and attach the target view to the root view of the display window;

[0150] The target page is obtained by rendering the code file in the target view.

[0151] According to one or more embodiments of this disclosure, Example 6 provides the method of Example 1, wherein, prior to the step of determining the display mode of the target page, the method further includes:

[0152] Obtain a page configuration file, wherein the page configuration file contains the page identifier of the target page and the display mode of the target page;

[0153] Determining the display mode of the target page includes:

[0154] The page configuration file is queried based on the page identifier of the target page, and the display mode in the query result is determined as the display mode of the target page.

[0155] According to one or more embodiments of this disclosure, Example 7 provides the method of Example 1, wherein the cross-platform development framework is the ReactNative framework platform, and the ReactNative framework platform's JSI framework incorporates the Three.js framework and the React-three-fiber framework, so that the code file of the target page is rendered based on an open graphical interface.

[0156] According to one or more embodiments of this disclosure, Example 8 provides a page rendering apparatus, wherein the apparatus includes:

[0157] The first acquisition module is used to acquire the code file of the target page to be rendered in the target game, wherein the code file is code implemented based on a cross-platform development framework;

[0158] The first determining module is used to determine the display mode of the target page;

[0159] The generation module is used to generate a texture identifier corresponding to the target page if the display mode of the target page is a mixed sorting mode.

[0160] The second determining module is used to determine the target display level corresponding to the texture identifier in the target game based on the texture identifier;

[0161] The first rendering module is used to render the content corresponding to the target page in the target game and the game page corresponding to the target display level, based on the game rendering engine and the texture identifier.

[0162] According to one or more embodiments of the present disclosure, Example 9 provides a computer-readable medium having a computer program stored thereon that, when executed by a processing device, implements the steps of the method described in any one of Examples 1-7.

[0163] According to one or more embodiments of this disclosure, Example 10 provides an electronic device, including:

[0164] A storage device on which computer programs are stored;

[0165] A processing device for executing the computer program in the storage device to implement the steps of any one of the methods in Examples 1-7.

[0166] The above description is merely a preferred embodiment of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed in this disclosure that have similar functions.

[0167] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in a sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.

[0168] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative forms of implementing the claims. Regarding the apparatus in the above embodiments, the specific manner in which the various modules perform their operations has been described in detail in the embodiments relating to the method, and will not be elaborated upon here.

Claims

1. A page rendering method, characterized in that, The method includes: Obtain the code file of the target page to be rendered in the target game, wherein the code file is code implemented based on a cross-platform development framework; Determine the display mode of the target page; If the display mode of the target page is a mixed sorting mode, then generate a texture identifier corresponding to the target page; The texture identifier and the page identifier of the target page are sent to the target game so that the target game confirms the display layer corresponding to the page identifier as the target display layer corresponding to the texture identifier. The target display layer corresponding to the target page is determined in the target game based on the configuration script corresponding to the target page. The configuration script indicates the correspondence between the page and the display layer. In the target game and the game page corresponding to the target display level, the content corresponding to the target page is rendered based on the game rendering engine and the texture identifier.

2. The method according to claim 1, characterized in that, In the target game, on the game page corresponding to the target display level, rendering the content corresponding to the target page based on the game rendering engine and the texture identifier includes: The target code corresponding to the page content of the target page is determined from the code file based on the texture identifier; The target code is rendered using an open graphics interface corresponding to the game rendering engine, so as to render the content corresponding to the target page into the game page corresponding to the target display level.

3. The method according to claim 1, characterized in that, The method further includes: If the display mode is full-page mode and the target page is a 3D page, then create a display page corresponding to the target page; Create a target view for displaying content from the open graphical interface, and attach the target view to the root view of the display page; The target page is obtained by rendering the code file in the target view.

4. The method according to claim 1, characterized in that, The method further includes: If the display mode is window mode and the target page is a 3D page, then a display window is created for the target page; Use the root view of the display window as the Content property of the display window; Create a target view for displaying content from the open graphical interface, and attach the target view to the root view of the display window; The target page is obtained by rendering the code file in the target view.

5. The method according to claim 1, characterized in that, Prior to the step of determining the display mode of the target page, the method further includes: Obtain a page configuration file, wherein the page configuration file contains the page identifier of the target page and the display mode of the target page; Determining the display mode of the target page includes: The page configuration file is queried based on the page identifier of the target page, and the display mode in the query result is determined as the display mode of the target page.

6. The method according to claim 1, characterized in that, The cross-platform development framework is the ReactNative framework platform. The ReactNative framework platform's JSI framework incorporates the Three.js framework and the React-three-fiber framework, enabling the target page's code files to be rendered based on an open graphical interface.

7. A page rendering device, characterized in that, The device includes: The first acquisition module is used to acquire the code file of the target page to be rendered in the target game, wherein the code file is code implemented based on a cross-platform development framework; The first determining module is used to determine the display mode of the target page; The generation module is used to generate a texture identifier corresponding to the target page if the display mode of the target page is a mixed sorting mode. The second determining module is used to send the texture identifier and the page identifier of the target page to the target game, so that the target game confirms the display layer corresponding to the page identifier as the target display layer corresponding to the texture identifier. The target display layer corresponding to the target page is determined in the target game based on the configuration script corresponding to the target page. The configuration script indicates the correspondence between the page and the display layer. The first rendering module is used to render the content corresponding to the target page in the target game and the game page corresponding to the target display level, based on the game rendering engine and the texture identifier.

8. A computer-readable medium having a computer program stored thereon, characterized in that, When executed by the processing device, the program implements the steps of the method according to any one of claims 1-6.

9. An electronic device, characterized in that, include: A storage device on which computer programs are stored; A processing device for executing the computer program in the storage device to implement the steps of the method according to any one of claims 1-6.

Images