整理代码

2019-12-25 09:59:19 +08:00
parent cdac6bf71a
commit a5cfb84dd0
16 changed files with 6828 additions and 396 deletions
--- a/assets/scripts/GlowOutterDemoEffectScene.ts
+++ b/assets/scripts/GlowOutterDemoEffectScene.ts
@@ -0,0 +1,34 @@
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class GlowOutterDemoEffectScene extends cc.Component {
+    @property(cc.Node)
+    examplesParentNode: cc.Node = null;
+
+    start() {
+        this._updateRenderComponentOutterGlowMaterial(0);
+    }
+
+    onSideCallBack(slider: cc.Slider, customEventData: string) {
+        this._updateRenderComponentOutterGlowMaterial(slider.progress / 100);
+    }
+
+    /**
+     * 更新渲染组件的材质
+     *
+     * 1. 获取材质
+     * 2. 给材质的自定义 unitform 变量赋值
+     * 3. 重新将材质赋值回去
+     *
+     * @param size 描边长度比例[0,1] 比如0.5，那么就是宽*0.5 高*0.5
+     */
+    private _updateRenderComponentOutterGlowMaterial(size: number) {
+        this.examplesParentNode.children.forEach(childNode => {
+            childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
+                let material: cc.Material = renderComponent.getMaterial(0);
+                material.setProperty("outlineSize", size);
+                renderComponent.setMaterial(0, material);
+            });
+        });
+    }
+}
--- a/assets/scripts/GlowOutterDemoEffectScene.ts.meta
+++ b/assets/scripts/GlowOutterDemoEffectScene.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "408f4991-ebdc-446e-9ce3-b18006bb7bcb",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
--- a/assets/scripts/GlowOutterEffectScene.ts
+++ b/assets/scripts/GlowOutterEffectScene.ts
@@ -2,31 +2,123 @@ const { ccclass, property } = cc._decorator;

