整理描边代码

assets/scripts/OutlineEffectScene.ts

@@ -0,0 +1,63 @@
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class OutlineEffectScene extends cc.Component {
+    private _widthSlider: cc.Slider = null;
+    private _widthSliderLabel: cc.Label = null;
+
+    private _examplesParentNode: cc.Node = null;
+
+    onLoad() {
+        // 关闭动态合图
+        cc.dynamicAtlasManager.enabled = false;
+
+        this._widthSlider = cc.find("Canvas/Content/Sliders/WidthSlider/Slider").getComponent(cc.Slider);
+        this._widthSliderLabel = cc.find("Canvas/Content/Sliders/WidthSlider/ValueLabel").getComponent(cc.Label);
+
+        this._examplesParentNode = cc.find("Canvas/Content/Examples");
+    }
+
+    onEnable() {
+        this._widthSlider.node.on("slide", this._onSliderChanged, this);
+    }
+
+    onDisable() {
+        this._widthSlider.node.off("slide", this._onSliderChanged, this);
+    }
+
+    start() {
+        this._onSliderChanged();
+    }
+
+    private _onSliderChanged() {
+        let outlineWidth = parseFloat((this._widthSlider.progress / 100).toFixed(4));
+        this._widthSliderLabel.string = `${outlineWidth}`;
+
+        // 更新材质
+        this._updateRenderComponentMaterial({
+            outlineWidth: outlineWidth
+        });
+    }
+
+    /**
+     * 更新渲染组件的材质
+     *
+     * 1. 获取材质
+     * 2. 给材质的 unitform 变量赋值
+     * 3. 重新将材质赋值回去
+     */
+    private _updateRenderComponentMaterial(param: {
+        /**
+         * 描边宽度 [0.0, 1.0]，比如：0.5，那么就是宽*0.5 高*0.5
+         */
+        outlineWidth: number;
+    }) {
+        this._examplesParentNode.children.forEach(childNode => {
+            childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
+                let material: cc.Material = renderComponent.getMaterial(0);
+                material.setProperty("outlineWidth", param.outlineWidth);
+                renderComponent.setMaterial(0, material);
+            });
+        });
+    }
+}

assets/scripts/OutlineEffectScene.ts.meta

@@ -1,6 +1,6 @@
 {
   "ver": "1.0.5",
-  "uuid": "e1b90feb-a217-4493-849d-9a611900d683",
+  "uuid": "7c634e1e-a19e-4498-9f51-a2e8d07e221d",
   "isPlugin": false,
   "loadPluginInWeb": true,
   "loadPluginInNative": true,

assets/scripts/OutlineEffectSecne.ts

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