Method, apparatus, and electronic device for editing dynamic images

The method and apparatus for editing dynamic images on a graphical user interface address the limitations of Spine by allowing real-time editing and display, simplifying game development and reducing costs.

JP7869343B2Active Publication Date: 2026-06-02NETEASE (HANGZHOU) NETWORK CO LTD

Patent Information

Authority / Receiving Office
JP · JP
Patent Type
Patents
Current Assignee / Owner
NETEASE (HANGZHOU) NETWORK CO LTD
Filing Date
2022-09-22
Publication Date
2026-06-02

AI Technical Summary

Technical Problem

Current game development tools like Spine lack real-time animation editing capabilities and effect display, necessitating cumbersome processes involving multiple software programs, increasing labor and time costs.

Method used

A method and apparatus for editing dynamic images on a graphical user interface with image editing controls and a preview interface, allowing real-time rendering and display of dynamic images, followed by direct application to games, eliminating the need for multiple software programs.

Benefits of technology

Simplifies game development by enabling direct editing of dynamic images with real-time effect viewing, reducing labor and time costs, and enhancing development efficiency.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure 0007869343000001
    Figure 0007869343000001
  • Figure 0007869343000002
    Figure 0007869343000002
  • Figure 0007869343000003
    Figure 0007869343000003
Patent Text Reader

Abstract

The present disclosure provides a method, apparatus, and electronic device for editing a dynamic image. The method includes rendering and displaying, based on a first rendering texture, a first dynamic image corresponding to a first target resource on a graphical user interface in response to a load operation on the first target resource (step 102), and displaying an edited target dynamic image on a review interface in response to a first operation on an image editing control in the graphical user interface (step 104). Thereby, the game development process is simplified, labor costs and time costs are reduced, and development efficiency is improved.
Need to check novelty before this filing date? Find Prior Art

Description

Cross-reference to Related Applications

[0001] This application claims the priority of Chinese Patent Application No. 202210598199.7, filed on May 30, 2022, with the title "Method, Apparatus, and Electronic Device for Editing Moving Images", and all the contents of this Chinese patent application are incorporated herein by reference in their entirety.

Technical Field

[0002] The present disclosure relates to the field of game technologies, and particularly to a method, apparatus, and electronic device for editing moving images.

Background Art

[0003] In the process of game development, it is necessary to create skeleton animations. In related technologies, it is common to use the spine (2D skeleton animation creation) tool to create skeleton animation resources. However, in the actual process of game development, due to the diversity of game scenes, usually, skeleton animation resources need to be edited such as zoom setting and trimming to generate skeleton animations with different effects, display the animation effects in real time, and adapt to different game scenes. However, the spine tool does not have functions for animation editing and displaying editing effects in real time. Therefore, the static images of the skeleton animation resources can be edited with image processing software (Adobe Photoshop, abbreviated as "PS"), the edited resources can be uploaded to the server, resource packaging can be performed, and then loaded into the game scene to display the effects.

Summary of the Invention

[0004] The objective of the present disclosure is to provide a method, apparatus, and electronic device for editing moving images.

[0005] In a first aspect, the present embodiment provides a method for editing a dynamic image, providing a graphical user interface on a terminal device, the graphical user interface including an image editing control and a preview interface, the method including rendering and displaying a first dynamic image corresponding to a first target resource on the graphical user interface based on a first rendering texture in response to a load operation on a first target resource, and displaying an edited target dynamic image on the preview interface in response to a first operation on the image editing control.

[0006] In a second aspect, the present embodiment provides a dynamic image editing apparatus, a graphical user interface on a terminal device, the graphical user interface including image editing controls, the apparatus including a first display module and an editing module, the first display module configured to render and display a first dynamic image corresponding to a first target resource on the graphical user interface based on a first rendering texture in response to a load operation on a first target resource, and the editing module configured to display an edited target dynamic image on a preview interface in response to a first operation on the image editing controls.

[0007] In a third aspect, embodiments of the present disclosure provide an electronic device including a memory for storing computer executable instructions that can be executed by a processor, and a processor for executing computer executable instructions to implement the dynamic image editing method of the first aspect.

[0008] In a fourth aspect, embodiments of the present disclosure provide a computer-readable storage medium that stores computer-executable instructions that, when invoked and executed by a processor, prompt the processor to implement the dynamic image editing method of the first aspect.

[0009] The above method for editing dynamic images renders and displays a first dynamic image corresponding to the first target resource in the graphical user interface based on a first rendering texture in response to a load operation on the first target resource, and displays the edited target dynamic image in the preview interface in response to a first operation on the image editing control in the graphical user interface. In this way, dynamic images can be edited directly based on the preview interface, the display effect of the edited dynamic image can be seen in real time by rendering the texture, and the saved results can be directly applied to the game, thus avoiding the problem of dynamic images needing to be developed in multiple software programs, simplifying the game development process, reducing manpower and time costs, and increasing development efficiency. [Brief explanation of the drawing]

[0010] [Figure 1] This is a flowchart of the method for editing dynamic images in the embodiments of this disclosure. [Figure 2] This is a schematic diagram of the graphical user interface in the embodiments of this disclosure. [Figure 3] This is a schematic diagram of another graphical user interface in an embodiment of the present disclosure. [Figure 4] This is a schematic diagram of another graphical user interface in an embodiment of the present disclosure. [Figure 5] This is a schematic diagram of another graphical user interface in an embodiment of the present disclosure. [Figure 6] This is a schematic diagram of the editing interface in the embodiments of this disclosure. [Figure 7] This is a schematic diagram of another graphical user interface in an embodiment of the present disclosure. [Figure 8] This is a schematic diagram of another graphical user interface in an embodiment of the present disclosure. [Figure 9] This is a schematic diagram of the first edge interface in an embodiment of the present disclosure. [Figure 10] This is a schematic diagram of the target dynamic image in an embodiment of the present disclosure. [Figure 11] This is a schematic diagram of another graphical user interface in an embodiment of the present disclosure. [Figure 12] This is a schematic diagram of the game interface in the embodiment of the disclosure. [Figure 13] This is a schematic diagram of the comparison interface in the embodiments of this disclosure. [Figure 14] This is a configuration diagram of a dynamic image editing device according to an embodiment of the present disclosure. [Figure 15] This is a diagram showing the configuration of an electronic device in an embodiment of the present disclosure. [Modes for carrying out the invention]

[0011] To further clarify the purpose, technical methods, and advantages of the embodiments of this disclosure, the technical methods of this disclosure are described below clearly and completely in reference to the accompanying drawings. Obviously, the embodiments described are some, but not all, embodiments of this disclosure. All other embodiments obtained by those skilled in the art without creative work based on the embodiments of this disclosure are within the scope of protection of this disclosure.

[0012] Current game development requires the creation of skeleton animations. The most common technique for creating skeleton animation resources is using the Spine tool (which creates 2D skeleton animations). However, in actual game development, due to the diversity of game scenes, it's usually necessary to edit the skeleton animation resources (zooming, cropping, etc.) to generate skeleton animations with different effects, display the animation effects in real time, and adapt them to different game scenes. However, the Spine tool lacks animation editing capabilities and the ability to display editing effects in real time. Therefore, it's necessary to edit the still images of the skeleton animation resources using image processing software (Adobe Photoshop, abbreviated as "PS"), upload the edited resources to a server, package them, and then load them into the game scene to display the effects. This method is cumbersome, incurs high labor and time costs, has limited editing capabilities, and fails to meet the needs of developers.

[0013] Furthermore, while the Spine tool can output dynamic character sprite resources, it cannot convert these resources into edited dynamic image effects. It also cannot support real-time effect display within games. Position, size, zoom, etc., cannot be edited quickly and easily. It cannot handle edge virtualization. Mirroring is not possible. Static PNG pictures cannot be saved quickly. Appropriate voice effects with mouth movements cannot be displayed. It cannot be properly integrated with the story editor, and resources cannot be freely called in conjunction with the story editor. It cannot add emotional actions in accordance with story dialogue, or increase changes in character movement and facial expressions. The operation is inconvenient, the process requires cooperation from multiple parties, is time-consuming, and is too cumbersome, making it unsuitable for mass processing. Based on this, embodiments of this disclosure provide a method, apparatus, and electronic device for editing dynamic images applicable to electronic devices having animation or animation editing capabilities, such as computers and laptops.

[0014] To facilitate the understanding of this embodiment, first, the method for editing dynamic images disclosed in the embodiments of the present disclosure will be described in detail. A graphical user interface is provided on a terminal device, and the graphical user interface includes an image editing control and a preview interface. As shown in FIG. 1, this method includes the following steps.

[0015] In step S102, in response to a load operation on a first target resource, based on a first rendering texture, a first dynamic image corresponding to the first target resource is rendered and displayed on the graphical user interface.

[0016] The above-mentioned first target resource usually refers to a still image dynamic resource created by a Spine animation tool. The above-mentioned first rendering texture mainly renders the dynamic image in the first target resource onto the first rendering texture and can also be represented as a render texture for displaying on the graphical user interface. The above-mentioned first dynamic image can be a dynamic portrait, a dynamic virtual object in a game, such as a riding, task character, etc. Here, Render texture is a general-purpose rendering texture created and updated at runtime, which can add what needs to be rendered and then can be used in a game like a normal texture, such as for creating a picture control.

[0017] Specifically, the first target resource is a composite diagram combining scatter diagrams, that is, a 2D skeleton animation, and is a composite diagram in which images related to each skeleton part are combined into one large diagram. Since it is not a complete dynamic diagram, it is disadvantageous for display processing. To achieve a better display effect, resource rendering is performed using the first rendering texture and then displayed.

[0018] When actually implemented, as shown in FIG. 2, enter the number of the first target resource (number 1003 in FIG. 2) that needs to be loaded into the number control, and click the load control. Then, use the spine module of the game engine to input the first target resource into the editor, and the editor can render the first target resource and display it on the graphical user interface of the editor. Specifically, a first rendering texture can be dynamically created, the animation in the first target resource can be rendered onto the first rendering texture, and the rendered first rendering texture can be displayed on the graphical user interface. Specifically, the rendered first rendering texture can be applied to the graphical user interface and displayed in the game.

[0019] In step S104, in response to the first operation on the image editing control, display the edited target dynamic image on the preview interface.

[0020] The above image editing control is mainly used to edit the size, position, mirror, etc. of the first dynamic image. The above first operation may be a click operation, a click and drag operation, a scroll operation, etc., and usually different operations are required for different editing controls. The above preview interface can also be represented as a panel having a trimming function for trimming the first dynamic image, and can be understood as a UI interface displayed as a panel.

