完善demo

2019-12-24 18:34:08 +08:00
parent 77b3e81519
commit de11b67cac
23 changed files with 4487 additions and 5554 deletions
--- a/assets/scripts/GlowInnerEffectScene.ts
+++ b/assets/scripts/GlowInnerEffectScene.ts
@@ -3,20 +3,44 @@ const { ccclass, property } = cc._decorator;
@ccclass
 export default class GlowInnerEffectScene extends cc.Component {
    private _redSlider: cc.Slider = null;
+    private _redSliderLabel: cc.Label = null;
+
    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 _widthSlider: 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/SliderLayouts/ColorRedSliderPrefab/Slider").getComponent(cc.Slider);
-        this._greenSlider = cc.find("Canvas/Content/SliderLayouts/ColorGreenSliderPrefab/Slider").getComponent(cc.Slider);
-        this._blueSlider = cc.find("Canvas/Content/SliderLayouts/ColorBlueSliderPrefab/Slider").getComponent(cc.Slider);
-        this._alphaSlider = cc.find("Canvas/Content/SliderLayouts/ColorAlphaSliderPrefab/Slider").getComponent(cc.Slider);
-        this._widthSlider = cc.find("Canvas/Content/SliderLayouts/GlowWidthSliderPrefab/Slider").getComponent(cc.Slider);
-        this._glowThresholdSlider = cc.find("Canvas/Content/SliderLayouts/GlowThresholdSliderPrefab/Slider").getComponent(cc.Slider);
+        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");
    }

@@ -25,7 +49,7 @@ export default class GlowInnerEffectScene extends cc.Component {
        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._widthSlider.node.on("slide", this._onSliderChanged, this);
+        this._glowWidthSlider.node.on("slide", this._onSliderChanged, this);
        this._glowThresholdSlider.node.on("slide", this._onSliderChanged, this);
    }

@@ -34,7 +58,7 @@ export default class GlowInnerEffectScene extends cc.Component {
        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._widthSlider.node.off("slide", this._onSliderChanged, this);
+        this._glowWidthSlider.node.off("slide", this._onSliderChanged, this);
        this._glowThresholdSlider.node.off("slide", this._onSliderChanged, this);
    }

@@ -43,10 +67,25 @@ export default class GlowInnerEffectScene extends cc.Component {
    }

    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.2] 因为 0.2+ 之后的效果可能就是其他效果，也可以自己修改这里
+        let realGlowThresholdProgress = this._glowThresholdSlider.progress * 0.2;
+        this._glowThresholdSliderLabel.string = `${realGlowThresholdProgress.toFixed(2)}`;
+
+        // 更新材质
        this._updateRenderComponentOutterGlowMaterial({
            glowColor: cc.v4(this._redSlider.progress, this._greenSlider.progress, this._blueSlider.progress, this._alphaSlider.progress),
-            glowColorSize: this._widthSlider.progress * 0.01,
-            glowThreshold: this._glowThresholdSlider.progress * 0.01
+            glowColorSize: realGlowWidthProgress,
+            glowThreshold: realGlowThresholdProgress
        });
    }

