Dynamic interface display method and system and computer program product

Abstract

The invention provides a dynamic interface display method and system and a computer program product, and relates to the technical field of computer animation. The dynamic interface display method comprises the steps that a target video is acquired, the target video is composed of a preset number of image frames, and each image frame comprises an image area and a mask area corresponding to the image area; determining to-be-displayed pixel information in the image area based on the pixel information of the mask area in the image frame and the pixel information of the image area, and generating a target layer; and rendering the dynamic interface based on the target layer.

Description

Technical Field

[0001] The present invention relates to the field of computer animation technology, and in particular to a dynamic interface display method, system and computer program product. Background Art

[0002] In the game screen or the game store interface, the display of dynamic content on the interface is usually achieved through real-time rendering, such as by making a three-dimensional model and processing dynamic effects, and then rendering it to the screen to show vivid visual effects. In some display interfaces of the game, high-quality dynamic content display screens need to be presented, such as high-quality skin display interfaces, high-quality suit display interfaces, etc. The display of high-quality dynamic content means that the three-dimensional model needs to use a higher number of faces (or polygons) to present more details, and the game engine has certain performance limitations on the number of faces for the processing of three-dimensional models. Using too many faces will increase the computing burden and affect the rendering performance, thus failing to meet some high-precision display requirements. In addition, using high-polygon three-dimensional models for real-time rendering will also increase production costs and reduce production efficiency.

[0003] In view of this, some embodiments of the present specification provide a dynamic interface display method, system and computer program product, which aim to reduce the production cost of dynamic interface display, improve production efficiency, and achieve high-precision display requirements of dynamic interface display. Summary of the invention

[0004] One or more embodiments of the present specification provide a method for displaying a dynamic interface, the method comprising: obtaining a target video, wherein the target video is composed of a preset number of image frames, the image frame comprising an image area and a mask area corresponding to the image area; determining pixel information to be displayed in the image area based on pixel information of the mask area in the image frame and pixel information of the image area, and generating a target layer; and rendering the dynamic interface based on the target layer.

[0005] According to the method provided by one or more embodiments of this specification, the format of the target video is a video format that does not support a built-in transparent channel.

[0006] According to the method provided by one or more embodiments of the present specification, the mask area in the image frame is located at any one of the following positions of the preset area: right side, left side, upper side, and lower side.

[0007] According to the method provided by one or more embodiments of the present specification, determining the pixel information to be displayed in the image area based on the pixel information of the mask area and the pixel information of the image area in the image frame, and generating a target layer includes: determining the transparency corresponding to the image area based on the pixel information of the mask area; determining the pixel information to be displayed in the image area based on the pixel information of the image area and the transparency corresponding to the image area, and generating a target layer.

[0008] According to the method provided by one or more embodiments of the present specification, determining the transparency corresponding to the image area based on the pixel information of the mask area includes: determining the transparency of the pixels at the corresponding position in the image area based on the color information or brightness information of the pixels in the mask area.

[0009] According to the method provided by one or more embodiments of the present specification, determining the transparency corresponding to the image area based on the pixel information of the mask area includes: determining the transparency of the foreground area of ​​the image area as opaque based on the pixel information of the mask area, and determining the transparency of the background area of ​​the image area as transparent.

[0010] According to the method provided by one or more embodiments of the present specification, the pixel information to be displayed in the image area is determined based on the pixel information of the image area in the image frame and the transparency corresponding to the image area, and the target layer is generated, including: sampling the pixel information of the image area to obtain a sampling result; determining the pixel information to be displayed in the sampling result based on the transparency corresponding to the image area; and generating the target layer based on the pixel information to be displayed in the sampling result.

[0011] According to the method provided by one or more embodiments of the present specification, the mask area is located on the left or right side of the image area, and the pixel information of the image area is sampled to obtain the sampling result, which includes: sampling the pixel information of the pixels in the image area to obtain the sampling result, and setting the sampling result to the pixel value of the pixel at the corresponding position in the mask area.

[0012] According to the method provided by one or more embodiments of the present specification, generating a target layer based on pixel information to be displayed in the sampling result includes: scaling the pixel information to be displayed in the sampling result so that the pixel information to be displayed is located in the center of the target layer.

[0013] According to the method provided by one or more embodiments of the present specification, rendering the dynamic interface based on the target layer includes: merging the target layer with other layers, and rendering the dynamic interface according to the display order corresponding to each layer.

[0014] According to the method provided by one or more embodiments of the present specification, rendering a dynamic interface according to the display order corresponding to each layer includes: arranging and rendering each layer according to the display order corresponding to each layer, so that the color displayed on the pixel is the color of the corresponding pixel on the layer with the highest display order.

[0015] According to the method provided by one or more embodiments of the present specification, other layers include at least one of the following layers: a background layer, a virtual button layer, and a character layer.

