diff --git a/assets/effects/sprite-flash-light.effect b/assets/effects/sprite-flash-light.effect
index b33bdaf..932dab4 100644
--- a/assets/effects/sprite-flash-light.effect
+++ b/assets/effects/sprite-flash-light.effect
@@ -37,7 +37,7 @@ CCEffect %{
         }
         # 光束倾斜角度
         lightAngle: {
-          valu: 45.0,
+          value: 36.0,
           inspctor: {
             tooltip: "光束倾斜角度",
             range: [0.0, 1.0],
@@ -46,19 +46,35 @@ CCEffect %{
 
         # 光束宽度
         lightWidth: {
-          value: 0.4,
+          value: 0.2,
           inspector: {
             tooltip: "光束宽度"
           }
         }
 
         # 启用光束渐变
-        enablGradient: {
-          value: 0,
+        enableGradient: {
+          value: 1.0,
           inspecator: {
             tooltip: "是否启用光束渐变。0：不启用，非0：启用"
           }
         }
+
+        # 裁剪掉透明区域上的光
+        cropAlpha: {
+          value: 1.0,
+          inspecator: {
+            tooltip: "是否裁剪透明区域上的光。0：不启用，非0：启用"
+          }
+        }
+
+        # 是否启用迷雾效果
+        enableFog: {
+          value: 0.0,
+          inspecator: {
+            tooltip: "是否启用迷雾效果。0：不启用，非0：启用"
+          }
+        }
 }%
 
 
@@ -124,49 +140,70 @@ CCProgram fs %{
     float lightWidth;
 
     // 启用光束渐变
-    float enablGradient;
+    // ps：编辑器还不支持 bool 类型的样子，因此用float来定义
+    float enableGradient;
 
-    // 裁剪掉透明区域上的点光
-    // ps：编辑器还不支持 bool 类型的样子，因此没在 CCEffect 中定义
-    bool cropAlpha;   
+    // 裁剪掉透明区域上的光
+    // ps：编辑器还不支持 bool 类型的样子，因此用float来定义
+    float cropAlpha;   
 
     // 是否启用迷雾效果
-    // ps：编辑器还不支持 bool 类型的样子，因此没在 CCEffect 中定义
-    bool enableFog;
+    // ps：编辑器还不支持 bool 类型的样子，因此用float来定义
+    float enableFog;
   }
 
-  // /**
-  //  * 添加光束颜色
-  //  */
-  // vec4 addLightColor(vec4 textureColor, vec2 lightCenterPoint, float radius, vec4 lightColor) {
-  //   // 计算当前 uv 到 光束 的距离
-  //   float dis = distance(v_uv0, lightCenterPoint);
+  /**
+   * 添加光束颜色
+   */
+  vec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {
+    // 计算当前 uv 到 光束 的距离
+    float angleInRadians = radians(lightAngle);
 
-  //   float a = 1.0 ;
+    // 角度0与非0不同处理
+    float dis = 0.0;
+    if (mod(lightAngle, 180.0) != 0.0) {
+      // 计算光束中心线下方与X轴交点的X坐标
+      // 1.0 - lightCenterPoint.y 是将转换为OpenGL坐标系，下文的 1.0 - y 类似
+      float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));
 
-  //   // 裁剪掉透明区域上的点光
-  //   if (cropAlpha) {
-  //     a *= step(0.01, textureColor.a);
-  //   }
+      // 以当前点画一条平行于X轴的线，假设此线和光束中心线相交的点为D点
+      // 那么
+      // D.y = uv0.y
+      // D.x = lightOffsetX + D.y / tan(angle)
+      float dx = lightOffsetX + (1.0 - v_uv0.y) / tan(angleInRadians);
 
-  //   // 裁剪掉扩散范围外的uv（迷雾效果）
-  //   if (!enableFog) {
-  //     a *= step(dis, radius);
-  //   }
+      // D 到当前 uv0 的距离就是
+      // dis = |uv0.x - D.x|
+      float offsetDis = abs(v_uv0.x - dx);
 
-  //   // 加入从中心往外渐变的效果
-  //   a *= 1.0 - (dis / radius);
+      // 当前点到光束中心线的的垂直距离就好算了
+      dis = sin(angleInRadians) * offsetDis;
+    } else {
+      dis = abs(v_uv0.y - lightCenterPoint.y);
+    }
+    
+    float a = 1.0 ;
+    // 裁剪掉透明区域上的点光
+    if (bool(cropAlpha)) {
+      a *= step(0.01, textureColor.a);
+    }
 
-  //   // 加点料，让中心点更加亮
-  //   // a = -1.0 * (a - 1.0) * (a - 1.0) + 1.0;
-  //   // a = -1.0 * (a - 1.0) * (a - 1.0) * (a - 1.0) * (a - 1.0) + 1.0;
+    // 裁剪掉光束范围外的uv（迷雾效果）
+    if (!bool(enableFog)) {
+      a *= step(dis, lightWidth * 0.5);
+    }
 
-  //   // 计算出扩散范围内，不同 uv 对应的实际扩散颜色值
-  //   vec4 diffusionColor = lightColor * a;
+    // 加入从中心往外渐变的效果
+    if (bool(enableGradient)) {
+      a *= 1.0 - dis / (lightWidth * 0.5);
+    }
 
-  //   // 混合颜色：在原始图像颜色上叠加扩散颜色
-  //   return textureColor * textureColor.a + diffusionColor;
-  // }
+    // 计算出扩散范围内，不同 uv 对应的实际扩散颜色值
+    vec4 finalLightColor = lightColor * a;
+
+    // 混合颜色：在原始图像颜色上叠加扩散颜色
+    return textureColor * textureColor.a + finalLightColor;
+  }
   #endif
 
   void main () {
@@ -186,7 +223,7 @@ CCProgram fs %{
     gl_FragColor = o;
     
     #if ENABLE_DIFFUSION
-    // gl_FragColor = addLightColor(gl_FragColor, lightCenterPoint, radius, lightColor);
+    gl_FragColor = addLightColor(gl_FragColor, lightColor, lightCenterPoint, lightAngle, lightWidth);
     #endif
   }
 }%
diff --git a/assets/effects/sprite-flash-light.effect.meta b/assets/effects/sprite-flash-light.effect.meta
index 358e143..cf9fa69 100644
--- a/assets/effects/sprite-flash-light.effect.meta
+++ b/assets/effects/sprite-flash-light.effect.meta
@@ -5,11 +5,11 @@
     {
       "glsl1": {
         "vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\n\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\n\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n\n  v_color = a_color;\n\n  gl_Position = pos;\n}\n",
-        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_DIFFUSION\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\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\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  gl_FragColor = o;\n  \n  #if ENABLE_DIFFUSION\n\n  #endif\n}\n"
+        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_DIFFUSION\nuniform vec4 lightColor;\nuniform vec2 lightCenterPoint;\nuniform float lightAngle;\nuniform float lightWidth;\nuniform float enableGradient;\nuniform float cropAlpha;\nuniform float enableFog;\n/**\n * 添加光束颜色\n */\nvec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {\n\n  float angleInRadians = radians(lightAngle);\n\n  float dis = 0.0;\n  if (mod(lightAngle, 180.0) != 0.0) {\n\n    float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));\n\n    float dx = lightOffsetX + (1.0 - v_uv0.y) / tan(angleInRadians);\n\n    float offsetDis = abs(v_uv0.x - dx);\n\n    dis = sin(angleInRadians) * offsetDis;\n  } else {\n    dis = abs(v_uv0.y - lightCenterPoint.y);\n  }\n  \n  float a = 1.0 ;\n\n  if (bool(cropAlpha)) {\n    a *= step(0.01, textureColor.a);\n  }\n\n  if (!bool(enableFog)) {\n    a *= step(dis, lightWidth * 0.5);\n  }\n\n  if (bool(enableGradient)) {\n    a *= 1.0 - dis / (lightWidth * 0.5);\n  }\n\n  vec4 finalLightColor = lightColor * a;\n\n  return textureColor * textureColor.a + finalLightColor;\n}\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\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\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  gl_FragColor = o;\n  \n  #if ENABLE_DIFFUSION\n  gl_FragColor = addLightColor(gl_FragColor, lightColor, lightCenterPoint, lightAngle, lightWidth);\n  #endif\n}\n"
       },
       "glsl3": {
         "vert": "\nprecision highp float;\nuniform CCGlobal {\n  vec4 cc_time;\n\n  vec4 cc_screenSize;\n\n  vec4 cc_screenScale;\n\n  vec4 cc_nativeSize;\n\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\n  vec4 cc_exposure;\n\n  vec4 cc_mainLitDir;\n\n  vec4 cc_mainLitColor;\n\n  vec4 cc_ambientSky;\n  vec4 cc_ambientGround;\n};\nuniform CCLocal {\n  mat4 cc_matWorld;\n  mat4 cc_matWorldIT;\n};\n\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\n\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n\n  v_color = a_color;\n\n  gl_Position = pos;\n}\n",
-        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_DIFFUSION\nuniform Light {\n\n  vec4 lightColor;\n\n  vec2 lightCenterPoint;\n\n  float lightAngle;\n\n  float lightWidth;\n\n  float enablGradient;\n\n  bool cropAlpha;\n\n  bool enableFog;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\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\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  gl_FragColor = o;\n  \n  #if ENABLE_DIFFUSION\n\n  #endif\n}\n"
+        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_DIFFUSION\nuniform Light {\n\n  vec4 lightColor;\n\n  vec2 lightCenterPoint;\n\n  float lightAngle;\n\n  float lightWidth;\n\n  float enableGradient;\n\n  float cropAlpha;\n\n  float enableFog;\n}\n\n/**\n * 添加光束颜色\n */\nvec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {\n\n  float angleInRadians = radians(lightAngle);\n\n  float dis = 0.0;\n  if (mod(lightAngle, 180.0) != 0.0) {\n\n    float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));\n\n    float dx = lightOffsetX + (1.0 - v_uv0.y) / tan(angleInRadians);\n\n    float offsetDis = abs(v_uv0.x - dx);\n\n    dis = sin(angleInRadians) * offsetDis;\n  } else {\n    dis = abs(v_uv0.y - lightCenterPoint.y);\n  }\n  \n  float a = 1.0 ;\n\n  if (bool(cropAlpha)) {\n    a *= step(0.01, textureColor.a);\n  }\n\n  if (!bool(enableFog)) {\n    a *= step(dis, lightWidth * 0.5);\n  }\n\n  if (bool(enableGradient)) {\n    a *= 1.0 - dis / (lightWidth * 0.5);\n  }\n\n  vec4 finalLightColor = lightColor * a;\n\n  return textureColor * textureColor.a + finalLightColor;\n}\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\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\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  gl_FragColor = o;\n  \n  #if ENABLE_DIFFUSION\n  gl_FragColor = addLightColor(gl_FragColor, lightColor, lightCenterPoint, lightAngle, lightWidth);\n  #endif\n}\n"
       }
     }
   ],
