整理项目

assets/effects/sprite-glow-inner-v2.effect

@@ -1,4 +1,6 @@
-// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  
+// 相比起 v1 版本的变更
+//
+// 1. 切换了采样算法，由原来圆采样，改为矩形采样，减少大量三角函数运算，在保持差不多效果的前提下，性能得到大幅提升
 
 CCEffect %{
   techniques:
@@ -25,21 +27,19 @@ CCEffect %{
         spriteWidth: { 
           value: 500,
           editor: {
-            tooltip: "纹理宽度"
+            tooltip: "纹理宽度（px）"
           }
         }
         spriteHeight: { 
           value: 500,
           editor: {
-            tooltip: "纹理高度"
+            tooltip: "纹理高度（px）"
           }
         }
-        # 发光宽度（相对于宽度）
+        glowRange: { 
-        glowColorSize: { 
+          value: 20,
-          value: 0.2,
           editor: {
-            tooltip: "发光宽度",
+            tooltip: "内发光范围（px）"
-            range: [0.0, 1.0],
           }
         }
         # 发光透明度阈值
@@ -48,7 +48,7 @@ CCEffect %{
         glowThreshold: {
           value: 0.1,
           editor: {
-            tooltip: "发光阈值",
+            tooltip: "发光阈值（只有超过这个透明度的点才会发光）",
             range: [0.0, 1.0]
           }
         }
@@ -117,8 +117,8 @@ CCProgram fs %{
     // 纹理高度（px）
     float spriteHeight;
 
-    // 发光范围
+    // 内发光范围（px）
-    float glowColorSize;
+    float glowRange;
 
     // 发光阈值
     float glowThreshold;
@@ -152,7 +152,7 @@ CCProgram fs %{
    */
   float getGlowAlpha() {
     // 如果发光宽度为0，直接返回0.0透明度，减少计算量
-    if (glowColorSize == 0.0) {
+    if (glowRange == 0.0) {
       return 0.0;
     }
 
@@ -166,8 +166,8 @@ CCProgram fs %{
     } 
 
     // 每一圈的对应的步长
-    float per_step_x = (1.0 / spriteWidth) * (glowColorSize * spriteWidth / range);
+    float per_step_x = (1.0 / spriteWidth) * (glowRange / range);
-    float per_step_y = (1.0 / spriteHeight) * (glowColorSize * spriteHeight / range);
+    float per_step_y = (1.0 / spriteHeight) * (glowRange / range);
 
     // 取样周边一定范围透明度
     float totalAlpha = 0.0;
@@ -216,7 +216,7 @@ CCProgram fs %{
         alpha = 1.0 - alpha;
 
         // 给点调料，让靠近边缘的更加亮
-        alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;
+        alpha = -1.0 * pow((alpha - 1.0), 4.0) + 1.0;
       }
       // 源颜色（内发光）
       vec4 color_src = glowColor * alpha;

assets/effects/sprite-glow-inner-v2.effect.meta

@@ -5,11 +5,11 @@
     {
       "glsl1": {
         "vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n  v_color = a_color;\n  gl_Position = pos;\n}",
-        "frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n  uniform float alphaThreshold;\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform vec4 glowColor;\nuniform float spriteWidth;\nuniform float spriteHeight;\nuniform float glowColorSize;\nuniform float glowThreshold;\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n  if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n    return vec4(0.0, 0.0, 0.0, 0.0);\n  }\n  return texture2D(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n  if (glowColorSize == 0.0) {\n    return 0.0;\n  }\n  vec4 srcColor = getTextureColor(texture, v_uv0);\n  if (srcColor.a <= glowThreshold) {\n    return srcColor.a;\n  }\n  float per_step_x = (1.0 / spriteWidth) * (glowColorSize * spriteWidth / 5.0);\n  float per_step_y = (1.0 / spriteHeight) * (glowColorSize * spriteHeight / 5.0);\n  float totalAlpha = 0.0;\n  for (float x = -5.0; x <= 5.0; x++) {\n    for (float y = -5.0; y <= 5.0; y++) {\n      totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n    }\n  }\n  totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n  return totalAlpha;\n}\n#endif\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n  #if USE_TEXTURE\n  o *= texture2D(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n  o *= v_color;\n  ALPHA_TEST(o);\n  gl_FragColor = o;\n  #if SHOW_INNER_GLOW\n    vec4 color_dest = o;\n    float alpha = getGlowAlpha();\n    if (alpha > glowThreshold) {\n      alpha = 1.0 - alpha;\n      alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n    }\n    vec4 color_src = glowColor * alpha;\n    gl_FragColor = color_src * color_src.a + color_dest;\n  #endif\n}"
+        "frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n  uniform float alphaThreshold;\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform vec4 glowColor;\nuniform float spriteWidth;\nuniform float spriteHeight;\nuniform float glowRange;\nuniform float glowThreshold;\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n  if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n    return vec4(0.0, 0.0, 0.0, 0.0);\n  }\n  return texture2D(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n  if (glowRange == 0.0) {\n    return 0.0;\n  }\n  vec4 srcColor = getTextureColor(texture, v_uv0);\n  if (srcColor.a <= glowThreshold) {\n    return srcColor.a;\n  }\n  float per_step_x = (1.0 / spriteWidth) * (glowRange / 5.0);\n  float per_step_y = (1.0 / spriteHeight) * (glowRange / 5.0);\n  float totalAlpha = 0.0;\n  for (float x = -5.0; x <= 5.0; x++) {\n    for (float y = -5.0; y <= 5.0; y++) {\n      totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n    }\n  }\n  totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n  return totalAlpha;\n}\n#endif\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n  #if USE_TEXTURE\n  o *= texture2D(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n  o *= v_color;\n  ALPHA_TEST(o);\n  gl_FragColor = o;\n  #if SHOW_INNER_GLOW\n    vec4 color_dest = o;\n    float alpha = getGlowAlpha();\n    if (alpha > glowThreshold) {\n      alpha = 1.0 - alpha;\n      alpha = -1.0 * pow((alpha - 1.0), 4.0) + 1.0;\n    }\n    vec4 color_src = glowColor * alpha;\n    gl_FragColor = color_src * color_src.a + color_dest;\n  #endif\n}"
       },
       "glsl3": {
         "vert": "\nprecision highp float;\nuniform CCGlobal {\n  mat4 cc_matView;\n  mat4 cc_matViewInv;\n  mat4 cc_matProj;\n  mat4 cc_matProjInv;\n  mat4 cc_matViewProj;\n  mat4 cc_matViewProjInv;\n  vec4 cc_cameraPos;\n  vec4 cc_time;\n  mediump vec4 cc_screenSize;\n  mediump vec4 cc_screenScale;\n};\nuniform CCLocal {\n  mat4 cc_matWorld;\n  mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n  v_color = a_color;\n  gl_Position = pos;\n}",
-        "frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  };\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform glow {\n  vec4 glowColor;\n  float spriteWidth;\n  float spriteHeight;\n  float glowColorSize;\n  float glowThreshold;\n};\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n  if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n    return vec4(0.0, 0.0, 0.0, 0.0);\n  }\n  return texture(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n  if (glowColorSize == 0.0) {\n    return 0.0;\n  }\n  vec4 srcColor = getTextureColor(texture, v_uv0);\n  if (srcColor.a <= glowThreshold) {\n    return srcColor.a;\n  }\n  float per_step_x = (1.0 / spriteWidth) * (glowColorSize * spriteWidth / 5.0);\n  float per_step_y = (1.0 / spriteHeight) * (glowColorSize * spriteHeight / 5.0);\n  float totalAlpha = 0.0;\n  for (float x = -5.0; x <= 5.0; x++) {\n    for (float y = -5.0; y <= 5.0; y++) {\n      totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n    }\n  }\n  totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n  return totalAlpha;\n}\n#endif\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n  #if USE_TEXTURE\n  o *= texture(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n  o *= v_color;\n  ALPHA_TEST(o);\n  gl_FragColor = o;\n  #if SHOW_INNER_GLOW\n    vec4 color_dest = o;\n    float alpha = getGlowAlpha();\n    if (alpha > glowThreshold) {\n      alpha = 1.0 - alpha;\n      alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n    }\n    vec4 color_src = glowColor * alpha;\n    gl_FragColor = color_src * color_src.a + color_dest;\n  #endif\n}"
+        "frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  };\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform glow {\n  vec4 glowColor;\n  float spriteWidth;\n  float spriteHeight;\n  float glowRange;\n  float glowThreshold;\n};\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n  if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n    return vec4(0.0, 0.0, 0.0, 0.0);\n  }\n  return texture(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n  if (glowRange == 0.0) {\n    return 0.0;\n  }\n  vec4 srcColor = getTextureColor(texture, v_uv0);\n  if (srcColor.a <= glowThreshold) {\n    return srcColor.a;\n  }\n  float per_step_x = (1.0 / spriteWidth) * (glowRange / 5.0);\n  float per_step_y = (1.0 / spriteHeight) * (glowRange / 5.0);\n  float totalAlpha = 0.0;\n  for (float x = -5.0; x <= 5.0; x++) {\n    for (float y = -5.0; y <= 5.0; y++) {\n      totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n    }\n  }\n  totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n  return totalAlpha;\n}\n#endif\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n  #if USE_TEXTURE\n  o *= texture(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n  o *= v_color;\n  ALPHA_TEST(o);\n  gl_FragColor = o;\n  #if SHOW_INNER_GLOW\n    vec4 color_dest = o;\n    float alpha = getGlowAlpha();\n    if (alpha > glowThreshold) {\n      alpha = 1.0 - alpha;\n      alpha = -1.0 * pow((alpha - 1.0), 4.0) + 1.0;\n    }\n    vec4 color_src = glowColor * alpha;\n    gl_FragColor = color_src * color_src.a + color_dest;\n  #endif\n}"
       }
     }
   ],

assets/materials/sprite-glow-inner-v2.mtl

@@ -14,15 +14,13 @@
         "SHOW_INNER_GLOW": true
       },
       "props": {
-        "glowColorSize": 0.1,
         "glowColor": {
           "__type__": "cc.Color",
           "r": 255,
-          "g": 255,
+          "g": 0,
-          "b": 255,
+          "b": 0,
           "a": 255
-        },
+        }
-        "glowThreshold": 0.1
       }
     }
   }

assets/materials/sprite-glow-inner-v2.mtl.meta

@@ -1,6 +1,6 @@
 {
   "ver": "1.0.3",
-  "uuid": "ed801db5-01ea-4505-b505-e661a3f1bb07",
+  "uuid": "5e2baa0c-d8bf-493f-89f7-a11352092439",
   "dataAsSubAsset": null,
   "subMetas": {}
 }

assets/scenes/GlowInnerEffectScene.fire

@@ -174,7 +174,7 @@
       "array": [
         0,
         0,
-        416.1116748714887,
+        415.69219381653056,
         0,
         0,
         0,
@@ -5384,7 +5384,7 @@
     "_enabled": true,
     "_materials": [
       {
-        "__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
+        "__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
       }
     ],
     "_srcBlendFactor": 770,
@@ -5478,7 +5478,7 @@
     "_enabled": true,
     "_materials": [
       {
-        "__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
+        "__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
       }
     ],
     "_srcBlendFactor": 770,
@@ -5572,7 +5572,7 @@
     "_enabled": true,
     "_materials": [
       {
-        "__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
+        "__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
       }
     ],
     "_srcBlendFactor": 770,
@@ -5666,7 +5666,7 @@
     "_enabled": true,
     "_materials": [
       {
-        "__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
+        "__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
       }
     ],
     "_srcBlendFactor": 770,
@@ -5760,7 +5760,7 @@
     "_enabled": true,
     "_materials": [
       {
-        "__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
+        "__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
       }
     ],
     "_srcBlendFactor": 770,
@@ -5854,7 +5854,7 @@
     "_enabled": true,
     "_materials": [
       {
-        "__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
+        "__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
       }
     ],
     "_useOriginalSize": false,

assets/scenes/GlowInnerV2EffectScene.fire.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.2.7",
+  "uuid": "6d781c30-9520-4a95-9e9d-eb99fb2bbded",
+  "asyncLoadAssets": false,
+  "autoReleaseAssets": false,
+  "subMetas": {}
+}

assets/scripts/GlowInnerEffectScene.ts

@@ -73,9 +73,8 @@ export default class GlowInnerEffectScene extends cc.Component {
         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 * 200;
-        let realGlowWidthProgress = this._glowWidthSlider.progress * 0.1;
+        this._glowWidthSliderLabel.string = `${realGlowWidthProgress.toFixed(0)}`;
-        this._glowWidthSliderLabel.string = `${realGlowWidthProgress.toFixed(2)}`;
 
         // 这里为约束一下值发光阈值值在 [0.0, 0.5] 因为 0.5+ 之后的效果可能就是其他效果，也可以自己修改这里
         // let realGlowThresholdProgress = this._glowThresholdSlider.progress * 0.5;
@@ -85,7 +84,7 @@ export default class GlowInnerEffectScene extends cc.Component {
         // 更新材质
         this._updateRenderComponentMaterial({
             glowColor: cc.v4(this._redSlider.progress, this._greenSlider.progress, this._blueSlider.progress, this._alphaSlider.progress),
-            glowColorSize: realGlowWidthProgress,
+            glowRange: realGlowWidthProgress,
             glowThreshold: realGlowThresholdProgress,
         });
     }
@@ -99,9 +98,9 @@ export default class GlowInnerEffectScene extends cc.Component {
      */
     private _updateRenderComponentMaterial(param: {
         /**
-         * 发光宽度 [0.0, 1.0]
+         * 发光宽度（px）
          */
-        glowColorSize: number;
+        glowRange: number;
 
         /**
          * 发光颜色 [0.0, 1.0]
@@ -119,7 +118,7 @@ export default class GlowInnerEffectScene extends cc.Component {
                 let material: cc.Material = renderComponent.getMaterial(0);
                 material.setProperty("spriteWidth", spriteFrameRect.width);
                 material.setProperty("spriteHeight", spriteFrameRect.height);
-                material.setProperty("glowColorSize", param.glowColorSize);
+                material.setProperty("glowRange", param.glowRange);
                 material.setProperty("glowColor", param.glowColor);
                 material.setProperty("glowThreshold", param.glowThreshold);
                 renderComponent.setMaterial(0, material);

assets/scripts/GlowInnerV2EffectScene.ts

@@ -0,0 +1,128 @@
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class GlowInnerV2EffectScene 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 _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 _scrollView: cc.ScrollView = 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._scrollView = cc.find("Canvas/Content/ScrollView").getComponent(cc.ScrollView);
+    }
+
+    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)}`;
+
+        let realGlowWidthProgress = this._glowWidthSlider.progress * 200;
+        this._glowWidthSliderLabel.string = `${realGlowWidthProgress.toFixed(0)}`;
+
+        // 这里为约束一下值发光阈值值在 [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._updateRenderComponentMaterial({
+            glowColor: cc.v4(this._redSlider.progress, this._greenSlider.progress, this._blueSlider.progress, this._alphaSlider.progress),
+            glowRange: realGlowWidthProgress,
+            glowThreshold: realGlowThresholdProgress,
+        });
+    }
+
+    /**
+     * 更新渲染组件的材质
+     *
+     * 1. 获取材质
+     * 2. 给材质的 unitform 变量赋值
+     * 3. 重新将材质赋值回去
+     */
+    private _updateRenderComponentMaterial(param: {
+        /**
+         * 发光宽度（px）
+         */
+        glowRange: number;
+
+        /**
+         * 发光颜色 [0.0, 1.0]
+         */
+        glowColor: cc.Vec4;
+
+        /**
+         * 发光阈值 [0.0, 1.0]
+         */
+        glowThreshold: number;
+    }) {
+        this._scrollView.content.children.forEach((childNode) => {
+            childNode.getComponents(cc.RenderComponent).forEach((renderComponent) => {
+                let spriteFrameRect = (<cc.Sprite>renderComponent).spriteFrame.getRect();
+                let material: cc.Material = renderComponent.getMaterial(0);
+                material.setProperty("spriteWidth", spriteFrameRect.width);
+                material.setProperty("spriteHeight", spriteFrameRect.height);
+                material.setProperty("glowRange", param.glowRange);
+                material.setProperty("glowColor", param.glowColor);
+                material.setProperty("glowThreshold", param.glowThreshold);
+                renderComponent.setMaterial(0, material);
+            });
+        });
+    }
+}

assets/scripts/GlowInnerV2EffectScene.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "1c87571b-ed1c-476d-afc7-917037e08f5a",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}