[0021] For example, the first operation can be performed on an image editing control that has a trimming function, and the first dynamic image can be set on the preview interface using the trimming function of the control preview interface of the game engine UI module, that is, the rendered first rendering texture can be set on the panel, the preview interface can be trimmed to a shape of a different size, a portion of the first dynamic image, such as a head area or a half-body area, can be displayed in that shape, and the effect of further trimming and editing the first dynamic image can be achieved.

[0022] Furthermore, for example, it is possible to perform zoom operations on an image editing control that has a zoom function, thereby enlarging or reducing the size of the first dynamic image, that is, modifying the rendered first rendering texture, and displaying the enlarged or reduced first dynamic image in the image user interface, and if a cropping operation has already been performed, displaying the enlarged or reduced target dynamic image.

[0023] Furthermore, for example, it is possible to perform a movement operation on the displayed dynamic image to change the display position of the first dynamic image and then display the dynamic image after the position change.

[0024] In actual implementation, in response to a first operation on the image editing controls, the first dynamic image can be edited in the preview interface, and the edited target dynamic image can be displayed in the preview interface. All of the above editing operations are performed based on the preview interface, and the result is displayed in the graphical user interface after editing is complete.

[0025] This embodiment provides a method for editing dynamic images, which, in response to a load operation on a first target resource, renders and displays a first dynamic image corresponding to the first target resource on a graphical user interface based on a first rendering texture, and in response to a first operation on the image editing controls in the graphical user interface, displays the edited target dynamic image on a preview interface. This method allows for direct editing of dynamic images based on the preview interface, enables real-time viewing of the display effect of the edited dynamic image using the rendering texture, allows for direct application of saved results to the game, avoids the problem of dynamic images needing to be developed in multiple software programs, simplifies the game development process, reduces labor and time costs, and increases development efficiency.

[0026] Following step S104 above, the method further includes, in response to a save operation of the target dynamic image, converting data information corresponding to the target dynamic image into a target code and saving the target code to a predetermined profile.

[0027] Specifically, as shown in Figure 2, clicking the save control displayed in the figure allows you to save data information corresponding to the target dynamic image. This data information may be the edited target dynamic image, a still image of the target dynamic image, or editing data being edited. For example, it may be data such as cropping size, zoom, and movement position. The target code mentioned above is code in the target scripting language. The purpose of converting the data information corresponding to the target dynamic image into target code is that in an actual game, that target code can be read by program scripts placed in that game. Furthermore, the profile can be provided to subsequent game interfaces for use.

[0028] Specifically, in actual game development, when using the Lua scripting language to load files, data information corresponding to the target dynamic image can be converted into Lua scripting code and saved to a given config.lua profile. Since this config.lua profile is primarily used to provide subsequent game interfaces, if the actual game uses the Lua scripting language, the profile using Lua in the editor will perform better.

[0029] In this embodiment, multiple functional interfaces are encapsulated in the editor based on the first target resource, allowing the resource to be edited, displayed, and saved in real time via the editor, and the last edited first target resource can be output. The output file typically includes dynamic images, still images, and various parameters set in the editor, which typically include trimming size, movement position, and whether or not to flip.

[0030] The method of directly rendering and displaying resources in a graphical user interface is disadvantageous because it has a single function, making it difficult to subsequently edit various effects on the dynamic image displayed in the graphical user interface. In order to enhance the display effect and realize additional editing functions, step S102 above may, in a possible embodiment, render and display a first dynamic image corresponding to a first target resource in the graphical user interface based on a first rendering texture. The system loads a first target resource, creates a first rendering texture, renders the first target resource to the first rendering texture frame by frame to obtain the target first rendering texture, determines the target first rendering texture as the first dynamic image, displays the first dynamic image in the first display area of ​​the graphical user interface, where the display priority of the first dynamic image is higher than that of the image editing controls, there are multiple first dynamic images, and each first dynamic image has a different size.

[0031] In practice, the graphical user interface can display, for example, three different sizes of the first dynamic image, as shown in Figure 3, and can display multiple first dynamic images of different sizes. Therefore, in actual implementation, multiple first rendering textures of different sizes can be created, which are mainly used to render and display the first dynamic images of different sizes, and each first rendering texture must be the same size as pre-set in the editor. Specifically, the game engine's render texture module can be used to dynamically create multiple first rendering textures of different sizes, i.e., render textures, and render the first target resource to different first rendering textures. Here, the first target resource is an animation resource, and since the animation changes, it is necessary to render the animation frame by frame during the rendering process to obtain multiple rendered first rendering textures. Finally, the rendered first rendering textures are docked and displayed in the first display area of ​​the graphical user interface and displayed in the game, after which the complete dynamic image is formed, which is convenient for continuing to process the display effects in the game. Furthermore, the display priority of the first dynamic image is higher than that of the image editing controls, and if the edited first dynamic image is large, some controls within the graphical user interface may be obscured by the first dynamic image.

[0032] Furthermore, the purpose of displaying multiple dynamic images of different sizes is that in actual games, the same first dynamic image may require different display methods in different game scenes. For example, in one game scene, a head image may be displayed, in another, a half-body image may be displayed, and in yet another, a full-body image may be displayed. Therefore, in this embodiment, multiple first dynamic images of different sizes can be provided to the editor so that developers can edit and develop them as needed.

[0033] In the method described above, the first dynamic image is rendered using rendering logic that renders textures, and displayed in the first display area of ​​the graphical user interface. This is advantageous for subsequent editing of dynamic images and simultaneously enhances the displayable effect. Furthermore, by displaying multiple first dynamic images of different sizes, a wealth of resources for editing are provided, and the editing results of the first dynamic image are enriched, further improving development efficiency.

[0034] The above image editing control includes a first cropping control, and in step S104 below, in a possible embodiment, the edited target dynamic image is displayed in the preview interface in response to the first operation on the image editing control. (1) In response to a trigger operation for the first trimming control, the first dynamic image is set to the preview interface, where the preview interface has a trimming function. (2) The preview interface is trimmed using the trimming function, and the trimmed target dynamic image is displayed on the preview interface.

[0035] The first trimming control described above corresponds to "Start Trimming" shown in Figure 4. By clicking the selection box before "Start Trimming," the first dynamic image can be applied to the preview interface, i.e., the rendered first rendering texture can be applied to the preview interface. Specifically, using a pre-set size parameter, the preview interface can be trimmed so that the trimmed preview interface displays only the trimmed portion of the first dynamic image, i.e., the target dynamic image described above. As shown in Figure 4, the displayed trimmed target dynamic image may be a head image, a half-body image, or a full-body image of the first dynamic image. In this method, the first dynamic image is set on the preview interface, the preview interface is trimmed, and a trimming editing function for the first dynamic image is realized, thereby improving editing efficiency.

[0036] In step (2) above, one possible embodiment is to trim the preview interface using the trimming function of the preview interface and display the trimmed target dynamic image in the preview interface. The preview interface's trimming function trims the preview interface according to the trimming size corresponding to the first dynamic image to obtain a trimming area. Here, the first dynamic image may be multiple, and the trimming size corresponding to each first dynamic image will be different. The dynamic image within the trimming area is determined as the target dynamic image, and the target dynamic image is displayed in the trimming area.

[0037] Each of the first dynamic images described above has a corresponding trimming size, as shown in Figure 4, and is displayed in the graphical user interface at 82x82, 300x300, and 490x490 resolutions. For example, the preview interface corresponding to the first dynamic image in Figure 3 is trimmed to a trimming size of 82x82 to obtain an 82x82 trimming area, which is the first trimming area shown in Figure 4. The dynamic image displayed within this trimming area is determined to be the target dynamic image, and finally, the target dynamic image is displayed in the trimming area. As shown in Figure 4, ultimately, three trimming areas can be obtained, and the target animation corresponding to each trimming area can be displayed. In this method, the preset screen is trimmed based on the trimming size corresponding to each first dynamic image, and the target dynamic image is displayed in the trimming area, further improving editing and development efficiency.

[0038] As shown in Figure 4, the graphical user interface further includes a zoom control corresponding to the "59.2700 / 20.0000" control under the scaling configuration in Figure 4, determines the dynamic image in the cropping area as the target dynamic image, displays the target dynamic image in the cropping area, and then the method further... The process includes, in response to a second operation on the zoom control, resizing the first dynamic image according to the zoom parameter displayed on the zoom control, and displaying the dynamic image to be shown in the cropping area based on the resized first dynamic image.

[0039] Specifically, the editor can control the movement of the zoom control with a mouse click or after a click, and select a zoom parameter. If the zoom parameter displayed in the zoom control is greater than the initial value of 59.27, the size of the first dynamic image is enlarged according to the displayed zoom parameter. If the zoom parameter displayed in the zoom control is less than the initial value of 59.27, the size of the first dynamic image is reduced according to the displayed zoom parameter. After adjusting the first dynamic image, the target dynamic image displayed in the cropping area is also adjusted. Specifically, since the cropping area does not change, the image displayed in the cropping area will inevitably change after adjusting the size of the first dynamic image. This method allows for zoom editing of the first dynamic image by controlling and displaying the zoom parameter in real time, further improving editing and development effects.

[0040] Furthermore, the method includes determining a dynamic image within the trimming area as a target dynamic image, displaying the target dynamic image in the trimming area, and then controlling the first dynamic image to move in response to a position adjustment operation on the target dynamic image displayed in the trimming area, displaying the position information of the moved first dynamic image, and adjusting the dynamic image displayed in the trimming area based on the moved first dynamic image.

[0041] Continuing with the position information display area shown in Figure 4, in actual implementation, the user can control the mouse to perform click-and-move operations on the target dynamic image displayed in each trimming area, thereby controlling the movement of the first dynamic image and displaying the position information of the moved first dynamic image, such as X, 27, Y, -219. Simultaneously, the moved first dynamic image within the trimming area is determined as the target dynamic image, and the target dynamic image is displayed. In this method, the movement of the first dynamic image can be controlled, its position adjusted, and position information displayed, further enhancing editing and development effects.

[0042] The above image editing controls further include a second cropping control and a third cropping control, as shown in Figure 4, the second cropping control corresponds to "Crop background" in the figure, and the third cropping control corresponds to "Edit custom width and height" in the figure. After determining the dynamic image within the cropping area as the target dynamic image and displaying the target dynamic image in the cropping area, the above method further... (1) Trigger operation for the second trimming control, marking and displaying the trimming area, (2) In response to a trigger operation on the third trimming control, an editing interface corresponding to the target trimming area is displayed, wherein the editing interface includes parameter editing controls and a decision control. (3) Includes adjusting the size of the trimming area based on parameter editing controls and decision controls.