diff --git a/assets/materials/sprite-flash-light.mtl b/assets/materials/sprite-flash-light.mtl
index 9caa44b..c7ff1b0 100644
--- a/assets/materials/sprite-flash-light.mtl
+++ b/assets/materials/sprite-flash-light.mtl
@@ -10,5 +10,15 @@
     "USE_TEXTURE": true,
     "ENABLE_DIFFUSION": true
   },
-  "_props": {}
+  "_props": {
+    "lightColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 245,
+      "b": 0,
+      "a": 255
+    },
+    "lightAngle": 36,
+    "lightWidth": 0.2
+  }
 }
\ No newline at end of file
diff --git a/assets/scenes/FlashLightEffectScene.fire b/assets/scenes/FlashLightEffectScene.fire
index 2323051..55986a7 100755
--- a/assets/scenes/FlashLightEffectScene.fire
+++ b/assets/scenes/FlashLightEffectScene.fire
@@ -78,10 +78,10 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 137
+        "__id__": 166
       },
       {
-        "__id__": 138
+        "__id__": 167
       }
     ],
     "_prefab": null,
@@ -171,7 +171,7 @@
       "array": [
         0,
         0,
-        393.1484700242669,
+        418.2902700278839,
         0,
         0,
         0,
@@ -245,13 +245,13 @@
         "__id__": 9
       },
       {
-        "__id__": 121
+        "__id__": 150
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 136
+        "__id__": 165
       }
     ],
     "_prefab": null,
