General 2d garment animation folding method

By using 3D mesh vertex transformation animation in Unity to create and render meshes, the high cost and memory issues of clothing folding effects in 2D games are solved, achieving an efficient visual effect of clothing folding.

CN116503528BActive Publication Date: 2026-05-15CHENGDU LIBI TECH CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
CHENGDU LIBI TECH CO LTD
Filing Date
2023-03-30
Publication Date
2026-05-15

AI Technical Summary

Technical Problem

In 2D games, existing technologies are costly and memory-intensive when creating 2D clothing folding effects, and the Mesh skeleton solution used in 3D games has layering and outline issues in 2D games, making it unsuitable for effective application.

Method used

The animation uses vertex transformations in 3D meshes within Unity. Several meshes are created and constraint parameters are set. The meshes are then rendered using the MeshRenderer component. A binary search tree is built for animation interpolation to simulate the folding effect of clothing, reducing the number of keyframe images.

Benefits of technology

It significantly reduces art production costs and runtime memory usage, achieving efficient visual effects of clothing folding in a 2D environment.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN116503528B_ABST
    Figure CN116503528B_ABST
Patent Text Reader

Abstract

The application discloses a general 2D clothes animation folding method, comprising the following steps: S1, creating a plurality of meshes; S2, setting corresponding constraint parameters for each mesh; S3, rendering the meshes through a MeshRenderer component of Unity; S4, dividing the animation into two parts, establishing a binary search tree according to all vertices of each mesh, executing mesh vertex animation interpolation through the time percentage of the input animation, and making the corresponding change effect of the mesh changing with time. In Unity, the vertex transformation animation of the 3D mesh is used to simulate the visual effect of clothes folding in a 2D environment. For example, the key frame animation of the folding of a piece of clothes needs ten pictures: one picture of the state before folding, eight pictures of the state of the folding transition, and one picture of the state after folding. According to the method, only the picture of the state before folding is needed, so that the production cost of the art is greatly reduced, and the memory occupied during running is also reduced.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This invention relates to the field of game development technology, and in particular to a general 2D clothing animation folding method. Background Technology

[0002] In 2D games, the conventional method for folding 2D clothing images into "blocks" involves artists creating keyframes of the unfolding process into the block shape, followed by programmatic frame-by-frame playback. However, this method has several drawbacks:

[0003] Firstly, the production cost is too high. When there are hundreds of outfits in a project, the total number of images will increase dramatically.

[0004] Secondly, a large total number of images can lead to problems such as excessively large file size and excessive memory usage.

[0005] Using a mesh as a skeleton to perform vertex animation to achieve effects such as folded clothing is a common technique in 3D games, but serious problems such as layering issues and lack of outlines make this solution unusable in 2D games. Summary of the Invention

[0006] The purpose of this invention is to overcome the shortcomings of the prior art and provide a universal 2D clothing animation folding method.

[0007] The objective of this invention is achieved through the following technical solution: a general 2D clothing animation folding method, comprising the following steps:

[0008] S1: Create several grids;

[0009] S2: Set the corresponding constraint parameters for each grid;

[0010] S3: Render the mesh using Unity's existing MeshRenderer component;

[0011] S4: Divide the animation into two parts. Build a binary search tree based on all vertices of each grid. By passing in the animation time percentage, perform grid vertex animation interpolation accordingly to create the effect of the grid changing over time.

[0012] Preferably, the aspect ratio of the grid is consistent with the aspect ratio of the 2D image of the clothing.

[0013] Preferably, in step S1, three grid resources are created. The first grid is a planar grid, representing the state of the clothes before folding. The second grid is based on the first grid, with both the left and right sides folded backward, representing the state of the clothes during folding. The third grid is based on the second grid, divided into an upper part, a middle part, and a lower part. The upper part has its upward edge contracted inward, the middle part has its downward edge contracted inward, and the lower part is folded backward.

[0014] Preferably, in step S2, the constraint parameters are the width of the first grid, the length of the first grid, the upper length of the third grid, and the middle length of the third grid.

[0015] Preferably, when constructing the first mesh, the percentage of each vertex of each triangle face in the mesh in the XY direction is obtained according to the Pythagorean theorem. Using the percentage, the given width and length of the first mesh, the model coordinates of each vertex are then derived.

[0016] (model X model Y ) = (percent X *width, percent Y *height);

