完善 docs

2024-12-25 03:08:29 +00:00 · 2022-06-17 18:42:43 +08:00 · 2022-06-17 18:42:43 +08:00 · 142e19d075
commit 142e19d075
parent a815401a2c
45 changed files with 11534 additions and 149 deletions
--- a/demo/README.md
+++ b/demo/README.md
@ -21,17 +21,17 @@
 // 扩展 Label：BITMAP 模式会复用同样式同文本的纹理，CHAR 模式改为使用多个图集，但是支持自动加入多纹理合批，这样就能与动态图集一起合批（增加配置，默认情况下动态图集最高8-1张，Char 图集为 1 张（无论如何设置，在装不完的情况下，因为需要正常渲染，都会最高使用 8 张图集，但是只有设置的数量才会加入多纹理合批，并且会创建一个专属材质，如果该材质无法完成渲染，会使用专属材质，或者可以仿照 spine flush buffer）
 // 扩展 Spine：支持自动切换材质与动态图集

-// 提醒 cc.SkeletonData.createSpriteFrame ，如果 region 的旋转角度不是 270 或 0 不能完美转换，但不影响自动合图
 // Spine 需要更多测试！！！SkeletonData 克隆会有 ref 问题吗？

-// 注意：Spine 使用多纹理材质时只支持使用 REALTIME 模式，并且会强制关闭 useTint 与开启 enableBatch
 // 注意：序列帧动画的性能下降（具体多少待测试）

 // 之后：
+// CHAR 模式有时候空格（字符也可能）会有额外的纹理，可能是复用没考虑 space
 // 查找所有 TODO
 // 插件适配 Windows
 // 演示项目
 // 插件适配两个版本：最新版与 2.4.6 版本
 // 适配原生平台
 // 适配 Spine 缓存模式
+// 适配 Spine useTint 模式
 // 新增静态合批：在一个节点树的根节点挂上一个组件，该组件会快照这个节点树并显示为一张图片，然后只接管渲染，不影响其它逻辑