@@ -453,16 +453,22 @@
         "__id__": 95
       },
       {
-        "__id__": 107
+        "__id__": 112
+      },
+      {
+        "__id__": 124
+      },
+      {
+        "__id__": 136
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 119
+        "__id__": 148
       },
       {
-        "__id__": 120
+        "__id__": 149
       }
     ],
     "_prefab": null,
@@ -477,7 +483,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 576,
-      "height": 480
+      "height": 540
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1322,7 +1328,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -100,
+        -90,
         0,
         0,
         0,
@@ -2083,7 +2089,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -170,
+        -150,
         0,
         0,
         0,
@@ -2844,7 +2850,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -240,
+        -210,
         0,
         0,
         0,
@@ -3559,7 +3565,7 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "RadiuSlider",
+    "_name": "LightWidthSlider",
     "_objFlags": 0,
     "_parent": {
       "__id__": 9
@@ -3605,7 +3611,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -310,
+        -270,
         0,
         0,
         0,
@@ -3708,8 +3714,8 @@
       }
     ],
     "_useOriginalSize": false,
-    "_string": "扩散半径：",
-    "_N$string": "扩散半径：",
+    "_string": "光束宽度：",
+    "_N$string": "光束宽度：",
     "_fontSize": 40,
     "_lineHeight": 40,
     "_enableWrapText": true,
@@ -3987,7 +3993,7 @@
       "__type__": "TypedArray",
       "ctor": "Float64Array",
       "array": [
-        92.16000000000005,
+        46.08000000000001,
         0,
         0,
         0,
@@ -4166,7 +4172,7 @@
     "_N$handle": {
       "__id__": 88
     },
-    "_N$progress": 0.4,
+    "_N$progress": 0.2,
     "_id": "c2uNTLxCdF2oHJ+IS0EBLe"
   },
   {
@@ -4275,8 +4281,8 @@
       }
     ],
     "_useOriginalSize": false,
-    "_string": "0.10",
-    "_N$string": "0.10",
+    "_string": "0.20",
+    "_N$string": "0.20",
     "_fontSize": 40,
     "_lineHeight": 40,
     "_enableWrapText": true,
@@ -4320,7 +4326,7 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "CropAlphaToggle",
+    "_name": "LightAngleSlider",
     "_objFlags": 0,
     "_parent": {
       "__id__": 9
@@ -4331,12 +4337,15 @@
       },
       {
         "__id__": 99
+      },
+      {
+        "__id__": 108
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 106
+        "__id__": 111
       }
     ],
     "_prefab": null,
