feat: update doc

docs/en/graphics/2D/spine/example.md

@@ -1,41 +1,67 @@
 ---
 order: 3
-title: Spine Example
+title: Examples and Templates
 type: Graphics
 group: Spine
 label: Graphics/2D/Spine/example
 ---
 
+## Templates
+
+The Galacean editor provides a series of tutorial templates to help you quickly get started with using Spine animations.
+After entering the [editor](https://galacean.antgroup.com/editor/projects), you can click on the Templates Tab on the left to view these templates.
+</br></br>
+
+**Animation Control**
+
+This template demonstrates how to use the `setAnimation` and `addAnimation` APIs of `AnimationState` to orchestrate Spine animations:
+<img src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*6B93QKMSmIcAAAAAAAAAAAAADsp6AQ/original" alt="spine-animation" />
+
+**Animation Transition and Blending**
+
+This template shows how to set transitions and blend animations between different tracks in Spine:
+<img src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*KLq_S5fkeWQAAAAAAAAAAAAADsp6AQ/original" alt="spine-mix-blend" />
+
+**Mix and Match Outfits**
+
+This template demonstrates the capability of Spine to mix and match outfits. By freely combining attachments from different skins, you can mix and match accessories from various skins:
+<img src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*AEsoSLT7cqUAAAAAAAAAAAAADsp6AQ/original" alt="mix-and-match" />
+
+**Dynamic Partial Skin Switching**
+
+This template showcases the ability to dynamically switch partial skins. You can create new attachments based on an additionally uploaded atlas and replace them dynamically.
+<img src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*Rbd-QKbX2VEAAAAAAAAAAAAADsp6AQ/original" alt="spine-dynamic-change" />
+
+## Examples
+
 **Animation Control**
 
-This example demonstrates how to orchestrate a spine animation queue using the setAnimation and addAnimation APIs:
+This example demonstrates how to orchestrate a Spine animation queue using the `setAnimation` and `addAnimation` APIs:
 <playground src="spine-animation.ts"></playground>
 
 **Follow Shooting**
 
-This example demonstrates how to achieve aiming and shooting effects by modifying the IK bone position:
+This example shows how to achieve an aiming and shooting effect by modifying the IK bone position:
 <playground src="spine-follow-shoot.ts"></playground>
 
-**Partial Skin Change**
+**Partial Skin Switching**
 
-This example demonstrates how to achieve partial skin change by modifying the attachments in the slots:
+This example demonstrates how to achieve a partial outfit change by modifying attachments in slots:
 <playground src="spine-change-attachment.ts"></playground>
 
-**Full Skin Change**
+**Full Skin Switching**
 
-This example demonstrates how to achieve a full skin change using the setSkin method:
+This example demonstrates how to achieve full skin switching using the `setSkin` method:
 <playground src="spine-full-skin-change.ts"></playground>
 
 **Skin Mixing**
 
-This example demonstrates how to achieve mixing effects by combining new skins at runtime:
+This example demonstrates how to achieve mix-and-match effects at runtime by combining new skins:
 <playground src="spine-mix-and-match.ts"></playground>
 
 **Physics**
 
-This example demonstrates physics-based animation effects in spine version 4.2:
+This example showcases the physics-based animation effects in Spine 4.2:
 <playground src="spine-physics.ts"></playground>
 
-
-
-Next Chapter: [Version and Performance](/en/docs/graphics/2D/spine/other)
+The next chapter: [Versions and Performance](/docs/graphics/2D/spine/other)

docs/en/graphics/2D/spine/other.md

@@ -6,27 +6,32 @@ group: Spine
 label: Graphics/2D/Spine/other
 ---
 
-### Spine Version
-@galacen/engine-spine has supported spine 4.x versions since version 1.2.<br>
-From version 1.2 onwards, the major version and minor version of the @galacen/engine-spine package correspond exactly to the spine version, as follows:<br>
-- @galacean/engine-spine <= 1.2 corresponds to spine version 3.8
-- @galacean/engine-spine  4.0 corresponds to spine version 4.0
-- @galacean/engine-spine  4.1 corresponds to spine version 4.1
-- @galacean/engine-spine  4.2 corresponds to spine version 4.2
-- .....
+### Upgrades and Changes in 1.4
+After upgrading to Editor version 1.4, besides updating the engine version in the editor's [Project Settings](/docs/interface/menu/#project-settings), please note the following changes to the 1.4 Spine API:
 
-Currently, the 4.2 beta version has been released, and versions 4.1 and 4.0 will be released gradually.
+1. We no longer recommend creating Spine animations using the method: adding the `SpineAnimationRenderer` component via `addComponent` + setting the resource using `set SpineResource`.</br>
+In version 1.4, we introduced an instantiation method `instantiate` for SpineResource. The `instantiate` method returns a Spine animation entity that uses the resource, making the creation process much faster and more convenient.
 
-### Version Upgrade
-After upgrading to editor version 1.3, besides upgrading the engine version in the editor's [project settings](/en/docs/interface/menu/#项目设置), since the exported JSON or binary Spine editor version needs to [stay consistent](https://zh.esotericsoftware.com/spine-versioning#%E5%90%8C%E6%AD%A5%E7%89%88%E6%9C%AC) with the runtime version, after upgrading the editor to 1.3, `you also need to re-export the Spine assets of version 4.2 and upload them to the editor, completing the asset update by file overwrite`.
+2. `defaultState` has been renamed to `defaultConfig`. This parameter represents the default configuration of the Spine animation. The renamed parameter makes its purpose clearer.
 
-### Performance Suggestions
-Here are some methods to optimize spine animation performance:
+3. The `scale` configuration for default states has been removed. Previously, the `scale` parameter was used to handle the pixel ratio of Spine animations to keep their size consistent with other objects in the engine. In version 1.4, Spine animations no longer require setting a default scale to correct their size. We recommend adjusting the Spine animation scale by modifying the entity's `scale` parameter.
+
+4. A new `premultipliedAlpha` parameter has been added in version 1.4 for enabling premultiplied alpha rendering. When exporting animations from the Spine Editor, if premultiplication is checked during texture packing, enable the `premultipliedAlpha` option.
+
+
+### Performance Recommendations
+Here are some tips to optimize the performance of Spine animations:
+
+1. Export skeletons in binary file format (.skel), which results in smaller file sizes and faster loading.
+
+2. Minimize the number of atlas pages by packing attachments into as few atlas pages as possible and grouping attachments in the atlas according to the draw order to avoid unnecessary material switches. Refer to [Spine Texture Packer: Folder Structure](https://zh.esotericsoftware.com/spine-texture-packer#%E6%96%87%E4%BB%B6%E5%A4%B9%E7%BB%93%E6%9E%84) for details on how to arrange atlas regions in your Spine atlas.
+
+3. Avoid excessive use of clipping. Spine implements clipping by dynamically cutting triangles, which is very resource-intensive.
+
+4. Minimize the use of atlas page textures. When exporting, aim to keep the number of texture pages as low as possible.
+
+5. Try to use a single atlas texture for multiple skeletons. For example, add multiple skeletons in the same Spine project and select a single atlas during export. This way, multiple skeletons will share the same atlas texture.
 
-1. Export the skeleton in binary file (.skel) format, as binary files are smaller and load faster.
-2. It is recommended to pack attachments into as few atlas pages as possible, and group attachments into atlas pages according to the drawing order to prevent unnecessary material switching. Please refer to: [Spine Texture Packer: Folder Structure](https://zh.esotericsoftware.com/spine-texture-packer#%E6%96%87%E4%BB%B6%E5%A4%B9%E7%BB%93%E6%9E%84) to learn how to arrange atlas regions in your Spine atlas.
-3. Use the clipping feature sparingly. Spine's clipping implementation is done through dynamic triangle clipping, which is very performance-intensive.
-4. Minimize the use of atlas page textures. That is, try to control the number of textures exported to one.
 
 ### Questions
-For any questions about Spine, feel free to [create an issue](https://github.com/galacean/engine-spine/issues/new) on @galacean/engine-spine.
+If you have any questions about Spine, feel free to [create an issue](https://github.com/galacean/engine-spine/issues/new) in the @galacean/engine-spine repository.

docs/en/graphics/2D/spine/overview.md

@@ -6,18 +6,17 @@ group: Spine
 label: Graphics/2D/Spine/overview
 ---
 
-Spine animation is a 2D skeletal animation tool designed for game development. It binds images to bones and then controls the bones to create animations. It meets the program's need for control and flexibility over animations, while also providing a more efficient and streamlined workflow for artists and designers.
-Compared to traditional frame-by-frame animation, Spine animation has the following advantages:
+Spine animation is a 2D skeletal animation tool specifically designed for game development. By binding images to bones and then controlling the bones to create animations, it offers flexibility and control for developers while providing an efficient and streamlined workflow for artists and designers. Compared to traditional frame-by-frame animations, Spine animations offer the following advantages:
 
-- **Smaller size:** Traditional animations require providing an image for each frame. Spine animation only saves the animation data of the bones, which takes up very little space.
-- **Art requirements:** Spine animation requires fewer art resources, saving you more manpower and resources to better invest in game development.
-- **Smoothness:** Spine animation uses interpolation algorithms to calculate intermediate frames, ensuring that your animations always remain smooth.
-- **Equip attachments:** Images are bound to bones to create animations. If needed, you can easily change the character's equipment to meet different requirements. You can even change the character's appearance to achieve animation reuse.
-- **Blending:** Animations can be blended. For example, a character can shoot while walking, running, jumping, or swimming.
-- **Programmatic animation:** Bones can be controlled through code, allowing for effects such as shooting following the mouse, looking at enemies, or leaning forward when going uphill.
+- **Smaller Size:** Traditional animations require every frame to be provided as an image. In contrast, Spine animations only store skeletal animation data, resulting in significantly smaller file sizes.
+- **Reduced Art Requirements:** Spine animations require fewer art resources, allowing more manpower and resources to be allocated to other aspects of game development.
+- **Smoothness:** Spine animations use interpolation algorithms to calculate in-between frames, ensuring consistently smooth animation playback.
+- **Attachment Swapping:** Images are bound to bones to create animations. You can easily swap character equipment or even alter the character's appearance to reuse animations for different purposes.
+- **Blending:** Animations can be blended seamlessly. For example, a character can shoot while walking, running, jumping, or swimming.
+- **Programmatic Animations:** Bones can be controlled via code, enabling effects such as shooting that follows the mouse, focusing on enemies, or leaning forward when climbing a slope.
 
-This section will introduce:
-- [How to use Spine animation in the Galacean editor](/en/docs/graphics/2D/spine/editor)
-- [How to use the Galacean spine runtime in code](/en/docs/graphics/2D/spine/runtime)
-- [Spine animation examples](/en/docs/graphics/2D/spine/example)
-- [Other content (versions, performance)](/en/docs/graphics/2D/spine/other)
+This chapter will introduce:
+- [How to use Spine animations in the Galacean editor](/en/docs/graphics/2D/spine/editor)
+- [How to use the Galacean Spine runtime in code](/en/docs/graphics/2D/spine/runtime)
+- [Examples and templates](/en/docs/graphics/2D/spine/example)
+- [Additional topics (versions, performance)](/en/docs/graphics/2D/spine/other)