The Galacean editor has built-in support for Spine animations, requiring no additional downloads or configurations, making the development process significantly easier. This chapter introduces how to use Spine animations in the Galacean editor.

For editor version dependencies, please refer to: Version/Performance Section

1. Exporting Assets from the Spine Editor

The first step is to export your Spine animation assets from the Spine editor. You can find the complete steps in the "Spine User Guide", which explains how to:

1. Export skeleton and animation data
2. Export texture atlases containing skeleton images

Below is a brief overview of the Spine asset export process:

1. After completing the animation, click Spine Menu > Export to open the export window.

2. In the upper left corner of the export window, select Binary (recommended to export in binary format instead of JSON format, as it results in smaller file sizes and faster loading).

3. Check the Texture Atlas packing checkbox.

4. Click Packing Settings.

The packing settings refer to the texture packing configurations. Refer to the official documentation for detailed parameters. After completing the packing settings, click OK.

5. Return to the export window, select the export folder, and click Export.

6. You will get the following three files:

• spineboy.skel: Contains skeleton and animation data, the core information for binding animation actions to the skeleton.
• spineboy.atlas: Stores information about the texture atlas, including the position and size of each texture in the atlas.
• Texture images: These may include multiple images, with each representing a page in the texture atlas used for rendering the visual content of animated characters.

2. Importing Assets into the Galacean Editor

The second step is to import the files exported from the Spine editor into the Galacean editor.

After opening the editor, drag the exported files directly into the Assets Panel to upload them, as shown in the following GIF:

You can also click the upload button in the assets panel and select the files to upload:

Once uploaded, you will see the uploaded Spine assets in the assets panel, including: SpineSkeletonData assets, SpineAtlas assets, and texture assets.

SpineSkeletonData Asset

The SpineSkeletonData asset stores skeleton data and references to the generated SpineAtlas asset. By clicking the asset, you can preview the Spine animation in the inspector, where you can switch between Skin and Animation Clips in the preview panel:

SpineAtlas Asset

The SpineAtlas asset stores the texture atlas file and contains references to the required texture assets. By clicking the asset, you can view its referenced texture assets and atlas information in the inspector.

Updating Assets

If you need to update your Spine assets, re-export the assets from the Spine editor and import them into the Galacean editor to overwrite the existing files.

3. Adding Spine Animations

After uploading the assets, you can add Spine animations to the scene using the following three methods:

Drag-and-Drop

Drag-and-drop is the quickest method. Click the SpineSkeletonData asset, hold and drag it into the viewport to quickly create an entity with the SpineAnimationRenderer component and specify the selected SpineSkeletonData asset.

Quick Add

Click the quick add button in the upper left corner and select 2D Object > SpineAnimationRenderer.

After adding, you will see a new entity with the SpineAnimationRenderer component. Click the Resource property and select the uploaded SpineSkeletonData asset to see the Spine animation.

Manual Add

The manual method is similar to quick add but requires manually creating a new entity in the node tree and adding the SpineAnimationRenderer component via the AddComponent button in the inspector.

After adding the SpineAnimationRenderer component, you also need to specify the component's Resource, which is the SpineSkeletonData asset that the SpineAnimationRenderer component will render.

SpineAnimationRenderer Component Configuration

All three methods for adding Spine animations are essentially the same: by adding the SpineAnimationRenderer component to an entity to incorporate Spine animations into the scene.

The SpineAnimationRenderer component configuration is as follows:

Using the SpineAnimationRenderer component, you can configure the Spine animation assets and default states:

• Resource: The resource for the Spine animation (SpineSkeletonData asset)
• Animation: The default animation name to play
• Loop: Whether the default animation plays in a loop
• Skin: The default skin name
• Priority: Render priority
• PremultiplyAlpha: Whether to render the animation in premultiplied alpha mode

4. Project Export

Finally, after completing scene editing, you can refer to the Project Export process to export the editor project.

Next section: Using Galacean Spine Runtime in Your Code

Next Chapter: Using in Code