--- a/demo/assets/home.meta
+++ b/demo/assets/home.meta
@ -0,0 +1,24 @@
+{
+  "ver": "1.1.2",
+  "uuid": "ec375606-0adb-4461-aa8a-c7e374bc920b",
+  "isBundle": true,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {
+    "web-mobile": "merge_all_json",
+    "web-desktop": "merge_all_json"
+  },
+  "optimizeHotUpdate": {
+    "web-mobile": false,
+    "web-desktop": false
+  },
+  "inlineSpriteFrames": {
+    "web-mobile": false,
+    "web-desktop": false
+  },
+  "isRemoteBundle": {
+    "web-mobile": false,
+    "web-desktop": false
+  },
+  "subMetas": {}
+}
--- a/demo/assets/home/home.prefab
+++ b/demo/assets/home/home.prefab
@ -0,0 +1,257 @@
+[
+  {
+    "__type__": "cc.Prefab",
+    "_name": "",
+    "_objFlags": 0,
+    "_native": "",
+    "data": {
+      "__id__": 1
+    },
+    "optimizationPolicy": 0,
+    "asyncLoadAssets": false,
+    "readonly": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "home",
+    "_objFlags": 0,
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 6
+      }
+    ],
+    "_prefab": {
+      "__id__": 7
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 960,
+      "height": 600
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        480,
+        300,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "tips",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": {
+      "__id__": 5
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 128,
+      "g": 128,
+      "b": 128,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 522.005,
+      "height": 20
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        -259.63200000000006,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "_materials": [
+      null
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_string": "源码：https://github.com/smallmain/cocos-service-pack/tree/master/demo",
+    "_N$string": "源码：https://github.com/smallmain/cocos-service-pack/tree/master/demo",
+    "_fontSize": 16,
+    "_lineHeight": 20,
+    "_enableWrapText": true,
+    "_N$file": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_batchAsBitmap": false,
+    "_styleFlags": 0,
+    "_underlineHeight": 0,
+    "_N$horizontalAlign": 1,
+    "_N$verticalAlign": 1,
+    "_N$fontFamily": "Arial",
+    "_N$overflow": 0,
+    "_N$cacheMode": 2,
+    "_N$autoSwitchMaterial": 0,
+    "_N$allowDynamicAtlas": 0,
+    "_N$enableRetina": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 17,
+    "_left": 95.11500000000001,
+    "_right": 0,
+    "_top": 549.6320000000001,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "e311a003-c0a1-4ff9-9983-2154de145eb7"
+    },
+    "fileId": "60yhtKNmhJBa7a+vJD0YMi",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 45,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "e311a003-c0a1-4ff9-9983-2154de145eb7"
+    },
+    "fileId": "",
+    "sync": false
+  }
+]
--- a/demo/assets/home/home.prefab.meta
+++ b/demo/assets/home/home.prefab.meta
@ -0,0 +1,8 @@
+{
+  "ver": "1.2.9",
+  "uuid": "e311a003-c0a1-4ff9-9983-2154de145eb7",
+  "optimizationPolicy": "AUTO",
+  "asyncLoadAssets": false,
+  "readonly": false,
+  "subMetas": {}
+}
--- a/demo/assets/left-area.ts
+++ b/demo/assets/left-area.ts
@ -12,53 +12,89 @@ export default class LeftArea extends cc.Component {
    @property(cc.Node)
    multiBatcher: cc.Node = null;

+    @property(cc.Node)
+    charMode: cc.Node = null;
+
+    @property(cc.Node)
+    highDPI: cc.Node = null;
+
+    @property(cc.Node)
+    spineBatch: cc.Node = null;
+
+    @property(cc.Node)
+    spineSkin: cc.Node = null;
+
    @property(cc.Node)
    mainArea: cc.Node = null;

-
-    start() {
-        this.home.on('toggle', (toggle: cc.Toggle) => {
-            if (toggle.isChecked) {
-                this.changePage(toggle.node);
-            }
-        });
-
-        this.multiMaterial.on('toggle', (toggle: cc.Toggle) => {
-            if (toggle.isChecked) {
-                this.changePage(toggle.node);
-            }
-        });
-
-        this.multiBatcher.on('toggle', (toggle: cc.Toggle) => {
-            if (toggle.isChecked) {
-                this.changePage(toggle.node);
-            }
-        });
-    }
-
    tick = 0;

-    changePage(node: cc.Node) {
-        const cur = ++this.tick;
-        const map = new Map<cc.Node, { bundle: string, path: string }>([
+    map: Map<cc.Node, { bundle: string, path: string }>

-            [this.multiMaterial, { bundle: "multi-render", path: "multi-material/multi-material" }],

-            [this.multiBatcher, { bundle: "multi-render", path: "multi-batcher/multi-batcher" }],
+    start() {
+        this.map = new Map([
+
+            [this.home, {
+                bundle: "home",
+                path: "home",
+            }],
+
+            [this.multiMaterial, {
+                bundle: "multi-render",
+                path: "multi-material/multi-material",
+            }],
+
+            [this.multiBatcher, {
+                bundle: "multi-render",
+                path: "multi-batcher/multi-batcher",
+            }],
+
+            [this.charMode, {
+                bundle: "text-render",
+                path: "char-mode/char-mode",
+            }],
+
+            [this.highDPI, {
+                bundle: "text-render",
+                path: "high-dpi/high-dpi",
+            }],
+
+            [this.spineBatch, {
+                bundle: "spine",
+                path: "batch/spine-batch",
+            }],
+
+            [this.spineSkin, {
+                bundle: "spine",
+                path: "skin/spine-skin",
+            }],

        ]);

-        this.mainArea.destroyAllChildren();
+        this.initBtns();
+    }

-        const route = map.get(node);
-        if (route) {
-            cc.assetManager.loadBundle(route.bundle, (err, bundle) => {
-                if (!err) {
-                    bundle.load(route.path, cc.Prefab, (err, prefab: cc.Prefab) => {
-                        if (!err && cur === this.tick) {
-                            this.mainArea.addChild(cc.instantiate(prefab));
-                        }
-                    });
+
+    initBtns() {
+        for (const [node, route] of this.map) {
+            node.on('toggle', (toggle: cc.Toggle) => {
+                if (toggle.isChecked) {
+                    const cur = ++this.tick;
+
+                    this.mainArea.destroyAllChildren();
+
+                    if (route) {
+                        cc.assetManager.loadBundle(route.bundle, (err, bundle) => {
+                            if (!err) {
+                                bundle.load(route.path, cc.Prefab, (err, prefab: cc.Prefab) => {
+                                    if (!err && cur === this.tick) {
+                                        this.mainArea.addChild(cc.instantiate(prefab));
+                                    }
+                                });
+                            }
+                        });
+                    }
                }
            });
        }
--- a/demo/assets/main.fire
+++ b/demo/assets/main.fire
--- a/demo/assets/multi-render/multi-batcher/multi-batcher.prefab
+++ b/demo/assets/multi-render/multi-batcher/multi-batcher.prefab
@ -338,7 +338,7 @@
    },
    "_contentSize": {
      "__type__": "cc.Size",
-      "width": 482.72,
+      "width": 445.375,
      "height": 40
    },
    "_anchorPoint": {
@ -388,8 +388,8 @@
    ],
    "_srcBlendFactor": 770,
    "_dstBlendFactor": 771,
-    "_string": "点击按钮会将这 8 张纹理关联同一个材质，能看到 drawcall 降低了 7",
-    "_N$string": "点击按钮会将这 8 张纹理关联同一个材质，能看到 drawcall 降低了 7",
+    "_string": "点击按钮会将这 8 张纹理关联同一个材质， Draw Call 会降低 7",
+    "_N$string": "点击按钮会将这 8 张纹理关联同一个材质， Draw Call 会降低 7",
    "_fontSize": 16,
    "_lineHeight": 40,
    "_enableWrapText": true,
--- a/demo/assets/spine.meta
+++ b/demo/assets/spine.meta
@ -0,0 +1,24 @@
+{
+  "ver": "1.1.2",
+  "uuid": "b420e7e4-907e-46c1-b7dd-4796fb1edebe",
+  "isBundle": true,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {
+    "web-desktop": "merge_all_json",
+    "web-mobile": "merge_all_json"
+  },
+  "optimizeHotUpdate": {
+    "web-desktop": false,
+    "web-mobile": false
+  },
+  "inlineSpriteFrames": {
+    "web-desktop": false,
+    "web-mobile": false
+  },
+  "isRemoteBundle": {
+    "web-desktop": false,
+    "web-mobile": false
+  },
+  "subMetas": {}
+}
--- a/demo/assets/spine/batch.meta
+++ b/demo/assets/spine/batch.meta
@ -0,0 +1,12 @@
+{
+  "ver": "1.1.2",
+  "uuid": "21700e21-cd6e-4f4e-88f8-c97c886e2e5c",
+  "isBundle": false,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {},
+  "optimizeHotUpdate": {},
+  "inlineSpriteFrames": {},
+  "isRemoteBundle": {},
+  "subMetas": {}
+}
--- a/demo/assets/spine/batch/spine-batch.prefab
+++ b/demo/assets/spine/batch/spine-batch.prefab
--- a/demo/assets/spine/batch/spine-batch.prefab.meta
+++ b/demo/assets/spine/batch/spine-batch.prefab.meta
@ -0,0 +1,8 @@
+{
+  "ver": "1.2.9",
+  "uuid": "76663793-b023-4931-89fb-febc115c2a43",
+  "optimizationPolicy": "AUTO",
+  "asyncLoadAssets": false,
+  "readonly": false,
+  "subMetas": {}
+}
--- a/demo/assets/spine/skin.meta
+++ b/demo/assets/spine/skin.meta
@ -0,0 +1,12 @@
+{
+  "ver": "1.1.2",
+  "uuid": "51588566-10c7-4926-847c-4b69bf536e7b",
+  "isBundle": false,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {},
+  "optimizeHotUpdate": {},
+  "inlineSpriteFrames": {},
+  "isRemoteBundle": {},
+  "subMetas": {}
+}
--- a/demo/assets/spine/skin/spine-skin.prefab
+++ b/demo/assets/spine/skin/spine-skin.prefab
--- a/demo/assets/spine/skin/spine-skin.prefab.meta
+++ b/demo/assets/spine/skin/spine-skin.prefab.meta
@ -0,0 +1,8 @@
+{
+  "ver": "1.2.9",
+  "uuid": "03129ae1-98e5-4264-a51b-6f95f23d742a",
+  "optimizationPolicy": "AUTO",
+  "asyncLoadAssets": false,
+  "readonly": false,
+  "subMetas": {}
+}
--- a/demo/assets/spine/skin/spine-skin.ts
+++ b/demo/assets/spine/skin/spine-skin.ts
@ -0,0 +1,60 @@
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class SpineSkin extends cc.Component {
+
+    @property(cc.Node)
+    addBoyBtn: cc.Node = null;
+
+    @property(cc.Node)
+    removeBoyBtn: cc.Node = null;
+
+    @property(cc.Node)
+    randomChangeBtn: cc.Node = null;
+
+    @property(cc.Node)
+    boy: cc.Node = null;
+
+    @property([cc.SpriteFrame])
+    heads: cc.SpriteFrame[] = [];
+
+    boys: cc.Node[] = [];
+
+    protected start(): void {
+        const boySpine = this.boy.getComponentInChildren(sp.Skeleton);
+        const newSkeletonData = boySpine.skeletonData.clone();
+        boySpine.skeletonData = newSkeletonData;
+        boySpine.animation = 'attack';
+
+        this.boys.push(this.boy);
+
+        this.addBoyBtn.on('click', () => {
+            const newBoy = cc.instantiate(this.boy);
+            const newBoySpine = newBoy.getComponentInChildren(sp.Skeleton);
+            boySpine.skeletonData = newBoySpine.skeletonData.clone();
+            boySpine.animation = 'attack';
+
+            this.boy.parent.addChild(newBoy);
+            newBoy.setPosition(this.boys[this.boys.length - 1].position);
+            newBoy.x += 100;
+            if (this.boys.length % 2 === 1) {
+                newBoy.getComponentInChildren(sp.Skeleton).setAnimationCacheMode(sp.Skeleton.AnimationCacheMode.PRIVATE_CACHE);
+                newBoy.getComponentInChildren(cc.Label).string = `Spine - Cache`;
+            }
+            this.boys.push(newBoy);
+        });
+
+        this.removeBoyBtn.on('click', () => {
+            if (this.boys.length > 1) {
+                this.boys[this.boys.length - 1].destroy();
+                this.boys.length -= 1;
+            }
+        });
+
+        this.randomChangeBtn.on('click', () => {
+            const boy = this.boys[this.boys.length - 1].getComponentInChildren(sp.Skeleton);
+            boy.setRegion('Head', 'Head', sp.SkeletonData.createRegion(this.heads[Math.floor(Math.random() * (this.heads.length))]));
+        });
+    }
+
+}
--- a/demo/assets/spine/skin/spine-skin.ts.meta
+++ b/demo/assets/spine/skin/spine-skin.ts.meta
@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "27990422-853f-43c5-a2c7-52900cb9edef",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
--- a/demo/assets/spine/spines.meta
+++ b/demo/assets/spine/spines.meta
@ -0,0 +1,12 @@
+{
+  "ver": "1.1.2",
+  "uuid": "4650da5c-d240-4ce6-b314-9e896888dd88",
+  "isBundle": false,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {},
+  "optimizeHotUpdate": {},
+  "inlineSpriteFrames": {},
+  "isRemoteBundle": {},
+  "subMetas": {}
+}
--- a/demo/assets/spine/spines/huatuo.atlas
+++ b/demo/assets/spine/spines/huatuo.atlas
@ -0,0 +1,209 @@
+
+huatuo.png
+size: 701,208
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+Body
+  rotate: false
+  xy: 487, 72
+  size: 90, 91
+  orig: 90, 91
+  offset: 0, 0
+  index: -1
+Eye
+  rotate: false
+  xy: 473, 44
+  size: 45, 24
+  orig: 45, 24
+  offset: 0, 0
+  index: -1
+Eye-beiji
+  rotate: false
+  xy: 360, 60
+  size: 57, 23
+  orig: 57, 23
+  offset: 0, 0
+  index: -1
+Eye-fennu
+  rotate: false
+  xy: 570, 39
+  size: 39, 21
+  orig: 39, 21
+  offset: 0, 0
+  index: -1
+Eye-shengli
+  rotate: false
+  xy: 421, 64
+  size: 45, 19
+  orig: 45, 19
+  offset: 0, 0
+  index: -1
+Eye-siwang
+  rotate: false
+  xy: 522, 48
+  size: 44, 20
+  orig: 44, 20
+  offset: 0, 0
+  index: -1
+Head
+  rotate: false
+  xy: 581, 64
+  size: 89, 99
+  orig: 89, 99
+  offset: 0, 0
+  index: -1
+L-Forearm
+  rotate: false
+  xy: 613, 29
+  size: 32, 31
+  orig: 32, 31
+  offset: 0, 0
+  index: -1
+L-Hand
+  rotate: false
+  xy: 674, 150
+  size: 27, 26
+  orig: 27, 26
+  offset: 0, 0
+  index: -1
+L-Lowerleg
+  rotate: false
+  xy: 674, 117
+  size: 26, 29
+  orig: 26, 29
+  offset: 0, 0
+  index: -1
+L-Thigh
+  rotate: false
+  xy: 649, 25
+  size: 29, 35
+  orig: 29, 35
+  offset: 0, 0
+  index: -1
+L-Upperarm
+  rotate: false
+  xy: 318, 7
+  size: 50, 49
+  orig: 50, 49
+  offset: 0, 0
+  index: -1
+Mouth
+  rotate: false
+  xy: 682, 36
+  size: 18, 10
+  orig: 18, 10
+  offset: 0, 0
+  index: -1
+Mouth-beiji
+  rotate: false
+  xy: 470, 72
+  size: 13, 11
+  orig: 13, 11
+  offset: 0, 0
+  index: -1
+Mouth-fennu
+  rotate: false
+  xy: 674, 66
+  size: 22, 17
+  orig: 22, 17
+  offset: 0, 0
+  index: -1
+Mouth-shengli
+  rotate: false
+  xy: 581, 17
+  size: 20, 18
+  orig: 20, 18
+  offset: 0, 0
+  index: -1
+Mouth-siwang
+  rotate: false
+  xy: 682, 50
+  size: 18, 12
+  orig: 18, 12
+  offset: 0, 0
+  index: -1
+Pelvis
+  rotate: false
+  xy: 641, 180
+  size: 43, 28
+  orig: 43, 28
+  offset: 0, 0
+  index: -1
+R-Forearm
+  rotate: false
+  xy: 473, 9
+  size: 38, 31
+  orig: 38, 31
+  offset: 0, 0
+  index: -1
+R-Hand
+  rotate: false
+  xy: 549, 12
+  size: 28, 23
+  orig: 28, 23
+  offset: 0, 0
+  index: -1
+R-Lowerleg
+  rotate: false
+  xy: 674, 87
+  size: 26, 26
+  orig: 26, 26
+  offset: 0, 0
+  index: -1
+R-Thigh
+  rotate: false
+  xy: 515, 4
+  size: 30, 36
+  orig: 30, 36
+  offset: 0, 0
+  index: -1
+R-Upperarm
+  rotate: false
+  xy: 431, 12
+  size: 38, 48
+  orig: 38, 48
+  offset: 0, 0
+  index: -1
+SE-daoguang
+  rotate: false
+  xy: 0, 0
+  size: 239, 208
+  orig: 239, 208
+  offset: 0, 0
+  index: -1
+SE-guang
+  rotate: false
+  xy: 360, 87
+  size: 123, 121
+  orig: 123, 121
+  offset: 0, 0
+  index: -1
+Weapon
+  rotate: false
+  xy: 243, 10
+  size: 71, 46
+  orig: 71, 46
+  offset: 0, 0
+  index: -1
+beilou
+  rotate: false
+  xy: 243, 60
+  size: 113, 148
+  orig: 113, 148
+  offset: 0, 0
+  index: -1
+hulu
+  rotate: false
+  xy: 372, 4
+  size: 55, 52
+  orig: 55, 52
+  offset: 0, 0
+  index: -1
+shadow
+  rotate: false
+  xy: 487, 167
+  size: 150, 41
+  orig: 150, 41
+  offset: 0, 0
+  index: -1
--- a/demo/assets/spine/spines/huatuo.atlas.meta
+++ b/demo/assets/spine/spines/huatuo.atlas.meta
@ -0,0 +1,5 @@
+{
+  "ver": "1.0.1",
+  "uuid": "69163ff4-f84e-4d78-8ea7-946f62007fcd",
+  "subMetas": {}
+}
--- a/demo/assets/spine/spines/huatuo.json
+++ b/demo/assets/spine/spines/huatuo.json
--- a/demo/assets/spine/spines/huatuo.json.meta
+++ b/demo/assets/spine/spines/huatuo.json.meta
@ -0,0 +1,9 @@
+{
+  "ver": "1.2.3",
+  "uuid": "9374ce8a-ae46-427f-9760-3694307fb4fa",
+  "textures": [
+    "804e11b5-bf4f-4a78-ac4a-8443e7166be1"
+  ],
+  "scale": 1,
+  "subMetas": {}
+}
--- a/demo/assets/spine/spines/huatuo.png
+++ b/demo/assets/spine/spines/huatuo.png
--- a/demo/assets/spine/spines/huatuo.png.meta
+++ b/demo/assets/spine/spines/huatuo.png.meta
@ -0,0 +1,36 @@
+{
+  "ver": "2.3.5",
+  "uuid": "804e11b5-bf4f-4a78-ac4a-8443e7166be1",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 701,
+  "height": 208,
+  "platformSettings": {},
+  "subMetas": {
+    "huatuo": {
+      "ver": "1.0.4",
+      "uuid": "b539b334-af1d-460c-a18d-de4e55947d2c",
+      "rawTextureUuid": "804e11b5-bf4f-4a78-ac4a-8443e7166be1",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 2.5,
+      "offsetY": 0,
+      "trimX": 5,
+      "trimY": 0,
+      "width": 696,
+      "height": 208,
+      "rawWidth": 701,
+      "rawHeight": 208,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
--- a/demo/assets/text-render/char-mode/char-mode.prefab
+++ b/demo/assets/text-render/char-mode/char-mode.prefab
--- a/demo/assets/text-render/char-mode/char-mode.ts
+++ b/demo/assets/text-render/char-mode/char-mode.ts
@ -0,0 +1,54 @@
+import { chars } from "../chars";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class CharMode extends cc.Component {
+
+    @property(cc.Label)
+    bitmapFont1: cc.Label = null;
+
+    @property(cc.Label)
+    bitmapFont2: cc.Label = null;
+
+    @property(cc.Label)
+    bitmapFont3: cc.Label = null;
+
+    @property(cc.Label)
+    charFont1: cc.Label = null;
+
+    @property(cc.Label)
+    charFont2: cc.Label = null;
+
+    @property(cc.Label)
+    charFont3: cc.Label = null;
+
+
+    protected onLoad(): void {
+        this.bitmapFont1.string = this.getRandomText(15);
+        this.bitmapFont2.string = this.getRandomText(15);
+        this.bitmapFont3.string = this.getRandomText(15);
+        this.charFont1.string = this.getRandomText(15);
+        this.charFont2.string = this.getRandomText(15);
+        this.charFont3.string = this.getRandomText(15);
+
+        this.schedule(() => {
+            this.bitmapFont1.string = this.getRandomText(15);
+            this.bitmapFont2.string = this.getRandomText(15);
+            this.bitmapFont3.string = this.getRandomText(15);
+            this.charFont1.string = this.getRandomText(15);
+            this.charFont2.string = this.getRandomText(15);
+            this.charFont3.string = this.getRandomText(15);
+        }, 0.1);
+    }
+
+
+    getRandomText(length: number) {
+        let str = '';
+        while (str.length < length) {
+            str += chars[Math.floor(Math.random() * chars.length)];
+        }
+        return str;
+    }
+
+}
--- a/demo/assets/text-render/char-mode/char-mode.ts.meta
+++ b/demo/assets/text-render/char-mode/char-mode.ts.meta
@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "59d30214-6082-40ab-96d5-2704f05b10b5",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
--- a/demo/assets/text-render/chars.ts
+++ b/demo/assets/text-render/chars.ts
--- a/demo/assets/text-render/chars.ts.meta
+++ b/demo/assets/text-render/chars.ts.meta
@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "0f37373d-8dc4-40cb-a343-5e7761491c53",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
--- a/demo/assets/text-render/high-dpi.meta
+++ b/demo/assets/text-render/high-dpi.meta
@ -0,0 +1,12 @@
+{
+  "ver": "1.1.2",
+  "uuid": "0574009e-3e43-4b85-a325-89f9dede6c68",
+  "isBundle": false,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {},
+  "optimizeHotUpdate": {},
+  "inlineSpriteFrames": {},
+  "isRemoteBundle": {},
+  "subMetas": {}
+}
--- a/demo/assets/text-render/high-dpi/high-dpi.prefab
+++ b/demo/assets/text-render/high-dpi/high-dpi.prefab
--- a/demo/assets/text-render/high-dpi/high-dpi.prefab.meta
+++ b/demo/assets/text-render/high-dpi/high-dpi.prefab.meta
@ -0,0 +1,8 @@
+{
+  "ver": "1.2.9",
+  "uuid": "e267c12a-39ac-41db-9e97-de8e196c296d",
+  "optimizationPolicy": "AUTO",
+  "asyncLoadAssets": false,
+  "readonly": false,
+  "subMetas": {}
+}
--- a/demo/settings/builder.json
+++ b/demo/settings/builder.json
@ -7,7 +7,49 @@
    "upsideDown": false
  },
  "packageName": "org.cocos2d.helloworld",
-  "startScene": "2d2f792f-a40c-49bb-a189-ed176a246e49",
-  "title": "hello_world",
-  "webOrientation": "auto"
+  "startScene": "cab4af66-dc74-41b5-8826-79b3a30ba99a",
+  "title": "Cocos-Service-Pack-Demo",
+  "webOrientation": "auto",
+  "inlineSpriteFrames": true,
+  "inlineSpriteFrames_native": true,
+  "mainCompressionType": "merge_all_json",
+  "mainIsRemote": false,
+  "optimizeHotUpdate": false,
+  "md5Cache": true,
+  "nativeMd5Cache": true,
+  "encryptJs": true,
+  "xxteaKey": "24d00175-09c0-4c",
+  "zipCompressJs": true,
+  "fb-instant-games": {},
+  "android": {
+    "packageName": "org.cocos2d.demo",
+    "REMOTE_SERVER_ROOT": ""
+  },
+  "ios": {
+    "packageName": "org.cocos2d.demo",
+    "REMOTE_SERVER_ROOT": "",
+    "ios_enable_jit": true
+  },
+  "mac": {
+    "packageName": "org.cocos2d.demo",
+    "REMOTE_SERVER_ROOT": "",
+    "width": 1280,
+    "height": 720
+  },
+  "win32": {
+    "REMOTE_SERVER_ROOT": "",
+    "width": 1280,
+    "height": 720
+  },
+  "android-instant": {
+    "packageName": "org.cocos2d.demo",
+    "REMOTE_SERVER_ROOT": "",
+    "pathPattern": "",
+    "scheme": "https",
+    "host": "",
+    "skipRecord": false,
+    "recordPath": ""
+  },
+  "appBundle": false,
+  "agreements": {}
 }
--- a/demo/settings/project.json
+++ b/demo/settings/project.json
@ -4,7 +4,36 @@
      true
    ]
  ],
-  "excluded-modules": [],
+  "excluded-modules": [
+    "Audio",
+    "AudioSource",
+    "Collider",
+    "DragonBones",
+    "EditBox",
+    "Graphics",
+    "Geom Utils",
+    "Intersection",
+    "Mask",
+    "Mesh",
+    "NodePool",
+    "Physics",
+    "PageView",
+    "PageViewIndicator",
+    "ProgressBar",
+    "ParticleSystem",
+    "Slider",
+    "ScrollView",
+    "StudioComponent",
+    "TiledMap",
+    "VideoPlayer",
+    "WebView",
+    "3D",
+    "3D Primitive",
+    "3D Physics/cannon.js",
+    "3D Physics/Builtin",
+    "3D Particle",
+    "SafeArea"
+  ],
  "group-list": [
    "default"
  ],
@ -20,7 +49,7 @@
    "width": 960,
    "height": 640
  },
-  "last-module-event-record-time": 0,
+  "last-module-event-record-time": 1655460658806,
  "assets-sort-type": "name",
  "facebook": {
    "enable": false,
--- a/demo/tsconfig.json
+++ b/demo/tsconfig.json
@ -6,7 +6,8 @@
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "temp/vscode-dist",
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "downlevelIteration": true,
  },
  "exclude": [
    "node_modules",
--- a/docs/docs/theory-guide/char-theory.md
+++ b/docs/docs/theory-guide/char-theory.md
@ -5,4 +5,8 @@ description: "详细了解新 Char 缓存模式的实现方式。"

 # 新 Char 缓存模式

-TODO
+:::caution TODO
+
+施工中...
+
+:::
--- a/docs/docs/theory-guide/dynamic-batcher-theory.md
+++ b/docs/docs/theory-guide/dynamic-batcher-theory.md
@ -5,4 +5,8 @@ description: "详细了解新动态合图的实现方式。"

 # 新动态合图

-TODO
+:::caution TODO
+
+施工中...
+
+:::
--- a/docs/docs/theory-guide/high-dpi-theory.md
+++ b/docs/docs/theory-guide/high-dpi-theory.md
@ -5,4 +5,8 @@ description: "详细了解高 DPI 文本渲染的实现方式。"

 # 高 DPI 文本渲染

-TODO
+:::caution TODO
+
+施工中...
+
+:::
--- a/docs/docs/theory-guide/multi-theory.md
+++ b/docs/docs/theory-guide/multi-theory.md
@ -5,4 +5,8 @@ description: "详细了解多纹理渲染的实现方式。"

 # 多纹理渲染

-TODO
+:::caution TODO
+
+施工中...
+
+:::
--- a/docs/docs/theory-guide/richtext-custom-material-theory.md
+++ b/docs/docs/theory-guide/richtext-custom-material-theory.md
@ -5,4 +5,8 @@ description: "详细了解使 RichText 支持自定义材质的实现方式。"

 # 使 RichText 支持自定义材质

-TODO
+:::caution TODO
+
+施工中...
+
+:::
--- a/docs/docs/theory-guide/spine-theory.md
+++ b/docs/docs/theory-guide/spine-theory.md
@ -5,4 +5,8 @@ description: "详细了解增强 Spine 的实现方式。"

 # 增强 Spine

-TODO
+:::caution TODO
+
+施工中...
+
+:::
--- a/docs/docs/theory-guide/theory-guide-intro.mdx
+++ b/docs/docs/theory-guide/theory-guide-intro.mdx
@ -3,4 +3,8 @@ import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

 # 原理文档

-TODO
+:::caution TODO
+
+施工中...
+
+:::
--- a/docs/docs/user-guide/multi-render/multi-material.md
+++ b/docs/docs/user-guide/multi-render/multi-material.md
@ -40,6 +40,12 @@ toc_max_heading_level: 5

 :::

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

--- a/docs/docs/user-guide/spine/spine-batch.md
+++ b/docs/docs/user-guide/spine/spine-batch.md
@ -0,0 +1,8 @@
+---
+sidebar_position: 2
+description: "随心所欲地控制动态合图的使用。"
+---
+
+# 动态合图
+
+你可以像其它渲染组件一样在 Spine 组件上使用动态合图，如果想了解有关动态合图的更多详情，可以阅读 [动态合图](../dynamic-batcher/dynamic-batcher-intro.mdx) 文档。
--- a/docs/docs/user-guide/spine/spine-intro.mdx
+++ b/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}/>
--- a/docs/docs/user-guide/spine/spine-skin.md
+++ b/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) 中找到示范代码。