Merge branch 'release/0.1.0' into dev

CHANGELOG.md

@@ -0,0 +1,9 @@
+# ChangeLog
+
+## 0.1.0 (2020-01-01)
+
+- 加入马赛克特效
+- 加入老照片特效
+- 加入内发光特效
+- 加入外发光特效（未完善）
+- 加入描边特效（未完善）

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Zhitao Cai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,80 @@
-# hello-world
+# Cocos Creator Shader Effect Demo
-Hello world new project template.
+
+[![](https://img.shields.io/badge/Release-0.1.0-green.svg)](CHANGELOG.md)
+[![](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
+[![](https://img.shields.io/badge/Support-Cocos%20Creator%20v2.2.1-orange.svg)](http://www.cocos.com/creator)
+
+## 项目说明
+
+1. 此项目为我在学习过程中的一些分享和实现，因此项目名字以 **`Demo`** 为后缀。
+2. 项目重点在于 **「渔」**，不在于 **「鱼」** 。
+3. 如果你有意将此Demo中的效果加入到你的项目中，**请认真评估是否适合你的项目使用！**
+
+## 系列文章
+
+* [Cocos Creator Shader Effect 系列 - 0 - 前言](https://www.jianshu.com/p/20b906d7269c)
+* [Cocos Creator Shader Effect 系列 - 1 - 材质，Effect，Inspector，纹理之间的关系](https://www.jianshu.com/p/ca28666d25d2)
+* 编写中...
+
+
+## 特效预览
+
+那么现在，我们先来轻松地看下有哪些特效效果吧~
+
+### 内发光（[实现原理及使用说明]() 编写中... ，催更麻烦移步一下到文末 **激活作者** 😜）
+
+![](static/effects/2d-sprite-glow-inner.gif)
+
+### 马赛克（[实现原理及使用说明]() 编写中... ，催更麻烦移步一下到文末 **激活作者** 😜）
+
+![](static/effects/2d-sprite-mosaic.gif)
+
+### 老照片（[实现原理及使用说明]() 编写中... ，催更麻烦移步一下到文末 **激活作者** 😜）
+
+![](static/effects/2d-sprite-old-photo.gif)
+
+### 外发光（完善中...）
+
+### 外描边（完善中...）
+
+## TODO
+
+* [ ] 图像裁剪
+* [ ] 图像模糊
+* [ ] 闪光
+* [ ] 波浪
+* [ ] 雨滴
+* [ ] ...
+
+## 支持一下作者吧
+
+如果此项目对你学习和理解Shader有帮助，不妨支持一下我吧~
+
+ps：支持扫码催更哦🤣🤣🤣👇👇👇👇
+
+![](static/PAY.png)
+
+
+## LICENSE
+
+    MIT License
+
+    Copyright (c) 2020 Zhitao Cai
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.

assets/effects/outline.effect.meta

@@ -1,17 +0,0 @@
-{
-  "ver": "1.0.23",
-  "uuid": "559dcd1e-233b-4e1f-b1da-733c9232f06f",
-  "compiledShaders": [
-    {
-      "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 SHOW_OUT_LINE\n\nuniform vec4 outlineColor;\nuniform float outlineSize;\n\nfloat getBgAlpha() {\n  vec4 color_up = texture2D(texture, v_uv0 + vec2(0, outlineSize)); \n  vec4 color_down = texture2D(texture, v_uv0 - vec2(0, outlineSize)); \n  vec4 color_left = texture2D(texture, v_uv0 - vec2(outlineSize, 0)); \n  vec4 color_right = texture2D(texture, v_uv0 + vec2(outlineSize, 0)); \n  vec4 color_up_left = texture2D(texture, v_uv0 + vec2(outlineSize, -outlineSize)); \n  vec4 color_up_right = texture2D(texture, v_uv0 + vec2(outlineSize, outlineSize)); \n  vec4 color_down_left = texture2D(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); \n  vec4 color_down_right = texture2D(texture, v_uv0 + vec2(-outlineSize, outlineSize)); \n  float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n  return clamp(total, 0.0, 1.0);\n}\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 SHOW_OUT_LINE\n\n    vec4 color_dest = outlineColor * getBgAlpha();\n\n    vec4 color_src = o;\n\n    gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\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 SHOW_OUT_LINE\n\nuniform Outline {\n\n  vec4 outlineColor;\n\n  float outlineSize;\n\n};\n\nfloat getBgAlpha() {\n  vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); \n  vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); \n  vec4 color_left = texture(texture, v_uv0 - vec2(outlineSize, 0)); \n  vec4 color_right = texture(texture, v_uv0 + vec2(outlineSize, 0)); \n  vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize)); \n  vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize)); \n  vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); \n  vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize)); \n  float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n  return clamp(total, 0.0, 1.0);\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 SHOW_OUT_LINE\n\n    vec4 color_dest = outlineColor * getBgAlpha();\n\n    vec4 color_src = o;\n\n    gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\n  #endif\n}\n"
-      }
-    }
-  ],
-  "subMetas": {}
-}

assets/effects/sprite-glow-inner.effect

@@ -104,6 +104,28 @@ CCProgram fs %{
     // 特别地，必须是 vec4 先于 float 声明
   };
 
+  /**
+   * 获取纹理uv颜色 
+   *
+   * 主要实现：超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0)
+   * 
+   * 在 Cocos Creator 2.2.1 的编辑器中，超出边界的uv并不是返回 vec4(0.0, 0.0, 0.0, 0.0)，实际返回为
+   * 
+   * * 超出左边界的uv，返回 v_uv0.x = 0 的颜色
+   * * 超出右边界的uv，返回 v_uv0.x = 1 的颜色
+   * * 超出上边界的uv，返回 v_uv0.y = 1 的颜色
+   * * 超出下边界的uv，返回 v_uv0.y = 0 的颜色
+   *
+   * 和实际在浏览器上显示（超出边界即为透明）的有区别，为了统一，这里适配一下，这样子，在编辑器上预览的效果就能和实际浏览器的保持一致
+   */
+  vec4 getTextureColor(sampler2D texture, vec2 v_uv0) {
+    if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {
+      return vec4(0.0, 0.0, 0.0, 0.0);
+    }
+    return texture(texture, v_uv0);
+  }
+
+
   /**
    * 获取指定角度方向，距离为xxx的像素的透明度
    *
@@ -115,7 +137,7 @@ CCProgram fs %{
   float getColorAlpha(float angle, float dist) {
     // 角度转弧度，公式为：弧度 = 角度 * (pi / 180)
     float radian = angle * 0.01745329252; // 这个浮点数是 pi / 180
-    vec4 color = texture(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); 
+    vec4 color = getTextureColor(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); 
     return color.a;
   }
 
@@ -159,7 +181,7 @@ CCProgram fs %{
     // 那么就意味着这个点是图像外的透明点或者图像内透明点（如空洞）之类的
     // 内发光的话，这些透明点我们不用处理，让它保持原样，否则就是会有内描边或者一点扩边的效果
     // 同时也是提前直接结束，减少计算量
-    vec4 srcColor = texture(texture, v_uv0);
+    vec4 srcColor = getTextureColor(texture, v_uv0);
     if (srcColor.a <= glowThreshold) {
       return srcColor.a;
     } 
@@ -186,7 +208,7 @@ CCProgram fs %{
     vec4 o = vec4(1, 1, 1, 1);
 
     #if USE_TEXTURE
-    o *= texture(texture, v_uv0);
+    o *= getTextureColor(texture, v_uv0);
       #if CC_USE_ALPHA_ATLAS_TEXTURE
       o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
       #endif

assets/effects/sprite-glow-inner.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 SHOW_INNER_GLOW\n\nuniform vec4 glowColor;\nuniform float glowColorSize;\nuniform float glowThreshold;\n\n/**\n * 获取指定角度方向，距离为xxx的像素的透明度\n *\n * @param angle 角度 [0.0, 360.0]\n * @param dist 距离 [0.0, 1.0]\n *\n * @return alpha [0.0, 1.0]\n */\nfloat getColorAlpha(float angle, float dist) {\n\n  float radian = angle * 0.01745329252;\n\n  vec4 color = texture2D(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); \n  return color.a;\n}\n\n/**\n * 获取指定距离的周边像素的透明度平均值\n *\n * @param dist 距离 [0.0, 1.0]\n *\n * @return average alpha [0.0, 1.0]\n */\nfloat getAverageAlpha(float dist) {\n\n  float totalAlpha = 0.0;\n\n  totalAlpha += getColorAlpha(0.0, dist);\n  totalAlpha += getColorAlpha(30.0, dist);\n  totalAlpha += getColorAlpha(60.0, dist);\n  totalAlpha += getColorAlpha(90.0, dist);\n  totalAlpha += getColorAlpha(120.0, dist);\n  totalAlpha += getColorAlpha(150.0, dist);\n  totalAlpha += getColorAlpha(180.0, dist);\n  totalAlpha += getColorAlpha(210.0, dist);\n  totalAlpha += getColorAlpha(240.0, dist);\n  totalAlpha += getColorAlpha(270.0, dist);\n  totalAlpha += getColorAlpha(300.0, dist);\n  totalAlpha += getColorAlpha(330.0, dist);\n  return totalAlpha * 0.0833;\n\n}\n\n/**\n * 获取发光的透明度\n */\nfloat getGlowAlpha() {\n\n  if (glowColorSize == 0.0) {\n    return 0.0;\n  }\n\n  vec4 srcColor = texture2D(texture, v_uv0);\n  if (srcColor.a <= glowThreshold) {\n    return srcColor.a;\n  }\n\n  float totalAlpha = 0.0;\n  totalAlpha += getAverageAlpha(glowColorSize * 0.1);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.2);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.3);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.4);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.5);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.6);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.7);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.8);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.9);\n  totalAlpha += getAverageAlpha(glowColorSize * 1.0);\n  return totalAlpha * 0.1;\n}\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 SHOW_INNER_GLOW\n\n    vec4 color_dest = o;\n\n    float alpha = getGlowAlpha();\n\n    if (alpha > glowThreshold) {\n\n      alpha = 1.0 - alpha;\n\n      alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n    }\n\n    vec4 color_src = glowColor * alpha;\n\n    gl_FragColor = color_src * color_src.a + color_dest;\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 SHOW_INNER_GLOW\n\nuniform vec4 glowColor;\nuniform float glowColorSize;\nuniform float glowThreshold;\n\n/**\n * 获取纹理uv颜色 \n *\n * 主要实现：超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0)\n * \n * 在 Cocos Creator 2.2.1 的编辑器中，超出边界的uv并不是返回 vec4(0.0, 0.0, 0.0, 0.0)，实际返回为\n * \n * * 超出左边界的uv，返回 v_uv0.x = 0 的颜色\n * * 超出右边界的uv，返回 v_uv0.x = 1 的颜色\n * * 超出上边界的uv，返回 v_uv0.y = 1 的颜色\n * * 超出下边界的uv，返回 v_uv0.y = 0 的颜色\n *\n * 和实际在浏览器上显示（超出边界即为透明）的有区别，为了统一，这里适配一下，这样子，在编辑器上预览的效果就能和实际浏览器的保持一致\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 texture2D(texture, v_uv0);\n}\n\n/**\n * 获取指定角度方向，距离为xxx的像素的透明度\n *\n * @param angle 角度 [0.0, 360.0]\n * @param dist 距离 [0.0, 1.0]\n *\n * @return alpha [0.0, 1.0]\n */\nfloat getColorAlpha(float angle, float dist) {\n\n  float radian = angle * 0.01745329252;\n\n  vec4 color = getTextureColor(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); \n  return color.a;\n}\n\n/**\n * 获取指定距离的周边像素的透明度平均值\n *\n * @param dist 距离 [0.0, 1.0]\n *\n * @return average alpha [0.0, 1.0]\n */\nfloat getAverageAlpha(float dist) {\n\n  float totalAlpha = 0.0;\n\n  totalAlpha += getColorAlpha(0.0, dist);\n  totalAlpha += getColorAlpha(30.0, dist);\n  totalAlpha += getColorAlpha(60.0, dist);\n  totalAlpha += getColorAlpha(90.0, dist);\n  totalAlpha += getColorAlpha(120.0, dist);\n  totalAlpha += getColorAlpha(150.0, dist);\n  totalAlpha += getColorAlpha(180.0, dist);\n  totalAlpha += getColorAlpha(210.0, dist);\n  totalAlpha += getColorAlpha(240.0, dist);\n  totalAlpha += getColorAlpha(270.0, dist);\n  totalAlpha += getColorAlpha(300.0, dist);\n  totalAlpha += getColorAlpha(330.0, dist);\n  return totalAlpha * 0.0833;\n\n}\n\n/**\n * 获取发光的透明度\n */\nfloat getGlowAlpha() {\n\n  if (glowColorSize == 0.0) {\n    return 0.0;\n  }\n\n  vec4 srcColor = getTextureColor(texture, v_uv0);\n  if (srcColor.a <= glowThreshold) {\n    return srcColor.a;\n  }\n\n  float totalAlpha = 0.0;\n  totalAlpha += getAverageAlpha(glowColorSize * 0.1);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.2);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.3);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.4);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.5);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.6);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.7);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.8);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.9);\n  totalAlpha += getAverageAlpha(glowColorSize * 1.0);\n  return totalAlpha * 0.1;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= getTextureColor(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 SHOW_INNER_GLOW\n\n    vec4 color_dest = o;\n\n    float alpha = getGlowAlpha();\n\n    if (alpha > glowThreshold) {\n\n      alpha = 1.0 - alpha;\n\n      alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n    }\n\n    vec4 color_src = glowColor * alpha;\n\n    gl_FragColor = color_src * color_src.a + color_dest;\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 SHOW_INNER_GLOW\n\nuniform glow {\n\n  vec4 glowColor;\n\n  float glowColorSize;\n\n  float glowThreshold;\n\n};\n\n/**\n * 获取指定角度方向，距离为xxx的像素的透明度\n *\n * @param angle 角度 [0.0, 360.0]\n * @param dist 距离 [0.0, 1.0]\n *\n * @return alpha [0.0, 1.0]\n */\nfloat getColorAlpha(float angle, float dist) {\n\n  float radian = angle * 0.01745329252;\n\n  vec4 color = texture(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); \n  return color.a;\n}\n\n/**\n * 获取指定距离的周边像素的透明度平均值\n *\n * @param dist 距离 [0.0, 1.0]\n *\n * @return average alpha [0.0, 1.0]\n */\nfloat getAverageAlpha(float dist) {\n\n  float totalAlpha = 0.0;\n\n  totalAlpha += getColorAlpha(0.0, dist);\n  totalAlpha += getColorAlpha(30.0, dist);\n  totalAlpha += getColorAlpha(60.0, dist);\n  totalAlpha += getColorAlpha(90.0, dist);\n  totalAlpha += getColorAlpha(120.0, dist);\n  totalAlpha += getColorAlpha(150.0, dist);\n  totalAlpha += getColorAlpha(180.0, dist);\n  totalAlpha += getColorAlpha(210.0, dist);\n  totalAlpha += getColorAlpha(240.0, dist);\n  totalAlpha += getColorAlpha(270.0, dist);\n  totalAlpha += getColorAlpha(300.0, dist);\n  totalAlpha += getColorAlpha(330.0, dist);\n  return totalAlpha * 0.0833;\n\n}\n\n/**\n * 获取发光的透明度\n */\nfloat getGlowAlpha() {\n\n  if (glowColorSize == 0.0) {\n    return 0.0;\n  }\n\n  vec4 srcColor = texture(texture, v_uv0);\n  if (srcColor.a <= glowThreshold) {\n    return srcColor.a;\n  }\n\n  float totalAlpha = 0.0;\n  totalAlpha += getAverageAlpha(glowColorSize * 0.1);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.2);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.3);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.4);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.5);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.6);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.7);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.8);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.9);\n  totalAlpha += getAverageAlpha(glowColorSize * 1.0);\n  return totalAlpha * 0.1;\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 SHOW_INNER_GLOW\n\n    vec4 color_dest = o;\n\n    float alpha = getGlowAlpha();\n\n    if (alpha > glowThreshold) {\n\n      alpha = 1.0 - alpha;\n\n      alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n    }\n\n    vec4 color_src = glowColor * alpha;\n\n    gl_FragColor = color_src * color_src.a + color_dest;\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 SHOW_INNER_GLOW\n\nuniform glow {\n\n  vec4 glowColor;\n\n  float glowColorSize;\n\n  float glowThreshold;\n\n};\n\n/**\n * 获取纹理uv颜色 \n *\n * 主要实现：超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0)\n * \n * 在 Cocos Creator 2.2.1 的编辑器中，超出边界的uv并不是返回 vec4(0.0, 0.0, 0.0, 0.0)，实际返回为\n * \n * * 超出左边界的uv，返回 v_uv0.x = 0 的颜色\n * * 超出右边界的uv，返回 v_uv0.x = 1 的颜色\n * * 超出上边界的uv，返回 v_uv0.y = 1 的颜色\n * * 超出下边界的uv，返回 v_uv0.y = 0 的颜色\n *\n * 和实际在浏览器上显示（超出边界即为透明）的有区别，为了统一，这里适配一下，这样子，在编辑器上预览的效果就能和实际浏览器的保持一致\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}\n\n/**\n * 获取指定角度方向，距离为xxx的像素的透明度\n *\n * @param angle 角度 [0.0, 360.0]\n * @param dist 距离 [0.0, 1.0]\n *\n * @return alpha [0.0, 1.0]\n */\nfloat getColorAlpha(float angle, float dist) {\n\n  float radian = angle * 0.01745329252;\n\n  vec4 color = getTextureColor(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); \n  return color.a;\n}\n\n/**\n * 获取指定距离的周边像素的透明度平均值\n *\n * @param dist 距离 [0.0, 1.0]\n *\n * @return average alpha [0.0, 1.0]\n */\nfloat getAverageAlpha(float dist) {\n\n  float totalAlpha = 0.0;\n\n  totalAlpha += getColorAlpha(0.0, dist);\n  totalAlpha += getColorAlpha(30.0, dist);\n  totalAlpha += getColorAlpha(60.0, dist);\n  totalAlpha += getColorAlpha(90.0, dist);\n  totalAlpha += getColorAlpha(120.0, dist);\n  totalAlpha += getColorAlpha(150.0, dist);\n  totalAlpha += getColorAlpha(180.0, dist);\n  totalAlpha += getColorAlpha(210.0, dist);\n  totalAlpha += getColorAlpha(240.0, dist);\n  totalAlpha += getColorAlpha(270.0, dist);\n  totalAlpha += getColorAlpha(300.0, dist);\n  totalAlpha += getColorAlpha(330.0, dist);\n  return totalAlpha * 0.0833;\n\n}\n\n/**\n * 获取发光的透明度\n */\nfloat getGlowAlpha() {\n\n  if (glowColorSize == 0.0) {\n    return 0.0;\n  }\n\n  vec4 srcColor = getTextureColor(texture, v_uv0);\n  if (srcColor.a <= glowThreshold) {\n    return srcColor.a;\n  }\n\n  float totalAlpha = 0.0;\n  totalAlpha += getAverageAlpha(glowColorSize * 0.1);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.2);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.3);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.4);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.5);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.6);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.7);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.8);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.9);\n  totalAlpha += getAverageAlpha(glowColorSize * 1.0);\n  return totalAlpha * 0.1;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= getTextureColor(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 SHOW_INNER_GLOW\n\n    vec4 color_dest = o;\n\n    float alpha = getGlowAlpha();\n\n    if (alpha > glowThreshold) {\n\n      alpha = 1.0 - alpha;\n\n      alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n    }\n\n    vec4 color_src = glowColor * alpha;\n\n    gl_FragColor = color_src * color_src.a + color_dest;\n  #endif\n}\n"
       }
     }
   ],