[0043] The above markings can be highlighted, or other display formats can be used to highlight the trimming area. Specifically, the editor can click the "Trim Background" selection box to highlight each trimming area, and the above markings can be displayed in the form of a black frame, as shown in Figure 5. Next, by clicking the "Edit Custom Width and Height" selection box, the editing interface corresponding to the target trimming area is displayed, where the target trimming area usually refers to the trimming area with the largest trimming size. As shown in Figure 6, the editing interface includes parameter editing controls and a decision control, where "Change Width and Height" in Figure 6 corresponds to the decision control, and the parameter editing controls include input controls for the trimming size of "Width" and "Height". When actually implemented, the width and height that need to be changed can be edited in the parameter editing controls, and the size of the trimming area can be adjusted by clicking "Change Width and Height", and the modified trimming area can be displayed. Finally, by clicking "Enable Custom Width and Height" in the figure, the modified trimming size is applied to the graphical user interface.

[0044] As described above, the second and third trimming controls allow you to customize and adjust the size of the trimming area, not just the predetermined trimming size, thereby improving the flexibility of animation editing.

[0045] Based on the parameter editing control and decision control described above, adjusting the size of the trimming area can be done, in a possible embodiment, by determining the size parameter corresponding to the editing operation in response to an editing operation on the parameter editing control, updating the size of the target trimming area based on the size parameter in response to a trigger operation on the decision control, and marking and displaying the updated trimming area.

[0046] Specifically, the editor can enter the desired trimming size in the input boxes corresponding to "Width" and "Height" shown in Figure 6. Once the input is complete, clicking "Modify Width and Height" below will determine the size parameters corresponding to the editing operation. Clicking the confirmation control, i.e., "Modify Width and Height" in Figure 6, will update the size of the target trimming area displayed in the editing interface, and similarly, the updated trimming area can be displayed. Finally, clicking "Enable Custom Width and Height" in the figure will apply the modified trimming size to the graphical user interface. Of course, directly canceling the selection of the second trimming control will cancel the display of the editing interface.

[0047] Since the editor can move the position of the first dynamic image within the trimming area, the graphical user interface also includes reference box controls and reference box hide controls to further enhance the display effect of the target dynamic image within the trimming area. Here, there are usually multiple reference box controls, and as shown in Figure 7, the first trimming area displays three reference box controls: "Reference Box 1 Class 46", "Reference Box 2 Class 50", and "Reference Box 3 Class 72", while the second trimming area displays four reference box controls: "Reference Box 1 Class 64", "Reference Box 2 Class 64", "Reference Box 3 Class 82", and "Reference Box 4 Class 200", with different sizes of reference boxes displayed for each reference box control. Of course, the sizes of the reference boxes displayed for reference box controls in trimming areas of different sizes may also be different.

