分享更高效的 creator 裁圆角头像 shader（ 2019.10.22 升级至 2.2.0）

Creator 2.x
#70

我用了这位大神的代码，而且图片给入的是长方形的，是这样用的：
将代码里面的这两句：
float rx = abs(uv.x) - (0.5 - edge);
float ry = abs(uv.y) - (0.5 - edge);

多加入一些参数即可：
float rx = abs(uv.x * 1.05) - (0.5 - edge);
float ry = abs(uv.y * 1.1887 * 1.05) - (0.5 - edge);

注：1.1887是我给入的图片的高除以宽的商 （你根据需要填写，如果是宽比高大的，那用宽除以高的商乘到rx那一行即可）
1.05是我需要继续往里面多裁掉一些（因为我给的图片两边有透明像素）
我的目的是裁成圆的。edge参数依旧给0.5。

#71

我使用你的demo工程，加了几个sprite，感觉不太稳定，就像下图的截图一样

好像编辑器里是对的，跑起来就不对了，貌似好像是半径算的是对角线了。另外，已经是圆角的图，也是这样的问题。

有时间帮看下吧，我看了effect文件，没看懂算法。多谢

#72

原来是直角的图也有问题

#73

image.png774×656 99.3 KB

这个勾去掉

#74

可以了，多谢。

你这个方案比基于mask的效率高多了。顶起！

#75

tql,sdl

#76

请问如果使用网络图片的话，显示会有问题，锚点变成右下角的，只显示了四分之一，有大佬知道怎么改吗？ let imgUrl = ‘https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg’; 随便在网上找的一张图。

截屏2020-06-20上午12.54.23.png1928×1262 71.5 KB

#77 
cc.loader.load({ url: url, type: "png" }, (err: any, texture: cc.Texture2D) => {
                texture.packable = false; // 关键在这句
                const spriteFrame = new cc.SpriteFrame(texture);
                this.avatarSpr.spriteFrame = spriteFrame;
            }
        });
2赞
#78

非常好使，谢谢大佬。

#79

大佬 长方形的图 想要圆角是正圆的 该怎么改

#80

论坛里有其他人实现了， 你参考参考

#81

厉害了,之前就是用mask切割,也是3个drawcall,就是想要shader这种效果 ,给你点个赞

#83

markmarkmarkmarkmark

#84

（帖子被作者删除，如无标记将在 24 小时后自动删除）

#85

Mark，先点赞收藏再看

#86

嘿额呵呵呵呵呵

#87

可以合批吗

#88

不支持合批

#89

mark!的

#90

mask!