mirror of
https://gitee.com/ruanwujing/green-pack-cocos
synced 2025-10-09 16:46:17 +00:00
颜色值传参实现无视uv合批变化的sdf圆形裁切
This commit is contained in:
ruanwujing
173
assets/scripts/components/ColorSDFAssembler.ts
Normal file
173
assets/scripts/components/ColorSDFAssembler.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import { Color, IAssembler, IRenderData, RenderData, dynamicAtlasManager } from "cc";
|
||||
import { GPSpriteSDF } from "./GPSpriteSDF";
|
||||
const QUAD_INDICES = Uint16Array.from([0, 1, 2, 1, 3, 2]);
|
||||
|
||||
export const ColorSDFAssembler: IAssembler = {
|
||||
createData (sprite: GPSpriteSDF) {
|
||||
const renderData = sprite.requestRenderData();
|
||||
renderData.dataLength = 4;
|
||||
renderData.resize(4, 6);
|
||||
renderData.chunk.setIndexBuffer(QUAD_INDICES);
|
||||
return renderData;
|
||||
},
|
||||
|
||||
updateRenderData (sprite: GPSpriteSDF) {
|
||||
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: GPSpriteSDF, 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: GPSpriteSDF) {
|
||||
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: GPSpriteSDF) {
|
||||
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: GPSpriteSDF) {
|
||||
if (!sprite.spriteFrame) return;
|
||||
const renderData = sprite.renderData!;
|
||||
const vData = renderData.chunk.vb;
|
||||
const uv = sprite.spriteFrame.uv;
|
||||
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];
|
||||
ColorSDFAssembler.updateColor(sprite);
|
||||
},
|
||||
|
||||
updateColor (sprite: GPSpriteSDF) {
|
||||
const renderData = sprite.renderData!;
|
||||
const vData = renderData.chunk.vb;
|
||||
const uv = sprite.spriteFrame.uv;
|
||||
|
||||
let colorOffset = 5;
|
||||
sprite.color = new Color(uv[4] * 255, uv[5] * 255, (uv[2] - uv[4]) * 255, (uv[3] - uv[5]) * 255);
|
||||
|
||||
for (let i = 0; i < 4; i++, colorOffset += renderData.floatStride) {
|
||||
vData[colorOffset] = uv[4];
|
||||
vData[colorOffset + 1] = uv[5];
|
||||
vData[colorOffset + 2] = uv[2] - uv[4];
|
||||
vData[colorOffset + 3] = uv[3] - uv[5];
|
||||
}
|
||||
},
|
||||
};
|
||||
9
assets/scripts/components/ColorSDFAssembler.ts.meta
Normal file
9
assets/scripts/components/ColorSDFAssembler.ts.meta
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"ver": "4.0.23",
|
||||
"importer": "typescript",
|
||||
"imported": true,
|
||||
"uuid": "734f46af-342f-4e45-9f43-f79a31c566e2",
|
||||
"files": [],
|
||||
"subMetas": {},
|
||||
"userData": {}
|
||||
}
|
||||
273
assets/scripts/components/ColorSDFSprite.ts
Normal file
273
assets/scripts/components/ColorSDFSprite.ts
Normal file
@@ -0,0 +1,273 @@
|
||||
import { _decorator, cclegacy, Component, InstanceMaterialType, Material, Node, NodeEventType, RenderTexture, Sprite, SpriteAtlas, SpriteFrame, UIRenderer } from 'cc';
|
||||
import { BUILD, EDITOR } from 'cc/env';
|
||||
import { ColorSDFAssembler } from './ColorSDFAssembler';
|
||||
const { ccclass, property ,type} = _decorator;
|
||||
enum EventType {
|
||||
SPRITE_FRAME_CHANGED = 'spriteframe-changed',
|
||||
}
|
||||
@ccclass('ColorSDFSprite')
|
||||
export class ColorSDFSprite 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
9
assets/scripts/components/ColorSDFSprite.ts.meta
Normal file
9
assets/scripts/components/ColorSDFSprite.ts.meta
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"ver": "4.0.23",
|
||||
"importer": "typescript",
|
||||
"imported": true,
|
||||
"uuid": "6845dfbf-3532-43ac-ac91-2813b6983882",
|
||||
"files": [],
|
||||
"subMetas": {},
|
||||
"userData": {}
|
||||
}
|
||||
Reference in New Issue
Block a user