Skip to content

Commit

Permalink
optimize frame animation performance (cocos#12209)
Browse files Browse the repository at this point in the history 
* optimize frame animation performance

* refine code
  • Loading branch information
@SantyWang
SantyWang authored Jul 27, 2022
1 parent cce0712 commit 52cd47f
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 68 deletions.
19 changes: 6 additions & 13 deletions cocos/2d/assembler/sprite/simple.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,23 +172,16 @@ export const simple: IAssembler = {
t = ch - appY;
} else {
const frame = sprite.spriteFrame!;
const originSize = frame.getOriginalSize();
const rect = frame.getRect();
const originSize = frame.originalSize;
const ow = originSize.width;
const oh = originSize.height;
const rw = rect.width;
const rh = rect.height;
const offset = frame.getOffset();
const scaleX = cw / ow;
const scaleY = ch / oh;
const trimLeft = offset.x + (ow - rw) / 2;
const trimRight = offset.x - (ow - rw) / 2;
const trimBottom = offset.y + (oh - rh) / 2;
const trimTop = offset.y - (oh - rh) / 2;
l = trimLeft * scaleX - appX;
b = trimBottom * scaleY - appY;
r = cw + trimRight * scaleX - appX;
t = ch + trimTop * scaleY - appY;
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;
Expand Down
32 changes: 31 additions & 1 deletion cocos/2d/assets/sprite-frame.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

import { ccclass } from 'cc.decorator';
import { EDITOR, TEST, BUILD } from 'internal:constants';
import { Color, Mat4, Rect, Size, Vec2, Vec3 } from '../../core/math';
import { Color, Mat4, Rect, Size, Vec2, Vec3, Vec4 } from '../../core/math';
import { Asset } from '../../core/assets/asset';
import { TextureBase } from '../../core/assets/texture-base';
import { legacyCC } from '../../core/global-exports';
Expand Down Expand Up @@ -357,6 +357,7 @@ export class SpriteFrame extends Asset {
if (this._texture) {
this._calculateUV();
}
this._calcTrimmedBorder();
}

/**
Expand All @@ -376,6 +377,7 @@ export class SpriteFrame extends Asset {
if (this._texture) {
this._calculateUV();
}
this._calcTrimmedBorder();
}

/**
Expand All @@ -391,6 +393,7 @@ export class SpriteFrame extends Asset {

set offset (value) {
this._offset.set(value);
this._calcTrimmedBorder();
}

/**
Expand Down Expand Up @@ -534,6 +537,13 @@ export class SpriteFrame extends Asset {
return this._mesh;
}

/**
* @internal
*/
get trimmedBorder () {
return this._trimmedBorder;
}

/**
* @en Vertex list for the mesh type sprite frame
* @zh 网格类型精灵帧的所有顶点列表
Expand All @@ -557,6 +567,8 @@ export class SpriteFrame extends Asset {
// the location of the sprite on rendering texture
protected _rect = new Rect();

protected _trimmedBorder = new Vec4();

// for trimming
protected _offset = new Vec2();

Expand Down Expand Up @@ -823,6 +835,7 @@ export class SpriteFrame extends Asset {
if (calUV && this.texture) {
this._calculateUV();
}
this._calcTrimmedBorder();
}

/**
Expand Down Expand Up @@ -855,6 +868,23 @@ export class SpriteFrame extends Asset {
return true;
}

private _calcTrimmedBorder () {
const ow = this._originalSize.width;
const oh = this._originalSize.height;
const rw = this._rect.width;
const rh = this._rect.height;
const halfTrimmedWidth = (ow - rw) * 0.5;
const halfTrimmedHeight = (oh - rh) * 0.5;
// left
this._trimmedBorder.x = this._offset.x + halfTrimmedWidth;
// right
this._trimmedBorder.y = this._offset.x - halfTrimmedWidth;
// bottom
this._trimmedBorder.z = this._offset.y + halfTrimmedHeight;
// top
this._trimmedBorder.w = this._offset.y - halfTrimmedHeight;
}

/**
* @en Make sure the mesh is available, you should call it before using the mesh
* @zh 确保 mesh 可用，你应该在使用 mesh 之前调用它
Expand Down
3 changes: 0 additions & 3 deletions cocos/2d/components/sprite.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -625,8 +625,6 @@ export class Sprite extends UIRenderer {
this.node._uiProps.uiTransformComp!.setContentSize(rect.width, rect.height);
}
}

this._activateMaterial();
}
}

Expand Down Expand Up @@ -681,7 +679,6 @@ export class Sprite extends UIRenderer {
if (oldFrame && this._type === SpriteType.SLICED) {
oldFrame.off(SpriteFrame.EVENT_UV_UPDATED, this._updateUVs, this);
}
this._updateUVs();

let textureChanged = false;
if (spriteFrame) {
Expand Down
15 changes: 1 addition & 14 deletions cocos/2d/framework/ui-renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,14 +220,6 @@ export class UIRenderer extends Renderer {
return this._useVertexOpacity;
}

// Render data can be submitted even if it is not on the node tree
/**
* @internal
*/
set delegateSrc (value: Node) {
this._delegateSrc = value;
}

/**
* @en The component stencil stage (please do not any modification directly on this object)
* @zh 组件模板缓冲状态 (注意：请不要直接修改它的值)
Expand Down Expand Up @@ -264,10 +256,6 @@ export class UIRenderer extends Renderer {

protected _renderEntity: RenderEntity;

// 特殊渲染节点，给一些不在节点树上的组件做依赖渲染（例如 mask 组件内置两个 graphics 来渲染）
// Special delegate node for the renderer component, it allows standalone component to be rendered as if it's attached to the delegate node
// It's used by graphics stencil component in Mask
protected _delegateSrc: Node | null = null;
protected _instanceMaterialType = -1;
protected _blendState: BlendState = new BlendState();
protected _blendHash = 0;
Expand Down Expand Up @@ -440,8 +428,7 @@ export class UIRenderer extends Renderer {
assert(this.isValid, 'this component should not be invalid!');
}
return this.getMaterial(0) !== null
&& this.enabled
&& (this._delegateSrc ? this._delegateSrc.activeInHierarchy : this.enabledInHierarchy)
&& this._enabled
&& this._color.a > 0;
}

Expand Down
24 changes: 6 additions & 18 deletions cocos/2d/renderer/render-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
THE SOFTWARE.
*/

import { JSB } from 'internal:constants';
import { DEBUG, JSB } from 'internal:constants';
import { director } from '../../core/director';
import { Material } from '../../core/assets/material';
import { TextureBase } from '../../core/assets/texture-base';
Expand All @@ -40,6 +40,7 @@ import { RenderDrawInfo, RenderDrawInfoType } from './render-draw-info';
import { StencilManager } from './stencil-manager';
import { Batcher2D } from './batcher-2d';
import { RenderEntity, RenderEntityType } from './render-entity';
import { assert } from '../../core';

/**
* @deprecated since v3.5.0, this is an engine private interface that will be removed in the future.
Expand Down Expand Up @@ -508,24 +509,11 @@ export class RenderData extends BaseRenderData {

// Hack Do not update pre frame
if (JSB && this.multiOwner === false) {
// for sync vData and iData address to native
//this.setRenderDrawInfoAttributes();
// sync shared buffer to native
this.copyRenderDataToSharedBuffer();
}
}

copyRenderDataToSharedBuffer () {
if (JSB) {
const entity = this._renderDrawInfo;
const sharedBuffer = entity.render2dBuffer;

if (sharedBuffer.length < this.floatStride * this._data.length) {
console.error('Vertex count doesn\'t match.');
return;
if (DEBUG) {
assert(this._renderDrawInfo.render2dBuffer.length === this._floatStride * this._data.length, 'Vertex count doesn\'t match.');
}

entity.fillRender2dBuffer(this._data);
// sync shared buffer to native
this._renderDrawInfo.fillRender2dBuffer(this._data);
}
}

Expand Down
23 changes: 4 additions & 19 deletions cocos/2d/renderer/render-draw-info.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,27 +280,12 @@ export class RenderDrawInfo {
const fillLength = Math.min(this._vbCount, vertexDataArr.length);
let bufferOffset = 0;
for (let i = 0; i < fillLength; i++) {
this.updateVertexBuffer(bufferOffset, vertexDataArr[i]);
const temp = vertexDataArr[i];
this._render2dBuffer[bufferOffset] = temp.x;
this._render2dBuffer[bufferOffset + 1] = temp.y;
this._render2dBuffer[bufferOffset + 2] = temp.z;
bufferOffset += this._stride;
}
}
}

public updateVertexBuffer (bufferOffset: number, vertexData: IRenderData) {
if (JSB) {
if (bufferOffset >= this.render2dBuffer.length) {
return;
}
const temp: IRenderData = vertexData;
this._render2dBuffer[bufferOffset++] = temp.x;
this._render2dBuffer[bufferOffset++] = temp.y;
this._render2dBuffer[bufferOffset++] = temp.z;
this._render2dBuffer[bufferOffset++] = temp.u;
this._render2dBuffer[bufferOffset++] = temp.v;
this._render2dBuffer[bufferOffset++] = temp.color.r;
this._render2dBuffer[bufferOffset++] = temp.color.g;
this._render2dBuffer[bufferOffset++] = temp.color.b;
this._render2dBuffer[bufferOffset++] = temp.color.a;
}
}
}

0 comments on commit 52cd47f

Please sign in to comment.