@@ -4363,7 +4372,1348 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -380,
+        -330,
+        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": "d4eYBJQBZL8Yl1IH+loEm+"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "SliderDescLabel",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 95
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 97
+      },
+      {
+        "__id__": 98
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 144,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 1,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        -144,
+        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": "ceRhALLDNHFqXlENE+38yj"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "SliderDescLabel<Label>",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 96
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_useOriginalSize": false,
+    "_string": "光束倾斜角度：",
+    "_N$string": "光束倾斜角度：",
+    "_fontSize": 40,
+    "_lineHeight": 40,
+    "_enableWrapText": true,
+    "_N$file": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_batchAsBitmap": false,
+    "_N$horizontalAlign": 2,
+    "_N$verticalAlign": 1,
+    "_N$fontFamily": "Arial",
+    "_N$overflow": 2,
+    "_N$cacheMode": 0,
+    "_id": "e0UGMN47pMmIl7L8LMZdmN"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 96
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 45,
+    "_left": 0,
+    "_right": 0.75,
+    "_top": 10,
+    "_bottom": 10,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": false,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 113.38,
+    "_originalHeight": 50.4,
+    "_id": "41Aty68tlOq5CYHl580jXr"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Slider",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 95
+    },
+    "_children": [
+      {
+        "__id__": 100
+      },
+      {
+        "__id__": 103
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 106
+      },
+      {
+        "__id__": 107
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 230.40000000000003,
+      "height": 60
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        -115.20000000000002,
+        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": "c8YfgGHeJL0L6lcv/opavI"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Background",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 99
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 101
+      },
+      {
+        "__id__": 102
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 230.40000000000003,
+      "height": 20
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        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": "58gS1X4ytE5qp+HmzKr9RA"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "Background<Sprite>",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 100
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "31d8962d-babb-4ec7-be19-8e9f54a4ea99"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": "b3g+9XISJAnYEt5SAsXyoE"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 100
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 45,
+    "_left": 0,
+    "_right": 0,
+    "_top": 20,
+    "_bottom": 20,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 300,
+    "_originalHeight": 20,
+    "_id": "91MHFQwi1MjI1CYvMxI3Ry"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Handle",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 99
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 104
+      },
+      {
+        "__id__": 105
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 32,
+      "height": 32
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        46.08000000000001,
+        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": "0ey1iBpIFCgJrcT+vzuF/B"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "Handle<Sprite>",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 103
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
+    },
+    "_type": 1,
+    "_sizeMode": 2,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": "a7Yw3LRW5E6azt2ssZAyJS"
+  },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 103
+    },
+    "_enabled": true,
+    "_normalMaterial": null,
+    "_grayMaterial": null,
+    "duration": 0.1,
+    "zoomScale": 1.1,
+    "clickEvents": [],
+    "_N$interactable": true,
+    "_N$enableAutoGrayEffect": true,
+    "_N$transition": 3,
+    "transition": 3,
+    "_N$normalColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$pressedColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "pressedColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$disabledColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$normalSprite": {
+      "__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
+    },
+    "_N$pressedSprite": {
+      "__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
+    },
+    "pressedSprite": {
+      "__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
+    },
+    "_N$hoverSprite": {
+      "__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
+    },
+    "hoverSprite": {
+      "__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
+    },
+    "_N$disabledSprite": {
+      "__uuid__": "29158224-f8dd-4661-a796-1ffab537140e"
+    },
+    "_N$target": {
+      "__id__": 103
+    },
+    "_id": "61gjfs4LtHk79ZitKMa5El"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 99
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 45,
+    "_left": 0.3,
+    "_right": 0.3,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": false,
+    "_isAbsRight": false,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 300,
+    "_originalHeight": 20,
+    "_id": "28OpowSrpGgoIJH7JINkWB"
+  },
+  {
+    "__type__": "cc.Slider",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 99
+    },
+    "_enabled": true,
+    "direction": 0,
+    "slideEvents": [],
+    "_N$handle": {
+      "__id__": 105
+    },
+    "_N$progress": 0.2,
+    "_id": "51yhnPbMVNTr5fGPxC0sJ3"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "ValueLabel",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 95
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 109
+      },
+      {
+        "__id__": 110
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 144,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 1,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        288,
+        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": "55/asMDM9GEpK6ujgXkfgs"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 108
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 45,
+    "_left": 0.75,
+    "_right": 0,
+    "_top": 10,
+    "_bottom": 10,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": false,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 113.38,
+    "_originalHeight": 50.4,
+    "_id": "36R/2exZhHmYbc4dLNflhm"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "ValueLabel<Label>",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 108
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_useOriginalSize": false,
+    "_string": "0.2 | 36",
+    "_N$string": "0.2 | 36",
+    "_fontSize": 40,
+    "_lineHeight": 40,
+    "_enableWrapText": true,
+    "_N$file": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_batchAsBitmap": false,
+    "_N$horizontalAlign": 0,
+    "_N$verticalAlign": 1,
+    "_N$fontFamily": "Arial",
+    "_N$overflow": 2,
+    "_N$cacheMode": 0,
+    "_id": "f9tXYUT4pMgo3yvjUmSJpU"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 95
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 40,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 461.38,
+    "_originalHeight": 0,
+    "_id": "c0qkHJgLZEKLg84okpWPBE"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "EnableGradientToggle",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 9
+    },
+    "_children": [
+      {
+        "__id__": 113
+      },
+      {
+        "__id__": 116
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 123
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 576,
+      "height": 60
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        -390,
+        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": "18TkNyPp5NS5ifWbxIRXN9"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "DescLabel",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 112
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 114
+      },
+      {
+        "__id__": 115
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 432,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 1,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        144,
+        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": "70cm0yMZhFApyx78BQsojJ"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "SliderDescLabel<Label>",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 113
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_useOriginalSize": false,
+    "_string": "光束渐变：",
+    "_N$string": "光束渐变：",
+    "_fontSize": 40,
+    "_lineHeight": 40,
+    "_enableWrapText": true,
+    "_N$file": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_batchAsBitmap": false,
+    "_N$horizontalAlign": 0,
+    "_N$verticalAlign": 1,
+    "_N$fontFamily": "Arial",
+    "_N$overflow": 2,
+    "_N$cacheMode": 0,
+    "_id": "aaIIIadZ1Gl6QfHEaYy6IO"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 113
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 45,
+    "_left": 0,
+    "_right": 0.25,
+    "_top": 10,
+    "_bottom": 10,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": false,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 113.38,
+    "_originalHeight": 50.4,
+    "_id": "c8uujuqyJNMpN2Y6YnbWE9"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Toggle",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 112
+    },
+    "_children": [
+      {
+        "__id__": 117
+      },
+      {
+        "__id__": 119
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 121
+      },
+      {
+        "__id__": 122
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 28,
+      "height": 28
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        158,
+        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": "e0KlWurG9BTrvtb+YCx6Pg"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Background",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 116
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 118
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 28,
+      "height": 28
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        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": "51Ez5wZkhEZbkyD5+rzdmE"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 117
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "6827ca32-0107-4552-bab2-dfb31799bb44"
+    },
+    "_type": 0,
+    "_sizeMode": 1,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": "9dJGo5GwVOG5EYOtboluTA"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "checkmark",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 116
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 120
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 28,
+      "height": 28
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        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": "b2OCqKsHhKUazVX+qaX3hQ"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 119
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "90004ad6-2f6d-40e1-93ef-b714375c6f06"
+    },
+    "_type": 0,
+    "_sizeMode": 2,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": false,
+    "_atlas": null,
+    "_id": "9dCIA5z8ZOYo2FpLXFr60w"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 116
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 8,
+    "_left": 0.75,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": false,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_id": "2eFDh03GRFPLPGneUQip8g"
+  },
+  {
+    "__type__": "cc.Toggle",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 116
+    },
+    "_enabled": true,
+    "_normalMaterial": {
+      "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+    },
+    "_grayMaterial": null,
+    "duration": 0.1,
+    "zoomScale": 1.2,
+    "clickEvents": [],
+    "_N$interactable": true,
+    "_N$enableAutoGrayEffect": false,
+    "_N$transition": 3,
+    "transition": 3,
+    "_N$normalColor": {
+      "__type__": "cc.Color",
+      "r": 214,
+      "g": 214,
+      "b": 214,
+      "a": 255
+    },
+    "_N$pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "_N$hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$disabledColor": {
+      "__type__": "cc.Color",
+      "r": 124,
+      "g": 124,
+      "b": 124,
+      "a": 255
+    },
+    "_N$normalSprite": null,
+    "_N$pressedSprite": null,
+    "pressedSprite": null,
+    "_N$hoverSprite": null,
+    "hoverSprite": null,
+    "_N$disabledSprite": null,
+    "_N$target": {
+      "__id__": 117
+    },
+    "_N$isChecked": true,
+    "toggleGroup": null,
+    "checkMark": {
+      "__id__": 120
+    },
+    "checkEvents": [],
+    "_id": "bfOnR+gP5DQLF8gtHOaVur"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 112
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 40,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 461.38,
+    "_originalHeight": 0,
+    "_id": "08RRn3Tc5AmYlJ7bmPUpRO"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "CropAlphaToggle",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 9
+    },
+    "_children": [
+      {
+        "__id__": 125
+      },
+      {
+        "__id__": 128
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 135
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 576,
+      "height": 60
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        -450,
         0,
         0,
         0,
@@ -4392,16 +5742,16 @@
     "_name": "DescLabel",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 95
+      "__id__": 124
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 97
+        "__id__": 126
       },
       {
-        "__id__": 98
+        "__id__": 127
       }
     ],
     "_prefab": null,
