【求助】官方例子里面的colorRect使用求助

Creator 2.x
#1

本人不懂openGL，研究了半天没明白怎么让倾斜的渐变色变成垂直的。感觉核心代码应该在这里：
_updateVertexData (matrix) {
let verts = this._vData,
uintV = this._uintVData;
let w = this.node.width,
h = this.node.height,
appx = w * this.node.anchorX,
appy = h * this.node.anchorY;
let a = matrix.m00, b = matrix.m01, c = matrix.m04, d = matrix.m05,
tx = matrix.m12, ty = matrix.m13;

    let x, y, i = 0;
    
    // bl
    x = -appx;
    y = -appy;
    verts[i++] = x * a + y * c + tx;
    verts[i++] = x * b + y * d + ty;
    // color._val is rgba packed into uint32
    uintV[i++] = this.blColor._val;
    // br
    x = w - appx;
    y = -appy;
    verts[i++] = x * a + y * c + tx;
    verts[i++] = x * b + y * d + ty;
    uintV[i++] = this.brColor._val;
    // tl
    x = -appx;
    y = h - appy;
    verts[i++] = x * a + y * c + tx;
    verts[i++] = x * b + y * d + ty;
    uintV[i++] = this.tlColor._val;
    // tr
    x = w - appx;
    y = h - appy;
    verts[i++] = x * a + y * c + tx;
    verts[i++] = x * b + y * d + ty;
    uintV[i++] = this.trColor._val;

    this._vb.update(0, verts);
},

哪位大佬指点下谢谢！

#2

关于这个colorRect的例子，没有找到任何的官方教程，想深入研究下完全不知道怎么做！
目前只能把bl 和br 设置为一样的，tl 和 tr设置为一样的，来达到两种颜色垂直渐变的效果。

另外 目前 还想把 正方形 画成 圆角矩形， 也不知道该怎么做。。

#3

image.png825×426 15.4 KB

你看源码那里的x和y，分别对应四个角，你把左下和左上颜色一样，右下和右上颜色一样就是竖着了

#4

谢谢！ 我现在也是这么处理的，虽然无法设置渐变点的位置，但是也能满足使用了。 另外我想请教能否有办法将这个例子里面的正方形变成圆角矩形？ 官方没文档，啃内核RenderComponent 太吃力了。。

#5

cc.Graphics 虽然能画出圆角矩形，但是填充只能是单色的。
因为项目中大量用到了这种圆角矩形的背景而且颜色渐变的，所以需要画出来才行， 因为一张渐变色的背景图片资源100多k ，太大了。。

#6

目前的思路是使用shader来控制这个渐变的正方形，使其具有圆角。 但是现有的shader都是针对的Sprite，而Sprite拥有texture， 但是这个渐变正方形虽然也是继承自RenderComponent 却不是用texture 实现的。 如果尝试更改是否能有希望实现想要的功能（具有圆角的渐变矩形） ？ 论坛的各位大大和 引擎开发的大大们，希望你们有空时候能方便回复下。

一句话概括： shader能否对非texture的RenderComponent子类 生效？

关键代码如下：

colorRect的声明：
this._material = new renderEngine.SpriteMaterial();
this._material.useTexture = false; //未采用texture方式渲染