[0016] The method provided according to one or more embodiments of the present specification also includes: obtaining a preset number of preset images; generating a preset number of mask images corresponding to the preset number of preset images, wherein the mask image is used to represent the transparency of pixels in the corresponding preset image; splicing the preset number of preset images with the preset number of mask images to obtain a preset number of image frames; and generating a target video based on the preset number of image frames.

[0017] One or more embodiments of the present specification also provide a dynamic interface display system, the system comprising: a target video acquisition module, used to acquire a target video, wherein the target video is composed of a preset number of image frames, the image frame comprising an image area and a mask area corresponding to the image area; a target layer generation module, used to determine pixel information to be displayed in the image area based on pixel information of the mask area in the image frame and pixel information of the image area, and generate a target layer; and a rendering module, used to render the dynamic interface based on the target layer.

[0018] One or more embodiments of the present specification also provide a computer program product, including a computer program, which, when at least a portion of the computer program is executed by a processor, can implement the dynamic interface display method described in some embodiments of the present specification. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] This specification will be further explained by way of exemplary embodiments, which will be described in detail by way of the accompanying drawings. The same numbers in the drawings represent the same structures or steps.

[0020] Figure 1 This is an exemplary flow chart of a dynamic interface display method according to some embodiments of this specification.

[0021] Figure 2 It is a schematic diagram of a dynamic interface shown in some embodiments of this specification.

[0022] Figure 3 It is an exemplary flow chart of a method for generating a target video according to some embodiments of this specification.

[0023] Figure 4It is a schematic diagram of an image frame shown in some embodiments of this specification.

[0024] Figure 5 It is an exemplary flowchart of a method for generating a target layer according to some embodiments of this specification.

[0025] Figure 6 It is an exemplary block diagram of a dynamic interface display system according to some embodiments of this specification. DETAILED DESCRIPTION

[0026] In order to more clearly illustrate the technical solutions of the embodiments of this specification, the embodiments will be described in detail below with reference to the accompanying drawings. Obviously, the contents described below are some examples or embodiments of this specification. For ordinary technicians in this field, without paying creative work, the technical solutions or means disclosed in this specification can also be applied to other scenarios based on these technical contents.

[0027] It should be understood that the "system", "device", "unit" and / or "module" used in this specification is a method for distinguishing different components, elements, parts, portions or assemblies at different levels. However, if other words can achieve the same purpose, the words can be replaced by other expressions.

[0028] Unless otherwise specified, technical terms used in this specification to describe components, elements, etc. do not refer to the singular, but may also include the plural. Generally speaking, terms such as "include", "comprise", etc. only indicate that the steps, elements, or components that have been clearly identified are included, and these steps, elements, and components do not constitute an exclusive list, such as the method or device described may also include other steps or components.

[0029] Flowcharts are used in this specification to illustrate the operation steps performed by the device or system of the relevant embodiments, but unless otherwise specified, the order used to describe these steps should not be understood as a limitation on the order in which the steps are performed. A person of ordinary skill in the art can adjust the order in which these steps are performed based on the knowledge and information conveyed by the embodiments of this specification, and the adjustment includes but is not limited to swapping the order, merging multiple steps, and splitting a certain step.

[0030] Virtual games, also known as video games or electronic games, are games that run on electronic devices and are controlled by computer programs (such as game applications) for the purpose of puzzle or entertainment. The dynamic interface of a virtual game can be presented through a graphical user interface (GUI). The dynamic interface of a virtual game may include, for example, a game screen or a game store interface. The game screen may include, for example, elements such as the environment, characters, buildings, machinery, and props in a virtual game, and may restore at least part of the virtual world in the game. The store interface of a game may include, for example, characters, character skins, accessories, suits, equipment, weapons, pets, props, and other elements for players to purchase. The presentation of high-quality game dynamic interface content can enhance the player's gaming experience and consumption desire.

[0031] In some embodiments, in the game screen or the game mall interface, the display of dynamic content of the interface is usually achieved through real-time rendering, such as by making a three-dimensional model and processing dynamic effects, and then rendering it to the screen to show vivid visual effects. Some display interfaces of the game need to present high-quality dynamic content display screens, such as high-quality skin display interfaces, high-quality suit display interfaces, etc. The display of high-quality dynamic content means that the three-dimensional model needs to use a higher number of faces (or polygons) to present more details, and the game engine has certain performance limitations on the number of faces for the processing of three-dimensional models. Using too many faces will increase the computing burden and affect the rendering performance, thus failing to meet some high-precision display requirements. In addition, using a high-face 3D model for real-time rendering will also increase production costs and reduce production efficiency.

[0032] In other embodiments, the display of dynamic content of the interface can also be achieved through the game dynamic effects editor, such as creating basic animations in the game dynamic effects editor, and combining particle systems and material animations to achieve the display of dynamic content of the interface, but the game dynamic effects editor can only perform basic animation processing on 2D assets such as pictures, and cannot achieve the presentation of complex dynamic effects. In some other embodiments, sequential PNG images or spine animations can also be used to display dynamic content of the interface, but sequential PNG images occupy a large file space, the number of images is large, and it is difficult to manage efficiently. It is not suitable for the display of dynamic effects with high frame rates and long times (such as more than two seconds). Spine animations are limited to 2D image animations and cannot produce 3D space animations, which limits the expressiveness and application scope of dynamic content of the interface.

