前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[Cocos Creator] 颜色可变的剪影效果 Shader

[Cocos Creator] 颜色可变的剪影效果 Shader

作者头像
陈皮皮
发布2020-07-10 16:54:39
1.7K0
发布2020-07-10 16:54:39
举报
文章被收录于专栏:菜鸟小栈菜鸟小栈

前言

想了很久,前言实在是不知道说啥好,那就提前祝大家新年快乐吧!

另外再给大家分享一个颜色可变的剪影效果 Shader

效果

使用前

使用后

正文

代码展示

★ 支持版本: Cocos Creator 2.3.x

代码语言:javascript
复制
// Eazax 剪影效果

CCEffect %{
  techniques:
  - passes:
    - vert: vs
     frag: fs
     blendState:
       targets:
       - blend: true
     rasterizerState:
         cullMode: none
     properties:
         targetColor: { value: [0.0, 0.0, 0.0, 1], inspector: { type: color } }
}%

CCProgram vs %{
  precision highp float;

  #include <cc-global>

  attribute vec3 a_position;
  attribute vec2 a_uv0;
  out vec2 uv0;

  void main () {
    gl_Position = cc_matViewProj * vec4(a_position, 1);
    uv0 = a_uv0;
  }
}%

CCProgram fs %{
  precision highp float;

  in vec2 uv0;
  uniform sampler2D texture;
  uniform FragConstants {
    vec4 targetColor;
  };

  void main () {
    vec2 coord = uv0.xy;
    vec4 color = texture2D(texture, coord);
    gl_FragColor = vec4(targetColor.r, targetColor.g, targetColor.b, color.a);
  }
}%

使用方法

1. 将下载的 eazax-silhouette.effect 文件放到项目的任意文件夹下:

放在找得到的地方

2. 在资源管理器任意文件夹上点击鼠标右键,选择 新建 -> Material 来新建一个新的材质:

new 一个呗

3. 选中刚刚新建的 Material 文件,在属性检查器中设置它的 Effect 为 eazax-silhouette ,在 targetColor 处选择需要的颜色,点击右上角 应用 即可:

默认是黑色哦

4. 将设置好的 Material 文件拖到节点上的 Sprite 组件的 Materials 属性上即可,此时也可以继续修改 Material 文件的颜色,直到你满意为止哈:

拖完再改颜色也可以

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-04-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 菜鸟小栈 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档