assets/effects/sprite-glow-outter.effect

@@ -119,9 +119,18 @@ CCProgram fs %{
   /**
    * 获取纹理uv颜色 
    *
-   * 超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0)
+   * 主要实现：超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0)
+   * 
+   * 在 Cocos Creator 2.2.1 的编辑器中，超出边界的uv并不是返回 vec4(0.0, 0.0, 0.0, 0.0)，实际返回为
+   * 
+   * * 超出左边界的uv，返回 v_uv0.x = 0 的颜色
+   * * 超出右边界的uv，返回 v_uv0.x = 1 的颜色
+   * * 超出上边界的uv，返回 v_uv0.y = 1 的颜色
+   * * 超出下边界的uv，返回 v_uv0.y = 0 的颜色
+   *
+   * 和实际在浏览器上显示（超出边界即为透明）的有区别，为了统一，这里适配一下，这样子，在编辑器上预览的效果就能和实际浏览器的保持一致
    */
-  vec4 getTexture(sampler2D texture, vec2 v_uv0) {
+  vec4 getTextureColor(sampler2D texture, vec2 v_uv0) {
     if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {
       return vec4(0.0, 0.0, 0.0, 0.0);
     }
@@ -152,7 +161,7 @@ CCProgram fs %{
   float getColorAlpha(float angle, float dist) {
     // 角度转弧度，公式为：弧度 = 角度 * (pi / 180)
     float radian = angle * 0.01745329252; // 这个浮点数是 pi / 180
-    vec4 color = getTexture(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); 
+    vec4 color = getTextureColor(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); 
     return color.a;
   }
 
@@ -230,7 +239,7 @@ CCProgram fs %{
     vec4 o = vec4(1, 1, 1, 1);
 
     #if USE_TEXTURE
-    o *= getTexture(texture, v_uv0);
+    o *= getTextureColor(texture, v_uv0);
       #if CC_USE_ALPHA_ATLAS_TEXTURE
       o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
       #endif

assets/effects/sprite-glow-outter.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\n\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\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/**\n * 获取纹理uv颜色 \n *\n * 超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0)\n */\nvec4 getTexture(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}\n\n#if SHOW_OUTTER_GLOW\n\nuniform vec4 glowColor;\nuniform float glowColorSize;\nuniform float glowThreshold;\n\n/**\n * 获取指定角度方向，距离为xxx的像素的透明度\n *\n * @param angle 角度 [0.0, 360.0]\n * @param dist 距离 [0.0, 1.0]\n *\n * @return alpha [0.0, 1.0]\n */\nfloat getColorAlpha(float angle, float dist) {\n\n  float radian = angle * 0.01745329252;\n\n  vec4 color = getTexture(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); \n  return color.a;\n}\n\n/**\n * 获取指定距离的周边像素的透明度平均值\n *\n * @param dist 距离 [0.0, 1.0]\n *\n * @return average alpha [0.0, 1.0]\n */\nfloat getAverageAlpha(float dist) {\n  float totalAlpha = 0.0;\n\n  totalAlpha += getColorAlpha(0.0, dist);\n  totalAlpha += getColorAlpha(30.0, dist);\n  totalAlpha += getColorAlpha(60.0, dist);\n  totalAlpha += getColorAlpha(90.0, dist);\n  totalAlpha += getColorAlpha(120.0, dist);\n  totalAlpha += getColorAlpha(150.0, dist);\n  totalAlpha += getColorAlpha(180.0, dist);\n  totalAlpha += getColorAlpha(210.0, dist);\n  totalAlpha += getColorAlpha(240.0, dist);\n  totalAlpha += getColorAlpha(270.0, dist);\n  totalAlpha += getColorAlpha(300.0, dist);\n  totalAlpha += getColorAlpha(330.0, dist);\n  return totalAlpha * 0.0833;\n\n}\n\n/**\n * 获取发光的透明度\n */\nfloat getGlowAlpha() {\n\n  if (glowColorSize == 0.0) {\n    return 0.0;\n  }\n\n  float totalAlpha = 0.0;\n  totalAlpha += getAverageAlpha(glowColorSize * 0.1);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.2);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.3);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.4);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.5);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.6);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.7);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.8);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.9);\n  totalAlpha += getAverageAlpha(glowColorSize * 1.0);\n  return totalAlpha * 0.1;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= getTexture(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 SHOW_OUTTER_GLOW\n\n    float alpha = getGlowAlpha();\n\n    if (alpha <= glowThreshold) {\n\n      alpha = alpha / glowThreshold;\n\n      alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n    } else {\n\n      alpha = 0.0;\n    }\n\n    vec4 color_dest = glowColor * alpha;\n    vec4 color_src = o;\n\n    gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\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/**\n * 获取纹理uv颜色 \n *\n * 主要实现：超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0)\n * \n * 在 Cocos Creator 2.2.1 的编辑器中，超出边界的uv并不是返回 vec4(0.0, 0.0, 0.0, 0.0)，实际返回为\n * \n * * 超出左边界的uv，返回 v_uv0.x = 0 的颜色\n * * 超出右边界的uv，返回 v_uv0.x = 1 的颜色\n * * 超出上边界的uv，返回 v_uv0.y = 1 的颜色\n * * 超出下边界的uv，返回 v_uv0.y = 0 的颜色\n *\n * 和实际在浏览器上显示（超出边界即为透明）的有区别，为了统一，这里适配一下，这样子，在编辑器上预览的效果就能和实际浏览器的保持一致\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 texture2D(texture, v_uv0);\n}\n\n#if SHOW_OUTTER_GLOW\n\nuniform vec4 glowColor;\nuniform float glowColorSize;\nuniform float glowThreshold;\n\n/**\n * 获取指定角度方向，距离为xxx的像素的透明度\n *\n * @param angle 角度 [0.0, 360.0]\n * @param dist 距离 [0.0, 1.0]\n *\n * @return alpha [0.0, 1.0]\n */\nfloat getColorAlpha(float angle, float dist) {\n\n  float radian = angle * 0.01745329252;\n\n  vec4 color = getTextureColor(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); \n  return color.a;\n}\n\n/**\n * 获取指定距离的周边像素的透明度平均值\n *\n * @param dist 距离 [0.0, 1.0]\n *\n * @return average alpha [0.0, 1.0]\n */\nfloat getAverageAlpha(float dist) {\n  float totalAlpha = 0.0;\n\n  totalAlpha += getColorAlpha(0.0, dist);\n  totalAlpha += getColorAlpha(30.0, dist);\n  totalAlpha += getColorAlpha(60.0, dist);\n  totalAlpha += getColorAlpha(90.0, dist);\n  totalAlpha += getColorAlpha(120.0, dist);\n  totalAlpha += getColorAlpha(150.0, dist);\n  totalAlpha += getColorAlpha(180.0, dist);\n  totalAlpha += getColorAlpha(210.0, dist);\n  totalAlpha += getColorAlpha(240.0, dist);\n  totalAlpha += getColorAlpha(270.0, dist);\n  totalAlpha += getColorAlpha(300.0, dist);\n  totalAlpha += getColorAlpha(330.0, dist);\n  return totalAlpha * 0.0833;\n\n}\n\n/**\n * 获取发光的透明度\n */\nfloat getGlowAlpha() {\n\n  if (glowColorSize == 0.0) {\n    return 0.0;\n  }\n\n  float totalAlpha = 0.0;\n  totalAlpha += getAverageAlpha(glowColorSize * 0.1);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.2);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.3);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.4);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.5);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.6);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.7);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.8);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.9);\n  totalAlpha += getAverageAlpha(glowColorSize * 1.0);\n  return totalAlpha * 0.1;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= getTextureColor(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 SHOW_OUTTER_GLOW\n\n    float alpha = getGlowAlpha();\n\n    if (alpha <= glowThreshold) {\n\n      alpha = alpha / glowThreshold;\n\n      alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n    } else {\n\n      alpha = 0.0;\n    }\n\n    vec4 color_dest = glowColor * alpha;\n    vec4 color_src = o;\n\n    gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\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\n\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\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/**\n * 获取纹理uv颜色 \n *\n * 超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0)\n */\nvec4 getTexture(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}\n\n#if SHOW_OUTTER_GLOW\n\nuniform glow {\n\n  vec4 glowColor;\n\n  float glowColorSize;\n\n  float glowThreshold;\n\n};\n\n/**\n * 获取指定角度方向，距离为xxx的像素的透明度\n *\n * @param angle 角度 [0.0, 360.0]\n * @param dist 距离 [0.0, 1.0]\n *\n * @return alpha [0.0, 1.0]\n */\nfloat getColorAlpha(float angle, float dist) {\n\n  float radian = angle * 0.01745329252;\n\n  vec4 color = getTexture(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); \n  return color.a;\n}\n\n/**\n * 获取指定距离的周边像素的透明度平均值\n *\n * @param dist 距离 [0.0, 1.0]\n *\n * @return average alpha [0.0, 1.0]\n */\nfloat getAverageAlpha(float dist) {\n  float totalAlpha = 0.0;\n\n  totalAlpha += getColorAlpha(0.0, dist);\n  totalAlpha += getColorAlpha(30.0, dist);\n  totalAlpha += getColorAlpha(60.0, dist);\n  totalAlpha += getColorAlpha(90.0, dist);\n  totalAlpha += getColorAlpha(120.0, dist);\n  totalAlpha += getColorAlpha(150.0, dist);\n  totalAlpha += getColorAlpha(180.0, dist);\n  totalAlpha += getColorAlpha(210.0, dist);\n  totalAlpha += getColorAlpha(240.0, dist);\n  totalAlpha += getColorAlpha(270.0, dist);\n  totalAlpha += getColorAlpha(300.0, dist);\n  totalAlpha += getColorAlpha(330.0, dist);\n  return totalAlpha * 0.0833;\n\n}\n\n/**\n * 获取发光的透明度\n */\nfloat getGlowAlpha() {\n\n  if (glowColorSize == 0.0) {\n    return 0.0;\n  }\n\n  float totalAlpha = 0.0;\n  totalAlpha += getAverageAlpha(glowColorSize * 0.1);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.2);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.3);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.4);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.5);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.6);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.7);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.8);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.9);\n  totalAlpha += getAverageAlpha(glowColorSize * 1.0);\n  return totalAlpha * 0.1;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= getTexture(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 SHOW_OUTTER_GLOW\n\n    float alpha = getGlowAlpha();\n\n    if (alpha <= glowThreshold) {\n\n      alpha = alpha / glowThreshold;\n\n      alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n    } else {\n\n      alpha = 0.0;\n    }\n\n    vec4 color_dest = glowColor * alpha;\n    vec4 color_src = o;\n\n    gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\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/**\n * 获取纹理uv颜色 \n *\n * 主要实现：超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0)\n * \n * 在 Cocos Creator 2.2.1 的编辑器中，超出边界的uv并不是返回 vec4(0.0, 0.0, 0.0, 0.0)，实际返回为\n * \n * * 超出左边界的uv，返回 v_uv0.x = 0 的颜色\n * * 超出右边界的uv，返回 v_uv0.x = 1 的颜色\n * * 超出上边界的uv，返回 v_uv0.y = 1 的颜色\n * * 超出下边界的uv，返回 v_uv0.y = 0 的颜色\n *\n * 和实际在浏览器上显示（超出边界即为透明）的有区别，为了统一，这里适配一下，这样子，在编辑器上预览的效果就能和实际浏览器的保持一致\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}\n\n#if SHOW_OUTTER_GLOW\n\nuniform glow {\n\n  vec4 glowColor;\n\n  float glowColorSize;\n\n  float glowThreshold;\n\n};\n\n/**\n * 获取指定角度方向，距离为xxx的像素的透明度\n *\n * @param angle 角度 [0.0, 360.0]\n * @param dist 距离 [0.0, 1.0]\n *\n * @return alpha [0.0, 1.0]\n */\nfloat getColorAlpha(float angle, float dist) {\n\n  float radian = angle * 0.01745329252;\n\n  vec4 color = getTextureColor(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); \n  return color.a;\n}\n\n/**\n * 获取指定距离的周边像素的透明度平均值\n *\n * @param dist 距离 [0.0, 1.0]\n *\n * @return average alpha [0.0, 1.0]\n */\nfloat getAverageAlpha(float dist) {\n  float totalAlpha = 0.0;\n\n  totalAlpha += getColorAlpha(0.0, dist);\n  totalAlpha += getColorAlpha(30.0, dist);\n  totalAlpha += getColorAlpha(60.0, dist);\n  totalAlpha += getColorAlpha(90.0, dist);\n  totalAlpha += getColorAlpha(120.0, dist);\n  totalAlpha += getColorAlpha(150.0, dist);\n  totalAlpha += getColorAlpha(180.0, dist);\n  totalAlpha += getColorAlpha(210.0, dist);\n  totalAlpha += getColorAlpha(240.0, dist);\n  totalAlpha += getColorAlpha(270.0, dist);\n  totalAlpha += getColorAlpha(300.0, dist);\n  totalAlpha += getColorAlpha(330.0, dist);\n  return totalAlpha * 0.0833;\n\n}\n\n/**\n * 获取发光的透明度\n */\nfloat getGlowAlpha() {\n\n  if (glowColorSize == 0.0) {\n    return 0.0;\n  }\n\n  float totalAlpha = 0.0;\n  totalAlpha += getAverageAlpha(glowColorSize * 0.1);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.2);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.3);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.4);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.5);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.6);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.7);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.8);\n  totalAlpha += getAverageAlpha(glowColorSize * 0.9);\n  totalAlpha += getAverageAlpha(glowColorSize * 1.0);\n  return totalAlpha * 0.1;\n}\n\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= getTextureColor(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 SHOW_OUTTER_GLOW\n\n    float alpha = getGlowAlpha();\n\n    if (alpha <= glowThreshold) {\n\n      alpha = alpha / glowThreshold;\n\n      alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n    } else {\n\n      alpha = 0.0;\n    }\n\n    vec4 color_dest = glowColor * alpha;\n    vec4 color_src = o;\n\n    gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\n  #endif\n}\n"
       }
     }
   ],

assets/effects/sprite-outline.effect

@@ -13,8 +13,24 @@ CCEffect %{
       properties:
         texture: { value: white }
         alphaThreshold: { value: 0.5 }
-        outlineColor: { value: [1.0, 0.0, 0.0, 1.0], editor: { type: color } }
+
-        outlineSize: { value: 0.01 }
+        # 描边颜色
+        outlineColor: { 
+          value: [1.0, 0.0, 0.0, 1.0], 
+          inspector: {
+            type: color,
+            tooltip: "描边颜色",
+          }
+        }
+
+        # 描边宽度
+        outlineWidth: { 
+          value: 0.002,
+          inspector: {
+            tooltip: "描边宽度",
+            range: [0.0, 1.0]
+          }
+        }
 }%
 
 
@@ -71,23 +87,23 @@ CCProgram fs %{
     // 描边颜色 
     vec4 outlineColor;
     // 描边偏移大小
-    float outlineSize;
+    float outlineWidth;
     // 特别地，必须是 vec4 先于 float 声明
   };
 
-  // 将图像往8个方向偏移后，得到一个类放大效果，然后取放大后的图像的透明度，即可得到一个放大后的区域，可以很方便填充（描边）颜色
+  // 将图像往8个方向偏移后，得到一个类似放大的效果，然后取放大后的图像的透明度，即可得到一个放大后的区域，可以很方便填充（描边）颜色
-  // 取当前点上、下、左、右、上左、上右、下左、下右共计8个方向，距离为 outlineSize 的8个点，求他们的透明度之和
+  // 取当前点上、下、左、右、上左、上右、下左、下右共计8个方向，距离为 outlineWidth 的8个点，求他们的透明度之和
   // 由此可以得到当前点是否属于图像往八个方向做偏移后得到的放大图区域，并且能得到该点最终透明度值
   // 最终对应的为图像偏移/放大后的背景区域
   float getBgAlpha() {
-    vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); 
+    vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineWidth)); 
-    vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); 
+    vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineWidth)); 
-    vec4 color_left = texture(texture, v_uv0 - vec2(outlineSize, 0)); 
+    vec4 color_left = texture(texture, v_uv0 - vec2(outlineWidth, 0)); 
-    vec4 color_right = texture(texture, v_uv0 + vec2(outlineSize, 0)); 
+    vec4 color_right = texture(texture, v_uv0 + vec2(outlineWidth, 0)); 
-    vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize)); 
+    vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineWidth, -outlineWidth)); 
-    vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize)); 
+    vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineWidth, outlineWidth)); 
-    vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); 
+    vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineWidth, -outlineWidth)); 
-    vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize)); 
+    vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineWidth, outlineWidth)); 
     float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; 
     return clamp(total, 0.0, 1.0);
   }