[0033] To this end, some embodiments of the present specification propose a dynamic interface display method, which obtains a target video, where the target video is composed of a preset number of image frames, and the image frame includes an image area and a mask area corresponding to the image area. The pixel information to be displayed in the image area is determined based on the pixel information of the mask area in the image frame and the pixel information of the image area, and a target layer is generated. The dynamic interface is rendered based on the target layer, thereby reducing the production cost of the dynamic interface display, improving the production efficiency, and achieving the high-precision display requirements of the dynamic interface display.

[0034] Figure 1 This is an exemplary flow chart of a dynamic interface display method according to some embodiments of this specification. Figure 1 The process 100 shown can be executed by a computing device, for example, it can be implemented by a dynamic interface display system 600 deployed on the computing device. In some embodiments, the computing device can be a desktop computer, a laptop computer, a mobile phone, a VR device, a tablet computer, a gaming device, etc. In some embodiments, the computing device can be a user-end device, or a server-end device or a cloud device. In some embodiments, part of the process 100 can be executed by a computing device as a user end, and another part can be executed by a computing device as a server end. Figure 1 As shown, process 100 may include the following steps.

[0035] Step 110 , obtaining a target video. In some embodiments, step 110 may be implemented by the target video obtaining module 610 .

[0036] In some embodiments, the target video is composed of a preset number of image frames. An image frame is the smallest unit of a video, and each frame can be regarded as a static image. Multiple image frames form a sequence in a certain arrangement order, and these image frames are played continuously in the arrangement order to present a motion effect in the video screen.

[0037] In some embodiments, the image frame may include an image area and a mask area corresponding to the image area. The image area may store pixel information of a preset image, and part of the pixel information in the preset image may be rendered into a dynamic interface for presentation. The mask area may store pixel information of a mask image corresponding to the preset image, and the pixel information of the mask image may indicate the transparency of the corresponding preset image.

[0038] In some embodiments, the pixel information of the image may be a color value, and for example, the color value may be represented by three channels of RGB (red, green, and blue). According to a certain embodiment, the pixel information of the image area may be a color value with rich colors, and the pixel information of the mask area may be represented by two color values, one color value (such as white) is used to represent that the transparency of the pixel at the corresponding position in the preset image is opaque, and the other color value (such as black) is used to represent that the transparency of the pixel at the corresponding position in the preset image is transparent.

[0039] In some embodiments, the target video format may be any of the following video formats: MP4, MOV, FLV. Taking the MP4 format as an example, MP4 usually uses the H.264 (or AVC) video coding standard, which is an efficient video compression technology. H.264 can significantly reduce the file size while maintaining high video quality. Therefore, the target video using the MP4 format can store high-quality image information, save game resources, and reduce resource usage.

[0040] In some embodiments, the target video may be obtained through an engine (such as a game engine). Exemplarily, the target video may be read through a shader in the game engine, and the target video may be decompressed to obtain a preset number of image frames.

[0041] Step 120 , based on the pixel information of the mask area in the image frame and the pixel information of the image area, determine the pixel information to be displayed in the image area, and generate a target layer. In some embodiments, step 120 may be implemented by the target layer generation module 620 .

[0042] In some embodiments, the transparency corresponding to the image area can be determined based on the pixel information of the mask area, so as to determine which pixels in the image area can be displayed and which pixels can be hidden. In some embodiments, the transparency of the pixels at the corresponding position in the image area can be determined based on the color information or brightness information of the pixels in the mask area. According to a certain example, the transparency of the pixels at the corresponding position in the image area can be determined to be opaque based on the pixels whose color values ​​in the mask area are white, and the transparency of the pixels at the corresponding position in the image area can be determined to be transparent based on the pixels whose color values ​​in the mask area are black. According to another example, the color information in the mask area can also be converted into brightness information, such as if the brightness value corresponding to white is 1 and the brightness value corresponding to black is 0, then the transparency of the pixels at the corresponding position in the image area can be determined to be opaque based on the pixels whose brightness values ​​in the mask area are 1, and the transparency of the pixels at the corresponding position in the image area can be determined to be transparent based on the pixels whose brightness values ​​in the mask area are 0.

[0043] In some embodiments, the pixel information to be displayed in the image area can be further determined based on the pixel information of the image area and the transparency corresponding to the image area, for example, the color values ​​of the pixels corresponding to transparent transparency in the image area are hidden, and the color values ​​of the pixels corresponding to opaque transparency in the image area are displayed, so as to determine the pixel information to be displayed in the image area, and generate the target layer based on the pixel information to be displayed in the image area. How to determine the pixel information to be displayed in the image area and how to generate the target layer based on the pixel information to be displayed in the image area will be described in detail in process 500 below.