[0017] Among them, (model) X model Y () represents the position of the Xth grid vertex from the left and the Yth grid vertex from the top in the local coordinate system, width is the width of the grid, height is the height of the grid, and (percentage) represents the position of the grid vertex. X ,percent Y ) represents the ratio of the position of the Xth grid vertex from the left and the Yth grid vertex from the top in the local coordinate system to the width and height. The subscript X is the horizontal vertex number of the grid from left to right, and the subscript Y is the vertical vertex number of the grid from top to bottom.

[0018] Preferably, when constructing the second mesh, the mesh is divided into four parts laterally, with the first and fourth parts folded backward. After folding, the model coordinates of the first and fourth parts are consistent with those of the second and third parts.

[0019] (X 00 Y 00 )=(X 10 Y 10 )

[0020] Among them, (X) 00 Y 00 (X) represents the coordinates of all vertices in the 0th vertex from the left and the 0th vertex from the top, which is one-sixteenth of the total number of vertices. 10 Y 10 ) represents the coordinates of all vertices in the 1 / 16th segment from the left and the 0th from the top.

[0021] Preferably, in step S4, the animation is divided into two parts: the first part moves from the first grid to the second grid, and the second part moves from the second grid to the third grid, with each part occupying half of the total animation time.

[0022] This invention has the following advantages: In Unity, this invention uses vertex transformation animation of 3D meshes to simulate the visual effect of clothing folding in a 2D environment. For example, the keyframe animation of folding a piece of clothing requires ten images: one image of the state before folding, eight images of the folding transition state, and one image of the state after folding. However, with the method of this invention, only the image of the state before folding is needed, which greatly reduces the production cost of art and also reduces the memory occupied during runtime. Attached Figure Description

[0023] Figure 1 A schematic diagram of the folding method for 2D clothing animation;

[0024] Figure 2 This is a structural diagram of the first grid feature;

[0025] Figure 3 This is a structural diagram of the second grid feature;

[0026] Figure 4 This is a structural diagram of the third grid feature;

[0027] Figure 5 A partial structural diagram illustrating the construction of the first grid;

[0028] Figure 6 A partial structural diagram illustrating the construction of the second grid;

[0029] Figure 7 A partial structural diagram illustrating the construction of the third grid. Detailed Implementation

[0030] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0031] Therefore, the following detailed description of the embodiments of the invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the invention without inventive effort are within the scope of protection of the invention.

[0032] It should be noted that, unless otherwise specified, the embodiments and features described in this invention can be combined with each other.

[0033] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0034] In the description of this invention, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings, or the orientation or positional relationship commonly used when the product of this invention is in use, or the orientation or positional relationship commonly understood by those skilled in the art. They are only used for the convenience of describing this invention and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of this invention. In addition, the terms "first," "second," etc., are only used to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0035] In the description of this invention, it should also be noted that, unless otherwise explicitly specified and limited, the terms "set," "install," "connect," and "link" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in this invention based on the specific circumstances.

[0036] In this embodiment, as Figure 1 As shown, the general 2D clothing animation folding method includes the following steps:

[0037] S1: Create several grids;

[0038] S2: Set the corresponding constraint parameters for each grid;

[0039] S3: Render the mesh using Unity's existing MeshRenderer component;

[0040] S4: The animation is divided into two parts. A binary search tree is built based on all vertices of each mesh. By passing in the animation's time percentage, mesh vertex animation interpolation is performed accordingly, creating the effect of the mesh changing over time. In Unity, the technique of using 3D mesh vertex transformation animation to simulate the visual effect of clothing folding in a 2D environment is used. For example, the keyframe animation of a garment folding requires ten images: one for the state before folding, eight for the folding transition state, and one for the state after folding. However, the method of this invention only requires the image of the state before folding, greatly reducing the art production cost and the memory usage during runtime.

[0041] Furthermore, the aspect ratio of the mesh matches that of the 2D image of the clothing. Further still, in step S1, three mesh resources are created: the first mesh is a planar mesh, representing the state of the clothing before folding; the second mesh, based on the first mesh, has its left and right sides folded backwards, representing the state of the clothing during folding; the third mesh, based on the second mesh, is divided into upper, middle, and lower sections, where the upper section's upward edges contract inwards, the middle section's downward edges also contract inwards, and the lower section folds backwards. In this embodiment, in step S2, the constraint parameters are the width of the first mesh, the length of the first mesh, the upper length of the third mesh, and the middle length of the third mesh.