@@ -4457,7 +5807,7 @@
     "_name": "SliderDescLabel<Label>",
     "_objFlags": 0,
     "node": {
-      "__id__": 96
+      "__id__": 125
     },
     "_enabled": true,
     "_materials": [
@@ -4487,7 +5837,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 96
+      "__id__": 125
     },
     "_enabled": true,
     "alignMode": 1,
@@ -4514,23 +5864,23 @@
     "_name": "Toggle",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 95
+      "__id__": 124
     },
     "_children": [
       {
-        "__id__": 100
+        "__id__": 129
       },
       {
-        "__id__": 102
+        "__id__": 131
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 104
+        "__id__": 133
       },
       {
-        "__id__": 105
+        "__id__": 134
       }
     ],
     "_prefab": null,
@@ -4586,13 +5936,13 @@
     "_name": "Background",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 99
+      "__id__": 128
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 101
+        "__id__": 130
       }
     ],
     "_prefab": null,
@@ -4648,7 +5998,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 100
+      "__id__": 129
     },
     "_enabled": true,
     "_materials": [
@@ -4680,13 +6030,13 @@
     "_name": "checkmark",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 99
+      "__id__": 128
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 103
+        "__id__": 132
       }
     ],
     "_prefab": null,
@@ -4742,7 +6092,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 102
+      "__id__": 131
     },
     "_enabled": true,
     "_materials": [
@@ -4774,7 +6124,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 99
+      "__id__": 128
     },
     "_enabled": true,
     "alignMode": 1,
@@ -4801,7 +6151,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 99
+      "__id__": 128
     },
     "_enabled": true,
     "_normalMaterial": {
@@ -4864,12 +6214,12 @@
     "hoverSprite": null,
     "_N$disabledSprite": null,
     "_N$target": {
-      "__id__": 100
+      "__id__": 129
     },
     "_N$isChecked": true,
     "toggleGroup": null,
     "checkMark": {
-      "__id__": 103
+      "__id__": 132
     },
     "checkEvents": [],
     "_id": "7bKEFTsjNDwasqgjeKI1fQ"
@@ -4879,7 +6229,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 95
+      "__id__": 124
     },
     "_enabled": true,
     "alignMode": 1,