[0044] In some embodiments, each of the preset number of image frames may be processed according to step 120 to generate a target layer.

[0045] Step 130 , rendering the dynamic interface based on the target layer. In some embodiments, step 130 may be implemented by the rendering module 630 .

[0046] In some embodiments, the target layer may be merged with other layers, and the dynamic interface may be rendered according to the display order of each layer. The other layers may include at least one of the following layers: a background layer, a virtual button layer, and a character layer. The display order of the layers may represent the order in which the layers are rendered. Figure 2 is a schematic diagram of a dynamic interface according to some embodiments of this specification, such as Figure 2 As shown, the target layer may be a character layer 21, and other layers may include a background layer 22 and a button layer 23. It should be understood that Figure 2 The indicator lines in the figure are only identifiers to assist understanding and to clarify the marked objects. They should not be understood as part of the dynamic interface.

[0047] In some embodiments, each layer can be arranged and rendered according to the display order corresponding to each layer, so that the color displayed on the pixel is the color of the corresponding pixel on the layer with the highest display order. Exemplarily, when the target layer is a character layer, the target layer can be superimposed and displayed above the background layer, and the button layer can be superimposed and displayed above the target layer. Then the display order of the background layer can be set to the lowest, such as -1. The display order of the target layer is higher than the background layer, which can be set to 0. The display order of the button layer is the highest, which can be set to 1. When rendering, the rendering can be performed in order from low to high display order, such as rendering the background layer with the lowest display order first, then rendering the target layer, and finally rendering the button layer. At the same pixel position, the color value of the layer with a lower display order will be covered by the color value of the layer with a higher display order. In other words, the color displayed on the pixel is the color of the corresponding pixel on the layer with the highest display order. The rendered dynamic interface can be as follows Figure 2shown.

[0048] By using the target video to render the dynamic interface, there is no need to access the 3D resource model, making the rendering process simpler and reducing the cost of game development. The target video is not limited by the number of faces of the three-dimensional model, so the content displayed in the target video (such as characters, etc.) can present high-quality images. Since the target video occupies a small space, by using the target video to render the dynamic interface, a high frame rate and long-term dynamic effects can be achieved, thereby presenting a higher-quality rendering image. In addition, the target video can also display 3D space animations, which are not limited by 2D picture animations.

[0049] Figure 3 is an exemplary flow chart of a method for generating a target video according to some embodiments of this specification. In some embodiments, Figure 3 The process 300 shown can be executed by a computing device, for example, it can be implemented by the target video generation module 640 in the dynamic interface display system 600 deployed on the computing device. In other embodiments, the process 300 can also be executed by other computing devices, and the generated target video is provided to the dynamic interface display system 600. Figure 3 As shown, process 300 may include the following steps.

[0050] Step 310: Acquire a preset number of preset images.

[0051] In some embodiments, a preset number of preset images can be directly obtained from a preset picture set, or a preset number of preset images can be drawn through three-dimensional animation production software. The preset number of preset images can be an image sequence with a certain time continuity.

[0052] In some embodiments, the preset image may include a foreground area and a background area. The image information displayed in the foreground area may be, for example, a character image, and the image information displayed in the background area may be, for example, a solid color background.

[0053] Step 320 : Generate a preset number of mask images corresponding to the preset number of preset images.

[0054] In some embodiments, the mask image is used to indicate the transparency of each pixel in the corresponding preset image. The pixel information in the mask image can be indicated by two color values, such as white and black. White can be used to indicate that the transparency of the pixel at the corresponding position in the preset image is opaque, and black can be used to indicate that the transparency of the pixel at the corresponding position in the preset image is transparent, and vice versa. Exemplarily, the pixel information at the position corresponding to the foreground area of ​​the preset image in the mask image can be set to white, and the pixel information at the position corresponding to the background area of ​​the preset image in the mask image can be set to black.

[0055] In some embodiments, when a preset image is drawn using three-dimensional animation production software, an image mask corresponding to the preset image can be generated at the same time. Each preset image can also be cut out using a cutout tool to distinguish the foreground area and background area in the preset image, and a mask image corresponding to the preset image can be generated based on the foreground area and background area in the preset image.

[0056] Step 330 , splicing a preset number of preset images with a preset number of mask images to obtain a preset number of image frames.

[0057] In some embodiments, each preset image in a preset number of preset images may be spliced ​​with a corresponding mask image to obtain a preset number of image frames. By generating an image frame including a preset image and a corresponding mask image, transparency information may be created for a video that does not support a video format with a transparent channel (such as an MP4 format), thereby determining the transparency corresponding to each pixel in the corresponding preset image through the pixel information of the mask image in the image frame.

[0058] In some embodiments, the mask image in the image frame may be located at any of the following positions of the preset image: right side, left side, top side, and bottom side. In some embodiments, the size of the mask image may be the same as the size of the preset image, and in the spliced ​​image frame, the image area for displaying the preset image and the mask area for displaying the mask image may be symmetrical based on the midline of the image frame, and the midline of the image frame may be, for example, a horizontal midline or a vertical midline.

