美文网首页
cocos creator effect 学习2

cocos creator effect 学习2

作者: 欧特雨 | 来源:发表于2020-05-13 16:22 被阅读0次

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


    实现方式应该很简单,把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

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

    相关文章

      网友评论

          本文标题:cocos creator effect 学习2

          本文链接:https://www.haomeiwen.com/subject/djwnnhtx.html