完善 docs

docs/docs/theory-guide/char-theory.md

@@ -5,4 +5,8 @@ description: "详细了解新 Char 缓存模式的实现方式。"
 
 # 新 Char 缓存模式
 
-TODO
+:::caution TODO
+
+施工中...
+
+:::

docs/docs/theory-guide/dynamic-batcher-theory.md

@@ -5,4 +5,8 @@ description: "详细了解新动态合图的实现方式。"
 
 # 新动态合图
 
-TODO
+:::caution TODO
+
+施工中...
+
+:::

docs/docs/theory-guide/high-dpi-theory.md

@@ -5,4 +5,8 @@ description: "详细了解高 DPI 文本渲染的实现方式。"
 
 # 高 DPI 文本渲染
 
-TODO
+:::caution TODO
+
+施工中...
+
+:::

docs/docs/theory-guide/multi-theory.md

@@ -5,4 +5,8 @@ description: "详细了解多纹理渲染的实现方式。"
 
 # 多纹理渲染
 
-TODO
+:::caution TODO
+
+施工中...
+
+:::

docs/docs/theory-guide/richtext-custom-material-theory.md

@@ -5,4 +5,8 @@ description: "详细了解使 RichText 支持自定义材质的实现方式。"
 
 # 使 RichText 支持自定义材质
 
-TODO
+:::caution TODO
+
+施工中...
+
+:::

docs/docs/theory-guide/spine-theory.md

@@ -5,4 +5,8 @@ description: "详细了解增强 Spine 的实现方式。"
 
 # 增强 Spine
 
-TODO
+:::caution TODO
+
+施工中...
+
+:::

docs/docs/theory-guide/theory-guide-intro.mdx

@@ -3,4 +3,8 @@ import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 # 原理文档
 
-TODO
+:::caution TODO
+
+施工中...
+
+:::

docs/docs/user-guide/multi-render/multi-material.md

@@ -40,6 +40,12 @@ toc_max_heading_level: 5
 
 :::
 
+:::caution 特别注意
+
+Spine 组件使用多纹理材质时会强制勾选 `enableBatch` 并强制关闭 `useTint`。
+
+:::
+
 ---
 ## 自定义多纹理材质
 

docs/docs/user-guide/spine/spine-batch.md

@@ -0,0 +1,8 @@
+---
+sidebar_position: 2
+description: "随心所欲地控制动态合图的使用。"
+---
+
+# 动态合图
+
+你可以像其它渲染组件一样在 Spine 组件上使用动态合图，如果想了解有关动态合图的更多详情，可以阅读 [动态合图](../dynamic-batcher/dynamic-batcher-intro.mdx) 文档。

docs/docs/user-guide/spine/spine-intro.mdx

@@ -3,19 +3,12 @@ import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 # Spine
 
-我们基本重构了动态合图系统，在原有的功能基础上，增加了以下重要特性：
+服务包解决了 Spine 在 Cocos Creator 中的三大痛点：
 
-- **完全开放所有接口**，以方便如果你想手动规划或控制动态图集
-- **增加默认是否参与动态合图的全局设置，并支持设置单个组件是否参与动态合图**
-- **支持自动加入多纹理合批**
-- **优化图集装箱算法**（使用 Guillotine）
-- **支持复用废弃的空间**
-- **所有图集作为一个整体进行管理**（不再出现纹理被加入到两张图集的情况）
+- 不参与动态合图
+- 无法与其它组件合批
+- 不能使用 SpriteFrame 换装
 
-:::tip 提示
-
-你可以阅读官方文档来了解怎么使用 [动态合图](https://docs.cocos.com/creator/2.4/manual/zh/advanced-topics/dynamic-atlas.html)，由于动态合图的使用本来就是自动的，所以如果没有特殊需求则**不需要阅读后面的内容**。
-
-:::
+你可以阅读下面的文档了解详情：
 
 <DocCardList items={useCurrentSidebarCategory().items}/>

docs/docs/user-guide/spine/spine-skin.md

@@ -3,6 +3,81 @@ sidebar_position: 2
 description: "随心所欲地控制动态合图的使用。"
 ---
 
-# 换装
+# SpriteFrame 换装
 
-TODO
+引擎提供了一个替换插槽的 attachment 对象进行换装的方法，可以在 [Spine 组件参考](https://docs.cocos.com/creator/2.4/manual/zh/components/spine.html) 官方文档进行了解。
+
+但是这种方法比较绕，并且 Spine 动画中有切换 attachment 的关键帧时会导致失效。
+
+而 attachment 对象都持有着一个 region 对象，region 对象有点类似引擎的 SpriteFrame，所以我们可以通过更换 region 对象来进行换装。
+
+---
+## Region 与 SpriteFrame 互转
+
+首先服务包提供了 Region 与 SpriteFrame 对象相互转换的接口。
+
+SpriteFrame 转为 Region：
+
+```js
+const region = sp.SkeletonData.createRegion(spriteFrame);
+```
+
+Region 转为 SpriteFrame：
+
+```js
+const spriteFrame = sp.SkeletonData.createSpriteFrame(region);
+```
+
+:::caution 注意
+
+Spine 的 Region 支持 `0`、`90`、`180`、`270` 四种旋转角度，而 Cocos Creator 的 SpriteFrame 只支持 `0` 与 `270` 两种旋转角度，所以如果是 Region 转为 SpriteFrame 则可能导致方向不同的问题，**要进行换装的话使用的是 SpriteFrame 转为 Region，所以不用担心这个问题。**
+
+:::
+
+---
+## 替换 Region 对象
+
+使用上面的接口将 SpriteFrame 转为 Region 后，就可以调用服务包提供的设置 Region 接口来进行换装了。
+
+这个接口在 Spine 组件上：
+
+```js
+spine.setRegion(slotName, attachmentName, region);
+```
+
+还有一个获取 Region 对象的接口：
+
+```js
+a.getRegion(slotName, attachmentName);
+```
+
+将转换与设置的代码结合，你就可以使用一行代码进行换装了。
+
+```
+spine.setRegion('head', 'head', sp.SkeletonData.createRegion(spriteFrame));
+```
+
+效果就像这样：
+
+
+
+---
+## 注意事项
+
+
+### 多实例问题
+
+替换 Region 对象实际上是在 Spine 组件所使用的 SkeletonData 上进行替换的，所以所有使用这个 SkeletonData 进行渲染的组件都会被替换。
+
+如果你只想替换其中一个组件的显示，那么就可以让所有组件都使用不同的 SkeletonData 进行渲染。
+
+服务包提供了一个克隆接口来实现这个需求，你可以使用：
+
+```js
+const clonedSkeletonData = skeletonData.clone();
+```
+
+克隆 SkeletonData，然后再进行换装，赋值给 Spine 组件。
+
+---
+以上所有用法你可以在 [演示项目](TODO) 中找到示范代码。