[0059] Figure 4 is a schematic diagram of an image frame according to some embodiments of this specification, such as Figure 4 As shown, the image area on the left side of the dotted line displays the preset image, and the mask area on the right side of the dotted line displays the mask image corresponding to the preset image on the left side. The image area on the left side and the mask area on the right side are symmetrical based on the vertical center line shown by the dotted line. It should be understood that Figure 4 The dotted lines in are merely identifiers to aid understanding, to distinguish the image area from the mask area, and should not be understood as part of the image frame.

[0060] Step 340 : Generate a target video based on a preset number of image frames.

[0061] In some embodiments, the preset number of preset images can be an image sequence with a certain time continuity, and the target video can be generated according to the time sequence of each image frame, according to the preset video format and frame rate. The generated target video can be stored in the game warehouse, and subsequently the target video can be read from the game warehouse through the shader in the game engine.

[0062] Figure 5It is an exemplary flowchart of a method for generating a target layer according to some embodiments of this specification. Figure 5 The process 500 shown may be executed by a computing device, for example, Figure 6 The target layer generation module 620 in the dynamic interface display system 600 shown in FIG. Figure 5 As shown, process 500 may include the following steps.

[0063] Step 510: Determine the transparency corresponding to the image area based on the pixel information of the mask area.

[0064] In some embodiments, the transparency of the pixel at the corresponding position in the image area can be determined based on the color information or brightness information of the pixel in the mask area. In some embodiments, the pixel information in the mask image can be represented by two color values, such as white and black. White can be used to indicate that the transparency of the pixel at the corresponding position in the preset image is opaque, and black can be used to indicate that the transparency of the pixel at the corresponding position in the preset image is transparent. According to a certain example, the value of any one of the RGB channels of the pixel in the mask area can be taken to determine the transparency of the pixel at the corresponding position in the image area. For example, if the color of a pixel in the mask area is white and the corresponding RGB is (1,1,1), then the value of any one of the RGB channels is "1", and the value "1" indicates that the transparency of the pixel at the corresponding position in the image area is opaque. According to another example, the values ​​of the three RGB channels of the pixel in the mask area can also be taken, and the color information of the pixel is converted into brightness information according to the brightness conversion formula, and then the transparency of the pixel at the corresponding position in the image area is determined according to the brightness information of the pixel. For example, if the color of a pixel in the mask area is black and the corresponding RGB is (0,0,0), then according to the brightness conversion formula Y=0.299×R+0.587×G+0.114×B Convert RGB (0,0,0) to brightness Y=0. The value "0" indicates that the transparency of the pixel at the corresponding position in the image area is transparent.

[0065] In some embodiments, the transparency of the foreground area of ​​the image area may be determined to be opaque based on the pixel information of the mask area, and the transparency of the background area of ​​the image area may be determined to be transparent. Figure 4 As shown, the left side of the dotted line is the image area, and the right side of the dotted line is the mask area. The area in the image area where the character is located can be the foreground area, and the remaining part is the background area. The pixel color of the position corresponding to the foreground area of ​​the image area in the mask area can be set to white, indicating that the transparency of the foreground area of ​​the image area is opaque, and the pixel color of the position corresponding to the background area of ​​the image area in the mask area can be set to black, indicating that the transparency of the background area of ​​the image area is transparent.

[0066] The following is a specific example to describe how to determine the transparency of an image area based on the pixel information of the mask area. Figure 4 As shown, the left side of the dotted line in the image frame is the image area, and the image stored in the image area is a preset image. The right side of the dotted line is the mask area, and the image stored in the mask area is a mask image corresponding to the preset image on the left. The image area and the mask area have the same size. The target video generated in step 340 can be read from the game warehouse through a shader in the game engine and decoded into a preset number of image frames. For each image frame, the size of the image frame is obtained, and the coordinate system of the image frame can be a texture coordinate system established with the lower left corner of the image frame as (0,0) and the upper right corner as (1,1). Furthermore, the midpoint coordinates of the image frame on the horizontal axis are determined to be (0.5, 0). When the component x1 of the texture coordinate (x1, y1) of the image frame on the horizontal axis is greater than 0.5, it means that the current texture coordinate (x1, y1) is located in the mask area. The color value at the texture coordinate (x1, y1) is sampled, and the sampled color value is stored in the intermediate variable rightPixel. The value of any channel in the RGB channel corresponding to the texture coordinate (x1, y1) is used as the transparency alpha. The transparency alpha can indicate whether the color value of the pixel at the corresponding position in the image area can be displayed.

[0067] Step 520: Determine the pixel information to be displayed in the image area based on the pixel information of the image area and the transparency corresponding to the image area, and generate a target layer.

