有什么方案能代替mask组件切割效果

原因是这样的,我们要将图片放大,然后切割中间的部分,图片是网络图,没法让ui提前设计,所以之前都是用mask来切割,但是使用mask后,每一个item都增加了3个Drawcall ,这很恐怖,因为有的页面有几百个item,每个都增加3个Drawcall,都要超过1000个Drawcall 看下面逻辑图可能会更清晰点

3赞

@panda

@jare

尝试下shader

用 Shader 一样会打断渲染批处理。

可以尝试将所有需要切割的节点放到UI外层统一管理,不打断正常图像的批处理就好了。

是 现在切割的节点就是在最外层,只是因为mask组件会导致增加3个Drawcall ,我的想法是既能实现切割,然后Drawcall 不会增多

Shader不一定会打断合批渲染。
可以考虑这个方案:

  1. 所有网络图参与动态合图
  2. 每张图切割的位置自己计算顶点数据传给shader,可以参考我这个帖子
    【分享】自定义渲染合批之自定义顶点格式(附 Demo 和引擎源码解读)

这样可以保证不断合批。

好的,我看看,谢谢


:grin:参考一下,可能有帮助

1赞

一个mask组件可以通过重写_updateGraphics方法,创建多个切割区域。

let mask = maskNode.getComponent(cc.Mask);
(mask as any)._updateGraphics = () => {
    let graphics = mask._graphics;
    graphics.clear(false);
    // 用graphics绘制多个遮罩区域
    ...
    graphics.fill();
};
mask._updateGraphics();
2赞

现在主要是mask组件新增了2个Drawcall 想换另一种方式既有mask的效果,又不会新增Drawcall

现在要解决的是mask带来的drawcall还是一大堆网络图片带来的drawcall呢。
如果只是解决mask带来的,那就是简单搞一下shader就可以了吧,然后把这些网络图片的渲染放到一起。

一大堆网络图片带来的drawcall这个就得用楼上自定义渲染合批了,感觉还挺麻烦。

是解决mask带来的,网络图都是放在单个item里面没法合并

嗯嗯,那其实就是一个shader就搞定了,根据uv算需要显示的部分。
最简单的例子,这样就只显示坐上角的部分了。

你项目有100个item, 网络图不合并的话,最好情况下也会有100 draw call

是的 目前一个item不止一个draw call,有7个draw call,如果去掉mask则一个item只有5个,也算是一种优化吧

大神看不懂啊:joy:,这是c++写的么

我的意思就是只用一个mask组件,创建所有Item需要的遮罩区域。我们游戏就是这样做的

只用一个mask组件,创建所有Item需要的遮罩区域 好像我们的结构不能这么做,现在每一个item都是一个预制资源,每生成一个预制资源就会有一个mask

你自己创建一个material和effect,然后打开effct文件就能看到了,我就加了个*0.5