cocos creator 2.4.11

支持材质更新（置灰等需求）setUseMaterial，支持角度旋转，比如正方形，希望是“■”而不是“◆”

export enum SizeMode { 'CUSTOM: 自定义尺寸', 'TRIMMED: 原始尺寸裁剪透明像素', 'RAW: 图片原始尺寸' }
const { ccclass, property, menu } = cc._decorator;

/**assembler 修改mesh，可变换角度，更新材质 */
@ccclass
@menu('Comp/AssemblerTool')
export default class AssemblerTool extends cc.RenderComponent {
    @property({ type: cc.SpriteAtlas, serializable: false, readonly: true, displayName: CC_DEV && 'Atlas' })
    private atlas: cc.SpriteAtlas = null;
    @property
    private _spriteFrame: cc.SpriteFrame = null;
    @property({ type: cc.SpriteFrame, displayName: CC_DEV && 'Sprite Frame' })
    get spriteFrame() { return this._spriteFrame; }
    set spriteFrame(value: cc.SpriteFrame) {
        this._spriteFrame = value;
        this.updateSpriteFrame();
        this.updateSizeMode();
    }
    @property
    private _sizeMode: SizeMode = SizeMode['TRIMMED: 原始尺寸裁剪透明像素'];
    @property({ type: cc.Enum(SizeMode), displayName: CC_DEV && 'Size Mode' })
    get sizeMode() { return this._sizeMode; }
    set sizeMode(value: SizeMode) {
        this._sizeMode = value;
        this.updateSizeMode();
    }
    @property
    private _radius: number = 100;
    @property({ displayName: CC_DEV && '圆角半径' })
    get radius() { return this._radius; }
    set radius(value: number) {
        this._radius = Math.max(value, 0);
        this['setVertsDirty']();
    }
    @property
    private _segment: number = 5;
    @property({ type: cc.Integer, displayName: CC_DEV && '顶点数量' })
    get segment() { return this._segment; }
    set segment(value: number) {
        this._segment = Math.max(value, 3);
        this.createBuffer();
        this.updateIndice();
        this['setVertsDirty']();
        this.node['_renderFlag'] |= cc['RenderFlow'].FLAG_OPACITY_COLOR;
    }

    @property
    private _rotationAngle: number = 0; // 多边形的旋转角度（单位：度）

    @property({ type: cc.Float, displayName: CC_DEV && '旋转角度' })
    get rotationAngle() { return this._rotationAngle; }
    set rotationAngle(value: number) {
        this._rotationAngle = value;
        this['setVertsDirty'](); // 标记顶点数据需要更新
    }

    private renderData = null;                      //提交给GPU的渲染数据，包括vDatas、uintVDatas、iDatas
    private xyOffset: number = 1e8;                 //顶点坐标数据，在顶点数组中的偏移
    private uvOffset: number = 1e8;                 //顶点uv数据，在顶点数组中的偏移
    private colorOffset: number = 1e8;              //顶点颜色数据，在顶点数组中的偏移
    private step: number = 0;                       //单个顶点数据的长度，例如：顶点格式“x,y,u,v,color” step = 5
    private local: number[] = [];                   //顶点本地坐标

    protected _resetAssembler() {
        //定制Assembler
        let assembler = this['_assembler'] = new cc['Assembler']();
        assembler.updateRenderData = this.updateVData.bind(this);
        assembler.updateColor = this.updateColor.bind(this);
        assembler.init(this);
        //定制RenderData
        this.renderData = new cc['RenderData']();
        this.renderData.init(assembler);
        //初始化顶点格式
        let vfmt = assembler.getVfmt();
        let fmtElement = vfmt._elements;
        for (let i = fmtElement.length - 1; i > -1; this.step += fmtElement[i--].bytes >> 2);
        let fmtAttr = vfmt._attr2el;
        this.xyOffset = fmtAttr.a_position.offset >> 2;
        this.uvOffset = fmtAttr.a_uv0.offset >> 2;
        this.colorOffset = fmtAttr.a_color.offset >> 2;
    }

    protected onLoad() {
        this.updateSpriteFrame();
        this.updateSizeMode();
        // this.updateCorner();
        this.createBuffer();
        this.updateIndice();
        this.node.on(cc.Node.EventType.ANCHOR_CHANGED, this.onAnchorChanged, this);
        this.node.on(cc.Node.EventType.SIZE_CHANGED, this.onSizeChanged, this);
    }

    protected onDestroy() {
        super.onDestroy();
        this.node.off(cc.Node.EventType.ANCHOR_CHANGED, this.onAnchorChanged, this);
        this.node.off(cc.Node.EventType.SIZE_CHANGED, this.onSizeChanged, this);
    }