[0048] Reference boxes are necessary only for faces and busts. The role of the reference box is to divide the central area within a face or bust, making it convenient and aesthetically pleasing for the editor to position the main content area of ​​the image (e.g., a person's face) within the central area. Full-body images do not require a reference box because all content is displayed.

[0049] The method further includes determining a dynamic image within the trimming area as the target dynamic image, displaying the target dynamic image in the trimming area, and then, in response to a trigger operation on the reference box control, displaying a reference box corresponding to the reference box control at a predetermined position in the trimming area, and in response to a trigger operation on the hide reference box control, canceling the display of the reference box.

[0050] As shown in Figure 7, the editor can click "Reference Box 2 Class 64" to display the reference box shown in the figure in the centrally displayed cropping area. This reference box is primarily used to instruct the editor to adjust the position of the first dynamic image within the cropping area. When it is necessary to adjust the position of the first dynamic image within the cropping area, the editor can adjust it relative to the reference box, for example, by centering the head of the image within the reference box. Once the position adjustment of the first dynamic image is complete, the editor can click the "Hide Reference Box" control to cancel the display of the reference box. In the above embodiment, displaying the reference box in the cropping area makes it easier for the editor to adjust the position of the first dynamic image, thereby improving editing efficiency and the effectiveness of the dynamic image.

[0051] Because the edge gradient effect provided by the spine tool is very poor, the graphical user interface also includes a gradient parameter configuration control to display a better gradient effect. Here, the gradient parameter configuration control adjusts the transparency of the edges of the target dynamic image displayed in the trimming area, so that the edge areas of the target dynamic image have a gradient effect.

[0052] After displaying the edited target dynamic image in the preview interface in response to a first operation on the image editing control, the method further includes adjusting the transparency of the edge regions of the target dynamic image in response to a third operation on the gradient parameter configuration control.

[0053] The third operation described above may be a click operation, a click-and-move operation, or the like. The gradient parameter configuration controls typically consist of multiple controls, each used to control the transparency of the edge region in a specified direction of the target dynamic image. For example, the upper gradient parameter configuration control is used to control the transparency of the upper edge region of the target animation. Here, the transparency is in gradient format, creating a gradient display effect. In this method, the gradient parameter configuration controls can be used to control and adjust the transparency of the edge region of the target animation, achieving a transparency gradient display effect and enhancing the effect of the target animation.

[0054] The above gradient parameter configuration control includes a plurality of first gradient parameter configuration controls, corresponding to the above first gradient parameter configuration controls as shown in Figure 8, such as "Top, 0.0000 / 1.0000", "Bottom, 0.0000 / 1.0000", "Left side, 0.0000 / 1.0000", and "Right side, 0.0000 / 1.0000". Adjusting the transparency of the edge region of the target animation in response to a third operation on the gradient parameter configuration control may include the following steps in a possible embodiment.

[0055] In step 1, in response to a selection operation on the first parameter of the first gradient parameter configuration control, the first edge region of the target dynamic image is determined based on the first parameter, where the first parameter is used to indicate the direction and extent of the first edge region. In actual implementation, refer to the gradient parameter configuration control displayed in the middle trimming area of ​​Figure 8, click "Top, 0.0000 / 1.0000" to select the first parameter as 0.2000, where the first parameter represents the percentage area from the top edge to the bottom edge of the target dynamic image. That is, 0.2000 represents 20% of the area from the top edge to the bottom edge of the target dynamic image, which is defined as the first edge area, and a schematic diagram of the first edge area is shown in Figure 9. Here, a first parameter of 0.0000 indicates that there is no first edge area, and a first parameter of 1.0000 indicates that the first edge area is from the top edge to the bottom edge of the target animation. Similarly, by clicking "Bottom, 0.0000 / 1.0000", "Left side, 0.0000 / 1.0000", and "Right side, 0.0000 / 1.0000", selecting the first parameter determines the corresponding first edge region.

[0056] In step 2, adjust the transparency of the first edge region.

[0057] Specifically, it can be directly adjusted based on predetermined parameters. For example, by adjusting the transparency of the first edge region according to a rule that transparency gradually decreases from the edge to the center, the transparency gradually decreases from the edge to the center.

[0058] Furthermore, the area requiring transparency adjustment can be determined from the first edge area, and within this area, the area requiring transparency adjustment can be adjusted using a predetermined method. For example, only the 50% edge area from the first edge area can be determined. In other words, the transparency is adjusted to an intermediate position between the upper edge and the first edge of the first edge area, resulting in an effect where the transparency gradually decreases to an intermediate position between the upper edge and the first edge of the first edge area.

[0059] As described above, the first gradient parameter configuration control is used to select the first parameter, determining the first edge region where the gradient effect should be displayed. Then, the transparency of the first edge region is adjusted so that the edges of the target dynamic image can have a gradient effect, thereby enhancing the display effect of the dynamic image.

[0060] The above gradient parameter configuration control includes a second gradient parameter configuration control, which corresponds to "Gradient, 0.0000 / 1.0000"" shown in Figure 8. Here, adjusting the transparency of the first edge region in step (2) includes the following steps in a possible embodiment.

[0061] In step 21, in response to a selection operation on the second parameter of the second gradient parameter configuration control, the second edge region is determined from the first edge region based on the second parameter, where the second parameter is used to indicate the range of the second edge region, and the second edge region is less than or equal to the first edge region. In step 22, the transparency of the second edge region is adjusted, where the closer to the edge of the second edge region, the higher the transparency value of the region, and the further away from the edge of the second edge region, the lower the transparency value of the region.

[0062] For example, if the first edge region is the upper edge region, the second parameter is used to indicate the range of the region from the upper position of the first edge region to the target position of the intermediate region. For example, if the second parameter is 0.0000, the second edge region is not determined, and of course, no gradient effect is displayed. If the second parameter is 1.0000, the first edge region is directly determined as the second edge region. If the second parameter is 0.5000, the region between the upper position of the first edge region and the intermediate position (i.e., the 50% position) is determined as the second edge region.

[0063] Next, the higher the value used to adjust the transparency of the upper edge of the second edge region, the lower the value used to adjust the transparency of the lower edge of the second edge region. For example, as shown in 10, if the first parameter at the top of the intermediate trimming region is 0.2000 and the second parameter is 0.5000, there is a gradient effect in the second edge region. As described above, the second parameter is selected based on the second gradient parameter configuration control, the second edge region is determined by the second parameter, and the transparency in the second edge region is adjusted to achieve a gradient effect in the second edge region, further improving the effect of the dynamic image.

[0064] Depending on the cropping size, it may be necessary to display only a portion of the image, such as a half-body image, and it may be undesirable to leave harsh edges at the cropping edges. Some related techniques directly perform edge gradient effects via spine, but this method is not very effective. To achieve a good gradient effect, adjusting the transparency of the second edge region in step 22 above may include the following steps in a possible embodiment: In step 221, obtain a predetermined gradient material, In step 222, a gradient material is applied to the first dynamic image via a predetermined rendering interface. In step 223, the transparency values ​​corresponding to the pixel points of the second edge region are adjusted using a gradient material, so that the adjusted second edge region has a transparency gradient effect.

[0065] The editor encapsulates the spine-rt module, which can be represented as CSpine2ImageRTLayout. In practice, a post-processing material for edge gradients, Ui_spine_alpha_rt, i.e., the gradient material described above, is created in advance. The gradient material is then applied to the first dynamic image through a rendering interface (e.g., GLProgram) pre-configured by the game engine. The rendered dynamic image is then processed, and the transparency value corresponding to the pixel point in the second edge region is adjusted based on the position information of the pixel point in the second edge region through the gradient material, thereby giving the adjusted second edge region a transparency gradient effect. Here, the logic encapsulates the interaction with GLProgram and the underlying rendering interface (D3D or OpenGL), allowing the rendering logic to be modified from the shader level, which is convenient for customizing various effect effects on the interface control during gameplay. In the above method, the gradient effect of the second edge region is realized by applying a gradient material to the first dynamic image, making the operation method simple and improving the gradient effect of the second edge region.

[0066] To further enhance the effect of the second edge region, step 223 may, in a possible embodiment, adjust the transparency values ​​corresponding to the pixel points of the second edge region using a gradient material. This may involve the gradient material's shader sampling the UV coordinates of the target pixel points of the second edge region, determining the distance between the target pixel points and the edge pixel points of the second edge region based on the UV coordinates of the target pixel points, determining a target value for the transparency corresponding to the target pixel points based on the distance value and predetermined control parameters, and adjusting the transparency values ​​corresponding to the target pixel points of the second edge region to the target value.

[0067] In the shader for a gradient material, gradient adjustment rules are set in advance. Specifically, if the second edge region is the upper edge region, the UV coordinates of each pixel point in the second edge region are sampled, and for each pixel point, the distance value between the pixel point and the pixel point at the upper position of the second edge region is determined based on the UV coordinate of the pixel point. The predetermined control parameter may be a transparency value corresponding to different distance values, and the specific correspondence is that the smaller the distance value, the larger the corresponding transparency value, and the larger the distance value, the smaller the corresponding transparency value. Of course, with the predetermined control parameter, the magnitude of the distance value usually needs to be determined based on the range value of the second edge region, and when the distance value is 0, the corresponding transparency value is at most 1, and when the distance value is the maximum range value of the second edge region, the corresponding transparency value is at least 0. The above distance value and transparency value can be determined based on the linear function y = -ax + 1, where x is the distance value and y is the transparency value, and as the distance value increases or decreases, the transparency gradually decreases or increases.

[0068] For example, if the distance between the pixel point and the pixel point at the top of the second edge region is at least 0, the transparency value of the corresponding pixel point is 1; if the distance between the pixel point and the pixel point at the top of the second edge region is at most 1, the transparency value of the corresponding pixel point is 0; and if the distance between the pixel point and the pixel point at the top of the second edge region is 0.1, the transparency value of the corresponding pixel point is 0.9, and so on.

[0069] In the above method, the gradient material shader adjusts the transparency value of the pixel point based on the distance value between the pixel point and the edge pixel point of the second edge region, thereby further improving the gradient effect of the second edge region.

[0070] When using these resources in certain situations (e.g., on a low-configuration device), the consumption of loading and displaying dynamic images stored in the editor may be high. Based on this, the graphical user interface further includes static controls and image saving controls. As shown in Figure 11, the static controls correspond to “Static Spine” in Figure 11, and the image saving controls correspond to “Save Image” in Figure 11. After displaying the edited target dynamic image in the preview interface in response to a first operation on the image editing controls, the method further: This includes creating a second rendering texture in response to a trigger operation on a static control, rendering the initial frame of the target dynamic image to the second rendering texture to obtain a target second rendering texture, determining the target second rendering texture as the initial frame image, and saving the initial frame image in response to a trigger operation on an image save control.

[0071] In this embodiment, the editor also provides the functionality to save dynamic images as static images. Specifically, the editor can click the "Static Spine" selection box to first create a second rendering texture and represent it as a render texture. Then, the initial frame of the target dynamic image can be rendered onto the second rendering texture to obtain the target second rendering texture. The target second rendering texture is then designated as the initial frame picture and displayed in the graphical user interface. Finally, the editor can click "Save Image" to output the initial frame image to a specified profile. This method, by creating a second rendering texture and saving a static image of the target dynamic image, uses fewer resources for static images, allowing static images to be used on low-configuration devices and reducing the operating pressure on the device.

[0072] The graphical user interface described above further includes a plurality of game background display controls, which correspond to "1" to "10" in Figure 11, as shown in Figure 11. The method further includes displaying a first game background screen corresponding to the first game background display control in the background area of ​​the graphical user interface in response to a trigger operation on the first game background display control among the plurality of game background display controls.

[0073] Each of the 10 game background display controls shown in Figure 11 corresponds to one type of game scene screen. In practice, during the editing of the first dynamic image, or before loading the first target resource, you can click the game background display control to display the game background screen you want to preview. After loading the resource, you can more intuitively integrate the displayed dynamic image into the game scene, achieving the effect of previewing the final screen in real time.

[0074] The graphical user interface further includes a mirror control, which corresponds to the “left-right mirror” in Figure 11, and in response to a load operation on a first target resource, renders and displays a first dynamic image corresponding to the first target resource on the graphical user interface based on a first rendering texture. The method further includes, in response to a trigger operation on the mirror control, inverting the first dynamic image to obtain a mirror image of the first dynamic image and displaying the mirror image of the first dynamic image.

[0075] The editor can choose whether to perform a mirroring operation as needed and save the mirrored image. If implemented, the editor can click "Mirror Left / Right" to display the mirrored image of the first dynamic image while simultaneously mirroring the first dynamic image. In other words, it mirrors the rendered first rendering texture. Here, the mirroring function is typically used in the story editor dialog. This method supports left / right mirror animation of dynamic characters and allows for the mirroring of the first dynamic image, further enriching the editing capabilities.

[0076] To simulate and preview the representation and display effects of target animations within a game scene, the graphical user interface described above, as shown in Figure 11, further includes preview controls, and the method described above further includes the following steps.

[0077] (1) In response to a trigger operation on the preview control, the game interface is displayed in the graphical user interface, where the game interface includes resource load controls and a game scene screen. The editor can click the preview control to display the game interface on top of the graphical user interface, as shown in Figure 12, which includes the resource load control and the game scene screen displayed in the background. Here, the resource load control includes a dynamic image number input control and a load control, corresponding to "Image ID" and "Load" in Figure 12.

[0078] (2) In response to the fourth operation on the resource load control, load the second target resource corresponding to the fourth operation and the audio data corresponding to the second target resource, and display the second dynamic image corresponding to the second target resource on the game interface. The editor enters the number of the dynamic image they want to preview into the input control and clicks Load, which loads a second target resource corresponding to the number and the corresponding audio data for that second target resource. Here, the second target resource refers to an animation resource that has been edited and saved, and the audio data corresponding to the second target resource is audio data that has been pre-generated by an AI voice generation tool. Specifically, the editor loads the audio data corresponding to the second target resource from the AI ​​voice generation tool via a pre-configured acquisition interface, and can then display the second dynamic image corresponding to the second target resource in the game interface.

[0079] (3) Based on the second target resource and audio data, the operation screen and sound audio corresponding to the second dynamic image are played.

[0080] The action screen corresponding to the second dynamic image described above includes not only animations of body parts but also mouth animations, which are pre-created using the Spine tool and typically refer to vowel mouth animations. For example, the Spine tool creates five types of vowel mouth animation frames for the character and stores them in the second target resource. Specifically, the action screen and sound audio corresponding to the second dynamic image are played in the preview interface, where the sound audio corresponds to the mouth animation. For example, the mouth animation plays simultaneously with the sound, and stops simultaneously with the sound. In general, the body part animations of the second animation are always playing. At the same time, text corresponding to the sound audio is also displayed simultaneously and synchronously.

[0081] In the above method, the interface can be displayed using preview controls, and the preview interface allows for simulation and preview of the representation and display effects of the target dynamic image within the game scene. Furthermore, it is possible to improve editing functions and enhance the effects of the dynamic image.

[0082] In step (3) above, the second target resource includes a predetermined number of mouth animations, and playing an action screen and sound audio corresponding to the second dynamic image based on the second target resource and audio data includes, in a possible embodiment, analyzing the audio data, obtaining the corresponding sound audio, determining the target mouth animation corresponding to each target audio in the sound audio from the number of mouth animations, playing an action screen and sound audio corresponding to the second dynamic image, and simultaneously playing the target mouth animation corresponding to each target audio.

[0083] Specifically, a predetermined AI voice analysis tool converts audio data into analyzable speech audio. Then, from multiple mouth animations, the target mouth animation for each frame on the corresponding audio timeline is determined. Finally, during playback, the synchronization effect of mouth movements and speech in the final animation is achieved. This method analyzes audio data and determines the target mouth animation corresponding to each sound audio, thereby achieving not only dynamic expression effects in game scenes of real-time preview animations, but also speech effects through the synchronization of speech and action.

[0084] To save on resource development workload and reduce the total number of packets of stored dynamic resources, the graphical user interface further includes a comparison control, as shown in Figure 11, and the above method further includes the following steps.

[0085] (1) In response to a trigger operation on the comparison control, the comparison interface is displayed in the graphical user interface, where the comparison interface includes multiple resource input controls, each resource input control having a corresponding image display area and load control, and the resource input controls are used to input the resource number of the target resource. The editor clicks the comparison control to display the comparison interface in the graphical user interface. As shown in Figure 13, it includes multiple resource input controls (like the eight resource input controls shown in Figure 13), which include number input boxes, and above each resource input control, a corresponding image display area is displayed for showing the dynamic image corresponding to the number. Figure 13 also includes a load control.

[0086] (2) In response to a trigger operation on the load control corresponding to the target resource input control, load a third target resource corresponding to the resource number displayed in the target resource input control. (3) A third dynamic image corresponding to the third target source is displayed in the image display area corresponding to the target resource input control.

[0087] The editor can enter the resource number of the third target resource to be compared in each resource input control. If eight resources are to be compared, the editor enters the resource number in each resource input control and clicks "Load" to load the third target resource corresponding to the resource number. The target dynamic image within the third target resource is then displayed in the image display area as shown in Figure 13. This method allows for the simultaneous display of multiple target dynamic images, enabling comparison of their size and display effect. Furthermore, it facilitates standardization for editors, provides a consistent display and style for each displayed target dynamic image, and allows for editing using a unified comparison method, further improving development efficiency. The subsequent unified standardization based on the comparison method also reduces the total packet size of resources.

[0088] The comparison interface described above includes multiple selection controls, each corresponding to one image size. The selection controls include three options, "Avatar," "Half-body," and "Full-body," as shown in Figure 13. The method further includes displaying a third dynamic image of a first image size corresponding to the first selection control in the image display area in response to a trigger operation on a first selection control among the multiple selection controls.

[0089] Specifically, before loading each target dynamic image, clicking the first selection control among multiple selection controls determines the size of the third dynamic image that is displayed, corresponding to the first selection control. For example, clicking a bust image will result in all displayed third dynamic images being bust images. Of course, after loading each third dynamic image, clicking the first selection control among multiple selection controls will unify the image size of the third dynamic images that can be displayed uniformly, such as clicking a bust image, and the uniformly displayed third dynamic images will be bust images. This method improves editing efficiency and contrast efficiency, as well as development efficiency, by allowing the user to select the image size of the uniformly displayed third dynamic images by selecting a control.

[0090] As shown in Figure 13, the comparison interface further includes a baseline control, and the method further includes displaying a baseline corresponding to the baseline control in the comparison interface in response to a trigger operation on the baseline control.

[0091] The reference lines above are useful for editors to compare whether the position of each displayed third animation is correct, and allow for quick comparison of which image positions differ from others. This intuitive comparison using reference lines further enhances editing and comparison efficiency, while simultaneously improving development efficiency.

[0092] As shown in Figure 13, the comparison interface further includes a still image control, and the method further includes displaying an initial frame image of a third dynamic image in the image display area in response to a trigger operation on the still image control.

[0093] Since still images are also an important resource in game development, the comparison interface also includes a still image control. When an editor clicks the still image control, it can display the initial frame image of a third dynamic image to facilitate still image comparison.

[0094] Corresponding to the embodiments of the above-described method, the present embodiment provides a dynamic image editing apparatus, a graphical user interface on a terminal device, the graphical user interface includes image editing controls, and as shown in Figure 14, the apparatus includes a first display module 141 and an editing module 142. The first display module 141 is configured to render and display a first dynamic image corresponding to the first target resource on the graphical user interface based on a first rendering texture in response to a load operation on the first target resource. The editing module 142 is configured to display the edited target dynamic image in the preview interface in response to a first operation on the image editing controls.

[0095] This embodiment provides a dynamic image editing device that, in response to a load operation on a first target resource, renders and displays a first dynamic image corresponding to the first target resource on a graphical user interface based on a first rendering texture, and in response to a first operation on the image editing controls in the graphical user interface, displays the edited target dynamic image on a review interface. In this method, dynamic images can be edited directly based on the preview interface, the display effect of the edited dynamic image can be seen in real time using the rendering texture, and the saved results can be directly applied to the game, thus avoiding the problem of dynamic images needing to be developed in multiple software programs, simplifying the game development process, reducing labor and time costs, and increasing development efficiency.

[0096] Furthermore, the first display module is configured to load a first target resource, create a first rendering texture, render the first target resource to the first rendering texture frame by frame to obtain a target first rendering texture, determine the target first rendering texture as a first dynamic image, and display the first dynamic image in a first display area of ​​the graphical user interface, where the display priority of the first dynamic image is higher than that of the image editing controls, there are multiple first dynamic images, and each first dynamic image has a different size.

[0097] Furthermore, the image editing control includes a first trimming control, and the editing module further sets a first dynamic image to the preview interface in response to a trigger operation on the first trimming control, where the preview interface has a trimming function, and is configured to trim the preview interface using the trimming function of the preview interface and display the trimmed target dynamic image.

[0098] Furthermore, the editing module further trims the preview interface based on the trimming size corresponding to the first dynamic image using the trimming function of the preview interface to obtain a trimming area, where the first dynamic image is multiple, and the trimming size corresponding to each first dynamic image is different, and the dynamic image within the trimming area is determined as the target dynamic image, and the target dynamic image is displayed in the trimming area.

[0099] Furthermore, the graphical user interface further includes a zoom control, and the device further includes a first adjustment module, the first adjustment module configured to adjust the size of a first dynamic image based on a zoom parameter displayed on the zoom control in response to a second operation on the zoom control, and to display a dynamic image to be displayed in the cropping area based on the resized first dynamic image.

[0100] Furthermore, the apparatus further includes a second adjustment module, which is configured to control the movement of the first dynamic image in response to a position adjustment operation on a target dynamic image displayed in the trimming area, to display positional information of the moved first dynamic image, and to adjust the dynamic image displayed in the trimming area based on the moved first dynamic image.

[0101] Furthermore, the image editing control further includes a second trimming control and a third trimming control, and the device further includes a trimming module, which marks and displays a trimming area in response to a trigger operation on the second trimming control, and displays an editing interface corresponding to a target trimming area in response to a trigger operation on the third trimming control, wherein the editing interface includes a parameter editing control and a decision control, and is configured to adjust the size of the trimming area based on the parameter editing control and the decision control.

[0102] Furthermore, the trimming module is configured to determine a size parameter corresponding to an editing operation in response to an editing operation on the parameter editing control, update the size of the target trimming area based on the size parameter in response to a trigger operation on the determination control, and mark and display the updated trimming area.

[0103] Furthermore, the graphical user interface further includes a reference box control and a reference box hide control, and the device further includes a second display module, the second display module configured to display a reference box corresponding to the reference box control at a predetermined position in the trimming area in response to a trigger operation on the reference box control, and to cancel the display of the reference box in response to a trigger operation on the reference box hide control.

[0104] Furthermore, the graphical user interface further includes a gradient parameter configuration control, and the device further includes a third adjustment module, the third adjustment module being configured to adjust the transparency of the edge region of the target dynamic image in response to a third operation on the gradient parameter configuration control.

[0105] Furthermore, the gradient parameter configuration control includes a plurality of first gradient parameter configuration controls, and the third adjustment module further determines a first edge region of the target dynamic image based on the first parameter in response to a selection operation on the first parameter of the first gradient parameter configuration control, where the first parameter is configured to indicate the direction and range of the first edge region and to adjust the transparency of the first edge region.

[0106] Furthermore, the above gradient parameter configuration control includes a second gradient parameter configuration control, and the third adjustment module further determines the second edge region from the first edge region based on the second parameter in response to a selection operation on the second parameter of the second gradient parameter configuration control, where the second parameter indicates the range of the second edge region, the second edge region is less than or equal to the first edge region, and adjusts the transparency of the second edge region, where the transparency value of the region is higher the closer it is to the edge of the second edge region, and lower the transparency value of the region is lower the further it is from the edge of the second edge region.

[0107] Furthermore, the third adjustment module further acquires a predetermined gradient material, applies the gradient material to the first dynamic image via a predetermined rendering interface, adjusts the transparency values ​​corresponding to the pixel points of the second edge region using the gradient material, and the adjusted second edge region has a transparency gradient effect.

[0108] Furthermore, the third adjustment module further samples the UV coordinates of the target pixel points of the second edge region using the gradient material shader, determines the distance between the target pixel points and the edge pixel points of the second edge region based on the UV coordinates of the target pixel points, determines the target value of transparency corresponding to the target pixel points based on the distance value and predetermined control parameters, and adjusts the transparency value corresponding to the target pixel points of the second edge region as the target value.

[0109] Furthermore, the graphical user interface further includes static controls and image saving controls, and the device includes a second saving module, which is configured to create a second rendering texture in response to a trigger operation on the static controls, render the initial frame of the target dynamic image to the second rendering texture to obtain a target second rendering texture, determine the target second rendering texture as the initial frame image, and save the initial frame image in response to a trigger operation on the image saving controls.

[0110] Furthermore, the graphical user interface further includes a plurality of game background display controls, and the device further includes a third display module, the third display module configured to display a first game background screen corresponding to the first game background display control in the background area of ​​the graphical user interface in response to a trigger operation on the first game background display control in the plurality of game background display controls.

[0111] Furthermore, the graphical user interface further includes a mirror control, and the device further includes a mirror module, which is configured to invert a first dynamic image to obtain a mirror image of the first dynamic image in response to a trigger operation on the mirror control, and to display the mirror image of the first dynamic image.

[0112] Furthermore, the graphical user interface further includes a preview control, and the device further includes a preview module, which, in response to a trigger operation on the preview control, displays a game interface on the graphical user interface, where the game interface includes a resource load control and a game scene screen, and in response to a fourth operation on the resource load control, loads a second target resource corresponding to the fourth operation and audio data corresponding to the second target resource, displays a second dynamic image corresponding to the second target resource on the game interface, and is configured to play an action screen and sound audio corresponding to the second dynamic image based on the second target resource and audio data.

[0113] Furthermore, the second target resource includes a predetermined number of mouth animations, and the preview module is configured to further analyze the audio data to obtain the corresponding sound audio, determine the target mouth animation corresponding to each target audio in the sound audio from the number of mouth animations, and play the operation screen and sound audio corresponding to the second dynamic image, as well as play the target mouth animation corresponding to each target audio.

[0114] Furthermore, the graphical user interface further includes a comparison control, and the device further includes a comparison module, which is configured to display a comparison interface on the graphical user interface in response to a trigger operation on the comparison control, wherein the comparison interface includes a plurality of resource input controls, each resource input control having a corresponding image display area and load control, the resource input control is used to input the resource number of a target resource, and is configured to load a third target resource corresponding to the resource number displayed on the target resource input control in response to a trigger operation on the load control corresponding to the target resource input control, and to display a third dynamic image corresponding to the third target source in the image display area corresponding to the target resource input control.

[0115] Furthermore, the comparison interface further includes a plurality of selection controls, each of which corresponds to an image size, and the comparison module is further configured to display a third dynamic image of a first image size corresponding to the first selection control in the image display area in response to a trigger operation on a first selection control among the plurality of selection controls.

[0116] Furthermore, the comparison interface further includes a baseline control, and the comparison module is further configured to display a baseline corresponding to the baseline control in the comparison interface in response to a trigger operation on the baseline control.

[0117] Furthermore, the comparison interface further includes a still image control, and the comparison module is further configured to display an initial frame image of a third dynamic image in the image display area in response to a trigger operation on the still image control.

[0118] Furthermore, the apparatus further includes a first storage module, which is configured to convert data information corresponding to a target dynamic image into a target code in response to a save operation on the target dynamic image, and to save the target code to a predetermined profile.

[0119] Since the dynamic image editing apparatus provided in the embodiments of this disclosure has the same technical features as the dynamic image editing method provided in the embodiments described above, it can solve similar technical problems and achieve similar technical effects.

[0120] This embodiment also provides an electronic device that includes a memory for storing computer executable instructions that can be executed by a processor, and a processor for executing computer executable instructions to realize the dynamic image editing method described above. This electronic device may be a server or a terminal device.

[0121] As shown in Figure 15, the electronic device includes a processor 100 that executes computer executable instructions for realizing the above-described method of editing dynamic images, and a memory 101 that stores computer executable instructions for realizing the above-described method. The specific method is as follows: The process includes rendering and displaying a first dynamic image corresponding to a first target resource in a graphical user interface based on a first rendering texture in response to a load operation on a first target resource, and displaying an edited target dynamic image in a preview interface in response to a first operation on an image editing control.

[0122] Rendering and displaying a first dynamic image corresponding to a first target resource in a graphical user interface based on the first rendering texture described above includes loading the first target resource, creating a first rendering texture, rendering the first target resource to the first rendering texture frame by frame to obtain a target first rendering texture, determining the target first rendering texture as the first dynamic image, and displaying the first dynamic image in a first display area of ​​the graphical user interface, wherein the display priority of the first dynamic image is higher than that of the image editing controls, there are multiple first dynamic images, and each first dynamic image has a different size.

[0123] The above image editing control includes a first trimming control, and in response to a first operation on the above image editing control, displaying the edited target dynamic image in the preview interface includes setting the first dynamic image in the preview interface in response to a trigger operation on the first trimming control, wherein the preview interface has a trimming function, and the preview interface is trimmed by the trimming function of the preview interface, and the trimmed target dynamic image is displayed in the preview interface.

[0124] The trimming function of the preview interface described above allows for trimming the preview interface and displaying the trimmed target dynamic image on the preview interface. This includes trimming the preview interface based on the trimming size corresponding to the first dynamic image using the trimming function of the preview interface to obtain a trimmed area, where the first dynamic image is multiple, and each first dynamic image has a different trimming size. The dynamic image within the trimmed area is determined to be the target dynamic image, and the target dynamic image is displayed in the trimmed area.

[0125] The graphical user interface further includes a zoom control, determines a dynamic image in the cropping area as a target dynamic image, displays the target dynamic image in the cropping area, and then, in response to a second operation on the zoom control, further includes resizing the first dynamic image based on the zoom parameter displayed on the zoom control, and displaying the dynamic image to be shown in the cropping area based on the resized first dynamic image.

[0126] The method further includes determining a dynamic image within a trimming area as a target dynamic image, displaying the target dynamic image in the trimming area, controlling the movement of a first dynamic image in response to a position adjustment operation on the target dynamic image displayed in the trimming area, displaying the position information of the moved first dynamic image, and adjusting the dynamic image displayed in the trimming area based on the moved first dynamic image.

[0127] The above image editing control further includes a second trimming control and a third trimming control, determines a dynamic image within the trimming area as the target dynamic image, displays the target dynamic image in the trimming area, and then the method further includes marking and displaying the trimming area in response to a trigger operation on the second trimming control, and displaying an editing interface corresponding to the target trimming area in response to a trigger operation on the third trimming control, wherein the editing interface includes a parameter editing control and a decision control, and adjusts the size of the trimming area based on the parameter editing control and the decision control.

[0128] Adjusting the size of the trimming area based on the parameter editing control and decision control described above includes determining the size parameter corresponding to the editing operation in response to the editing operation on the parameter editing control, and updating the size of the target trimming area based on the size parameter and marking and displaying the updated trimming area in response to a trigger operation on the decision control.

[0129] The graphical user interface further includes a reference box control and a reference box hide control, determines a dynamic image in the trimming area as the target dynamic image, displays the target dynamic image in the trimming area, and then, in response to a trigger operation on the reference box control, displays a reference box corresponding to the reference box control at a predetermined position in the trimming area, and in response to a trigger operation on the reference box hide control, cancels the display of the reference box.

[0130] The graphical user interface further includes a gradient parameter configuration control, and in response to a first operation on the image editing control, displays the edited target dynamic image in the preview interface, and then the method further includes adjusting the transparency of the edge region of the target dynamic image in response to a third operation on the gradient parameter configuration control.

[0131] The above-mentioned gradient parameter configuration control includes a plurality of first gradient parameter configuration controls, and adjusting the transparency of the edge region of the target dynamic image in response to a third operation on the gradient parameter configuration control includes determining a first edge region of the target dynamic image based on a first parameter in response to a selection operation on a first parameter of the first gradient parameter configuration control, wherein the first parameter indicates the direction and range of the first edge region, and adjusting the transparency of the first edge region.

[0132] The above gradient parameter configuration control includes a second gradient parameter configuration control, and adjusting the transparency of the first edge region includes, in response to a selection operation on the second parameter of the second gradient parameter configuration control, determining the second edge region from the first edge region based on the second parameter, wherein the second parameter indicates the range of the second edge region, the second edge region is less than or equal to the first edge region, and adjusting the transparency of the second edge region, wherein the transparency value of the region is higher the closer it is to the edge of the second edge region, and lower the transparency value of the region is lower the further it is from the edge of the second edge region.

[0133] Adjusting the transparency of the second edge region as described above includes obtaining a predetermined gradient material, applying the gradient material to the first dynamic image via a predetermined rendering interface, and adjusting the transparency values ​​corresponding to the pixel points of the second edge region using the gradient material, so that the adjusted second edge region has a transparency gradient effect.

[0134] Adjusting the transparency value corresponding to the pixel points of the second edge region using the above gradient material includes, using the gradient material's shader, sampling the UV coordinates of the target pixel points of the second edge region, determining the distance between the target pixel points and the edge pixel points of the second edge region based on the UV coordinates of the target pixel points, determining a target value for the transparency corresponding to the target pixel points based on the distance value and predetermined control parameters, and adjusting the transparency value corresponding to the target pixel points of the second edge region to the target value.

[0135] The graphical user interface further includes static controls and an image save control, and in response to a first operation on the image editing control, the edited target dynamic image is displayed in the preview interface. The method further includes, in response to a trigger operation on the static control, creating a second rendering texture, rendering the initial frame of the target dynamic image to the second rendering texture to obtain a target second rendering texture, determining the target second rendering texture as the initial frame image, and saving the initial frame image in response to a trigger operation on the image save control.

[0136] The graphical user interface further includes a plurality of game background display controls, and the method further includes displaying a first game background screen corresponding to the first game background display control in the background area of ​​the graphical user interface in response to a trigger operation on the first game background display control in the plurality of game background display controls.

[0137] The graphical user interface further includes a mirror control, and in response to a load operation on a first target resource, renders and displays a first dynamic image corresponding to the first target resource on the graphical user interface based on a first rendering texture, and then, in response to a trigger operation on the mirror control, includes inverting the first dynamic image to obtain a mirror image of the first dynamic image, and displaying the mirror image of the first dynamic image.

[0138] The graphical user interface further includes a preview control, and the method further includes displaying a game interface on the graphical user interface in response to a trigger operation on the preview control, wherein the game interface includes a resource load control and a game scene screen, and in response to a fourth operation on the resource load control, loads a second target resource corresponding to the fourth operation and audio data corresponding to the second target resource, displays a second dynamic image corresponding to the second target resource on the game interface, and plays an action screen and sound audio corresponding to the second dynamic image based on the second target resource and audio data.

[0139] The second target resource described above includes a predetermined number of mouth animations, and playing an action screen and sound audio corresponding to the second dynamic image based on the second target resource and audio data includes analyzing the audio data to obtain the corresponding sound audio, determining a target mouth animation corresponding to each target audio in the sound audio from the number of mouth animations, and playing an action screen and sound audio corresponding to the second dynamic image, as well as playing a target mouth animation corresponding to each target audio.

[0140] The graphical user interface further includes a comparison control, and the method further includes displaying a comparison interface on the graphical user interface in response to a trigger operation on the comparison control, wherein the comparison interface includes a plurality of resource input controls, each resource input control having a corresponding image display area and load control, the resource input control being used to input the resource number of a target resource, loading a third target resource corresponding to the resource number displayed on the target resource input control in response to a trigger operation on the load control corresponding to the target resource input control, and displaying a third dynamic image corresponding to the third target source in the image display area corresponding to the target resource input control.

[0141] The comparison interface further includes a plurality of selection controls, each of which corresponds to an image size, and the method further includes displaying a third dynamic image of a first image size corresponding to the first selection control in the image display area in response to a trigger operation on a first selection control among the plurality of selection controls.

[0142] The comparison interface further includes a baseline control, and the method is further configured to display a baseline corresponding to the baseline control in the comparison interface in response to a trigger operation on the baseline control.

[0143] The comparison interface further includes a still image control, and the method further includes displaying an initial frame image of a third dynamic image in the image display area in response to a trigger operation on the still image control.

[0144] In response to a first operation on the image editing control described above, the method displays the edited target dynamic image in the preview interface, and then, in response to a save operation on the target dynamic image, converts the data information corresponding to the target dynamic image into a target code and saves the target code to a predetermined profile.

[0145] Furthermore, the electronic device shown in Figure 15 further includes a processor 100 connected via a bus 102, a communication interface 103, and a memory 101.

[0146] Here, memory 101 may include high-speed random access memory (RAM) and may also include non-volatile memory such as disk memory. Communication between this system element and at least one other element is provided by at least one communication interface 103 (which may be wired or wireless) and can use the internet, a wide area network, a local network, a city network, etc. Bus 102 may be an ISA bus, a PCI bus, or an EISA bus, etc. Buses can be divided into address buses, data buses, control buses, etc. For ease of representation, Figure 15 shows a single bidirectional arrow, but this does not necessarily mean that only one bus or one type of bus is shown.

[0147] The processor 100 may be an integrated circuit chip having signal processing capabilities. In the implementation process, each step of the method described above can be executed by hardware integrated logic circuits or software-form instructions within the processor 100. The processor 100 may be a general-purpose processor including a Central Processing Unit (CPU), a Network Processor (NP), a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps, and logic block diagrams disclosed in embodiments of this disclosure can be implemented or executed. The general-purpose processor may be a microprocessor or any conventional processor. The steps of the method disclosed in connection with embodiments of this disclosure can be embodied as a direct hardware decoding processor execution completion, or as a combination of hardware and software modules in the decoding processor. The software modules may reside in storage media that are mature in the art, such as random memory, flash memory, read-only memory, programmable read-only memory, or electrically erasable programmable memory, registers, etc. The storage medium is located in memory 101, and the processor 100 reads information in memory 101 and completes the steps of the method of the above embodiments in accordance with its hardware.

[0148] This embodiment also provides a computer-readable storage medium that stores computer-executable instructions, and when these instructions are called and executed by a processor, they prompt the processor to implement the dynamic image editing method described above, specifically the following method: The process includes rendering and displaying a first dynamic image corresponding to a first target resource in a graphical user interface based on a first rendering texture in response to a load operation on a first target resource, and displaying an edited target dynamic image in a preview interface in response to a first operation on an image editing control.

[0149] Rendering and displaying a first dynamic image corresponding to a first target resource in a graphical user interface based on the first rendering texture described above includes loading the first target resource, creating a first rendering texture, rendering the first target resource to the first rendering texture frame by frame to obtain a target first rendering texture, determining the target first rendering texture as a first dynamic image, and displaying the first dynamic image in a first display area of ​​the graphical user interface, wherein the display priority of the first dynamic image is higher than that of the image editing controls, there are multiple first dynamic images, and each first dynamic image has a different size.

[0150] The above image editing control includes a first trimming control, and in response to a first operation on the above image editing control, displaying the edited target dynamic image in the preview interface includes setting the first dynamic image in the preview interface in response to a trigger operation on the first trimming control, wherein the preview interface has a trimming function, and the preview interface is trimmed by the trimming function of the preview interface, and the trimmed target dynamic image is displayed in the preview interface.

[0151] The trimming function of the preview interface described above allows for trimming the preview interface and displaying the trimmed target dynamic image on the preview interface. This includes trimming the preview interface based on the trimming size corresponding to the first dynamic image using the trimming function of the preview interface to obtain a trimmed area, where the first dynamic image is multiple, and each first dynamic image has a different trimming size. The dynamic image within the trimmed area is determined to be the target dynamic image, and the target dynamic image is displayed in the trimmed area.

[0152] The graphical user interface further includes a zoom control, determines a dynamic image in the cropping area as a target dynamic image, displays the target dynamic image in the cropping area, and then, in response to a second operation on the zoom control, further includes resizing the first dynamic image based on the zoom parameter displayed on the zoom control, and displaying the dynamic image to be shown in the cropping area based on the resized first dynamic image.

[0153] The method further includes determining a dynamic image within a trimming area as a target dynamic image, displaying the target dynamic image in the trimming area, controlling the movement of a first dynamic image in response to a position adjustment operation on the target dynamic image displayed in the trimming area, displaying the position information of the moved first dynamic image, and adjusting the dynamic image displayed in the trimming area based on the moved first dynamic image.

[0154] The above image editing control further includes a second trimming control and a third trimming control, determines a dynamic image within the trimming area as the target dynamic image, displays the target dynamic image in the trimming area, and then the method further includes marking and displaying the trimming area in response to a trigger operation on the second trimming control, and displaying an editing interface corresponding to the target trimming area in response to a trigger operation on the third trimming control, wherein the editing interface includes a parameter editing control and a decision control, and adjusts the size of the trimming area based on the parameter editing control and the decision control.

[0155] Adjusting the size of the trimming area based on the parameter editing control and decision control described above includes determining the size parameter corresponding to the editing operation in response to the editing operation on the parameter editing control, and updating the size of the target trimming area based on the size parameter and marking and displaying the updated trimming area in response to a trigger operation on the decision control.

[0156] The graphical user interface further includes a reference box control and a reference box hide control, determines a dynamic image in the trimming area as the target dynamic image, displays the target dynamic image in the trimming area, and then, in response to a trigger operation on the reference box control, displays a reference box corresponding to the reference box control at a predetermined position in the trimming area, and in response to a trigger operation on the reference box hide control, cancels the display of the reference box.

[0157] The graphical user interface further includes a gradient parameter configuration control, and in response to a first operation on the image editing control, displays the edited target dynamic image in the preview interface, and then the method further includes adjusting the transparency of the edge region of the target dynamic image in response to a third operation on the gradient parameter configuration control.

[0158] The above-mentioned gradient parameter configuration control includes a plurality of first gradient parameter configuration controls, and adjusting the transparency of the edge region of the target dynamic image in response to a third operation on the gradient parameter configuration control includes determining a first edge region of the target dynamic image based on a first parameter in response to a selection operation on a first parameter of the first gradient parameter configuration control, wherein the first parameter indicates the direction and range of the first edge region, and adjusting the transparency of the first edge region.

[0159] The above gradient parameter configuration control includes a second gradient parameter configuration control, and adjusting the transparency of the first edge region includes, in response to a selection operation on the second parameter of the second gradient parameter configuration control, determining the second edge region from the first edge region based on the second parameter, wherein the second parameter indicates the range of the second edge region, the second edge region is less than or equal to the first edge region, and adjusting the transparency of the second edge region, wherein the transparency value of the region is higher the closer it is to the edge of the second edge region, and lower the transparency value of the region is lower the further it is from the edge of the second edge region.

[0160] Adjusting the transparency of the second edge region as described above includes obtaining a predetermined gradient material, applying the gradient material to the first dynamic image via a predetermined rendering interface, and adjusting the transparency values ​​corresponding to the pixel points of the second edge region using the gradient material, so that the adjusted second edge region has a transparency gradient effect.

[0161] Adjusting the transparency value corresponding to the pixel points of the second edge region using the above gradient material includes, by the gradient material's shader, sampling the UV coordinates of the target pixel points of the second edge region, determining the distance value between the target pixel points and the edge pixel points of the second edge region based on the UV coordinates of the target pixel points, determining a target value for the transparency corresponding to the target pixel points based on the distance value and predetermined control parameters, and adjusting the transparency value corresponding to the target pixel points of the second edge region to the target value.

[0162] The graphical user interface further includes static controls and an image save control, and in response to a first operation on the image editing control, the edited target dynamic image is displayed in the preview interface. The method further includes, in response to a trigger operation on the static control, creating a second rendering texture, rendering the initial frame of the target dynamic image to the second rendering texture to obtain a target second rendering texture, determining the target second rendering texture as the initial frame image, and saving the initial frame image in response to a trigger operation on the image save control.

[0163] The graphical user interface further includes a plurality of game background display controls, and the method further includes displaying a first game background screen corresponding to the first game background display control in the background area of ​​the graphical user interface in response to a trigger operation on the first game background display control in the plurality of game background display controls.

[0164] The graphical user interface further includes a mirror control, and in response to a load operation on a first target resource, renders and displays a first dynamic image corresponding to the first target resource on the graphical user interface based on a first rendering texture, and then, in response to a trigger operation on the mirror control, includes inverting the first dynamic image to obtain a mirror image of the first dynamic image, and displaying the mirror image of the first dynamic image.

[0165] The graphical user interface further includes a preview control, and the method further includes displaying a game interface on the graphical user interface in response to a trigger operation on the preview control, wherein the game interface includes a resource load control and a game scene screen, and in response to a fourth operation on the resource load control, loads a second target resource corresponding to the fourth operation and audio data corresponding to the second target resource, displays a second dynamic image corresponding to the second target resource on the game interface, and plays an action screen and sound audio corresponding to the second dynamic image based on the second target resource and audio data.

[0166] The second target resource described above includes a predetermined number of mouth animations, and playing an action screen and sound audio corresponding to the second dynamic image based on the second target resource and audio data includes analyzing the audio data to obtain the corresponding sound audio, determining a target mouth animation corresponding to each target audio in the sound audio from the number of mouth animations, and playing an action screen and sound audio corresponding to the second dynamic image, as well as playing a target mouth animation corresponding to each target audio.

[0167] The graphical user interface further includes a comparison control, and the method further includes displaying a comparison interface on the graphical user interface in response to a trigger operation on the comparison control, wherein the comparison interface includes a plurality of resource input controls, each resource input control having a corresponding image display area and load control, the resource input control being used to input the resource number of a target resource, and loading a third target resource corresponding to the resource number displayed on the target resource input control in response to a trigger operation on the load control corresponding to the target resource input control, and displaying a third dynamic image corresponding to the third target source in the image display area corresponding to the target resource input control.

[0168] The comparison interface further includes a plurality of selection controls, each of which corresponds to an image size, and the method further includes displaying a third dynamic image of a first image size corresponding to the first selection control in the image display area in response to a trigger operation on a first selection control among the plurality of selection controls.

[0169] The comparison interface further includes a baseline control, and the method further includes displaying a baseline corresponding to the baseline control in the comparison interface in response to a trigger operation on the baseline control.

[0170] The comparison interface further includes a still image control, and the method further includes displaying an initial frame image of a third dynamic image in the image display area in response to a trigger operation on the still image control.

[0171] In response to a first operation on the image editing control described above, the method displays the edited target dynamic image in the preview interface, and then, in response to a save operation on the target dynamic image, converts the data information corresponding to the target dynamic image into a target code and saves the target code to a predetermined profile.

[0172] The computer program products of dynamic image editing methods, apparatuses, electronic devices, and systems provided by embodiments of this disclosure include a computer-readable storage medium storing program code, and the instructions contained in the program code can be used to perform the methods in the embodiments of the methods described above, specifically referring to embodiments of the methods which are omitted here.

[0173] Those skilled in the art will clearly understand that, for the sake of ease and brevity of explanation, the specific operating processes of the systems and apparatus described above can be described by referring to the corresponding processes in the embodiments of the methods described above, and will not be described further here.

[0174] Furthermore, in the description of embodiments of this disclosure, unless otherwise specifically defined and limited, the terms “attachment,” “connection,” and “linking” should be understood broadly, for example, and may include fixed connections, removable connections, integral connections, mechanical connections, electrical connections, direct connections, indirect connections via an intermediate medium, or internal connections between two elements. Those skilled in the art will be able to specifically understand the specific meanings of the above terms in this disclosure.

[0175] When a function is implemented as a software function unit and sold or used as a standalone product, it can be stored on a computer-readable storage medium. Based on this understanding, the technical scenarios of this disclosure can be embodied in the form of a software product stored on a single storage medium, which includes several instructions for performing all or some steps of the methods of each embodiment of this disclosure. The aforementioned storage mediums include a variety of media capable of storing program code, such as U disks, removable hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0176] In the description of this disclosure, the orientations or positional relationships indicated by terms such as “center,” “up,” “down,” “left,” “right,” “vertical,” “horizontal,” “inside,” and “outside” are based on the orientations or positional relationships shown in the drawings and are used solely to facilitate and simplify the description of this disclosure. They do not indicate or imply that the indicated devices or elements must be configured or operated in a specific orientation, and therefore should not be understood as limitations of this disclosure. Furthermore, the terms “first,” “second,” and “third” are used solely for illustrative purposes and should not be understood as indicating or implying relative importance.

