Skeletal animation rendering program generation method and device and electronic equipment
By creating a two-dimensional rendering mode assembly in the target rendering engine of the cocos engine and defining the skeleton animation drawing method, a custom rendering engine is obtained to support 2D skeleton animation rendering, which solves the problem that low-end devices cannot render 2D skeleton animation, and realizes 2D skeleton animation rendering on low-end devices.
Patent Information
- Application Number
- CN202411974964.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-30
- Publication Date
- 2025-04-29
AI Technical Summary
The existing cocos engine rendering mechanism does not support drawing 2D skeleton animations (Spine animations) in 2D rendering contexts, resulting in the inability to use the cocos engine for 2D skeleton animation rendering in low-end devices that do not support 3D rendering capabilities.
By creating a 2D rendering mode assembly in the source code of the target rendering engine and defining the skeleton animation drawing method in the assembler, a custom rendering engine is obtained to support skeleton animation rendering.
It realizes 2D skeleton animation rendering in low-end devices, solving the problem of using the cocos engine to render 2D skeleton animation on devices that do not support 3D rendering capabilities.
Smart Images
Figure CN119904563A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer technology, and in particular to a method, device and electronic device for generating a skeletal animation rendering program. Background Art
[0002] In the cocos engine, 2D skeletal animation is a way to convert large animation resource images into atlases plus states, making 2D skeletal animation more flexible and smaller in size. Through continuous version iterations, the current 2D skeletal animation not only supports static rectangular images, but also can realize skinning, free transformation and other features. They are essentially achieved by converting images at runtime.
[0003] However, the existing cocos engine rendering mechanism does not support drawing 2D skeletal animation (Spine animation) in a 2D rendering context, resulting in the problem that the cocos engine cannot be used for 2D skeletal animation rendering in low-end devices that do not support 3D rendering capabilities. Summary of the invention
[0004] In view of this, the purpose of the present application is to provide a skeletal animation rendering program generation method, device and electronic device to solve the problem that 2D skeletal animation rendering cannot be performed using the cocos engine in low-end devices that do not support 3D rendering capabilities.
[0005] In a first aspect, an embodiment of the present application provides a method for generating a skeletal animation rendering program, comprising:
[0006] For the source code of the target rendering engine, create an assembler corresponding to the 2D rendering mode under the target path corresponding to the 2D rendering mode. The assembler is a parent class inherited from the upper layer of nodes and components.
[0007] Define the skeletal animation drawing method in the assembler to obtain a custom rendering engine;
[0008] Based on the custom rendering engine, obtain an application that supports skeletal animation rendering to generate skeletal animation using the application.
[0009] Optionally, based on the custom rendering engine, an application supporting skeletal animation rendering is obtained, including: using an animation editor to package the custom rendering engine and project code to obtain the application.
[0010] Optionally, the drawing parameters of the skeletal animation drawing method include a resource description object and animation motion rules.
[0011] Optionally, the method further includes: in response to an animation play instruction for the target object, determining whether the application supports a three-dimensional rendering mode; if the three-dimensional rendering mode is not supported, performing animation rendering on the target object using a skeletal animation drawing method in a two-dimensional rendering mode.
[0012] Optionally, the target object is animated by using a skeletal animation drawing method in a two-dimensional rendering mode, including: using a timer of a custom rendering engine to call the skeletal animation drawing method for each frame to render the skeletal animation of the target object.
[0013] Optionally, the target object includes a plurality of slices, and the skeletal animation drawing method is called in each frame, including: for each slice, calling the skeletal animation drawing method based on drawing parameters corresponding to the slice.
[0014] Optionally, determining whether the application supports the three-dimensional rendering mode includes: determining whether the operating environment of the terminal device supports the WebGL interface; if the operating environment does not support the WebGL interface, determining that the three-dimensional rendering mode is not supported.
[0015] Optionally, the method further includes: if the three-dimensional rendering mode is supported, performing skeletal animation rendering on the target object in the three-dimensional rendering mode.
[0016] In a second aspect, an embodiment of the present application further provides a skeletal animation rendering program generation device, the device comprising:
[0017] The assembler creation module is used to create an assembler corresponding to the two-dimensional rendering mode under the target path corresponding to the two-dimensional rendering mode for the source code of the target rendering engine. The assembler is a parent class inherited from the upper layer of nodes and components.
[0018] A custom engine acquisition module is used to define the skeletal animation drawing method in the assembler to obtain a custom rendering engine;
[0019] The application acquisition module is used to acquire an application that supports skeletal animation rendering based on a custom rendering engine, so as to generate skeletal animation using the application.
[0020] In a third aspect, an embodiment of the present application further provides an electronic device, comprising: a processor, a memory and a bus, wherein the memory stores machine-readable instructions executable by the processor, and when the electronic device is running, the processor and the memory communicate via the bus, and when the machine-readable instructions are executed by the processor, the steps of the skeletal animation rendering program generation method as described above are performed.
[0021] The embodiments of the present application bring the following beneficial effects:
[0022] A skeletal animation rendering program generation method, device and electronic device provided in the embodiments of the present application can create a skeletal animation drawing method in a two-dimensional rendering mode in a target rendering engine to obtain a custom rendering engine, use the custom rendering engine to generate a skeletal animation rendering program, and deploy the skeletal animation rendering program in a terminal device, so as to realize 2D skeletal animation rendering in low-end devices. Compared with the prior art, this solves the problem that 2D skeletal animation rendering cannot be performed using the cocos engine in low-end devices that do not support 3D rendering capabilities.
[0023] In order to make the above-mentioned objects, features and advantages of the present application more obvious and easy to understand, preferred embodiments are specifically cited below and described in detail with reference to the attached drawings. BRIEF DESCRIPTION OF THE DRAWINGS
[0024] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.
[0025] Figure 1 A flowchart of a method for generating a skeletal animation rendering program provided in an embodiment of the present application is shown;
[0026] Figure 2 A schematic diagram showing the structure of a skeletal animation rendering program generating device provided in an embodiment of the present application is shown;
[0027] Figure 3 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application is shown. DETAILED DESCRIPTION
[0028] To make the purpose, technical scheme and advantages of the embodiments of the present application clearer, the technical scheme in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all of the embodiments. The components of the embodiments of the present application usually described and shown in the drawings here can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present application provided in the drawings is not intended to limit the scope of the application claimed for protection, but merely represents the selected embodiments of the present application. Based on the embodiments of the present application, each other embodiment obtained by those skilled in the art without making creative work belongs to the scope of protection of the present application.
[0029] It is worth noting that before this application was proposed, the static bitmaps, animation effects, etc. in the rendering engine were essentially displayed on the screen frame by frame using animation logic to display images or animation resources. In the cocos engine, 2D skeletal animation is a way to switch the large image of animation resources to an atlas plus state, so that 2D skeletal animation becomes more flexible and smaller in size. Through continuous version iterations, the current 2D skeletal animation not only supports static rectangular images, but also can realize features such as skinning and free transformation. They are essentially realized by converting images at runtime, but this conversion is not a global transformation, but operates the transformation according to the mesh data to bend and deform the image through the mesh. However, the existing cocos engine rendering mechanism does not support drawing 2D skeletal animation (Spine animation) in a 2D rendering context, resulting in the problem that the cocos engine cannot be used for 2D skeletal animation rendering in low-end devices that do not support 3D rendering capabilities.
[0030] Based on this, an embodiment of the present application provides a method for generating a skeletal animation rendering program to implement 2D skeletal animation rendering in low-end devices.
[0031] See also Figure 1 , Figure 1 A flowchart of a method for generating a skeletal animation rendering program provided in an embodiment of the present application. Figure 1 As shown, the method for generating a skeletal animation rendering program provided in an embodiment of the present application includes:
[0032] Step S101, creating an assembler corresponding to the two-dimensional rendering mode under a target path corresponding to the two-dimensional rendering mode for the source code of the target rendering engine;
[0033] Step S102, defining a skeletal animation drawing method in the assembler to obtain a custom rendering engine;
[0034] Step S103, based on the custom rendering engine, obtaining an application that supports skeletal animation rendering, so as to generate skeletal animation using the application.
[0035] The skeletal animation rendering program generation method provided in the embodiment of the present application can create a skeletal animation drawing method in a two-dimensional rendering mode in a target rendering engine to obtain a custom rendering engine, and use the custom rendering engine to generate a skeletal animation rendering program. The skeletal animation rendering program is deployed in a terminal device, and 2D skeletal animation rendering can be implemented in low-end devices, solving the problem that 2D skeletal animation rendering cannot be performed using the cocos engine in low-end devices that do not support 3D rendering capabilities.
[0036] To facilitate understanding of this embodiment, each of the above exemplary steps provided in the embodiment of the present application is described below.
[0037] In step S101, for the source code of the target rendering engine, an assembler corresponding to the two-dimensional rendering mode is created under the target path corresponding to the two-dimensional rendering mode.
[0038] In this step, the target rendering engine may refer to an engine developed based on JavaScript. As an example, the target rendering engine may be a cocos engine.
[0039] The 2D rendering mode may refer to the CanvasRenderingContext mode, and the 3D rendering mode may refer to the WebGLRenderingContext mode.
[0040] The target path may refer to a file path in a project file corresponding to a source code of a target rendering engine, which is used to store files in the CanvasRenderingContext mode.
[0041] Assembler is a parent class inherited from nodes and components. For example, assembler can refer to assmbler in CanvasRenderingContext mode.
[0042] In the present application embodiment, the source code of the cocos engine is downloaded, and then, the dependency is installed using npm install to obtain a project file. There are two folders in the project file, one folder is used to store the implementation under the WebGLRenderingContext rendering mode, and the other folder is used to store the implementation under the CanvasRenderingContext mode, and the path corresponding to the folder is the target path. However, there is no Aseembler implementation of the spine (2D skeletal animation) node under the target path. For this reason, a new spine-assembler.js file is created under the target path, and the spine-assembler.js file is used to implement the assembler (assmbler) under the CanvasRenderingContext mode.
[0043] CanvasRenderingContext is a 2D rendering mode. The assembler in CanvasRenderingContext mode is different from the assembler in WebGLRenderingContext mode.
[0044] In step S102, a skeletal animation drawing method is defined in the assembler to obtain a custom rendering engine.
[0045] In this step, in order to implement skeletal animation rendering in CanvasRenderingContext mode, you need to define the skeletal animation drawing method, that is, add a new class spine-assembler in the spine-assembler.js file, and define the skeletal animation drawing method under the spine-assembler class. The skeletal animation drawing method is denoted as: draw.
[0046] The skeletal animation drawing method includes two input parameters, which are called drawing parameters. The drawing parameters of the skeletal animation drawing method include resource description objects and animation motion rules. The resource description object can refer to the spine image, and the animation motion rule can refer to the motion logic rules between the various pieces (components) of the skeleton, such as rotation, scaling, and conversion.
[0047] The skeleton animation drawing method can perform skeleton drawing on each slice of the target object based on the drawing parameters corresponding to the slice.
[0048] After rewriting the source code of the target rendering engine, a custom rendering engine is obtained. In this way, the cocos engine that does not support spine skeleton animation rendering is converted into a custom rendering engine that can support spine skeleton animation rendering. By modifying the cocos engine code, the spine animation is regarded as an extension, which can be used as a component. In the WebGLRenderingContext mode, each component in the cocos engine has a specific assembler implementation, but in the CanvasRenderingContext mode, the spine animation has no assembler implementation. Among them, the definition of assembler is that in the original cocos engine design, each node corresponds to an object on the canvas. The node can be a visible object or a functional invisible object. The most basic functions of the node, such as position, transformation, size, etc., are implemented by a base class. The more specific and functional implementation is handed over to the node's wrapper class or parent class assembler to implement.
[0049] It can be understood that spine animation is also a node, but the function of spine animation logic is implemented in the assembler parent class, and the basic function of the node is only to provide basic motion properties. This is also the reason why the spine assembler class is added in the CanvasRenderingContext mode, because there is no implementation of this assembler class in this CanvasRenderingContext mode, and there is no animation logic function.
[0050] In step S103, based on the custom rendering engine, an application supporting skeletal animation rendering is obtained to generate skeletal animation using the application.
[0051] In this step, when obtaining an application that supports skeletal animation rendering, the animation editor can be used to package the custom rendering engine and project code to obtain the target application.
[0052] In the embodiment of the present application, the target rendering engine can be modified using the above method on a device that does not support WebGLRenderingContext, and then the modified cocos engine source code is packaged to obtain a package file, which can be named cocos.js. The package file is imported into the cocos creator animation editor, which is equivalent to an editor tool for packaging and uploading materials. The cocos creator animation editor is used to package cocos.js and project code to obtain an application that can support spine skeleton animation rendering on low-end devices.
[0053] In one example, in response to an animation playback instruction for a target object, it is determined whether the application supports the three-dimensional rendering mode, for example: whether the operating environment of the terminal device supports the WebGL interface. If the operating environment does not support the WebGL interface, it is determined that the three-dimensional rendering mode is not supported; if the operating environment supports the WebGL interface, it is determined that the three-dimensional rendering mode is supported.
[0054] In one case, if the three-dimensional rendering mode is supported, the skeletal animation rendering is performed on the target object in the three-dimensional rendering mode.
[0055] In another case, if the 3D rendering mode is not supported, the target object is animated using the skeletal animation drawing method in the 2D rendering mode. For example: the assembler in the CanvasRenderingContext mode is referenced using the render-flow timer of the custom rendering engine, and the skeletal animation drawing method draw is defined in the assembler class, that is, the skeletal animation drawing method is called in each frame to render the skeletal animation of the target object, wherein the target object includes multiple slices slots, which are slices in the spine data. Each slice can be compared to a bone of the target object. When the slots are drawn, the skeletal animation drawing is completed, forming a portrait in one frame. When the skeletal animation drawing method is called in each frame, the skeletal animation drawing method is called for each slice based on the drawing parameters corresponding to the slice, and the draw method will redraw the bones in the spine until the bones are drawn. In this way, the 2D skeletal animation is drawn by continuously calling the draw method through the timer. It should be noted that the position of the animation is controlled by the node of the rendering engine, but the running trajectory of the skeletal animation is controlled by the spine action data (animation motion rules).
[0056] Based on the same inventive concept, the embodiment of the present application also provides a skeletal animation rendering program generation device corresponding to the skeletal animation rendering program generation method. Since the principle of solving the problem by the device in the embodiment of the present application is similar to the above-mentioned skeletal animation rendering program generation method in the embodiment of the present application, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be repeated.
[0057] See also Figure 2 , Figure 2 This is a schematic diagram of the structure of a skeletal animation rendering program generation device provided in an embodiment of the present application. Figure 2 As shown in , the skeletal animation rendering program generating device 200 comprises:
[0058] The assembler creation module 201 is used to create an assembler corresponding to the two-dimensional rendering mode under the target path corresponding to the two-dimensional rendering mode for the source code of the target rendering engine;
[0059] A custom engine acquisition module 202 is used to define a skeletal animation drawing method in an assembler to obtain a custom rendering engine;
[0060] The application acquisition module 203 is used to acquire an application that supports skeletal animation rendering based on a custom rendering engine, so as to generate skeletal animation using the application.
[0061] See also Figure 3 , Figure 3This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. Figure 3 As shown in , the electronic device 300 includes a processor 310 , a memory 320 and a bus 330 .
[0062] The memory 320 stores machine-readable instructions executable by the processor 310. When the electronic device 300 is running, the processor 310 communicates with the memory 320 via the bus 330. When the machine-readable instructions are executed by the processor 310, the above-mentioned Figure 1 The steps of the method for generating a skeletal animation rendering program in the method embodiment shown in the figure, and the specific implementation manner can be found in the method embodiment, which will not be repeated here.
[0063] The present application also provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the computer program can execute the above-mentioned Figure 1 The steps of the method for generating a skeletal animation rendering program in the method embodiment shown in the figure, and the specific implementation manner can be found in the method embodiment, which will not be repeated here.
[0064] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.
[0065] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. The device embodiments described above are merely schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some communication interfaces, and the indirect coupling or communication connection of devices or units can be electrical, mechanical or other forms.
[0066] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
[0067] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.
[0068] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a non-volatile computer-readable storage medium that is executable by a processor. Based on this understanding, the technical solution of the present application can essentially be embodied in the form of a software product, or in other words, the part that contributes to the prior art or the part of the technical solution. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.
[0069] Finally, it should be noted that the above-described embodiments are only specific implementation methods of the present application, which are used to illustrate the technical solutions of the present application, rather than to limit them. The protection scope of the present application is not limited thereto. Although the present application is described in detail with reference to the above-mentioned embodiments, ordinary technicians in the field should understand that any technician familiar with the technical field can still modify the technical solutions recorded in the above-mentioned embodiments within the technical scope disclosed in the present application, or can easily think of changes, or make equivalent replacements for some of the technical features therein; and these modifications, changes or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application, and should be included in the protection scope of the present application. Therefore, the protection scope of the present application shall be based on the protection scope of the claims.
Claims
1. A method for generating a skeletal animation rendering program, characterized in that: include: For the source code of the target rendering engine, under the target path corresponding to the two-dimensional rendering mode, create an assembler corresponding to the two-dimensional rendering mode, wherein the assembler is a parent class inherited from the upper layer of nodes and components; Defining a skeletal animation drawing method in the assembler to obtain a custom rendering engine; Based on the custom rendering engine, an application supporting skeletal animation rendering is obtained, so as to generate skeletal animation using the application.
2. The method according to claim 1, characterized in that The step of obtaining an application supporting skeletal animation rendering based on the custom rendering engine includes: The custom rendering engine and the project code are packaged using an animation editor to obtain an application program.
3. The method according to claim 1, characterized in that The drawing parameters of the skeleton animation drawing method include resource description objects and animation movement rules.
4. The method according to claim 1, characterized in that The method further comprises: In response to an animation play instruction for a target object, determining whether the application supports a three-dimensional rendering mode; If the three-dimensional rendering mode is not supported, the target object is animatedly rendered using a skeletal animation drawing method in a two-dimensional rendering mode.
5. The method according to claim 4, characterized in that The method of using the skeleton animation drawing method in the two-dimensional rendering mode to perform animation rendering on the target object includes: The timer of the custom rendering engine is used to call the skeletal animation drawing method in each frame to render the skeletal animation of the target object.
6. The method according to claim 5, characterized in that The target object includes a plurality of slices, and the skeletal animation drawing method is called in each frame, including: For each slice, the skeletal animation drawing method is called based on the drawing parameters corresponding to the slice.
7. The method according to claim 4, characterized in that The determining whether the application supports the three-dimensional rendering mode comprises: Determine whether the operating environment of the terminal device supports the WebGL interface; If the operating environment does not support the WebGL interface, it is determined that the three-dimensional rendering mode is not supported.
8. The method according to claim 4, characterized in that The method further comprises: If the three-dimensional rendering mode is supported, skeletal animation rendering is performed on the target object in the three-dimensional rendering mode.
9. A skeletal animation rendering program generation device, characterized in that: include: An assembler creation module is used to create an assembler corresponding to the two-dimensional rendering mode under a target path corresponding to the two-dimensional rendering mode for the source code of the target rendering engine, wherein the assembler is a parent class inherited from the upper layer of nodes and components; A custom engine acquisition module, used to define a skeletal animation drawing method in the assembler to obtain a custom rendering engine; The application acquisition module is used to acquire an application that supports skeletal animation rendering based on the custom rendering engine, so as to generate skeletal animation using the application.
10. An electronic device, characterized in that: include: A processor, a memory and a bus, wherein the memory stores machine-readable instructions executable by the processor, and when the electronic device is running, the processor communicates with the memory via the bus, and the processor executes the machine-readable instructions to perform the steps of the skeletal animation rendering program generation method as described in any one of claims 1 to 8.