拼图

assets/scripts/components/ColorSDFAssembler.ts

@@ -59,11 +59,11 @@ export const ColorSDFAssembler: IAssembler = {
 
         const renderData = sprite.renderData!;
         const chunk = renderData.chunk;
-        if (sprite["_flagChangedVersion"] !== sprite.node["_flagChangedVersion"] || renderData.vertDirty) {
+        if (sprite["_flagChangedVersion"] !== sprite.node["flagChangedVersion"] || renderData.vertDirty) {
             // const vb = chunk.vertexAccessor.getVertexBuffer(chunk.bufferId);
             this.updateWorldVerts(sprite, chunk);
             renderData.vertDirty = false;
-            sprite["_flagChangedVersion"] = sprite.node["_flagChangedVersion"];
+            sprite["_flagChangedVersion"] = sprite.node["flagChangedVersion"];
         }
 
         // quick version
@@ -158,6 +158,8 @@ export const ColorSDFAssembler: IAssembler = {
     updateColor (sprite: GPSpriteSDF) {
         const renderData = sprite.renderData!;
         const vData = renderData.chunk.vb;
+        if (!sprite.spriteFrame)
+            return
         const uv = sprite.spriteFrame.uv;
 
         let colorOffset = 5;

assets/scripts/components/GPRoundBoxAssembler.ts

@@ -107,6 +107,13 @@ export const GPRoundBoxAssembler: IAssembler = {
             this.updateWorldVerts(sprite, chunk);
             renderData.vertDirty = false;
         }
+        if (sprite["_flagChangedVersion"] !== sprite.node["flagChangedVersion"] || renderData.vertDirty) {
+            // const vb = chunk.vertexAccessor.getVertexBuffer(chunk.bufferId);
+            this.updateWorldVerts(sprite, chunk);
+            renderData.vertDirty = false;
+            sprite["_flagChangedVersion"] = sprite.node["flagChangedVersion"];
+        }
+
 
         // quick version
         const bid = chunk.bufferId;

assets/scripts/puzzle/PuzzleAssembler.ts

@@ -0,0 +1,174 @@
+import { Color, IAssembler, IRenderData, RenderData, dynamicAtlasManager } from "cc";
+import { PuzzleSprite } from "./PuzzleSprite";
+const QUAD_INDICES = Uint16Array.from([0, 1, 2, 1, 3, 2]);
+
+export const PuzzleAssembler: IAssembler = {
+    createData (sprite: PuzzleSprite) {
+        const renderData = sprite.requestRenderData();
+        renderData.dataLength = 4;
+        renderData.resize(4, 6);
+        renderData.chunk.setIndexBuffer(QUAD_INDICES);
+        return renderData;
+    },
+
+    updateRenderData (sprite: PuzzleSprite) {
+        const frame = sprite.spriteFrame;
+
+        dynamicAtlasManager.packToDynamicAtlas(sprite, frame);
+        this.updateUVs(sprite);// dirty need
+        //this.updateColor(sprite);// dirty need
+
+        const renderData = sprite.renderData;
+        if (renderData && frame) {
+            if (renderData.vertDirty) {
+                this.updateVertexData(sprite);
+            }
+            renderData.updateRenderData(sprite, frame);
+        }
+    },
+
+    updateWorldVerts (sprite: PuzzleSprite, chunk: { vb: any; }) {
+        const renderData = sprite.renderData!;
+        const vData = chunk.vb;
+
+        const dataList: IRenderData[] = renderData.data;
+        const node = sprite.node;
+        const m = node.worldMatrix;
+
+        const stride = renderData.floatStride;
+        let offset = 0;
+        const length = dataList.length;
+        for (let i = 0; i < length; i++) {
+            const curData = dataList[i];
+            const x = curData.x;
+            const y = curData.y;
+            let rhw = m.m03 * x + m.m07 * y + m.m15;
+            rhw = rhw ? 1 / rhw : 1;
+
+            offset = i * stride;
+            vData[offset + 0] = (m.m00 * x + m.m04 * y + m.m12) * rhw;
+            vData[offset + 1] = (m.m01 * x + m.m05 * y + m.m13) * rhw;
+            vData[offset + 2] = (m.m02 * x + m.m06 * y + m.m14) * rhw;
+        }
+    },
+
+    fillBuffers (sprite: PuzzleSprite) {
+        if (sprite === null) {
+            return;
+        }
+
+        const renderData = sprite.renderData!;
+        const chunk = renderData.chunk;
+
+        if (sprite["_flagChangedVersion"] !== sprite.node["flagChangedVersion"] || renderData.vertDirty) {
+            // const vb = chunk.vertexAccessor.getVertexBuffer(chunk.bufferId);
+            this.updateWorldVerts(sprite, chunk);
+            renderData.vertDirty = false;
+            sprite["_flagChangedVersion"] = sprite.node["flagChangedVersion"];
+        }
+
+        // quick version
+        const vidOrigin = chunk.vertexOffset;
+        const meshBuffer = chunk.meshBuffer;
+        const ib = chunk.meshBuffer.iData;
+        let indexOffset = meshBuffer.indexOffset;
+
+        const vid = vidOrigin;
+
+        // left bottom
+        ib[indexOffset++] = vid;
+        // right bottom
+        ib[indexOffset++] = vid + 1;
+        // left top
+        ib[indexOffset++] = vid + 2;
+
+        // right bottom
+        ib[indexOffset++] = vid + 1;
+        // right top
+        ib[indexOffset++] = vid + 3;
+        // left top
+        ib[indexOffset++] = vid + 2;
+
+        // IndexOffset should add 6 when vertices of a rect are visited.
+        meshBuffer.indexOffset += 6;
+        // slow version
+        // renderer.switchBufferAccessor().appendIndices(chunk);
+    },
+
+    updateVertexData (sprite: PuzzleSprite) {
+        const renderData: RenderData | null = sprite.renderData;
+        if (!renderData) {
+            return;
+        }
+
+        const uiTrans = sprite.node._uiProps.uiTransformComp!;
+        const dataList: IRenderData[] = renderData.data;
+        const cw = uiTrans.width;
+        const ch = uiTrans.height;
+        const appX = uiTrans.anchorX * cw;
+        const appY = uiTrans.anchorY * ch;
+        let l = 0;
+        let b = 0;
+        let r = 0;
+        let t = 0;
+
+        const frame = sprite.spriteFrame!;
+        const originSize = frame.originalSize;
+        const ow = originSize.width;
+        const oh = originSize.height;
+        const scaleX = cw / ow;
+        const scaleY = ch / oh;
+        const trimmedBorder = frame.trimmedBorder;
+        l = trimmedBorder.x * scaleX - appX;
+        b = trimmedBorder.z * scaleY - appY;
+        r = cw + trimmedBorder.y * scaleX - appX;
+        t = ch + trimmedBorder.w * scaleY - appY;
+
+
+        dataList[0].x = l;
+        dataList[0].y = b;
+
+        dataList[1].x = r;
+        dataList[1].y = b;
+
+        dataList[2].x = l;
+        dataList[2].y = t;
+
+        dataList[3].x = r;
+        dataList[3].y = t;
+
+        renderData.vertDirty = true;
+    },
+
+    updateUVs (sprite: PuzzleSprite) {
+        const renderData = sprite.renderData!;
+        const vData = renderData.chunk.vb;
+        const uv = sprite.uv;
+        // 01 11 00 10
+        vData[3] = uv[0];
+        vData[4] = uv[1];
+        vData[12] = uv[2];
+        vData[13] = uv[3];
+        vData[21] = uv[4];
+        vData[22] = uv[5];
+        vData[30] = uv[6];
+        vData[31] = uv[7];
+    },
+
+    updateColor (sprite: PuzzleSprite) {
+        const renderData = sprite.renderData!;
+        const vData = renderData.chunk.vb;
+        let colorOffset = 5;
+        const color = sprite.color;
+        const colorR = color.r / 255;
+        const colorG = color.g / 255;
+        const colorB = color.b / 255;
+        const colorA = color.a / 255;
+        for (let i = 0; i < renderData.dataLength; i++, colorOffset += renderData.floatStride) {
+            vData[colorOffset] = colorR;
+            vData[colorOffset + 1] = colorG;
+            vData[colorOffset + 2] = colorB;
+            vData[colorOffset + 3] = colorA;
+        }
+    },
+};

assets/scripts/puzzle/PuzzleAssembler.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "a02a1645-241e-4702-988b-34876ae0ae10",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/puzzle/PuzzleSprite.ts

@@ -0,0 +1,310 @@
+import { _decorator, CCInteger, cclegacy, Color, Component, InstanceMaterialType, Material, Node, NodeEventType, RenderTexture, Sprite, SpriteAtlas, SpriteFrame, UIRenderer } from 'cc';
+import { BUILD, EDITOR } from 'cc/env';
+import { PuzzleAssembler } from './PuzzleAssembler';
+const { ccclass, property ,type, executionOrder} = _decorator;
+enum EventType {
+    SPRITE_FRAME_CHANGED = 'spriteframe-changed',
+}
+@ccclass('PuzzleSprite')
+export class PuzzleSprite extends UIRenderer {
+    // 尺寸模式，可以看枚举原本定义的地方有注释说明
+    @property({serializable:true})
+    protected _sizeMode = Sprite.SizeMode.TRIMMED;
+    @type(Sprite.SizeMode)
+    get sizeMode () {
+        return this._sizeMode;
+    }
+    set sizeMode (value) {
+        if (this._sizeMode === value) {
+            return;
+        }
+
+        this._sizeMode = value;
+        if (value !== Sprite.SizeMode.CUSTOM) {
+            this._applySpriteSize();
+        }
+    }
+    // 图集
+    @property({serializable:true})
+    protected _atlas: SpriteAtlas | null = null;
+    @type(SpriteAtlas)
+    get spriteAtlas () {
+        return this._atlas;
+    }
+    set spriteAtlas (value) {
+        if (this._atlas === value) {
+            return;
+        }
+        this._atlas = value;
+    }
+
+    @property({serializable:true})
+    protected _spriteFrame: SpriteFrame | null = null;
+    @type(SpriteFrame)
+    get spriteFrame () {
+        return this._spriteFrame;
+    }
+    set spriteFrame (value) {
+        if (this._spriteFrame === value) {
+            return;
+        }
+
+        const lastSprite = this._spriteFrame;
+        this._spriteFrame = value;
+        this.markForUpdateRenderData();
+        this._applySpriteFrame(lastSprite);
+        if (EDITOR) {
+            this.node.emit(EventType.SPRITE_FRAME_CHANGED, this);
+        }
+    }
+
+    private _row =1
+    @property({type:CCInteger, step:1, min:1})
+    public get row(){return this._row}
+    public set row(v){this._row = v; 
+        this._updateUVs()
+    }
+
+    private _column = 1
+    @property({type:CCInteger, step:1, min:1})
+    public get column(){return this._column}
+    public set column(v){this._column = v; 
+        this._updateUVs()
+    }
+
+    private _rowMax = 4
+    @property({type:CCInteger, step:1, min:1})
+    public get rowMax(){return this._rowMax}
+    public set rowMax(v){this._rowMax = v; 
+        this._updateUVs()
+    }
+
+    private _columnMax = 4
+    @property({type:CCInteger, step:1, min:1})
+    public get columnMax(){return this._columnMax}
+    public set columnMax(v){this._columnMax = v; 
+        this._updateUVs()
+    }
+
+    public uv= [0,1, 1,1, 0,0, 1,0]
+
+    onLoad(): void {
+        this._flushAssembler();
+    }
+
+    public __preload () {
+        this.changeMaterialForDefine();
+        super.__preload();
+
+        if (EDITOR) {
+            this._resized();
+            this.node.on(NodeEventType.SIZE_CHANGED, this._resized, this);
+        }
+    }
+
+    public onEnable () {
+        console.log("onEnable")
+        super.onEnable();
+
+        // Force update uv, material define, active material, etc
+        this._activateMaterial();
+        const spriteFrame = this._spriteFrame;
+        if (this.spriteFrame)
+            this._updateUVs();
+    }
+
+    public onDestroy () {
+        if (EDITOR) {
+            this.node.off(NodeEventType.SIZE_CHANGED, this._resized, this);
+        }
+        super.onDestroy();
+    }
+
+    /**
+     * @en
+     * Quickly switch to other sprite frame in the sprite atlas.
+     * If there is no atlas, the switch fails.
+     *
+     * @zh
+     * 选取使用精灵图集中的其他精灵。
+     * @param name @en Name of the spriteFrame to switch. @zh 要切换的 spriteFrame 名字。
+     */
+    public changeSpriteFrameFromAtlas (name: string) {
+        if (!this._atlas) {
+            console.warn('SpriteAtlas is null.');
+            return;
+        }
+        const sprite = this._atlas.getSpriteFrame(name);
+        this.spriteFrame = sprite;
+    }
+
+    /**
+     * @deprecated Since v3.7.0, this is an engine private interface that will be removed in the future.
+     */
+    public changeMaterialForDefine () {
+        let texture;
+        const lastInstanceMaterialType = this._instanceMaterialType;
+        if (this._spriteFrame) {
+            texture = this._spriteFrame.texture;
+        }
+        let value = false;
+        if (texture instanceof cclegacy.TextureBase) {
+            const format = texture.getPixelFormat();
+            value = (format === cclegacy.TextureBase.PixelFormat.RGBA_ETC1 || format === cclegacy.TextureBase.PixelFormat.RGB_A_PVRTC_4BPPV1 || format === cclegacy.TextureBase.PixelFormat.RGB_A_PVRTC_2BPPV1);
+        }
+
+        if (value) {
+            this._instanceMaterialType = InstanceMaterialType.USE_ALPHA_SEPARATED;
+        } else {
+            this._instanceMaterialType = InstanceMaterialType.ADD_COLOR_AND_TEXTURE;
+        }
+        if (lastInstanceMaterialType !== this._instanceMaterialType) {
+            // this.updateMaterial();
+            // d.ts里没有注上这个函数，直接调用会表红。
+            this["updateMaterial"]();
+        }
+    }
+
+    protected _updateBuiltinMaterial () {
+        let mat = super._updateBuiltinMaterial();
+        if (this.spriteFrame && this.spriteFrame.texture instanceof RenderTexture) {
+            const defines = { SAMPLE_FROM_RT: true, ...mat.passes[0].defines };
+            const renderMat = new Material();
+            renderMat.initialize({
+                effectAsset: mat.effectAsset,
+                defines,
+            });
+            mat = renderMat;
+        }
+        return mat;
+    }
+
+    protected _render (render) {
+        render.commitComp(this, this.renderData, this._spriteFrame, this._assembler, null);
+    }
+
+    protected _canRender () {
+        if (!super._canRender()) {
+            return false;
+        }
+
+        const spriteFrame = this._spriteFrame;
+        if (!spriteFrame || !spriteFrame.texture) {
+            return false;
+        }
+
+        return true;
+    }
+
+    protected resetAssembler() {
+        this._assembler = null;
+        this._flushAssembler();
+    }
+    protected _flushAssembler () {
+        const assembler = PuzzleAssembler;
+
+        if (this._assembler !== assembler) {
+            this.destroyRenderData();
+            this._assembler = assembler;
+        }
+
+
+        if (!this._renderData) {
+            if (this._assembler && this._assembler.createData) {
+                this._renderData = this._assembler.createData(this);
+                this._renderData!.material = this.getRenderMaterial(0);
+                this.markForUpdateRenderData();
+                if (this.spriteFrame) {
+                    this._assembler.updateRenderData(this);
+                }
+                this._updateColor();
+            }
+        }
+    }
+
+    private _applySpriteSize () {
+        if (this._spriteFrame) {
+            if (BUILD || !this._spriteFrame.isDefault) {
+                if (Sprite.SizeMode.RAW === this._sizeMode) {
+                    const size = this._spriteFrame.originalSize;
+                    this.node._uiProps.uiTransformComp!.setContentSize(size);
+                } else if (Sprite.SizeMode.TRIMMED === this._sizeMode) {
+                    const rect = this._spriteFrame.rect;
+                    this.node._uiProps.uiTransformComp!.setContentSize(rect.width, rect.height);
+                }
+            }
+            this.markForUpdateRenderData(true)
+            this._assembler.updateRenderData(this);
+        }
+    }
+
+    private _resized () {
+        if (!EDITOR) {
+            return;
+        }
+
+        if (this._spriteFrame) {
+            const actualSize = this.node._uiProps.uiTransformComp!.contentSize;
+            let expectedW = actualSize.width;
+            let expectedH = actualSize.height;
+            if (this._sizeMode === Sprite.SizeMode.RAW) {
+                const size = this._spriteFrame.originalSize;
+                expectedW = size.width;
+                expectedH = size.height;
+            } else if (this._sizeMode === Sprite.SizeMode.TRIMMED) {
+                const rect = this._spriteFrame.rect;
+                expectedW = rect.width;
+                expectedH = rect.height;
+            }
+
+            if (expectedW !== actualSize.width || expectedH !== actualSize.height) {
+                this._sizeMode = Sprite.SizeMode.CUSTOM;
+            }
+        }
+    }
+
+    private _activateMaterial () {
+        const spriteFrame = this._spriteFrame;
+        const material = this.getRenderMaterial(0);
+        if (spriteFrame) {
+            if (material) {
+                this.markForUpdateRenderData();
+            }
+        }
+
+        if (this.renderData) {
+            this.renderData.material = material;
+        }
+    }
+
+    private _updateUVs () {
+        const _uv= [0,1, 1,1, 0,0, 1,0]
+        const blockWidth = 1 / this.columnMax
+        const blockHeight = 1 / this.rowMax
+        for (let i = 0; i < 4; i++) {
+            this.uv[i * 2] = (this.column - 1) * blockWidth + _uv[i * 2] * blockWidth;
+            this.uv[i * 2 + 1] = (this.row - 1) * blockHeight + _uv[i * 2 + 1] * blockHeight;
+        }
+        if (this._assembler) {
+            this._assembler.updateUVs(this);
+        }
+    }
+
+    private _applySpriteFrame (oldFrame: SpriteFrame | null) {
+        const spriteFrame = this._spriteFrame;
+
+        let textureChanged = false;
+        if (spriteFrame) {
+            if (!oldFrame || oldFrame.texture !== spriteFrame.texture) {
+                textureChanged = true;
+            }
+            if (textureChanged) {
+                if (this.renderData) this.renderData.textureDirty = true;
+                this.changeMaterialForDefine();
+            }
+            this._applySpriteSize();
+        }
+    }
+}
+
+

assets/scripts/puzzle/PuzzleSprite.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "f238c61b-614b-4131-9d46-b431ae863374",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/puzzle/PuzzleSpriteTest.ts

@@ -0,0 +1,274 @@
+import { _decorator, cclegacy, Component, InstanceMaterialType, Material, Node, NodeEventType, RenderTexture, Sprite, SpriteAtlas, SpriteFrame, UIRenderer } from 'cc';
+import { BUILD, EDITOR } from 'cc/env';
+import { PuzzleAssembler } from './PuzzleAssembler';
+import { ColorSDFAssembler } from '../components/ColorSDFAssembler';
+const { ccclass, property ,type} = _decorator;
+enum EventType {
+    SPRITE_FRAME_CHANGED = 'spriteframe-changed',
+}
+@ccclass('PuzzleSpriteTest')
+export class PuzzleSpriteTest extends UIRenderer {
+    // 尺寸模式，可以看枚举原本定义的地方有注释说明
+    @property({serializable:true})
+    protected _sizeMode = Sprite.SizeMode.TRIMMED;
+    @type(Sprite.SizeMode)
+    get sizeMode () {
+        return this._sizeMode;
+    }
+    set sizeMode (value) {
+        if (this._sizeMode === value) {
+            return;
+        }
+
+        this._sizeMode = value;
+        if (value !== Sprite.SizeMode.CUSTOM) {
+            this._applySpriteSize();
+        }
+    }
+    // 图集
+    @property({serializable:true})
+    protected _atlas: SpriteAtlas | null = null;
+    @type(SpriteAtlas)
+    get spriteAtlas () {
+        return this._atlas;
+    }
+    set spriteAtlas (value) {
+        if (this._atlas === value) {
+            return;
+        }
+        this._atlas = value;
+    }
+
+    @property({serializable:true})
+    protected _spriteFrame: SpriteFrame | null = null;
+    @type(SpriteFrame)
+    get spriteFrame () {
+        return this._spriteFrame;
+    }
+    set spriteFrame (value) {
+        if (this._spriteFrame === value) {
+            return;
+        }
+
+        const lastSprite = this._spriteFrame;
+        this._spriteFrame = value;
+        this.markForUpdateRenderData();
+        this._applySpriteFrame(lastSprite);
+        if (EDITOR) {
+            this.node.emit(EventType.SPRITE_FRAME_CHANGED, this);
+        }
+    }
+
+    onLoad(): void {
+        this._flushAssembler();
+    }
+
+    public __preload () {
+        this.changeMaterialForDefine();
+        super.__preload();
+
+        if (EDITOR) {
+            this._resized();
+            this.node.on(NodeEventType.SIZE_CHANGED, this._resized, this);
+        }
+    }
+
+    public onEnable () {
+        super.onEnable();
+
+        // Force update uv, material define, active material, etc
+        this._activateMaterial();
+        const spriteFrame = this._spriteFrame;
+        if (spriteFrame) {
+            this._updateUVs();
+        }
+    }
+
+    public onDestroy () {
+        if (EDITOR) {
+            this.node.off(NodeEventType.SIZE_CHANGED, this._resized, this);
+        }
+        super.onDestroy();
+    }
+
+    /**
+     * @en
+     * Quickly switch to other sprite frame in the sprite atlas.
+     * If there is no atlas, the switch fails.
+     *
+     * @zh
+     * 选取使用精灵图集中的其他精灵。
+     * @param name @en Name of the spriteFrame to switch. @zh 要切换的 spriteFrame 名字。
+     */
+    public changeSpriteFrameFromAtlas (name: string) {
+        if (!this._atlas) {
+            console.warn('SpriteAtlas is null.');
+            return;
+        }
+        const sprite = this._atlas.getSpriteFrame(name);
+        this.spriteFrame = sprite;
+    }
+
+    /**
+     * @deprecated Since v3.7.0, this is an engine private interface that will be removed in the future.
+     */
+    public changeMaterialForDefine () {
+        let texture;
+        const lastInstanceMaterialType = this._instanceMaterialType;
+        if (this._spriteFrame) {
+            texture = this._spriteFrame.texture;
+        }
+        let value = false;
+        if (texture instanceof cclegacy.TextureBase) {
+            const format = texture.getPixelFormat();
+            value = (format === cclegacy.TextureBase.PixelFormat.RGBA_ETC1 || format === cclegacy.TextureBase.PixelFormat.RGB_A_PVRTC_4BPPV1 || format === cclegacy.TextureBase.PixelFormat.RGB_A_PVRTC_2BPPV1);
+        }
+
+        if (value) {
+            this._instanceMaterialType = InstanceMaterialType.USE_ALPHA_SEPARATED;
+        } else {
+            this._instanceMaterialType = InstanceMaterialType.ADD_COLOR_AND_TEXTURE;
+        }
+        if (lastInstanceMaterialType !== this._instanceMaterialType) {
+            // this.updateMaterial();
+            // d.ts里没有注上这个函数，直接调用会表红。
+            this["updateMaterial"]();
+        }
+    }
+
+    protected _updateBuiltinMaterial () {
+        let mat = super._updateBuiltinMaterial();
+        if (this.spriteFrame && this.spriteFrame.texture instanceof RenderTexture) {
+            const defines = { SAMPLE_FROM_RT: true, ...mat.passes[0].defines };
+            const renderMat = new Material();
+            renderMat.initialize({
+                effectAsset: mat.effectAsset,
+                defines,
+            });
+            mat = renderMat;
+        }
+        return mat;
+    }
+
+    protected _render (render) {
+        render.commitComp(this, this.renderData, this._spriteFrame, this._assembler, null);
+    }
+
+    protected _canRender () {
+        if (!super._canRender()) {
+            return false;
+        }
+
+        const spriteFrame = this._spriteFrame;
+        if (!spriteFrame || !spriteFrame.texture) {
+            return false;
+        }
+
+        return true;
+    }
+
+    protected resetAssembler() {
+        this._assembler = null;
+        this._flushAssembler();
+    }
+    protected _flushAssembler () {
+        const assembler = ColorSDFAssembler;
+
+        if (this._assembler !== assembler) {
+            this.destroyRenderData();
+            this._assembler = assembler;
+        }
+
+
+        if (!this._renderData) {
+            if (this._assembler && this._assembler.createData) {
+                this._renderData = this._assembler.createData(this);
+                this._renderData!.material = this.getRenderMaterial(0);
+                this.markForUpdateRenderData();
+                if (this.spriteFrame) {
+                    this._assembler.updateRenderData(this);
+                }
+                this._updateColor();
+            }
+        }
+    }
+
+    private _applySpriteSize () {
+        if (this._spriteFrame) {
+            if (BUILD || !this._spriteFrame.isDefault) {
+                if (Sprite.SizeMode.RAW === this._sizeMode) {
+                    const size = this._spriteFrame.originalSize;
+                    this.node._uiProps.uiTransformComp!.setContentSize(size);
+                } else if (Sprite.SizeMode.TRIMMED === this._sizeMode) {
+                    const rect = this._spriteFrame.rect;
+                    this.node._uiProps.uiTransformComp!.setContentSize(rect.width, rect.height);
+                }
+            }
+            this.markForUpdateRenderData(true)
+            this._assembler.updateRenderData(this);
+        }
+    }
+
+    private _resized () {
+        if (!EDITOR) {
+            return;
+        }
+
+        if (this._spriteFrame) {
+            const actualSize = this.node._uiProps.uiTransformComp!.contentSize;
+            let expectedW = actualSize.width;
+            let expectedH = actualSize.height;
+            if (this._sizeMode === Sprite.SizeMode.RAW) {
+                const size = this._spriteFrame.originalSize;
+                expectedW = size.width;
+                expectedH = size.height;
+            } else if (this._sizeMode === Sprite.SizeMode.TRIMMED) {
+                const rect = this._spriteFrame.rect;
+                expectedW = rect.width;
+                expectedH = rect.height;
+            }
+
+            if (expectedW !== actualSize.width || expectedH !== actualSize.height) {
+                this._sizeMode = Sprite.SizeMode.CUSTOM;
+            }
+        }
+    }
+
+    private _activateMaterial () {
+        const spriteFrame = this._spriteFrame;
+        const material = this.getRenderMaterial(0);
+        if (spriteFrame) {
+            if (material) {
+                this.markForUpdateRenderData();
+            }
+        }
+
+        if (this.renderData) {
+            this.renderData.material = material;
+        }
+    }
+
+    private _updateUVs () {
+        if (this._assembler) {
+            this._assembler.updateUVs(this);
+        }
+    }
+
+    private _applySpriteFrame (oldFrame: SpriteFrame | null) {
+        const spriteFrame = this._spriteFrame;
+
+        let textureChanged = false;
+        if (spriteFrame) {
+            if (!oldFrame || oldFrame.texture !== spriteFrame.texture) {
+                textureChanged = true;
+            }
+            if (textureChanged) {
+                if (this.renderData) this.renderData.textureDirty = true;
+                this.changeMaterialForDefine();
+            }
+            this._applySpriteSize();
+        }
+    }
+}
+
+

assets/scripts/puzzle/PuzzleSpriteTest.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "bff05d5e-35b8-40ca-8ceb-939a046440e8",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}