[0068] In some embodiments, the pixel information of the image area can be sampled to obtain a sampling result. For example, the color value of the image area is sampled to obtain a sampling result. In some embodiments, the color value of the image area can be sampled based on the texture coordinates corresponding to the image frame, and the sampling result of the color value of the image area can be stored through an intermediate variable. Further, the sampling result can be set to the pixel value of the pixel at the corresponding position in the mask area, or the sampling result can be set to the pixel value of the pixel at the corresponding position in the image area. In some other embodiments, after the sampling result is stored in the intermediate variable, the original pixel information in the image frame can be further deleted, and the sampling result can be displayed in the center of the image frame.

[0069] Taking the sampling result as the pixel value of the pixel at the corresponding position in the mask area as an example, for example, Figure 4In the image frame shown, when the component of the texture coordinate (x1, y1) of the image frame on the horizontal axis is greater than 0.5, it means that the current texture coordinate (x1, y1) is located in the mask area. At this time, the texture coordinate (x2, y2) corresponding to the current texture coordinate (x1, y1) in the left image area can be determined based on the midpoint coordinate (0.5, 0) of the image frame on the horizontal axis, where x2=x1-0.5 and y2=y1. Further, the color value at the texture coordinate (x2, y2) is sampled to obtain a sampling result, which is stored in the intermediate variable leftPixel, and the color value of the texture coordinate (x1, y1) can be set to the sampling result, so that the mask area on the right side of the image frame also stores the same preset image as the left image area.

[0070] In some embodiments, after obtaining the sampling result, the pixel information to be displayed in the sampling result can also be determined based on the transparency corresponding to the image area. Figure 4 The image frame shown can apply the transparency alpha determined based on the variable rightPixel to the intermediate variable leftPixel, so that the image displayed in the mask area on the right side of the image frame is a preset image with the color value of the background area removed.

[0071] In some embodiments, a target layer can be further generated based on the pixel information to be displayed in the sampling result. Specifically, the pixel information to be displayed in the sampling result can be scaled so that the pixel information to be displayed is located in the center of the target layer. According to a certain example, when the mask area is located on the left or right side of the image area, and the sampling result is set to the pixel value of the pixel at the corresponding position in the mask area, or the sampling result is set to the pixel value of the pixel at the corresponding position in the image area, the scaling process can be to stretch the image frame to the left or right by two times, so that the pixel information to be displayed is located in the center of the target layer. At this time, the preset image in the original image area is stretched outside the size of the image frame and is hidden. Since the image displayed in the image frame is stretched twice in the horizontal direction compared to before the scaling process, when applied to the target layer, the image frame can be compressed twice, thereby restoring the image displayed in the image frame before the stretching process. According to another example, when the original pixel information in the image frame is deleted and the sampling result is displayed in the center of the image frame, the scaling process can be to enlarge or reduce the image frame in proportion, so that the pixel information to be displayed in the sampling result is displayed in the center of the target layer.

[0072] This specification also provides a dynamic interface display system. Figure 6 is an exemplary block diagram of a dynamic interface display system according to some embodiments of this specification. Figure 6As shown, in some embodiments, the dynamic interface display system 600 may include a target video acquisition module 610 , a target layer generation module 620 , and a rendering module 630 .

[0073] The target video acquisition module 610 is used to acquire a target video, wherein the target video is composed of a preset number of image frames, and the image frame includes an image area and a mask area corresponding to the image area.

[0074] The target layer generation module 620 is used to determine the pixel information to be displayed in the image area based on the pixel information of the mask area in the image frame and the pixel information of the image area, and generate the target layer.

[0075] The rendering module 630 is used to render the dynamic interface based on the target layer.

[0076] In some optional embodiments, the target layer generation module 620 may further include a transparency determination unit 6210 and a target layer generation unit 6220. The transparency determination unit 6210 is used to determine the transparency corresponding to the image area based on the pixel information of the mask area; the target layer generation unit 6220 is used to determine the pixel information to be displayed in the image area based on the pixel information of the image area and the transparency corresponding to the image area, and generate the target layer.

[0077] In some optional embodiments, the transparency determination unit 6210 may also be configured to determine the transparency of pixels at corresponding positions in the image area based on color information or brightness information of the pixels in the mask area.

[0078] In some optional embodiments, the transparency determination unit 6210 may also be used to determine the transparency of the foreground area of ​​the image area as opaque, and determine the transparency of the background area of ​​the image area as transparent, based on the pixel information of the mask area.

[0079] In some optional embodiments, the target layer generation unit 6220 can also be used to sample pixel information of an image area to obtain a sampling result; determine the pixel information to be displayed in the sampling result based on the transparency corresponding to the image area; and generate a target layer based on the pixel information to be displayed in the sampling result.

[0080] In some optional embodiments, the target layer generation unit 6220 can also be used to sample pixel information of pixels in the image area, obtain a sampling result, and set the sampling result as the pixel value of the pixel at the corresponding position in the mask area.

