版本3.8.0:求教,在2D场景中如何使用【Line】组件。

现在已经正常使用该组件功能,但是存在问题:层级异常。
在Cocos Creator 3.8.0中使用Line组件时,节点层级显示异常的问题可能是由于渲染顺序引起的。默认情况下,2D节点的渲染顺序是按照节点在场景编辑器中的层级来确定的,但是Line组件可能会影响渲染顺序。
求教:如何正确设置层级?

1赞


image
还是不对,2D场景下能不能用【Line】组件?

1赞

要不是试试graphics

    static drawRect(node: Node, rect: Rect, color: Color = Color.RED) {
        let newNode = new Node();
        newNode.addComponent(UITransform).contentSize = node.getComponent(UITransform).contentSize;
        node.addChild(newNode);

        let graphics = newNode.addComponent(Graphics)
        graphics.strokeColor = color;
        graphics.lineWidth = 2;



        //获取在本地坐标系的位置
        let worldPos = node.getComponent(UITransform).convertToWorldSpaceAR(Vec3.ZERO);
        rect.x = rect.x - worldPos.x;
        rect.y = rect.y - worldPos.y;

        graphics.moveTo(rect.x, rect.y);
        graphics.lineTo(rect.x + rect.width, rect.y);
        graphics.moveTo(rect.x + rect.width, rect.y);
        graphics.lineTo(rect.x + rect.width, rect.y + rect.height);
        graphics.moveTo(rect.x + rect.width, rect.y + rect.height);
        graphics.lineTo(rect.x, rect.y + rect.height);
        graphics.moveTo(rect.x, rect.y + rect.height);
        graphics.lineTo(rect.x, rect.y);

        graphics.stroke();
    }

感谢老哥回答。我尝试过使用【graphics】组件绘制虚线。遇到两个问题:1.我想实现“蚂蚁线”的移动效果。没想到什么思路去处理移动逻辑。2.Draw call 会特别高,太消耗性能了。

可以把线换成图片,就不要line组件了,直接写一个呗,图片合批drawcall也下来了

可以用 shader 实现, 看下这个效果是不是你想要的
https://www.shadertoy.com/view/md3yz7

感谢老哥回复,这是最后的方法,实在是想看看有没有别的方案。

感谢回复,这个我有看到过,先绘制线段圆,然后旋转节点。我想做的移动路线,比较无规律,手动实现比较麻烦,也是能够实现。就是目前用到的Line组件的效果是符合我要的。如果没办法处理层级的话,就只能画线,每帧重新绘制,计算偏移,让线段动起来。

是个蚂蚁的行军路线

1赞

还挺6的,哈哈

这不是我实现的。。。
是我想要的效果。但原作者用的是unity
原文在这

跟【Line】组件应该是一样的,但就是在2D场景下使用,层级渲染有问题,不知道怎么处理

我没看过line,你要是不嫌弃的话发个demo我们一起看看

居然有弯曲

SDGIF_Rusult_1
使用Layout组件能够平铺线段节点,调整属性paddingLeft数值能够让线段动起来。现在是一直向后移动,会出现前面留空,该如何补足前面的留空呢?或者有什么方法绘制蚂蚁线?

用line 不行吗?层级问题可以通过renderTexture来解决


是这篇文档吗?

画线用line,画线需要再ui中穿插可以把line画的线渲染在rendertexture上这样不就解决了遮挡的问题了

好的,我试试。还没接触过rendertexture,研究一下