[0177] Finally, it should be noted that the above embodiments are only specific embodiments of the present disclosure and are used to illustrate the technical ideas of the present disclosure, but are not limited thereto, and the scope of protection of the present disclosure is not limited thereto. Although the present disclosure has been described in detail with reference to the above embodiments, those skilled in the art will understand that, within the scope of the present disclosure, they may modify, easily change, or replace some of the technical features of the technical ideas described in the above embodiments. Such modifications, changes, or substitutions should be included within the scope of protection of the present disclosure without causing the essence of each technical idea to deviate from the spirit and scope of the technical ideas of the embodiments of the present disclosure. Accordingly, the scope of protection of the present disclosure should be the same as the scope of protection of the claims.

Claims

1. A method for editing dynamic images, wherein a graphical user interface is provided on a terminal device, and the graphical user interface includes an image editing control and a preview interface, In response to a load operation on a first target resource, a first dynamic image corresponding to the first target resource is rendered and displayed on the graphical user interface based on a first rendering texture. The process includes displaying the edited target dynamic image in the preview interface in response to a first operation on the image editing control, The image editing control includes a first cropping control, In response to a first operation on the image editing control, displaying the edited target dynamic image in the preview interface is: In response to a trigger operation for the first trimming control, the first dynamic image is set in the preview interface, and the preview interface has a trimming function. This includes trimming the preview interface using the trimming function of the preview interface and displaying the trimmed target dynamic image on the preview interface, The trimming function of the preview interface allows for trimming the preview interface and displaying the trimmed target dynamic image on the preview interface. The trimming function of the preview interface trims the preview interface according to the trimming size corresponding to the first dynamic image to obtain the trimmed area, and the first dynamic image is a plurality, and the trimming size corresponding to each of the first dynamic images is different. This includes determining the dynamic image within the trimming region as the target dynamic image and displaying the target dynamic image in the trimming region. A method for editing dynamic images, characterized by the following features.