[0081] In some optional embodiments, the target layer generation unit 6220 may also be used to scale the pixel information to be displayed in the sampling result so that the pixel information to be displayed is located at the center of the target layer.

[0082] In some optional embodiments, the rendering module 630 may also be used to merge the target layer with other layers, and render the dynamic interface according to the display order corresponding to each layer.

[0083] In some optional embodiments, the rendering module 630 may also be used to arrange and render each layer according to the display order corresponding to each layer, so that the color displayed on the pixel is the color of the corresponding pixel on the layer with the highest display order.

[0084] In some optional embodiments, the dynamic interface display system 600 may further include a target video generation module 640, which is used to obtain a preset number of preset images; generate a preset number of mask images corresponding to the preset number of preset images, wherein the mask image is used to represent the transparency of pixels in the corresponding preset image; splice the preset number of preset images with the preset number of mask images to obtain a preset number of image frames; and generate a target video based on the preset number of image frames.

[0085] For more information about each module, see Figures 1 to 5 The relevant description of will not be repeated here. It should be understood that Figure 6 The system and its modules shown can be implemented in various ways. For example, in some embodiments, the system and its modules can be implemented by hardware, software, or a combination of software and hardware. Among them, the hardware part can be implemented using dedicated logic; the software part can be stored in a memory and executed by an appropriate instruction execution system, such as a microprocessor or dedicated design hardware. Those skilled in the art will understand that the above methods and systems can be implemented using computer executable instructions and / or control codes contained in a processor, such as a disk, CD or DVD-ROM, etc., and such codes are provided in a carrier medium or a memory of a programmable device. The system and its modules of this specification can not only be implemented by hardware circuits such as ultra-large-scale integrated circuits or gate arrays, semiconductors such as logic chips, transistors, etc., or programmable hardware devices such as field programmable gate arrays, programmable logic devices, etc., but can also be implemented by software executed by various types of processors, and can also be implemented by a combination of the above hardware circuits and software (e.g., firmware).

[0086] It should be noted that the above description of the system and its modules is only for convenience of description and does not limit this specification to the scope of the embodiments. It is understandable that for those skilled in the art, after understanding the principle of the system, it is possible to arbitrarily combine the modules without deviating from this principle to form a subsystem connected to other modules. Or some modules may be split to obtain more modules or multiple units under the module. Such variations are all within the scope of the disclosure of this specification.

[0087] Some embodiments of the present specification also provide a computer program product, including computer instructions. When at least part of the computer instructions are executed by a processor, the present specification can be implemented. Figures 1 to 5 In some embodiments, the computer program product may only involve computer instructions, which may be carried by a storage medium or a processing device. In other embodiments, the computer program product may also be a storage medium or a processing device containing the aforementioned computer instructions. The processing device may include one or more processors and a storage medium.

[0088] In some embodiments, the processor may be a combination of one or more of the following processors: a central processing unit (CPU), an application specific integrated circuit (ASIC), an application specific instruction set processor (ASIP), a graphics processing unit (GPU), a physical processing unit (PPU), a digital signal processor (DSP), a field programmable gate array (FPGA), a programmable logic device (PLD), a programmable logic controller (PLC), a reduced instruction set computer (RISC), and a microprocessor.

[0089] In some embodiments, the storage medium may include a combination of one or more of the following: a mass storage, a removable storage, a volatile read-write memory, and a read-only memory (ROM). Exemplary mass storage may include a magnetic disk, an optical disk, a solid-state hard disk, and the like. Exemplary removable storage may include a flash disk, a floppy disk, an optical disk, a memory card, a compressed hard disk, a magnetic tape, and the like. Exemplary volatile read-write memory may include a random access memory (RAM). Exemplary random access memory may include a dynamic random access memory (DRAM), a double data rate synchronous dynamic random access memory (DDRSDRAM), a static random access memory (SRAM), a thyristor random access memory (T-RAM), and a zero capacitance memory (Z-RAM), and the like. Exemplary read-only memory may include a masked read-only memory (MROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), a compact disk read-only memory (CD-ROM), and a digital multifunction hard disk read-only memory, and the like.

[0090] The beneficial effects that may be brought about by the embodiments of this specification include but are not limited to: (1) by acquiring a target video, the target video is composed of a preset number of image frames, the image frame includes an image area and a mask area corresponding to the image area, based on the pixel information of the mask area in the image frame and the pixel information of the image area, the pixel information to be displayed in the image area is determined, and a target layer is generated, and the dynamic interface is rendered based on the target layer, thereby reducing the production cost of the dynamic interface display, improving the production efficiency, and achieving the high-precision display requirements of the dynamic interface display; (2) by generating an image frame containing a preset image and a corresponding mask image, a video format that does not support a transparent channel (such as MP4 format) can be created. Transparency information, thereby determining the transparency corresponding to each pixel in the preset image through the pixel information of the mask image in the image frame; (3) By using the target video to render the dynamic interface, it is not necessary to access the 3D resource model, making the rendering process simpler and reducing the cost of game development, and the target video is not limited by the number of faces of the three-dimensional model, so the content displayed in the target video (such as characters, etc.) can present a high-quality picture; (4) Since the target video occupies a small space, by using the target video to render the dynamic interface, a high frame rate and long-term dynamic effects can be achieved, thereby presenting a higher quality rendering picture, and the target video can also display 3D space animation, which is not limited by 2D picture animation. It should be noted that different embodiments may produce different beneficial effects. In different embodiments, the beneficial effects that may be produced may be any one or a combination of the above, or any other beneficial effects that may be obtained.

