初步加入外发光效果

assets/effects/outter-glow.effect

@@ -0,0 +1,133 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  
+// 外发光特效
+CCEffect %{
+  techniques:
+  - passes:
+    - vert: vs
+      frag: fs
+      blendState:
+        targets:
+        - blend: true
+      rasterizerState:
+        cullMode: none
+      properties:
+        texture: { value: white }
+        alphaThreshold: { value: 0.5 }
+        outlineColor: { value: [1.0, 1.0, 0.0, 1.0], editor: { type: color } }
+        outlineSize: { value: 0.01 }
+}%
+
+
+CCProgram vs %{
+  precision highp float;
+
+  #include <cc-global>
+  #include <cc-local>
+
+  in vec3 a_position;
+  in vec4 a_color;
+  out vec4 v_color;
+
+  #if USE_TEXTURE
+  in vec2 a_uv0;
+  out vec2 v_uv0;
+  #endif
+
+  void main () {
+    vec4 pos = vec4(a_position, 1);
+
+    #if CC_USE_MODEL
+    pos = cc_matViewProj * cc_matWorld * pos;
+    #else
+    pos = cc_matViewProj * pos;
+    #endif
+
+    #if USE_TEXTURE
+    v_uv0 = a_uv0;
+    #endif
+
+    v_color = a_color;
+
+    gl_Position = pos;
+  }
+}%
+
+
+CCProgram fs %{
+  precision highp float;
+  
+  #include <alpha-test>
+
+  in vec4 v_color;
+
+  #if USE_TEXTURE
+  in vec2 v_uv0;
+  uniform sampler2D texture;
+  #endif
+
+  #if SHOW_OUT_LINE
+
+  uniform Outline {
+    // 描边颜色 
+    vec4 outlineColor;
+    // 描边偏移大小
+    float outlineSize;
+    // 特别地，必须是 vec4 先于 float 声明
+  };
+
+  // 将图像往8个方向偏移后，得到一个类放大效果，然后取放大后的图像的透明度，即可得到一个放大后的区域，可以很方便填充（描边）颜色
+  // 取当前点上、下、左、右、上左、上右、下左、下右共计8个方向，距离为 outlineSize 的8个点，求他们的透明度之和
+  // 由此可以得到当前点是否属于图像往八个方向做偏移后得到的放大图区域，并且能得到该点最终透明度值
+  // 最终对应的为图像偏移/放大后的背景区域
+  float getBgAlpha() {
+    vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); 
+    vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); 
+    vec4 color_left = texture(texture, v_uv0 - vec2(outlineSize, 0)); 
+    vec4 color_right = texture(texture, v_uv0 + vec2(outlineSize, 0)); 
+    vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize)); 
+    vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize)); 
+    vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); 
+    vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize)); 
+    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; 
+    total *= 0.125;
+    return clamp(total, 0.0, 1.0);
+  }
+
+  #endif
+
+  void main () {
+    vec4 o = vec4(1, 1, 1, 1);
+
+    #if USE_TEXTURE
+    o *= texture(texture, v_uv0);
+      #if CC_USE_ALPHA_ATLAS_TEXTURE
+      o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
+      #endif
+    #endif
+
+    o *= v_color;
+
+    ALPHA_TEST(o);
+
+    gl_FragColor = o;
+
+    #if SHOW_OUT_LINE
+      // 先画背景色
+      vec4 color_dest = outlineColor * getBgAlpha();
+
+      // 然后在背景色上方画图案颜色
+      vec4 color_src = o;
+
+      // 按照这个顺序，源颜色就是图案颜色，目标颜色就是背景色
+      // 所以命名就是 color_src, color_dest
+
+      // 按照混合颜色规则 http://docs.cocos.com/creator/manual/zh/advanced-topics/ui-auto-batch.html#blend-%E6%A8%A1%E5%BC%8F
+      // 要在底色上方，画一个图案，图案完全挡住底色，那么最终选择的混合模式如下：
+      // color_src: GL_SRC_ALPHA
+      // color_dest: GL_ONE_MINUS_SRC_ALPHA
+      // 即最终颜色如下：
+      // color_src * GL_SRC_ALPHA + color_dest * GL_ONE_MINUS_SRC_ALPHA
+      gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);
+    #endif
+  }
+}%