2. Rendering and displaying a first dynamic image corresponding to the first target resource in the graphical user interface based on a first rendering texture is: Loading the first target resource, Creating the first rendering texture, rendering the first target resource to the first rendering texture frame by frame to obtain the target first rendering texture, This includes determining the rendering texture of the target first as the first dynamic image, and displaying the first dynamic image in the first display area of ​​the graphical user interface. The display priority of the first dynamic image is higher than that of the image editing control, and there are multiple first dynamic images, each with a different size. The method for editing dynamic images according to feature 1.

3. The graphical user interface further includes zoom controls, The method further determines the dynamic image within the trimming region as the target dynamic image, displays the target dynamic image in the trimming region, and then... In response to a second operation on the zoom control, the size of the first dynamic image is adjusted based on the zoom parameter displayed on the zoom control. This includes adjusting the dynamic image displayed in the trimming area based on the first dynamic image whose size has been adjusted. The method for editing dynamic images according to feature 1.

4. The method further determines the dynamic image within the trimming region as the target dynamic image, displays the target dynamic image in the trimming region, and then... In response to a position adjustment operation on the target dynamic image displayed in the trimming area, the first dynamic image is controlled to move, and the position information of the moved first dynamic image is displayed. This includes adjusting the dynamic image displayed in the trimming area based on the moved first dynamic image. The method for editing dynamic images according to feature 1.

