cocos creator effect 学习2

下面尝试制作一个功能,把图片变成纯色,也就是剪影,效果如下,很多游戏中都有这样的效果,例如未解锁的物品角色


实现方式应该很简单,把gl_FragColor中的颜色修改一下,只保留透明通道a,rgb用纯色代替。

加三行代码,修改o的rgb,注意要用float类型,不然会报错


image.png

这时候,图片就会变成纯白色,而且有透明区域


image.png

这个时候已经可以使用了,不过这个effect只能一种颜色,而且每次改变颜色都要修改effect,还要计算,很不方便,所以可以让颜色像USE_TEXTURE一样,可以在面板上设置

image.png

官方文档上面有例子,图上的mainColor
复制到我的effect中


image.png

返回编辑器,报错了,根据报错信息得知,好像需要定义一个uniform,依葫芦画瓢,先添加一个


image.png

image.png

分号也不要忘记了,图上忘记了
切换到creator,还是报错


image.png

查找文档,找到解决办法


image.png

修改成这样,切换到creator


image.png

不报错了,不过样式好像有点不对


image.png

检查一下,editor拼写错误


image.png

改正之后


image.png

现在可以随意设置颜色了,不过设置了也没有用,下面添加效果


image.png

image.png

最终实现了效果

完成之后突然想到,如果我想调整透明度怎么办,因为我只取了颜色的rgb,,所以设置颜色时a是不起作用的

再加一行


image.png

透明度也生效了


image.png

实现了个最简单的效果,是不是感觉难度也不是太大?
循序渐进,下面可以尝试一下难一点的了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。