好像初步可以描边，但是有待完善

assets/effects/sprite-outline.effect

@@ -13,8 +13,8 @@ CCEffect %{
       properties:
         texture: { value: grey }
         alphaThreshold: { value: 0.5 }
-        outlineColor: { value: [1, 1, 1, 1], editor: { type: color } }
+        outlineColor: { value: [1., .0, .0, 1.], editor: { type: color } }
-        outlineSize: { value: 5.0 }
+        outlineSize: { value: .01 }
 }%
 
 
@@ -77,29 +77,19 @@ CCProgram fs %{
   };
   #endif
 
-  // // 获取背面颜色
+  // 获取背面颜色
-  // float getBackArea() {
+  float getBackArea() {
-  //   vec4 color_up;
+    vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); 
-  //   vec4 color_down;
+    vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); 
-  //   vec4 color_left; 
+    vec4 color_left = texture(texture, v_uv0 - vec2(outlineSize, 0)); 
-  //   vec4 color_right; 
+    vec4 color_right = texture(texture, v_uv0 + vec2(outlineSize, 0)); 
-  //   vec4 color_up_left; 
+    vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize)); 
-  //   vec4 color_up_right; 
+    vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize)); 
-  //   vec4 color_down_left; 
+    vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); 
-  //   vec4 color_down_right; 
+    vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize)); 
-  //   float total = 0 ; 
+    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);
-  //   color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); 
+  }
-  //   color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); 
-  //   color_left = texture(texture, v_uv0 - vec2(outlineSize, 0)); 
-  //   color_right = texture(texture, v_uv0 + vec2(outlineSize, 0)); 
-  //   color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize)); 
-  //   color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize)); 
-  //   color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); 
-  //   color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize)); 
-  //   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);
-  // }
 
   void main () {
     vec4 o = vec4(1, 1, 1, 1);
@@ -116,6 +106,9 @@ CCProgram fs %{
     ALPHA_TEST(o);
 
     gl_FragColor = o;
-    // gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
+
+    // 正常的rgb + 正常的透明区域 * 背面颜色 * 描边颜色
+    // gl_FragColor = vec4(o.rgb + (1.0 - o.a) * outlineColor.rgb * getBackArea(), 1.0);
+    // gl_FragColor = vec4(o.rgb + outlineColor.rgb * getBackArea(), 1.0);
   }
 }%

assets/effects/sprite-outline.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_OUT_LINE\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}\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\nuniform float outlineSize;\n\n#endif\n\nfloat getBackArea() {\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\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}\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\nuniform Outline {\n\n  vec4 outlineColor;\n\n  float outlineSize;\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}\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\nuniform Outline {\n\n  vec4 outlineColor;\n\n  float outlineSize;\n\n};\n#endif\n\nfloat getBackArea() {\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\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}\n"
       }
     }
   ],

assets/materials/sprite-outline.mtl

@@ -11,6 +11,14 @@
     "SHOW_OUT_LINE": true
   },
   "_props": {
-    "texture": null
+    "texture": null,
+    "outlineColor": {
+      "__type__": "cc.Vec4",
+      "x": 1,
+      "y": 1,
+      "z": 0,
+      "w": 1
+    },
+    "outlineSize": 0.01
   }
 }

assets/scenes/MainScene.fire

@@ -177,7 +177,7 @@
       "array": [
         0,
         0,
-        493.63448015713004,
+        394.90758412570403,
         0,
         0,
         0,

assets/textures/prestige_01.png.meta

@@ -0,0 +1,34 @@
+{
+  "ver": "2.3.3",
+  "uuid": "9e216a31-1e40-4350-b20c-629287c96706",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "platformSettings": {},
+  "subMetas": {
+    "prestige_01": {
+      "ver": "1.0.4",
+      "uuid": "89478038-ff44-410d-8044-8fb4dd82c1e8",
+      "rawTextureUuid": "9e216a31-1e40-4350-b20c-629287c96706",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": -0.5,
+      "offsetY": 0.5,
+      "trimX": 0,
+      "trimY": 1,
+      "width": 59,
+      "height": 57,
+      "rawWidth": 60,
+      "rawHeight": 60,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/textures/prestige_02.png.meta

@@ -0,0 +1,34 @@
+{
+  "ver": "2.3.3",
+  "uuid": "268e9b44-3120-4787-87cb-eb9c00d9fbaf",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "platformSettings": {},
+  "subMetas": {
+    "prestige_02": {
+      "ver": "1.0.4",
+      "uuid": "24e1449a-64d2-4df5-bcf9-8ce55ecb6637",
+      "rawTextureUuid": "268e9b44-3120-4787-87cb-eb9c00d9fbaf",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 60,
+      "height": 60,
+      "rawWidth": 60,
+      "rawHeight": 60,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}