@ccclass
 export default class GlowOutterEffectScene extends cc.Component {
-    @property(cc.Node)
-    examplesParentNode: cc.Node = null;
+    private _redSlider: cc.Slider = null;
+    private _redSliderLabel: cc.Label = null;

-    start() {
-        this._updateRenderComponentOutterGlowMaterial(0);
+    private _greenSlider: cc.Slider = null;
+    private _greenSliderLabel: cc.Label = null;
+
+    private _blueSlider: cc.Slider = null;
+    private _blueSliderLabel: cc.Label = null;
+
+    private _alphaSlider: cc.Slider = null;
+    private _alphaSliderLabel: cc.Label = null;
+
+    private _glowWidthSlider: cc.Slider = null;
+    private _glowWidthSliderLabel: cc.Label = null;
+
+    private _glowThresholdSlider: cc.Slider = null;
+    private _glowThresholdSliderLabel: cc.Label = null;
+
+    private _examplesParentNode: cc.Node = null;
+
+    onLoad() {
+        this._redSlider = cc.find("Canvas/Content/Sliders/ColorRedSlider/Slider").getComponent(cc.Slider);
+        this._redSliderLabel = cc.find("Canvas/Content/Sliders/ColorRedSlider/ValueLabel").getComponent(cc.Label);
+
+        this._greenSlider = cc.find("Canvas/Content/Sliders/ColorGreenSlider/Slider").getComponent(cc.Slider);
+        this._greenSliderLabel = cc.find("Canvas/Content/Sliders/ColorGreenSlider/ValueLabel").getComponent(cc.Label);
+
+        this._blueSlider = cc.find("Canvas/Content/Sliders/ColorBlueSlider/Slider").getComponent(cc.Slider);
+        this._blueSliderLabel = cc.find("Canvas/Content/Sliders/ColorBlueSlider/ValueLabel").getComponent(cc.Label);
+
+        this._alphaSlider = cc.find("Canvas/Content/Sliders/ColorAlphaSlider/Slider").getComponent(cc.Slider);
+        this._alphaSliderLabel = cc.find("Canvas/Content/Sliders/ColorAlphaSlider/ValueLabel").getComponent(cc.Label);
+
+        this._glowWidthSlider = cc.find("Canvas/Content/Sliders/GlowWidthSlider/Slider").getComponent(cc.Slider);
+        this._glowWidthSliderLabel = cc.find("Canvas/Content/Sliders/GlowWidthSlider/ValueLabel").getComponent(cc.Label);
+
+        this._glowThresholdSlider = cc.find("Canvas/Content/Sliders/GlowThresholdSlider/Slider").getComponent(cc.Slider);
+        this._glowThresholdSliderLabel = cc.find("Canvas/Content/Sliders/GlowThresholdSlider/ValueLabel").getComponent(cc.Label);
+
+        this._examplesParentNode = cc.find("Canvas/Content/Examples");
    }

-    onSideCallBack(slider: cc.Slider, customEventData: string) {
-        this._updateRenderComponentOutterGlowMaterial(slider.progress / 100);
+    onEnable() {
+        this._redSlider.node.on("slide", this._onSliderChanged, this);
+        this._greenSlider.node.on("slide", this._onSliderChanged, this);
+        this._blueSlider.node.on("slide", this._onSliderChanged, this);
+        this._alphaSlider.node.on("slide", this._onSliderChanged, this);
+        this._glowWidthSlider.node.on("slide", this._onSliderChanged, this);
+        this._glowThresholdSlider.node.on("slide", this._onSliderChanged, this);
+    }
+
+    onDisable() {
+        this._redSlider.node.off("slide", this._onSliderChanged, this);
+        this._greenSlider.node.off("slide", this._onSliderChanged, this);
+        this._blueSlider.node.off("slide", this._onSliderChanged, this);
+        this._alphaSlider.node.off("slide", this._onSliderChanged, this);
+        this._glowWidthSlider.node.off("slide", this._onSliderChanged, this);
+        this._glowThresholdSlider.node.off("slide", this._onSliderChanged, this);
+    }
+
+    start() {
+        this._onSliderChanged();
+    }
+
+    private _onSliderChanged() {
+        // 更新进度条值 Label 文本
+        this._redSliderLabel.string = `${this._redSlider.progress.toFixed(2)} | ${Math.round(255 * this._redSlider.progress)}`;
+        this._greenSliderLabel.string = `${this._greenSlider.progress.toFixed(2)} | ${Math.round(255 * this._greenSlider.progress)}`;
+        this._blueSliderLabel.string = `${this._blueSlider.progress.toFixed(2)} | ${Math.round(255 * this._blueSlider.progress)}`;
+        this._alphaSliderLabel.string = `${this._alphaSlider.progress.toFixed(2)} | ${Math.round(255 * this._alphaSlider.progress)}`;
+
+        // 这里为约束一下值发光宽度值在 [0.0, 0.1] 因为 0.1+ 之后的效果可能不明显，也可以自己尝试修改
+        let realGlowWidthProgress = this._glowWidthSlider.progress * 0.1;
+        this._glowWidthSliderLabel.string = `${realGlowWidthProgress.toFixed(2)}`;
+
+        // 这里为约束一下值发光阈值值在 [0.0, 0.5] 因为 0.5+ 之后的效果可能就是其他效果，也可以自己修改这里
+        // let realGlowThresholdProgress = this._glowThresholdSlider.progress * 0.5;
+        let realGlowThresholdProgress = this._glowThresholdSlider.progress;
+        this._glowThresholdSliderLabel.string = `${realGlowThresholdProgress.toFixed(2)}`;
+
+        // 更新材质
+        this._updateRenderComponentOutterGlowMaterial({
+            glowColor: cc.v4(this._redSlider.progress, this._greenSlider.progress, this._blueSlider.progress, this._alphaSlider.progress),
+            glowColorSize: realGlowWidthProgress,
+            glowThreshold: realGlowThresholdProgress
+        });
    }

    /**
     * 更新渲染组件的材质
     *
     * 1. 获取材质
-     * 2. 给材质的自定义 unitform 变量赋值
+     * 2. 给材质的 unitform 变量赋值
     * 3. 重新将材质赋值回去
-     *
-     * @param size 描边长度比例[0,1] 比如0.5，那么就是宽*0.5 高*0.5
     */
-    private _updateRenderComponentOutterGlowMaterial(size: number) {
-        this.examplesParentNode.children.forEach(childNode => {
+    private _updateRenderComponentOutterGlowMaterial(param: {
+        /**
+         * 发光宽度 [0.0, 1.0]
+         */
+        glowColorSize: number;
+
+        /**
+         * 发光颜色 [0.0, 1.0]
+         */
+        glowColor: cc.Vec4;
+
+        /**
+         * 发光阈值 [0.0, 1.0]
+         */
+        glowThreshold: number;
+    }) {
+        this._examplesParentNode.children.forEach(childNode => {
            childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
                let material: cc.Material = renderComponent.getMaterial(0);
-                material.setProperty("outlineSize", size);
+                material.setProperty("glowColorSize", param.glowColorSize);
+                material.setProperty("glowColor", param.glowColor);
+                material.setProperty("glowThreshold", param.glowThreshold);
                renderComponent.setMaterial(0, material);
            });
        });
--- a/assets/scripts/GlowOutterEffectScene.ts.meta
+++ b/assets/scripts/GlowOutterEffectScene.ts.meta
@@ -1,6 +1,6 @@
 {
  "ver": "1.0.5",
-  "uuid": "408f4991-ebdc-446e-9ce3-b18006bb7bcb",
+  "uuid": "885555a3-a2a6-4260-a7a9-d363145fced6",
  "isPlugin": false,
  "loadPluginInWeb": true,
  "loadPluginInNative": true,