按钮如何添加描边效果？

写个shader ,加个状态，黑色变成白色，白色变成黑色

let node = this.node.children[1];
        let w = node.width;
        let h = node.height;
        draw(node.getComponent(cc.Graphics), cc.Color.WHITE, cc.Color.BLACK);
        node.on(cc.Node.EventType.TOUCH_START, ()=>{
            draw(node.getComponent(cc.Graphics), cc.Color.BLACK, cc.Color.WHITE);
        }, this);
        node.on(cc.Node.EventType.TOUCH_END, ()=>{
            draw(node.getComponent(cc.Graphics), cc.Color.WHITE, cc.Color.BLACK);
        }, this);

        function draw(graphics: cc.Graphics, fillcolor: cc.Color, strokecolor: cc.Color) {
            graphics.clear();
            graphics.roundRect(-w / 2, -h / 2, w, h, 10);
            graphics.fillColor = fillcolor;
            graphics.fill();
            graphics.lineWidth = 10;
            graphics.strokeColor = strokecolor;
            graphics.stroke();
        }

在按钮上放一个同大小的白色sprite，设置blend mode如下:

image621×556 23.7 KB

显示这个sprite就可以实现取反效果 。

取反969×1272 90.4 KB

当然这么做没什么扩展性就是了

还是改下图简单

哎 就是不想弄图片 想自绘出这样的效果

好的 我gif是用的godot做的 他那个自带描边属性 我也是刚接触游戏开发 就想着自绘界面 尽量不用图片

学到了。。。原来混合模式还能干这事。。。

我想的就是手动监听事件手动修改颜色。。。写起来很难受

好的 谢谢大佬回复

大佬,您这个很赞 ,我刚刚模仿了下您的这个操作,您看是这样操作的吗??

GIF 2022-2-11 15-45-09858×402 103 KB

哦，那还是用上面那位大佬的代码。我的方法处理圆角不是很方便

但是你这个没有描边和圆角 只是两个相反颜色的按钮操作了

那也谢谢大佬回复

最下面这个节点只需要白色sprite，不需要label。
可以作为全屏反色后处理的低成本实现

好的,学习了,谢谢大佬回复

如果想要有圆角,那只用Ts代码的话,估计比较难实现(复杂),
也许用shader会比较方便(我不太会shader,就估计下),
目前圆角描边的话,不用图片会比较抽象,Cocos自带的如图下,拉伸会比较抽象,
如果用了九宫格的话,稍微好一点,圆角矩形也能看,但是放大看还是有点模糊:::

image1032×533 47.1 KB

好的 谢谢大佬回复 最近在接触godot 那个做这种效果很方便 但是在国内的生态不好 我英文不好 看那个API头疼

加油,其实我也是小菜菜,学习中…

好的 大佬 能否给个效果图看下? 我刚开始学cocos 还不太会添加脚本 我就是想知道能不能实现效果 如果能的话 我就着重的学习下cocos