@@ -4910,16 +6260,16 @@
     },
     "_children": [
       {
-        "__id__": 108
+        "__id__": 137
       },
       {
-        "__id__": 111
+        "__id__": 140
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 118
+        "__id__": 147
       }
     ],
     "_prefab": null,
@@ -4946,7 +6296,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -450,
+        -510,
         0,
         0,
         0,
@@ -4975,16 +6325,16 @@
     "_name": "DescLabel",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 107
+      "__id__": 136
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 109
+        "__id__": 138
       },
       {
-        "__id__": 110
+        "__id__": 139
       }
     ],
     "_prefab": null,
@@ -5040,7 +6390,7 @@
     "_name": "SliderDescLabel<Label>",
     "_objFlags": 0,
     "node": {
-      "__id__": 108
+      "__id__": 137
     },
     "_enabled": true,
     "_materials": [
@@ -5070,7 +6420,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 108
+      "__id__": 137
     },
     "_enabled": true,
     "alignMode": 1,
@@ -5097,23 +6447,23 @@
     "_name": "Toggle",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 107
+      "__id__": 136
     },
     "_children": [
       {
-        "__id__": 112
+        "__id__": 141
       },
       {
-        "__id__": 114
+        "__id__": 143
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 116
+        "__id__": 145
       },
       {
-        "__id__": 117
+        "__id__": 146
       }
     ],
     "_prefab": null,
@@ -5169,13 +6519,13 @@
     "_name": "Background",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 111
+      "__id__": 140
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 113
+        "__id__": 142
       }
     ],
     "_prefab": null,
@@ -5231,7 +6581,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 112
+      "__id__": 141
     },
     "_enabled": true,
     "_materials": [
@@ -5263,13 +6613,13 @@
     "_name": "checkmark",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 111
+      "__id__": 140
     },
     "_children": [],
     "_active": false,
     "_components": [
       {
-        "__id__": 115
+        "__id__": 144
       }
     ],
     "_prefab": null,
@@ -5325,7 +6675,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 114
+      "__id__": 143
     },
     "_enabled": true,
     "_materials": [
@@ -5357,7 +6707,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 111
+      "__id__": 140
     },
     "_enabled": true,
     "alignMode": 1,
@@ -5384,7 +6734,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 111
+      "__id__": 140
     },
     "_enabled": true,
     "_normalMaterial": {
@@ -5447,12 +6797,12 @@
     "hoverSprite": null,
     "_N$disabledSprite": null,
     "_N$target": {
-      "__id__": 112
+      "__id__": 141
     },
     "_N$isChecked": false,
     "toggleGroup": null,
     "checkMark": {
-      "__id__": 115
+      "__id__": 144
     },
     "checkEvents": [],
     "_id": "11XOk3zDJLfZvBbfeWPiSh"
@@ -5462,7 +6812,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 107
+      "__id__": 136
     },
     "_enabled": true,
     "alignMode": 1,
@@ -5522,7 +6872,7 @@
     "_layoutSize": {
       "__type__": "cc.Size",
       "width": 576,
-      "height": 480
+      "height": 540
     },
     "_resize": 1,
     "_N$layoutType": 2,
@@ -5538,7 +6888,7 @@
     "_N$paddingTop": 0,
     "_N$paddingBottom": 0,
     "_N$spacingX": 0,
-    "_N$spacingY": 10,
+    "_N$spacingY": 0,
     "_N$verticalDirection": 1,
     "_N$horizontalDirection": 0,
     "_N$affectedByScale": false,
@@ -5553,31 +6903,31 @@
     },
     "_children": [
       {
-        "__id__": 122
+        "__id__": 151
       },
       {
-        "__id__": 124
+        "__id__": 153
       },
       {
-        "__id__": 126
+        "__id__": 155
       },
       {
-        "__id__": 128
+        "__id__": 157
       },
       {
-        "__id__": 130
+        "__id__": 159
       },
       {
-        "__id__": 132
+        "__id__": 161
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 134
+        "__id__": 163
       },
       {
-        "__id__": 135
+        "__id__": 164
       }
     ],
     "_prefab": null,
@@ -5633,13 +6983,13 @@
     "_name": "ball_0",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 121
+      "__id__": 150
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 123
+        "__id__": 152
       }
     ],
     "_prefab": null,
@@ -5695,7 +7045,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 122
+      "__id__": 151
     },
     "_enabled": true,
     "_materials": [
@@ -5727,13 +7077,13 @@
     "_name": "cocos_logo",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 121
+      "__id__": 150
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 125
+        "__id__": 154
       }
     ],
     "_prefab": null,
@@ -5789,7 +7139,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 124
+      "__id__": 153
     },
     "_enabled": true,
     "_materials": [
@@ -5821,13 +7171,13 @@
     "_name": "ball_1",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 121
+      "__id__": 150
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 127
+        "__id__": 156
       }
     ],
     "_prefab": null,
@@ -5883,7 +7233,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 126
+      "__id__": 155
     },
     "_enabled": true,
     "_materials": [
@@ -5915,13 +7265,13 @@
     "_name": "video_btn",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 121
+      "__id__": 150
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 129
+        "__id__": 158
       }
     ],
     "_prefab": null,