@@ -54,7 +93,7 @@ export default class GlowInnerEffectScene extends cc.Component {
     * 更新渲染组件的材质
     *
     * 1. 获取材质
-     * 2. 给材质的自定义 unitform 变量赋值
+     * 2. 给材质的 unitform 变量赋值
     * 3. 重新将材质赋值回去
     */
    private _updateRenderComponentOutterGlowMaterial(param: {
--- a/assets/scripts/common.meta
+++ b/assets/scripts/common.meta
@@ -1,7 +0,0 @@
-{
-  "ver": "1.0.1",
-  "uuid": "4880429c-1a17-402a-997b-03e40556ce1e",
-  "isSubpackage": false,
-  "subpackageName": "",
-  "subMetas": {}
-}
--- a/assets/scripts/common/prefabs.meta
+++ b/assets/scripts/common/prefabs.meta
@@ -1,7 +0,0 @@
-{
-  "ver": "1.0.1",
-  "uuid": "7f773a6d-12c8-4f78-adab-37534100a08e",
-  "isSubpackage": false,
-  "subpackageName": "",
-  "subMetas": {}
-}
--- a/assets/scripts/common/prefabs/ColorSliderPrefab.ts
+++ b/assets/scripts/common/prefabs/ColorSliderPrefab.ts
@@ -1,26 +0,0 @@
-const { ccclass, property } = cc._decorator;
-
-@ccclass
-export default class ColorSliderPrefab extends cc.Component {
-    @property(cc.Slider)
-    slider: cc.Slider = null;
-
-    @property(cc.Label)
-    valueLabel: cc.Label = null;
-
-    onEnable() {
-        this.slider.node.on("slide", this._onSliderChanged, this);
-    }
-
-    onDisable() {
-        this.slider.node.off("slide", this._onSliderChanged, this);
-    }
-
-    start() {
-        this._onSliderChanged();
-    }
-
-    private _onSliderChanged() {
-        this.valueLabel.string = `${this.slider.progress.toFixed(2)} | ${Math.round(255 * this.slider.progress)}`;
-    }
-}
--- a/assets/scripts/common/prefabs/ColorSliderPrefab.ts.meta
+++ b/assets/scripts/common/prefabs/ColorSliderPrefab.ts.meta
@@ -1,9 +0,0 @@
-{
-  "ver": "1.0.5",
-  "uuid": "7d52782d-b07b-4a2a-b287-c029c5c1f05f",
-  "isPlugin": false,
-  "loadPluginInWeb": true,
-  "loadPluginInNative": true,
-  "loadPluginInEditor": false,
-  "subMetas": {}
-}
--- a/assets/scripts/common/prefabs/GlowThresholdSliderPrefab.ts
+++ b/assets/scripts/common/prefabs/GlowThresholdSliderPrefab.ts
@@ -1,27 +0,0 @@
-const { ccclass, property } = cc._decorator;
-
-@ccclass
-export default class GlowThresholdSliderPrefab extends cc.Component {
-    @property(cc.Slider)
-    slider: cc.Slider = null;
-
-    @property(cc.Label)
-    valueLabel: cc.Label = null;
-
-    onEnable() {
-        this.slider.node.on("slide", this._onSliderChanged, this);
-    }
-
-    onDisable() {
-        this.slider.node.off("slide", this._onSliderChanged, this);
-    }
-
-    start() {
-        this._onSliderChanged();
-    }
-
-    private _onSliderChanged() {
-        let realProgress = this.slider.progress * 0.01;
-        this.valueLabel.string = `${(realProgress * 100).toFixed(2)}%`;
-    }
-}
--- a/assets/scripts/common/prefabs/GlowThresholdSliderPrefab.ts.meta
+++ b/assets/scripts/common/prefabs/GlowThresholdSliderPrefab.ts.meta
@@ -1,9 +0,0 @@
-{
-  "ver": "1.0.5",
-  "uuid": "c5a62981-21fc-466d-a3ed-0b5672a778cf",
-  "isPlugin": false,
-  "loadPluginInWeb": true,
-  "loadPluginInNative": true,
-  "loadPluginInEditor": false,
-  "subMetas": {}
-}
--- a/assets/scripts/common/prefabs/GlowWidthSliderPrefab.ts
+++ b/assets/scripts/common/prefabs/GlowWidthSliderPrefab.ts
@@ -1,27 +0,0 @@
-const { ccclass, property } = cc._decorator;
-
-@ccclass
-export default class GlowWidthSliderPrefab extends cc.Component {
-    @property(cc.Slider)
-    slider: cc.Slider = null;
-
-    @property(cc.Label)
-    valueLabel: cc.Label = null;
-
-    onEnable() {
-        this.slider.node.on("slide", this._onSliderChanged, this);
-    }
-
-    onDisable() {
-        this.slider.node.off("slide", this._onSliderChanged, this);
-    }
-
-    start() {
-        this._onSliderChanged();
-    }
-
-    private _onSliderChanged() {
-        let realProgress = this.slider.progress * 0.01;
-        this.valueLabel.string = `${(realProgress * 100).toFixed(2)}%`;
-    }
-}
--- a/assets/scripts/common/prefabs/GlowWidthSliderPrefab.ts.meta
+++ b/assets/scripts/common/prefabs/GlowWidthSliderPrefab.ts.meta
@@ -1,9 +0,0 @@
-{
-  "ver": "1.0.5",
-  "uuid": "a1622cf4-4ad9-4bb4-a027-b751d2ae0bcd",
-  "isPlugin": false,
-  "loadPluginInWeb": true,
-  "loadPluginInNative": true,
-  "loadPluginInEditor": false,
-  "subMetas": {}
-}