CocosCreator Effect 文字下阴影 自带labelShadow安卓机不显示

非常非常感谢大神们分享的相关博文!然后,这个是借鉴了CocosCreator Shader学习(一):描边效果修改的,再次万分感谢楼主!!!


起因是,需要文字下阴影,但是自带的labelShadow在手机上面不显示,才想到用材质实现的。有点锯齿,不知道怎么解决,不过手机上看还好能看得过去。直接贴代码了:

```javascript

// 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 }

        outlineWidth: { value: 0.01 }

        imgColor: {value: [255,0,255,255] ,editor: {type: color} }

}%

CCProgram vs %{

  precision highp float;

  #include

  #include

  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

  #include


  in vec4 v_color;


  #if USE_TEXTURE

  in vec2 v_uv0;

  uniform sampler2D texture;

  #endif


  //cocos规定在shader中所有非sampler的uniform都应以block形式声明

  uniform InputData{

    float outlineWidth;  //外部程序输入描边宽度0.0-1.0。推荐0.05左右

  };


  uniform color{

    vec4 imgColor;

  };


  //检查pos点是否需要描边

  bool checkIsMakeOutline(vec2 pos){

    vec4 colorCur = texture(texture, pos);//检测点颜色

    if(colorCur.a >= 0.4)return false;//如果已经有颜色了就不需要覆盖颜色不再继续检测


    //检测当前点上周的点的alpha值

    vec2 posTarget = pos + vec2(0, -outlineWidth);

    vec4 colorTarget = texture2D(texture, posTarget);

    if(colorTarget.a > 0.004 )return true;//上周的点如果有颜色,检测点就需描边


    return false;

  }


  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);


    if(checkIsMakeOutline(v_uv0)){

      //检查到v_uv0点需要描边,直接改变颜色值

      o = imgColor;

    }


    gl_FragColor = o;

  }

}%

```

你可能感兴趣的:(CocosCreator Effect 文字下阴影 自带labelShadow安卓机不显示)