[0042] In this embodiment, as Figure 5 As shown, when constructing the first mesh, the Pythagorean theorem is used to obtain the percentage of each vertex of each triangle face in the XY direction. Using these percentages, and given the width and length of the first mesh, the model coordinates of each vertex are obtained.

[0043] (model X model Y ) = (percent X *width, percent Y *height);

[0044] Among them, (model) X model Y () represents the position of the Xth grid vertex from the left and the Yth grid vertex from the top in the local coordinate system, width is the width of the grid, height is the height of the grid, and (percentage) represents the position of the grid vertex. X ,percent Y The value represents the ratio of the position of the Xth grid vertex from the left and the Yth grid vertex from the top in the local coordinate system to the width and height. The subscript X represents the horizontal vertex number from left to right, and the subscript Y represents the vertical vertex number from top to bottom. Specifically, in order to construct the grid and satisfy the visual folding effect, the grid is divided into twelve parts.

[0045] Furthermore, such as Figure 6 and Figure 7 As shown, when constructing the second mesh, the mesh is divided into four parts horizontally. The first and fourth parts are folded backward. After folding, the model coordinates of the first and fourth parts are consistent with those of the second and third parts.

[0046] (X 00 Y 00 )=(X 10 Y 10 );

[0047] Among them, (X) 00 Y 00 (X) represents the coordinates of all vertices in the 0th vertex from the left and the 0th vertex from the top, which is one-sixteenth of the total number of vertices. 10 Y 10 ) represents the coordinates of all vertices in the 1 / 16th segment from the left and the 0th from the top.

[0048] Specifically, the coordinates at the seam remain unchanged, and a mirror image is created. The third grid is divided into four parts vertically, with the first and fourth parts folded. The principle here is the same as that of the second grid, so it will not be elaborated further.

[0049] In this embodiment, in step S4, the animation is divided into two parts: the first part goes from the first grid to the second grid, and the second part goes from the second grid to the third grid, with each part accounting for half of the total animation time.

[0050] Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing embodiments or make equivalent substitutions for some of the technical features. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the protection scope of the present invention.

Claims

1. A general 2D clothing animation folding method, characterized by: Includes the following steps: S1: Create several grids; S2: Set the corresponding constraint parameters for each grid; S3: Render the mesh using Unity's existing MeshRenderer component; S4: Divide the animation into two parts. Build a binary search tree based on all vertices of each grid. By passing in the animation time percentage, perform grid vertex animation interpolation accordingly to create the effect of the grid changing over time. In step S1, three grid resources are created. The first grid is a planar grid, representing the state of the clothes before folding. The second grid is based on the first grid, with both the left and right sides folded backward, representing the state of the clothes during folding. The third grid is based on the second grid, divided into an upper part, a middle part, and a lower part. The upper part has its upward edge contracted inward, the middle part has its downward edge contracted inward, and the lower part is folded backward. In step S2, the constraint parameters are the width of the first grid, the length of the first grid, the upper length of the third grid, and the middle length of the third grid; When constructing the first mesh, the Pythagorean theorem is used to determine the percentage of each vertex of each triangle face in the XY direction. Using these percentages, and given the width and length of the first mesh, the model coordinates of each vertex are then derived. ; in, The first one from the left The, counting from the top The position of each grid vertex in the local coordinate system The width of the grid. The height of the grid. The first one from the left The, counting from the top The ratio of the position of each grid vertex to its width and height in the local coordinate system, and its subscript. The horizontal vertex index of the grid from left to right. This represents the vertical vertex number of the grid from top to bottom.

2. The general 2D clothing animation folding method according to claim 1, characterized in that: The aspect ratio of the grid is the same as that of the 2D image of the clothing.

3. The general 2D clothing animation folding method according to claim 1, characterized in that: When constructing the second mesh, the mesh is divided horizontally into four parts. The first and fourth parts are folded backward. After folding, the model coordinates of the first and fourth parts are aligned with those of the second and third parts. ; in, This represents the coordinates of all vertices in the 0th vertex from the left and the 0th vertex from the top, which is one-sixteenth of the total coordinates. It represents the coordinates of all vertices in the 1 / 16th segment from the left and the 0th from the top.

4. The general 2D clothing animation folding method according to claim 1, characterized in that: In step S4, the animation is divided into two parts: the first part goes from the first grid to the second grid, and the second part goes from the second grid to the third grid, with each part taking up half of the total animation time.