评论

笑容逐渐消失? shader 编程入门实战 ! Cocos Creator!

笑容逐渐消失? shader 编程入门实战 ! Cocos Creator!

【本文使用图文素材转载自微信公众号: 白玉无冰,作者 白玉无冰

效果预览

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

在 Cocos Creator 编辑器中,新建一个材质 MaterialEffect 选择为 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"的技术分享。有什么想法欢迎留言交流!如果这篇对你有点帮助,欢迎分享给身边的朋友。

【本文使用图文素材转载自微信公众号: 白玉无冰,作者 白玉无冰


最后一次编辑于  03-17  
点赞 0
收藏
评论
登录 后发表内容