5. The image editing control further includes a second cropping control and a third cropping control. The method further determines the dynamic image within the trimming region as the target dynamic image, displays the target dynamic image in the trimming region, and then... In response to a trigger operation on the second trimming control, the trimming area is marked and displayed, In response to a trigger operation on the third trimming control, an editing interface corresponding to the target trimming area is displayed, and the editing interface includes parameter editing controls and decision controls. This includes adjusting the size of the trimming area based on the parameter editing control and the decision control. The method for editing dynamic images according to feature 1.

6. Adjusting the size of the trimming area based on the parameter editing control and the decision control is: In response to an editing operation on the parameter editing control, the size parameter corresponding to the editing operation is determined, This includes updating the size of the target trimming region with the size parameter in response to a trigger operation on the decision control, and marking and displaying the updated trimming region. The method for editing dynamic images according to feature 5.

7. The graphical user interface further includes a reference box control and a reference box hide control. The method further determines the dynamic image within the trimming region as the target dynamic image, displays the target dynamic image in the trimming region, and then... In response to a trigger operation on the aforementioned reference box control, a reference box corresponding to the reference box control is displayed at a predetermined position in the trimming area, This includes canceling the display of the reference box in response to a trigger operation on the reference box hide control. The method for editing dynamic images according to feature 1.

