笑容逐渐消失？ shader 编程入门实战 ！ Cocos Creator！

编程斗图！随手拈来！文章底部获取完整代码！

效果预览

为了实现这个效果，需要准备两张相近的图片。

在 Cocos Creator 编辑器中，新建一个材质 Material，Effect 选择为 gradient，拖入两张图片。

新建一个 Sprite 节点，拖入材质。

接着再写个脚本，定时控制 Sprite 材质中的混合因子。

update(dt) {
  // sp :cc.Sprite
  let material = sp['sharedMaterials'][0];
  if (material) {
      this._gradient_value = (this._gradient_value + 0.003) % 1;
      material.setProperty('gradient_value', this._gradient_value);
  }
}

那么shader effect是如何实现的呢？

片元着色器根据变化的混合因子，从两幅纹理中采样得到的颜色，按照比例混合，就能实现图片平滑过度的效果了。片元着色器代码参考如下。

void main () {
  vec4 o_first = vec4(1, 1, 1, 1);
  vec4 o_last = vec4(1, 1, 1, 1);


  #if USE_TEXTURE
    o_first *= texture2D(texture_first, v_uv0);
    o_last *= texture2D(texture_last, v_uv0);
  #endif


  o_first *= v_color;
  o_last *= v_color;


  gl_FragColor = o_first * (1.0 - gradient_value) + o_last * gradient_value;
}

以上为白玉无冰使用 Cocos Creator v2.2.2 开发"图像渐变-shader"的技术分享。有什么想法欢迎留言交流！如果这篇对你有点帮助，欢迎分享给身边的朋友。

---

更

多

精

彩

用鼠标编辑的多边形裁剪！ gizmo 插件入门 ！ Cocos Creator！

使用卷积实现各种滤镜效果！shader 编程实战！Cocos Creator！

飘扬的旗帜！shader 编程实战！Cocos Creator！

如何实现高抛平抛发射？从抛物线说起！Cocos Creator！

为何你的弹球如丝般顺滑？不停歇的球！技术分享！源码相送！

2D / 3D 往期精选！附送 github 地址！Cocos Creator ！

原创不易！转载请保留文末二维码，以及完整代码获取方式！

完整代码：https://github.com/baiyuwubing/cocos-creator-examples/tree/master/gradient

点击“阅读原文”查看完整代码

我就知道你“在看”▼