@@ -111,6 +127,11 @@ CCProgram fs %{
     gl_FragColor = o;
 
     #if SHOW_OUT_LINE
+      // 无描边宽度即结束
+      if (outlineWidth == 0.0) {
+        return;
+      }
+
       // 先画背景色
       vec4 color_dest = outlineColor * getBgAlpha();
 

assets/effects/sprite-outline.effect.meta

@@ -0,0 +1,17 @@
+{
+  "ver": "1.0.23",
+  "uuid": "559dcd1e-233b-4e1f-b1da-733c9232f06f",
+  "compiledShaders": [
+    {
+      "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 SHOW_OUT_LINE\n\nuniform vec4 outlineColor;\nuniform float outlineWidth;\n\nfloat getBgAlpha() {\n  vec4 color_up = texture2D(texture, v_uv0 + vec2(0, outlineWidth)); \n  vec4 color_down = texture2D(texture, v_uv0 - vec2(0, outlineWidth)); \n  vec4 color_left = texture2D(texture, v_uv0 - vec2(outlineWidth, 0)); \n  vec4 color_right = texture2D(texture, v_uv0 + vec2(outlineWidth, 0)); \n  vec4 color_up_left = texture2D(texture, v_uv0 + vec2(outlineWidth, -outlineWidth)); \n  vec4 color_up_right = texture2D(texture, v_uv0 + vec2(outlineWidth, outlineWidth)); \n  vec4 color_down_left = texture2D(texture, v_uv0 + vec2(-outlineWidth, -outlineWidth)); \n  vec4 color_down_right = texture2D(texture, v_uv0 + vec2(-outlineWidth, outlineWidth)); \n  float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n  return clamp(total, 0.0, 1.0);\n}\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 SHOW_OUT_LINE\n\n    if (outlineWidth == 0.0) {\n      return;\n    }\n\n    vec4 color_dest = outlineColor * getBgAlpha();\n\n    vec4 color_src = o;\n\n    gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\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 SHOW_OUT_LINE\n\nuniform Outline {\n\n  vec4 outlineColor;\n\n  float outlineWidth;\n\n};\n\nfloat getBgAlpha() {\n  vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineWidth)); \n  vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineWidth)); \n  vec4 color_left = texture(texture, v_uv0 - vec2(outlineWidth, 0)); \n  vec4 color_right = texture(texture, v_uv0 + vec2(outlineWidth, 0)); \n  vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineWidth, -outlineWidth)); \n  vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineWidth, outlineWidth)); \n  vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineWidth, -outlineWidth)); \n  vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineWidth, outlineWidth)); \n  float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n  return clamp(total, 0.0, 1.0);\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 SHOW_OUT_LINE\n\n    if (outlineWidth == 0.0) {\n      return;\n    }\n\n    vec4 color_dest = outlineColor * getBgAlpha();\n\n    vec4 color_src = o;\n\n    gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\n  #endif\n}\n"
+      }
+    }
+  ],
+  "subMetas": {}
+}

