Cocos Creator 2.1 shader / 材质 使用示例

这里制作了一个按钮流光特效

流光特效.gif

• 主要构成是在原图片上面，混合了一层中间实，两边虚的白色充当光效，然后移动

制作流程

• 首先创建流光特效需要使用到的材质球和特效

  
  
  材质球

• 将材质球的 effect 选择为自己新创建的

  
  
  effect

• 修改 effect 里面的代码，制作特效

  • 我这里贴出了 核心代码
  • %% vs 是顶点 shader 模块
  • %% fs 是面 shader 模块，我们因为要做流光效果，所以这里需要修改的就是这里面的代码
    • v_uv0 是当前要渲染的点，
    • color 是当前要渲染点的 texture 的 rgba
    • gl_FragColor 是你告诉系统最终渲染颜色
    • 核心就是去用系统给你的点的 rgba 和点的位置， 去计算得出你需要的效果的 rgba

void main () {
  vec4 color = v_color;

  #if USE_TEXTURE
    color *= texture2D(texture, v_uv0);
    #if _USE_ETC1_TEXTURE
      color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
    #endif
    float y1 = -1.0 * tan_value * (v_uv0.x - start_x);
    float y2 = -1.0 * tan_value * (v_uv0.x - start_x - light_width);



    if (v_uv0.y > y1 && v_uv0.y < y2) {
      //计算现在的点到中心线的距离
      float dis = v_uv0.y * -1.0 / tan_value + (light_width / 2.0) + start_x - v_uv0.x;
      if (dis < 0.0) {
        dis = dis * -1.0;
      }

      //距离所占比例
      // * 1.0 后变为透明度  所以本身就是透明度
      float sc = dis / (light_width / 2.0);
  
      //计算光的透明度  营造光晕效果
      // 中间不透明   两边透明
      //用 sin 来达成先快后慢的变化效果
      float lightA = (1.0 - sin(sc * 3.1415926536 / 2.0)) * light_strength;

      float newr = color.r * (1.0 - lightA) + 255.0 * lightA;
      float newg = color.g * (1.0 - lightA) + 255.0 * lightA;
      float newb = color.b * (1.0 - lightA) + 255.0 * lightA;      
      float newa = color.a * (1.0 - lightA) + 1.0 * lightA;


      color = vec4(newr, newg, newb, newa);
    }
  #endif


  gl_FragColor = color;
}

流光特效

• 我这里主要的思想是，首先计算出光效的两条边线，在两条线之间的区域就是我们要调整颜色的区域。
• 调整颜色的算法根据你的需要去调整

  • 这里有混合颜色算法的示例

  • 我首先是做了一条白色的光，

  • 但是实际光线应该是中间明两边弱的，所以我又计算了一条中心线，计算点到中心线的距离，根据距离去调整光线强弱。

  • 实际做出来的效果显得中间区域很亮，光线变弱的速度速度显得很慢，所以要做一条先快速变化后慢速变化的曲线，然后我想到了三角函数，然后用 sin 函数去控制变化曲线

    
    
    image.png

  • 最终就是整体的流光效果。

小结

• 我这里只是给出一个思维示例，不代表你们做效果的时候完全按这个方法去做，只是提供一个分析问题和解决问题的思路，希望看完能对你有所启发。
• 另外，我个人是 iOS 开发者，对 cocos 不是特别精通，如果大家有什么好的建议，十分欢迎大家留言探讨。
• 最后代码已经上传GitHub，有帮忙到你的不要忘记点start哦！
• Demo