@@ -5977,7 +7327,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 128
+      "__id__": 157
     },
     "_enabled": true,
     "_materials": [
@@ -6009,13 +7359,13 @@
     "_name": "SystemFont",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 121
+      "__id__": 150
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 131
+        "__id__": 160
       }
     ],
     "_prefab": null,
@@ -6071,7 +7421,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 130
+      "__id__": 159
     },
     "_enabled": true,
     "_materials": [
@@ -6101,13 +7451,13 @@
     "_name": "BmFont",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 121
+      "__id__": 150
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 133
+        "__id__": 162
       }
     ],
     "_prefab": null,
@@ -6163,7 +7513,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 132
+      "__id__": 161
     },
     "_enabled": true,
     "_materials": [
@@ -6195,7 +7545,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 121
+      "__id__": 150
     },
     "_enabled": true,
     "alignMode": 1,
@@ -6222,7 +7572,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 121
+      "__id__": 150
     },
     "_enabled": true,
     "_layoutSize": {
diff --git a/assets/scripts/FlashLightCtrlComponent.ts b/assets/scripts/FlashLightCtrlComponent.ts
index 568b183..8fb6222 100644
--- a/assets/scripts/FlashLightCtrlComponent.ts
+++ b/assets/scripts/FlashLightCtrlComponent.ts
@@ -26,7 +26,7 @@ export default class FlashLightCtrlComponent extends cc.Component {
 
         // 将触摸点转换为OPENGL坐标系并归一化
         // OpenGl 坐标系原点在左上角
-        this._flashLightUBO.certerPoint = cc.v2(
+        this._flashLightUBO.lightCenterPoint = cc.v2(
             this.node.anchorX + touchPointInNodeSpace.x / this.node.width,
             1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height)
         );
@@ -35,8 +35,10 @@ export default class FlashLightCtrlComponent extends cc.Component {
     }
 
     private _onPropertyChange(localDiffusionUniform: FlashLightUBO) {
-        this._flashLightUBO.centerColor = localDiffusionUniform.centerColor;
-        this._flashLightUBO.radius = localDiffusionUniform.radius;
+        this._flashLightUBO.lightColor = localDiffusionUniform.lightColor;
+        this._flashLightUBO.lightAngle = localDiffusionUniform.lightAngle;
+        this._flashLightUBO.lightWidth = localDiffusionUniform.lightWidth;
+        this._flashLightUBO.enableGradient = localDiffusionUniform.enableGradient;
         this._flashLightUBO.cropAlpha = localDiffusionUniform.cropAlpha;
         this._flashLightUBO.enableFog = localDiffusionUniform.enableFog;
         this._updateMaterial();
@@ -45,9 +47,11 @@ export default class FlashLightCtrlComponent extends cc.Component {
     private _updateMaterial() {
         this.getComponents(cc.RenderComponent).forEach(renderComponent => {
             let material: cc.Material = renderComponent.getMaterial(0);
-            material.setProperty("centerColor", this._flashLightUBO.centerColor);
-            material.setProperty("centerPoint", this._flashLightUBO.certerPoint);
-            material.setProperty("radius", this._flashLightUBO.radius);
+            material.setProperty("lightColor", this._flashLightUBO.lightColor);
+            material.setProperty("lightCenterPoint", this._flashLightUBO.lightCenterPoint);
+            material.setProperty("lightAngle", this._flashLightUBO.lightAngle);
+            material.setProperty("lightWidth", this._flashLightUBO.lightWidth);
+            material.setProperty("enableGradient", this._flashLightUBO.enableGradient);
             material.setProperty("cropAlpha", this._flashLightUBO.cropAlpha);
             material.setProperty("enableFog", this._flashLightUBO.enableFog);
             renderComponent.setMaterial(0, material);
@@ -59,17 +63,27 @@ export class FlashLightUBO {
     /**
      * 中心点颜色
      */
-    centerColor: cc.Color = cc.Color.YELLOW;
+    lightColor: cc.Color = cc.Color.YELLOW;
 
     /**
      * 中心点坐标 ([0.0, 1.0], [0.0, 1.0])
      */
-    certerPoint: cc.Vec2 = cc.v2(0.5, 0.5);
+    lightCenterPoint: cc.Vec2 = cc.v2(0.5, 0.5);
 
     /**
-     * 扩散半径 [0.0, 1.0]
+     * 光束角度 [0.0, 180.0]
      */
-    radius: number = 0.5;
+    lightAngle: number = 45;
+
+    /**
+     * 光束宽度 [0.0, 1.0]
+     */
+    lightWidth: number = 0.5;
+
+    /**
+     * 是否启用光束渐变
+     */
+    enableGradient: boolean = true;
 
     /**
      * 是否裁剪掉透明区域上的点光
diff --git a/assets/scripts/FlashLightEffectScene.ts b/assets/scripts/FlashLightEffectScene.ts
index 71fe40a..0f9b5c4 100644
--- a/assets/scripts/FlashLightEffectScene.ts
+++ b/assets/scripts/FlashLightEffectScene.ts
@@ -12,9 +12,12 @@ export default class FlashLightEffectScene extends cc.Component {
     private _blueSliderLabel: cc.Label = null;
     private _alphaSlider: cc.Slider = null;
     private _alphaSliderLabel: cc.Label = null;
-    private _radiuSlider: cc.Slider = null;
-    private _radiuSliderLabel: cc.Label = null;
+    private _lightWidthSlider: cc.Slider = null;
+    private _lightWidthSliderLabel: cc.Label = null;
+    private _lightAngleSlider: cc.Slider = null;
+    private _lightAngleSliderLabel: cc.Label = null;
 
+    private _enableGradientToggle: cc.Toggle = null;
     private _cropAlphaToggle: cc.Toggle = null;
     private _enableFogToggle: cc.Toggle = null;
 
@@ -31,9 +34,12 @@ export default class FlashLightEffectScene extends cc.Component {
         this._blueSliderLabel = cc.find("Canvas/Content/Controller/ColorBlueSlider/ValueLabel").getComponent(cc.Label);
         this._alphaSlider = cc.find("Canvas/Content/Controller/ColorAlphaSlider/Slider").getComponent(cc.Slider);
         this._alphaSliderLabel = cc.find("Canvas/Content/Controller/ColorAlphaSlider/ValueLabel").getComponent(cc.Label);
-        this._radiuSlider = cc.find("Canvas/Content/Controller/RadiuSlider/Slider").getComponent(cc.Slider);
-        this._radiuSliderLabel = cc.find("Canvas/Content/Controller/RadiuSlider/ValueLabel").getComponent(cc.Label);
+        this._lightWidthSlider = cc.find("Canvas/Content/Controller/LightWidthSlider/Slider").getComponent(cc.Slider);
+        this._lightWidthSliderLabel = cc.find("Canvas/Content/Controller/LightWidthSlider/ValueLabel").getComponent(cc.Label);
+        this._lightAngleSlider = cc.find("Canvas/Content/Controller/LightAngleSlider/Slider").getComponent(cc.Slider);
+        this._lightAngleSliderLabel = cc.find("Canvas/Content/Controller/LightAngleSlider/ValueLabel").getComponent(cc.Label);
 
+        this._enableGradientToggle = cc.find("Canvas/Content/Controller/EnableGradientToggle/Toggle").getComponent(cc.Toggle);
         this._cropAlphaToggle = cc.find("Canvas/Content/Controller/CropAlphaToggle/Toggle").getComponent(cc.Toggle);
         this._enableFogToggle = cc.find("Canvas/Content/Controller/EnableFogToggle/Toggle").getComponent(cc.Toggle);
 
@@ -49,7 +55,10 @@ export default class FlashLightEffectScene extends cc.Component {
         this._greenSlider.node.on("slide", this._onPropertyChanged, this);
         this._blueSlider.node.on("slide", this._onPropertyChanged, this);
         this._alphaSlider.node.on("slide", this._onPropertyChanged, this);
-        this._radiuSlider.node.on("slide", this._onPropertyChanged, this);
+        this._lightWidthSlider.node.on("slide", this._onPropertyChanged, this);
+        this._lightAngleSlider.node.on("slide", this._onPropertyChanged, this);
+
+        this._enableGradientToggle.node.on("toggle", this._onPropertyChanged, this);
         this._cropAlphaToggle.node.on("toggle", this._onPropertyChanged, this);
         this._enableFogToggle.node.on("toggle", this._onPropertyChanged, this);
     }
@@ -59,7 +68,10 @@ export default class FlashLightEffectScene extends cc.Component {
         this._greenSlider.node.off("slide", this._onPropertyChanged, this);
         this._blueSlider.node.off("slide", this._onPropertyChanged, this);
         this._alphaSlider.node.off("slide", this._onPropertyChanged, this);
-        this._radiuSlider.node.off("slide", this._onPropertyChanged, this);
+        this._lightWidthSlider.node.off("slide", this._onPropertyChanged, this);
+        this._lightAngleSlider.node.off("slide", this._onPropertyChanged, this);
+
+        this._enableGradientToggle.node.off("toggle", this._onPropertyChanged, this);
         this._cropAlphaToggle.node.off("toggle", this._onPropertyChanged, this);
         this._enableFogToggle.node.off("toggle", this._onPropertyChanged, this);
     }
@@ -74,18 +86,23 @@ export default class FlashLightEffectScene extends cc.Component {
         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)}`;
-        this._radiuSliderLabel.string = `${this._radiuSlider.progress.toFixed(2)}`;
+        this._lightWidthSliderLabel.string = `${this._lightWidthSlider.progress.toFixed(2)}`;
+
+        let angle = 180 * this._lightAngleSlider.progress;
+        this._lightAngleSliderLabel.string = `${this._lightAngleSlider.progress.toFixed(2)} | ${angle.toFixed(2)}`;
 
         // 通知子节点更新材质
         this._examplesParentNode.children.forEach(childNode => {
             childNode.emit("on_property_change", <FlashLightUBO>{
-                centerColor: cc.color(
+                lightColor: cc.color(
                     Math.round(255 * this._redSlider.progress),
                     Math.round(255 * this._greenSlider.progress),
                     Math.round(255 * this._blueSlider.progress),
                     Math.round(255 * this._alphaSlider.progress)
                 ),
-                radius: this._radiuSlider.progress,
+                lightAngle: angle,
+                lightWidth: this._lightWidthSlider.progress,
+                enableGradient: this._enableGradientToggle.isChecked,
                 cropAlpha: this._cropAlphaToggle.isChecked,
                 enableFog: this._enableFogToggle.isChecked
             });