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

Creator 2.x
#4

尝试下shader

#5

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

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

#6

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

#7

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

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

这样可以保证不断合批。

#8

好的,我看看,谢谢

#9


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

1赞
#11

一个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赞
#12

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

#13

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

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

#14

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

#15

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

#16

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

#17

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

#18

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

#19

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

#20

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

#21

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

#22

我突然想到，你这个远程加载不是一个spriteframe，如果你只是要其中正方形的部分，你setRect不就完事了。我还以为你有圆角什么的需求呢。。

#23

我们每个item也是一个prefab。比如节点nodeA上有mask组件和管理mask的脚本compA，item全部加载到nodeA下面。item添加进来的时候，通知compA自己需要遮罩的区域，compA重新执行一次mask._updateGraphics，把新增的遮罩区域也绘制进来，就可以了。

#24

诶？想问一下您这个方法能实现下边的遮罩方式么？
假设a是item-icon，b是item-bg，c是mask层

aaa    aaa
bbbbb  bbbbb
cccccccccccc

c层实现一个遮罩显示成如下这样

 a      a
bbbbb  bbbbb
cccccccccccc

我的理解按说不得这样才行么。

 a      a
cccccccccccc
bbbbb  bbbbb