8. The graphical user interface further includes a gradient parameter configuration control, After displaying the edited target dynamic image in the preview interface in response to the first operation on the image editing control, the method further: This includes adjusting the transparency of the edge region of the target dynamic image in response to a third operation on the gradient parameter configuration control. The method for editing dynamic images according to feature 1.

9. The aforementioned gradient parameter configuration control includes a plurality of first gradient parameter configuration controls, Adjusting the transparency of the edge region of the target dynamic image in response to a third operation on the gradient parameter configuration control is: In response to a selection operation on the first parameter of the first gradient parameter configuration control, the first edge region of the target dynamic image is determined based on the first parameter, and the first parameter indicates the direction and range of the first edge region. This includes adjusting the transparency of the first edge region. The method for editing dynamic images according to feature 8.

10. The aforementioned gradient parameter configuration control includes a second gradient parameter configuration control. Adjusting the transparency of the first edge region is In response to a selection operation on the second parameter of the second gradient parameter configuration control, the second edge region is determined from the first edge region based on the second parameter, the second parameter indicates the range of the second edge region, and the second edge region is less than or equal to the first edge region. This includes adjusting the transparency of the second edge region such that the transparency value of the region is higher the closer it is to the edge of the second edge region, and lower the transparency value of the region is lower the further it is from the edge of the second edge region. The method for editing dynamic images according to feature 9.

11. Adjusting the transparency of the second edge region is Obtaining a specified gradient material, The gradient material is applied to the first dynamic image via a predetermined rendering interface, The gradient material adjusts the transparency values ​​corresponding to the pixel points in the second edge region, and the adjusted second edge region has a transparency gradient effect. The method for editing dynamic images according to feature 10.

12. The gradient material allows for adjusting the transparency values ​​corresponding to the pixel points in the second edge region, The shader of the gradient material samples the UV coordinates of the target pixel points in the second edge region, Based on the UV coordinates of the target pixel point, the distance value between the target pixel point and the edge pixel point of the second edge region is determined. Based on the distance value and predetermined control parameters, a target value for transparency corresponding to the target pixel point is determined. This includes adjusting the transparency value corresponding to the target pixel point in the second edge region to the target value. The method for editing dynamic images according to feature 11.

13. The graphical user interface further includes static controls and image saving controls. After displaying the edited target dynamic image in the preview interface in response to the first operation on the image editing control, the method further: In response to a trigger operation on the static control, a second rendering texture is created, and the initial frame of the target dynamic image is rendered to the second rendering texture to obtain the target second rendering texture. The aforementioned target second rendering texture is determined as the initial frame image, This includes saving the initial frame image in response to a trigger operation on the image saving control. The method for editing dynamic images according to feature 1.

14. The graphical user interface further includes a plurality of game background display controls, and the method further includes This includes displaying a first game background screen corresponding to the first game background display control in the background area of ​​the graphical user interface in response to a trigger operation on a first game background display control among the plurality of game background display controls. The method for editing dynamic images according to feature 1.

15. The graphical user interface further includes mirror control, In response to a load operation on a first target resource, the method renders and displays a first dynamic image corresponding to the first target resource on the graphical user interface based on a first rendering texture, and then further: In response to a trigger operation on the mirror control, the first dynamic image is inverted to obtain a mirror image of the first dynamic image, This includes displaying a mirror image of the first dynamic image. The method for editing dynamic images according to feature 1.

16. The graphical user interface further includes a preview control, and the method further includes In response to a trigger operation on the preview control, the game interface is displayed on the graphical user interface, and the game interface includes a resource load control and a game scene screen. In response to a fourth operation on the resource load control, a second target resource corresponding to the fourth operation and audio data corresponding to the second target resource are loaded, and a second dynamic image corresponding to the second target resource is displayed on the game interface. This includes playing an action screen and sound audio corresponding to the second dynamic image based on the second target resource and the audio data. The method for editing dynamic images according to feature 1.

17. The second target resource includes a predetermined number of mouth animations, Playing an action screen and sound audio corresponding to the second dynamic image based on the second target resource and the audio data is: The aforementioned audio data is analyzed to obtain the corresponding sound audio, The process involves determining a target mouth animation corresponding to each target audio in the sound audio from the aforementioned multiple mouth animations, This includes playing an action screen and sound audio corresponding to the second dynamic image, as well as playing an animation with a target mouth corresponding to each of the target audios. The method for editing dynamic images according to feature 16.

18. The graphical user interface further includes a comparison control, and the method further includes In response to a trigger operation on the comparison control, the comparison interface is displayed on the graphical user interface, the comparison interface includes a plurality of resource input controls, each of which has a corresponding image display area and load control, and the resource input controls are used to input the resource number of the target resource. In response to a trigger operation on a load control corresponding to a target resource input control, load a third target resource corresponding to the resource number displayed on the target resource input control, This includes displaying a third dynamic image corresponding to the third target resource in an image display area corresponding to the target resource input control. The method for editing dynamic images according to feature 1.

19. The comparison interface further includes a plurality of selection controls, each selection control corresponding to an image size, and the method further includes, The system includes displaying a third dynamic image of a first image size corresponding to the first selection control in the image display area in response to a trigger operation on a first selection control among the plurality of selection controls. The method for editing dynamic images according to feature 18.

20. The comparison interface further includes a reference line control, and the method further includes The comparison interface includes displaying a reference line corresponding to the reference line control in response to a trigger operation on the reference line control. The method for editing dynamic images according to feature 18.

21. The comparison interface further includes still image control, and the method further includes This includes displaying the initial frame image of the third dynamic image in the image display area in response to a trigger operation for the still image control. The method for editing dynamic images according to feature 18.

22. After displaying the edited target dynamic image in the preview interface in response to the first operation on the image editing control, the method further: In response to a save operation on the target dynamic image, the process includes converting data information corresponding to the target dynamic image into a target code and saving the target code to a predetermined profile. The method for editing dynamic images according to feature 1.

23. A dynamic image editing device including a first display module and an editing module, A graphical user interface is provided on the terminal device, and the graphical user interface includes image editing controls. The first display module is configured to render and display a first dynamic image corresponding to the first target resource on the graphical user interface based on a first rendering texture in response to a load operation on the first target resource. The editing module is configured to edit the first dynamic image based on the preview interface in response to a first operation on the image editing control, and to display the edited target dynamic image. The image editing control includes a first cropping control, The aforementioned editing module further, In response to a trigger operation for the first trimming control, the first dynamic image is set in the preview interface, and the preview interface has a trimming function. The preview interface is configured to trim the preview interface using its trimming function and display the trimmed target dynamic image on the preview interface. The aforementioned editing module further, The trimming function of the preview interface trims the preview interface according to the trimming size corresponding to the first dynamic image to obtain a trimmed area, and the first dynamic image is a plurality, and the trimming size corresponding to each of the first dynamic images is different. The system is configured to determine the dynamic image within the trimming region as the target dynamic image and to display the target dynamic image in the trimming region. A dynamic image editing device characterized by the following features.

24. An electronic device including a processor and memory, The memory stores computer executable instructions that can be executed by the processor, The processor implements the computer executable instruction to realize the dynamic image editing method described in any one of claims 1 to 22. An electronic device characterized by the following features.

25. When called and executed by the processor, it stores a computer executable instruction that implements the dynamic image editing method described in any one of claims 1 to 22. A computer-readable storage medium characterized by the following features.