[0091] The basic concepts have been described above. Obviously, for those skilled in the art, the above detailed disclosure is only for example and does not constitute a limitation of this specification. Although not explicitly stated here, those skilled in the art may make various modifications, improvements and corrections to this specification. Such modifications, improvements and corrections are taught in this specification, so such modifications, improvements and corrections still belong to the spirit and scope of the exemplary embodiments of this specification.

Claims

1. A dynamic interface display method, characterized in that: The method comprises: Acquire a target video, wherein the target video is composed of a preset number of image frames, and the image frame includes an image area and a mask area corresponding to the image area; Determine pixel information to be displayed in the image area based on pixel information of the mask area in the image frame and pixel information of the image area, and generate a target layer; The dynamic interface is rendered based on the target layer.

2. The method according to claim 1, characterized in that The format of the target video is a video format that does not support a built-in transparent channel.

3. The method according to claim 1, characterized in that The mask area in the image frame is located at any one of the following positions of the preset area: right side, left side, upper side, and lower side.

4. The method according to claim 1, characterized in that The determining the pixel information to be displayed in the image area based on the pixel information of the mask area in the image frame and the pixel information of the image area, and generating the target layer comprises: Determining the transparency corresponding to the image area based on the pixel information of the mask area; The pixel information to be displayed in the image area is determined based on the pixel information of the image area and the transparency corresponding to the image area, and a target layer is generated.

5. The method according to claim 4, characterized in that The determining the transparency corresponding to the image area based on the pixel information of the mask area comprises: The transparency of the pixels at corresponding positions in the image area is determined based on the color information or brightness information of the pixels in the mask area.

6. The method according to claim 4, characterized in that The determining the transparency corresponding to the image area based on the pixel information of the mask area comprises: The transparency of the foreground area of ​​the image area is determined to be opaque based on the pixel information of the mask area, and the transparency of the background area of ​​the image area is determined to be transparent.

7. The method according to claim 4, characterized in that The step of determining the pixel information to be displayed in the image area based on the pixel information of the image area in the image frame and the transparency corresponding to the image area, and generating the target layer comprises: Sampling pixel information of the image area to obtain a sampling result; Determining pixel information to be displayed in the sampling result based on the transparency corresponding to the image area; The target layer is generated based on the pixel information to be displayed in the sampling result.

8. The method according to claim 7, characterized in that The mask area is located on the left or right side of the image area, and sampling the pixel information of the image area to obtain the sampling result includes: Pixel information of pixels in the image area is sampled to obtain a sampling result, and the sampling result is set as a pixel value of a pixel at a corresponding position in the mask area.

9. The method according to claim 7 or 8, characterized in that: The generating the target layer based on the pixel information to be displayed in the sampling result includes: Scaling is performed on the pixel information to be displayed in the sampling result so that the pixel information to be displayed is located at the center of the target layer.

10. The method according to claim 1, characterized in that The rendering of the dynamic interface based on the target layer includes: The target layer is merged with other layers, and the dynamic interface is rendered according to the display order corresponding to each layer.

11. The method according to claim 10, characterized in that The rendering of the dynamic interface according to the display order corresponding to each layer includes: The layers are arranged and rendered according to the display order corresponding to the layers, so that the color displayed on the pixel is the color of the corresponding pixel on the layer with the highest display order.

12. The method according to claim 10, characterized in that The other layers include at least one of the following layers: Background layer, virtual button layer, and character layer.

13. The method according to claim 1, characterized in that Also includes: Get a preset number of preset images; Generating a preset number of mask images corresponding to the preset number of preset images, wherein the mask images are used to represent the transparency of pixels in the corresponding preset images; splicing the preset number of preset images with the preset number of mask images to obtain a preset number of image frames; The target video is generated based on the preset number of image frames.

14. A dynamic interface display system, characterized in that: The system comprises: A target video acquisition module, used to acquire a target video, wherein the target video is composed of a preset number of image frames, and the image frame includes an image area and a mask area corresponding to the image area; A target layer generation module, used to determine the pixel information to be displayed in the image area based on the pixel information of the mask area in the image frame and the pixel information of the image area, and generate a target layer; A rendering module is used to render the dynamic interface based on the target layer.

15. A computer program product, characterized in that The invention comprises a computer program, and when at least a part of the computer program is executed by a processor, the method according to any one of claims 1 to 13 can be implemented.

Images