assets/effects/outter-glow.effect.meta

@@ -0,0 +1,17 @@
+{
+  "ver": "1.0.23",
+  "uuid": "9874f91b-8c4d-42a7-975a-a6281b46f3ed",
+  "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  total *= 0.125;\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  total *= 0.125;\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/materials/outter-glow.mtl

@@ -0,0 +1,25 @@
+{
+  "__type__": "cc.Material",
+  "_name": "",
+  "_objFlags": 0,
+  "_native": "",
+  "_effectAsset": {
+    "__uuid__": "9874f91b-8c4d-42a7-975a-a6281b46f3ed"
+  },
+  "_defines": {
+    "USE_TEXTURE": true,
+    "USE_ALPHA_TEST": false,
+    "SHOW_OUT_LINE": true
+  },
+  "_props": {
+    "texture": null,
+    "outlineColor": {
+      "__type__": "cc.Vec4",
+      "x": 1,
+      "y": 1,
+      "z": 0,
+      "w": 1
+    },
+    "outlineSize": 0.01
+  }
+}

assets/materials/outter-glow.mtl.meta

@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.2",
+  "uuid": "b878db1a-68e4-460d-95f8-83fdb34c11e6",
+  "dataAsSubAsset": null,
+  "subMetas": {}
+}

assets/scenes/OutlineEffectScene.fire

@@ -177,7 +177,7 @@
       "array": [
         0,
         0,
-        491.0364039457767,
+        393.1755333181352,
         0,
         0,
         0,
@@ -992,7 +992,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 585.3299999999999,
-      "height": 150
+      "height": 0
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1066,7 +1066,7 @@
       "ctor": "Float64Array",
       "array": [
         -195.16499999999996,
-        26.272,
+        0,
         0,
         0,
         0,
@@ -1160,7 +1160,7 @@
       "ctor": "Float64Array",
       "array": [
         121.50000000000003,
-        37.609,
+        0,
         0,
         0,
         0,
@@ -1225,7 +1225,7 @@
     "_layoutSize": {
       "__type__": "cc.Size",
       "width": 585.3299999999999,
-      "height": 150
+      "height": 0
     },
     "_resize": 1,
     "_N$layoutType": 1,

assets/scenes/OutterGlowEffectScene.fire.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.2.5",
+  "uuid": "05055d3f-a334-4b45-abf1-e379e4708284",
+  "asyncLoadAssets": false,
+  "autoReleaseAssets": false,
+  "subMetas": {}
+}

assets/scripts/OutterGlowEffectScene.ts

@@ -0,0 +1,41 @@
+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);
+    }
+}

assets/scripts/OutterGlowEffectScene.ts.meta

@@ -1,6 +1,6 @@
 {
   "ver": "1.0.5",
-  "uuid": "93154cca-114c-4db2-938b-f750f686fe9b",
+  "uuid": "408f4991-ebdc-446e-9ce3-b18006bb7bcb",
   "isPlugin": false,
   "loadPluginInWeb": true,
   "loadPluginInNative": true,

assets/scripts/SpriteOutlineCrtl.ts

@@ -1,21 +0,0 @@
-const { ccclass, property } = cc._decorator;
-
-@ccclass
-export default class SpriteOutlineCtrl extends cc.Component {
-    private _sprite: cc.Sprite = null;
-
-    onLoad() {
-        this._sprite = this.getComponent(cc.Sprite);
-        if (this._sprite == null) {
-            throw new Error(`${this.name} can only bind on Sprite`);
-        }
-    }
-
-    start() {
-        // let material: cc.Material = this._sprite.getMaterial(0);
-        // material.setProperty("test", 0);
-        // this._sprite.setMaterial(0, material);
-    }
-
-    // update (dt) {}
-}