    /**外部调用更新 
     * 设置数据显示 需要等spriteFrame加载完成后调用，可以拿到实际的图片
     * spriteFrame:图片
     * radius: 半径
     * segments: 圆细分段数，越多会越圆滑，但是性能消耗会更大
     * rotationAngle:顶点的偏移角度
     * node:节点，这里需要使用mesheRenderer组件,所以需要把sprite剔除
    */
    public setDataShow(node: cc.Node, radius: number, spriteFrame: cc.SpriteFrame, segments: number,rotationAngle:number = 0) {
        this.enabled = false;
        this.radius = radius;
        this.segment = segments;
        this.rotationAngle = rotationAngle;
        let spF = null;
        const sp = node.getComponent(cc.Sprite);
        if (sp) {
            spF = sp.spriteFrame;
            node.removeComponent(cc.Sprite);
        }

        if (spriteFrame) {
            spF = spriteFrame;
        }
        this.spriteFrame = spF;
        this.scheduleOnce(()=>{
            if(cc.isValid(this.node)){
                this.enabled = true;
            }
        })
    }

    /**更新材质 */
    public setUseMaterial(index: number, material: cc.Material) {
        super.setMaterial(index, material);
        this.updateSpriteFrame();
    }

    //设置顶点个数和三角形个数
    private createBuffer() {
        const vertexCount = this.segment + 1; // 顶点数量（中心点 + 多边形顶点）
        const vertices = new Float32Array(vertexCount * 5); // 每个顶点包含 5 个属性 (x, y, u, v, color)
        const indices = new Uint16Array(this.segment * 3); // 每个三角形 3 个索引
        this.renderData.updateMesh(0, vertices, indices);
    }
    //Web平台，将renderData的数据提交给GPU渲染，vDatas使用世界坐标
    //原生平台并不会执行该函数，引擎另外实现了渲染函数，vDatas使用本地坐标
    private fillBuffers(comp: cc.RenderComponent, renderer: any) {
        let vData = this.renderData.vDatas[0];
        let iData = this.renderData.iDatas[0];
        renderer.worldMatDirty && this.fitXY(vData);
        let buffer = renderer._meshBuffer;
        let offsetInfo = buffer.request(vData.length, iData.length);
        let vertexOffset = offsetInfo.byteOffset >> 2;
        let vbuf = buffer._vData;
        if (vData.length + vertexOffset > vbuf.length) {
            vbuf.set(vData.subarray(0, vbuf.length - vertexOffset), vertexOffset);
        } else {
            vbuf.set(vData, vertexOffset);
        }
        let ibuf = buffer._iData;
        let indiceOffset = offsetInfo.indiceOffset;
        let vertexId = offsetInfo.vertexOffset;
        for (let i = 0, len = iData.length; i < len; ibuf[indiceOffset++] = vertexId + iData[i++]);
    }
    //可以传入cc.SpriteFrame图集帧（支持合批，推荐），或单张图片cc.Texture2D
    private updateSpriteFrame() {
        let frame = this._spriteFrame;
        this['_assembler'].fillBuffers = frame ? this.fillBuffers.bind(this) : () => { };
        let material = this.getMaterial(0) || cc.Material.getBuiltinMaterial('2d-sprite');
        if(material["_material"]&&material["_material"]["_techniqueData"]&&material["_material"]["_techniqueData"].length>0){
            // 获取材质的宏定义列表
            const defines = material["_material"]["_techniqueData"][0]?.defines;
            // 判断宏定义是否存在
            if(defines&&defines.hasOwnProperty("USE_TEXTURE")){
                material.define("USE_TEXTURE", true);
            }
        }
      
        material.setProperty("texture", frame ? frame.getTexture() : null);
        if (CC_EDITOR) {
            if (frame && frame.isValid && frame['_atlasUuid']) {
                cc.assetManager.loadAny(frame['_atlasUuid'], (err, asset: cc.SpriteAtlas) => {
                    this.atlas = asset;
                });
            } else {
                this.atlas = null;
            }
        }
    }
    //根据尺寸模式，修改节点尺寸
    private updateSizeMode() {
        if (!this._spriteFrame) return;
        switch (this._sizeMode) {
            case SizeMode['TRIMMED: 原始尺寸裁剪透明像素']: this.node.setContentSize(this._spriteFrame['_rect'].size); break;
            case SizeMode['RAW: 图片原始尺寸']: this.node.setContentSize(this._spriteFrame['_originalSize']); break;
        }
    }
    //计算VData数据，包括xy,uv,color
    private updateVData() {
        let vData = this.renderData.vDatas[0];
        let local = cc.sys.isNative ? vData : this.local;
        let node = this.node;
        let cw = node.width, ch = node.height;
        let l = -cw * node.anchorX;
        let b = -ch * node.anchorY;
        let radius = Math.min(this._radius, Math.min(cw, ch) / 2);
        // 中心点
        local[0] = 0;
        local[1] = 0;

        // 多边形顶点
        const angleStep = (Math.PI * 2) / this.segment; // 每个角的弧度
        const rotationOffset = (this._rotationAngle * Math.PI) / 180; // 将旋转角度转换为弧度
        for (let i = 0; i < this.segment; i++) {
            const angle = angleStep * i + rotationOffset;
            const x = Math.cos(angle) * radius;
            const y = Math.sin(angle) * radius;
            local[(i + 1) * 5] = x; // 顶点 x
            local[(i + 1) * 5 + 1] = y; // 顶点 y
            local[(i + 1) * 5 + 2] = (x - l) / cw; // UV x
            local[(i + 1) * 5 + 3] = 1 - (y - b) / ch; // UV y
        }
        !cc.sys.isNative && this.fitXY(vData);
        for (let i = 0, len = vData.length, step = this.step; i < len; i += step) {
            vData[i + 2] = (local[i] - l) / cw;
            vData[i + 3] = 1 - (local[i + 1] - b) / ch;
        }
        this.fitUV(vData);
    }
    //自动适配XY，修改顶点xy数据后需主动调用该函数
    private fitXY(vData: Float32Array) {
        let m = this.node['_worldMatrix'].m;
        let m0 = m[0], m1 = m[1], m4 = m[4], m5 = m[5], m12 = m[12], m13 = m[13];
        for (let i = this.xyOffset, len = vData.length, step = this.step, local = this.local; i < len; i += step) {
            let x = local[i], y = local[i + 1];
            vData[i] = x * m0 + y * m4 + m12;
            vData[i + 1] = x * m1 + y * m5 + m13;
        }
    }
    //自动适配UV，修改顶点uv数据后需主动调用该函数
    private fitUV(vData: Float32Array) {
        let frame = this._spriteFrame;
        if (frame === null) return;
        let atlasW = frame['_texture'].width, atlasH = frame['_texture'].height;
        let frameRect = frame['_rect'];
        //计算图集帧在大图中的UV坐标
        if (frame['_rotated']) {//如果图集帧发生旋转，计算UV时需回正
            for (let i = this.uvOffset, id = 0, len = vData.length, step = this.step; i < len; i += step, ++id) {
                let tmp = vData[i];
                vData[i] = ((1 - vData[i + 1]) * frameRect.height + frameRect.x) / atlasW;
                vData[i + 1] = (tmp * frameRect.width + frameRect.y) / atlasH;
            }
        } else {//如果图集帧未发生旋转，正常计算即可
            for (let i = this.uvOffset, id = 0, len = vData.length, step = this.step; i < len; i += step, ++id) {
                vData[i] = (vData[i] * frameRect.width + frameRect.x) / atlasW;
                vData[i + 1] = (vData[i + 1] * frameRect.height + frameRect.y) / atlasH;
            }
        }
    }
    //计算顶点颜色
    private updateColor() {
        let uintVData = this.renderData.uintVDatas[0];
        let color = this.node.color['_val'];
        for (let i = this.colorOffset, len = uintVData.length, step = this.step; i < len; uintVData[i] = color, i += step);
    }
    //计算顶点索引
    private updateIndice() {
        let iData = this.renderData.iDatas[0];

        // 中心点索引为 0，多边形顶点索引为 1~_vertexCount
        for (let i = 0; i < this.segment; i++) {
            iData[i * 3] = 0; // 中心点
            iData[i * 3 + 1] = i + 1; // 当前顶点
            iData[i * 3 + 2] = i === this.segment - 1 ? 1 : i + 2; // 下一个顶点（最后一个顶点连接第一个顶点）
        }
    }
    //修改节点锚点后，更新顶点数据
    private onAnchorChanged() {
        this['setVertsDirty']();
    }
    //修改节点尺寸后，更新顶点数据，并根据sizeMode设置图片宽高
    private onSizeChanged() {
        this['setVertsDirty']();
        if (this._spriteFrame) {
            switch (this._sizeMode) {
                case SizeMode['TRIMMED: 原始尺寸裁剪透明像素']:
                    let rect = this._spriteFrame['_rect'].size;
                    if (this.node.width === rect.width && this.node.height === rect.height) return;
                    break;
                case SizeMode['RAW: 图片原始尺寸']:
                    let size = this._spriteFrame['_originalSize'];
                    if (this.node.width === size.width && this.node.height === size.height) return;
                    break;
            }
        }
        this._sizeMode = SizeMode['CUSTOM: 自定义尺寸'];
    }
}

参考链接：【包教包会】Assembler经典案例第二期——圆角矩形（支持原生、可合批、附Demo源码） - Creator 2.x - Cocos中文社区