assets/materials/sprite-outline.mtl

@@ -14,12 +14,12 @@
   "_props": {
     "texture": null,
     "outlineColor": {
-      "__type__": "cc.Vec4",
+      "__type__": "cc.Color",
-      "x": 1,
+      "r": 255,
-      "y": 0,
+      "g": 0,
-      "z": 0,
+      "b": 0,
-      "w": 1
+      "a": 255
     },
-    "outlineSize": 0.01
+    "outlineWidth": 0.002
   }
 }

assets/scenes/GlowInnerEffectScene.fire

@@ -171,7 +171,7 @@
       "array": [
         0,
         0,
-        407.8979651824706,
+        492.17758360225525,
         0,
         0,
         0,
@@ -474,7 +474,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 576,
-      "height": 540
+      "height": 460
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -486,7 +486,7 @@
       "ctor": "Float64Array",
       "array": [
         -192,
-        270,
+        320,
         0,
         0,
         0,
@@ -1319,7 +1319,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -126,
+        -110,
         0,
         0,
         0,
@@ -2080,7 +2080,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -222,
+        -190,
         0,
         0,
         0,
@@ -2841,7 +2841,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -318,
+        -270,
         0,
         0,
         0,
@@ -3602,7 +3602,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -414,
+        -350,
         0,
         0,
         0,
@@ -4363,7 +4363,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -510,
+        -430,
         0,
         0,
         0,
@@ -5086,7 +5086,7 @@
     "_enabled": true,
     "alignMode": 1,
     "_target": null,
-    "_alignFlags": 42,
+    "_alignFlags": 41,
     "_left": 0,
     "_right": 0.4,
     "_top": 0,
@@ -5114,7 +5114,7 @@
     "_layoutSize": {
       "__type__": "cc.Size",
       "width": 576,
-      "height": 540
+      "height": 460
     },
     "_resize": 1,
     "_N$layoutType": 2,
@@ -5130,7 +5130,7 @@
     "_N$paddingTop": 0,
     "_N$paddingBottom": 0,
     "_N$spacingX": 0,
-    "_N$spacingY": 36,
+    "_N$spacingY": 20,
     "_N$verticalDirection": 1,
     "_N$horizontalDirection": 0,
     "_N$affectedByScale": false,
@@ -5184,7 +5184,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 384,
-      "height": 459.33
+      "height": 435.33
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -5196,7 +5196,7 @@
       "ctor": "Float64Array",
       "array": [
         288,
-        229.665,
+        320,
         0,
         0,
         0,
@@ -5446,7 +5446,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -348,
+        -336,
         0,
         0,
         0,
@@ -5726,7 +5726,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        -442.665,
+        -418.665,
         0,
         0,
         0,
@@ -5792,10 +5792,10 @@
     "_enabled": true,
     "alignMode": 1,
     "_target": null,
-    "_alignFlags": 42,
+    "_alignFlags": 41,
     "_left": 0.6,
     "_right": 0,
-    "_top": 48,
+    "_top": 0,
     "_bottom": 48,
     "_verticalCenter": 0,
     "_horizontalCenter": 0,
@@ -5820,7 +5820,7 @@
     "_layoutSize": {
       "__type__": "cc.Size",
       "width": 384,
-      "height": 459.33
+      "height": 435.33
     },
     "_resize": 1,
     "_N$layoutType": 2,
@@ -5836,7 +5836,7 @@
     "_N$paddingTop": 0,
     "_N$paddingBottom": 0,
     "_N$spacingX": 48,
-    "_N$spacingY": 48,
+    "_N$spacingY": 36,
     "_N$verticalDirection": 1,
     "_N$horizontalDirection": 0,
     "_N$affectedByScale": false,

assets/scenes/OldPhotoEffectScene.fire

@@ -171,7 +171,7 @@
       "array": [
         0,
         0,
-        325.625551822949,
+        492.17758360225525,
         0,
         0,
         0,
@@ -471,7 +471,7 @@
       "ctor": "Float64Array",
       "array": [
         -192,
-        30,
+        320,
         0,
         0,
         0,
@@ -1266,7 +1266,7 @@
     "_enabled": true,
     "alignMode": 1,
     "_target": null,
-    "_alignFlags": 42,
+    "_alignFlags": 41,
     "_left": 0,
     "_right": 0.4,
     "_top": 0,
@@ -1376,7 +1376,7 @@
       "ctor": "Float64Array",
       "array": [
         288,
-        291.865,
+        320,
         0,
         0,
         0,
@@ -1972,10 +1972,10 @@
     "_enabled": true,
     "alignMode": 1,
     "_target": null,
-    "_alignFlags": 42,
+    "_alignFlags": 41,
     "_left": 0.6,
     "_right": 0,
-    "_top": 48,
+    "_top": 0,
     "_bottom": 48,
     "_verticalCenter": 0,
     "_horizontalCenter": 0,

assets/scenes/OutlineEffectScene.fire.meta

@@ -1,6 +1,6 @@
 {
   "ver": "1.2.5",
-  "uuid": "2d2f792f-a40c-49bb-a189-ed176a246e49",
+  "uuid": "dbecc9f5-b74f-4e1d-a024-bf3d5eac0847",
   "asyncLoadAssets": false,
   "autoReleaseAssets": false,
   "subMetas": {}

assets/scripts/MosaicEffectScene.ts

@@ -6,10 +6,11 @@ export default class MosaicEffectScene extends cc.Component {
     private _xMosaicCountSliderLabel: cc.Label = null;
     private _yMosaicCountSlider: cc.Slider = null;
     private _yMosaicCountSliderLabel: cc.Label = null;
+    private _mosaicCountSlider: cc.Slider = null;
+    private _mosaicCountSliderLabel: cc.Label = null;
 
     private _examplesParentNode: cc.Node = null;
 
-
     onLoad() {
         // 关闭动态合图
         cc.dynamicAtlasManager.enabled = false;
@@ -18,6 +19,8 @@ export default class MosaicEffectScene extends cc.Component {
         this._xMosaicCountSliderLabel = cc.find("Canvas/Content/Sliders/XMosaicCountSlider/ValueLabel").getComponent(cc.Label);
         this._yMosaicCountSlider = cc.find("Canvas/Content/Sliders/YMosaicCountSlider/Slider").getComponent(cc.Slider);
         this._yMosaicCountSliderLabel = cc.find("Canvas/Content/Sliders/YMosaicCountSlider/ValueLabel").getComponent(cc.Label);
+        this._mosaicCountSlider = cc.find("Canvas/Content/Sliders/MosaicCountSlider/Slider").getComponent(cc.Slider);
+        this._mosaicCountSliderLabel = cc.find("Canvas/Content/Sliders/MosaicCountSlider/ValueLabel").getComponent(cc.Label);
 
         this._examplesParentNode = cc.find("Canvas/Content/Examples");
     }
@@ -25,17 +28,30 @@ export default class MosaicEffectScene extends cc.Component {
     onEnable() {
         this._xMosaicCountSlider.node.on("slide", this._onSliderChanged, this);
         this._yMosaicCountSlider.node.on("slide", this._onSliderChanged, this);
+        this._mosaicCountSlider.node.on("slide", this._onSliderChangedTogether, this);
     }
 
     onDisable() {
         this._xMosaicCountSlider.node.off("slide", this._onSliderChanged, this);
         this._yMosaicCountSlider.node.off("slide", this._onSliderChanged, this);
+        this._mosaicCountSlider.node.off("slide", this._onSliderChangedTogether, this);
     }
 
     start() {
         this._onSliderChanged();
     }
 
+    private _onSliderChangedTogether() {
+        let mosaicCount = Math.round(this._mosaicCountSlider.progress * 300);
+        this._mosaicCountSliderLabel.string = `${mosaicCount}`;
+
+        // 更新材质
+        this._updateRenderComponentMaterial({
+            xBlockCount: mosaicCount,
+            yBlockCount: mosaicCount
+        });
+    }
+
     private _onSliderChanged() {
         let xMosaicCount = Math.round(this._xMosaicCountSlider.progress * 300);
         this._xMosaicCountSliderLabel.string = `${xMosaicCount}`;

assets/scripts/OutlineEffectScene.ts

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

assets/scripts/OutlineEffectScene.ts.meta

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

assets/scripts/OutlineEffectSecne.ts

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