下面尝试制作一个功能,把图片变成纯色,也就是剪影,效果如下,很多游戏中都有这样的效果,例如未解锁的物品角色
实现方式应该很简单,把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
实现了个最简单的效果,是不是感觉难度也不是太大?
循序渐进,下面可以尝试一下难一点的了。
网友评论