完善demo

assets/scenes/OutterGlowEffectScene.fire

@@ -84,10 +84,10 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 28
+        "__id__": 32
       },
       {
-        "__id__": 29
+        "__id__": 33
       }
     ],
     "_prefab": null,
@@ -969,15 +969,21 @@
       },
       {
         "__id__": 24
+      },
+      {
+        "__id__": 26
+      },
+      {
+        "__id__": 28
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 26
+        "__id__": 30
       },
       {
-        "__id__": 27
+        "__id__": 31
       }
     ],
     "_prefab": null,
@@ -991,7 +997,7 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 195,
+      "width": 401,
       "height": 0
     },
     "_anchorPoint": {
@@ -1065,7 +1071,7 @@
       "__type__": "TypedArray",
       "ctor": "Float64Array",
       "array": [
-        0,
+        -103,
         0,
         0,
         0,
@@ -1159,7 +1165,7 @@
       "__type__": "TypedArray",
       "ctor": "Float64Array",
       "array": [
-        121.50000000000003,
+        18.50000000000003,
         0,
         0,
         0,
@@ -1214,6 +1220,194 @@
     "_N$cacheMode": 0,
     "_id": "9fH5zrVThO/I9ly3o3xhIT"
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "start_0",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 21
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 27
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 50,
+      "height": 50
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        67.5,
+        0,
+        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": "4bo6rvkTlF5rMMdsguMMH3"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 26
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "b878db1a-68e4-460d-95f8-83fdb34c11e6"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "54142b08-a163-426e-a75e-4c7b21046413"
+    },
+    "_type": 0,
+    "_sizeMode": 1,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": "59FQF0oT5EwKmj0nBbaZdm"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "ball_00",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 21
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 29
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 60,
+      "height": 60
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        170.5,
+        0,
+        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": "7e02DWsH9JIajxCtAZc1ug"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 28
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "b878db1a-68e4-460d-95f8-83fdb34c11e6"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "d0b78623-4e79-4de1-b1d2-ea211bf4652c"
+    },
+    "_type": 0,
+    "_sizeMode": 1,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": "24JG5wcHpMbKwEVWPmOT/7"
+  },
   {
     "__type__": "cc.Layout",
     "_name": "",
@@ -1224,7 +1418,7 @@
     "_enabled": true,
     "_layoutSize": {
       "__type__": "cc.Size",
-      "width": 195,
+      "width": 401,
       "height": 0
     },
     "_resize": 1,
@@ -1258,7 +1452,7 @@
     "alignMode": 1,
     "_target": null,
     "_alignFlags": 8,
-    "_left": 0.35329687499999995,
+    "_left": 0.2460052083333333,
     "_right": 0,
     "_top": 0,
     "_bottom": 0,
@@ -1299,11 +1493,8 @@
       "__id__": 2
     },
     "_enabled": true,
-    "exampleSprite": {
+    "examplesParentNode": {
-      "__id__": 23
+      "__id__": 21
-    },
-    "exampleLabel": {
-      "__id__": 25
     },
     "_id": "5cIwQjksRDKJ/zWSTFHRWJ"
   }

assets/scripts/OutterGlowEffectScene.ts

@@ -1,41 +1,34 @@
 const { ccclass, property } = cc._decorator;
 
 @ccclass
-export default class MainSceneCtrl extends cc.Component {
+export default class OutterGlowEffectScene extends cc.Component {
-    @property(cc.Sprite)
+    @property(cc.Node)
-    exampleSprite: cc.Sprite = null;
+    examplesParentNode: cc.Node = null;
-
-    @property(cc.Label)
-    exampleLabel: cc.Label = null;
 
     start() {
-        this._updateSpriteOutlineWidth(0);
+        this._updateRenderComponentOutterGlowMaterial(0);
-        this._updateLabelOutlineWidth(0);
     }
 
     onSideCallBack(slider: cc.Slider, customEventData: string) {
-        this._updateSpriteOutlineWidth(slider.progress / 100);
+        this._updateRenderComponentOutterGlowMaterial(slider.progress / 100);
-        this._updateLabelOutlineWidth(slider.progress / 100);
     }
 
     /**
-     * 动态更新描边宽度
+     * 更新渲染组件的材质
      *
      * 1. 获取材质
      * 2. 给材质的自定义 unitform 变量赋值
      * 3. 重新将材质赋值回去
      *
-     * @property outlineSize 描边长度比例[0,1] 比如0.5，那么就是宽*0.5 高*0.5
+     * @param size 描边长度比例[0,1] 比如0.5，那么就是宽*0.5 高*0.5
      */
-    private _updateSpriteOutlineWidth(outlineSize: number) {
+    private _updateRenderComponentOutterGlowMaterial(size: number) {
-        let spriteMaterial: cc.Material = this.exampleSprite.getMaterial(0);
+        this.examplesParentNode.children.forEach(childNode => {
-        spriteMaterial.setProperty("outlineSize", outlineSize);
+            childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
-        this.exampleSprite.setMaterial(0, spriteMaterial);
+                let material: cc.Material = renderComponent.getMaterial(0);
-    }
+                material.setProperty("outlineSize", size);
-
+                renderComponent.setMaterial(0, material);
-    private _updateLabelOutlineWidth(outlineSize: number) {
+            });
-        let labelMaterial: cc.Material = this.exampleLabel.getMaterial(0);
+        });
-        labelMaterial.setProperty("outlineSize", outlineSize);
-        this.exampleLabel.setMaterial(0, labelMaterial);
     }
 }

assets/textures/start_0.png.meta

@@ -0,0 +1,34 @@
+{
+  "ver": "2.3.3",
+  "uuid": "2453b01d-4364-4d87-ab53-391d1a42d07d",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "platformSettings": {},
+  "subMetas": {
+    "start_0": {
+      "ver": "1.0.4",
+      "uuid": "54142b08-a163-426e-a75e-4c7b21046413",
+      "rawTextureUuid": "2453b01d-4364-4d87-ab53-391d1a42d07d",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 1,
+      "offsetY": 1,
+      "trimX": 6,
+      "trimY": 4,
+      "width": 50,
+      "height": 50,
+      "rawWidth": 60,
+      "rawHeight": 60,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

settings/project.json

@@ -30,5 +30,6 @@
     "live": {
       "enable": false
     }
-  }
+  },
+  "start-scene": "current"
 }