Support GUI

packages/core/src/2d/assembler/ISpriteAssembler.ts

@@ -1,11 +1,19 @@
+import { Vector2 } from "@galacean/engine-math";
 import { Renderer } from "../../Renderer";
 
 /**
  * @internal
  */
 export interface ISpriteAssembler {
   resetData(renderer: Renderer, vertexCount?: number): void;
-  updatePositions?(renderer: Renderer): void;
+  updatePositions?(
+    renderer: Renderer,
+    width: number,
+    height: number,
+    pivot: Vector2,
+    flipX?: boolean,
+    flipY?: boolean
+  ): void;
   updateUVs?(renderer: Renderer): void;
-  updateColor?(renderer: Renderer): void;
+  updateColor?(renderer: Renderer, alpha?: number): void;
 }

packages/core/src/2d/assembler/SimpleSpriteAssembler.ts

@@ -1,5 +1,6 @@
-import { BoundingBox, Matrix } from "@galacean/engine-math";
+import { Matrix, Vector2 } from "@galacean/engine-math";
 import { StaticInterfaceImplement } from "../../base/StaticInterfaceImplement";
+import { UIImage } from "../../ui";
 import { SpriteMask } from "../sprite";
 import { SpriteRenderer } from "../sprite/SpriteRenderer";
 import { ISpriteAssembler } from "./ISpriteAssembler";
@@ -12,7 +13,7 @@ export class SimpleSpriteAssembler {
   static _rectangleTriangles = [0, 1, 2, 2, 1, 3];
   static _worldMatrix = new Matrix();
 
-  static resetData(renderer: SpriteRenderer | SpriteMask): void {
+  static resetData(renderer: SpriteRenderer | SpriteMask | UIImage): void {
     const manager = renderer._getChunkManager();
     const lastSubChunk = renderer._subChunk;
     lastSubChunk && manager.freeSubChunk(lastSubChunk);
@@ -21,16 +22,23 @@ export class SimpleSpriteAssembler {
     renderer._subChunk = subChunk;
   }
 
-  static updatePositions(renderer: SpriteRenderer | SpriteMask): void {
-    const { width, height, sprite } = renderer;
-    const { x: pivotX, y: pivotY } = sprite.pivot;
+  static updatePositions(
+    renderer: SpriteRenderer | SpriteMask | UIImage,
+    width: number,
+    height: number,
+    pivot: Vector2,
+    flipX: boolean = false,
+    flipY: boolean = false
+  ): void {
+    const { sprite } = renderer;
+    const { x: pivotX, y: pivotY } = pivot;
     // Renderer's worldMatrix
     const worldMatrix = SimpleSpriteAssembler._worldMatrix;
     const { elements: wE } = worldMatrix;
     // Parent's worldMatrix
     const { elements: pWE } = renderer.entity.transform.worldMatrix;
-    const sx = renderer.flipX ? -width : width;
-    const sy = renderer.flipY ? -height : height;
+    const sx = flipX ? -width : width;
+    const sy = flipY ? -height : height;
     (wE[0] = pWE[0] * sx), (wE[1] = pWE[1] * sx), (wE[2] = pWE[2] * sx);
     (wE[4] = pWE[4] * sy), (wE[5] = pWE[5] * sy), (wE[6] = pWE[6] * sy);
     (wE[8] = pWE[8]), (wE[9] = pWE[9]), (wE[10] = pWE[10]);
@@ -53,8 +61,6 @@ export class SimpleSpriteAssembler {
       vertices[o + 1] = wE[1] * x + wE[5] * y + wE[13];
       vertices[o + 2] = wE[2] * x + wE[6] * y + wE[14];
     }
-
-    BoundingBox.transform(sprite._getBounds(), worldMatrix, renderer._bounds);
   }
 
   static updateUVs(renderer: SpriteRenderer | SpriteMask): void {
@@ -74,15 +80,16 @@ export class SimpleSpriteAssembler {
     vertices[offset + 28] = top;
   }
 
-  static updateColor(renderer: SpriteRenderer): void {
+  static updateColor(renderer: SpriteRenderer, alpha: number = 1): void {
     const subChunk = renderer._subChunk;
     const { r, g, b, a } = renderer.color;
+    const finalAlpha = a * alpha;
     const vertices = subChunk.chunk.vertices;
     for (let i = 0, o = subChunk.vertexArea.start + 5; i < 4; ++i, o += 9) {
       vertices[o] = r;
       vertices[o + 1] = g;
       vertices[o + 2] = b;
-      vertices[o + 3] = a;
+      vertices[o + 3] = finalAlpha;
     }
   }
 }

packages/core/src/2d/assembler/SlicedSpriteAssembler.ts

@@ -1,5 +1,7 @@
-import { Matrix } from "@galacean/engine-math";
+import { Matrix, Vector2 } from "@galacean/engine-math";
 import { StaticInterfaceImplement } from "../../base/StaticInterfaceImplement";
+import { UIImage } from "../../ui";
+import { SpriteMask } from "../sprite";
 import { SpriteRenderer } from "../sprite/SpriteRenderer";
 import { ISpriteAssembler } from "./ISpriteAssembler";
 
@@ -14,7 +16,7 @@ export class SlicedSpriteAssembler {
   ];
   static _worldMatrix = new Matrix();
 
-  static resetData(renderer: SpriteRenderer): void {
+  static resetData(renderer: SpriteRenderer | UIImage): void {
     const manager = renderer._getChunkManager();
     const lastSubChunk = renderer._subChunk;
     lastSubChunk && manager.freeSubChunk(lastSubChunk);
@@ -23,8 +25,15 @@ export class SlicedSpriteAssembler {
     renderer._subChunk = subChunk;
   }
 
-  static updatePositions(renderer: SpriteRenderer): void {
-    const { width, height, sprite } = renderer;
+  static updatePositions(
+    renderer: SpriteRenderer | SpriteMask | UIImage,
+    width: number,
+    height: number,
+    pivot: Vector2,
+    flipX: boolean = false,
+    flipY: boolean = false
+  ): void {
+    const { sprite } = renderer;
     const { border } = sprite;
     // Update local positions.
     const spritePositions = sprite._getPositions();
@@ -73,16 +82,16 @@ export class SlicedSpriteAssembler {
     }
 
     // Update renderer's worldMatrix.
-    const { x: pivotX, y: pivotY } = renderer.sprite.pivot;
-    const localTransX = renderer.width * pivotX;
-    const localTransY = renderer.height * pivotY;
+    const { x: pivotX, y: pivotY } = pivot;
+    const localTransX = width * pivotX;
+    const localTransY = height * pivotY;
     // Renderer's worldMatrix.
     const worldMatrix = SlicedSpriteAssembler._worldMatrix;
     const { elements: wE } = worldMatrix;
     // Parent's worldMatrix.
     const { elements: pWE } = renderer.entity.transform.worldMatrix;
-    const sx = renderer.flipX ? -1 : 1;
-    const sy = renderer.flipY ? -1 : 1;
+    const sx = flipX ? -1 : 1;
+    const sy = flipY ? -1 : 1;
     (wE[0] = pWE[0] * sx), (wE[1] = pWE[1] * sx), (wE[2] = pWE[2] * sx);
     (wE[4] = pWE[4] * sy), (wE[5] = pWE[5] * sy), (wE[6] = pWE[6] * sy);
     (wE[8] = pWE[8]), (wE[9] = pWE[9]), (wE[10] = pWE[10]);
@@ -111,14 +120,9 @@ export class SlicedSpriteAssembler {
         vertices[o + 2] = wE[2] * rowValue + wE[6] * columnValue + wE[14];
       }
     }
-
-    const { min, max } = renderer._bounds;
-    min.set(row[0], column[0], 0);
-    max.set(row[3], column[3], 0);
-    renderer._bounds.transform(worldMatrix);
   }
 
-  static updateUVs(renderer: SpriteRenderer): void {
+  static updateUVs(renderer: SpriteRenderer | UIImage): void {
     const subChunk = renderer._subChunk;
     const vertices = subChunk.chunk.vertices;
     const spriteUVs = renderer.sprite._getUVs();
@@ -131,15 +135,16 @@ export class SlicedSpriteAssembler {
     }
   }
 
-  static updateColor(renderer: SpriteRenderer): void {
+  static updateColor(renderer: SpriteRenderer | UIImage, alpha: number = 1): void {
     const subChunk = renderer._subChunk;
     const { r, g, b, a } = renderer.color;
+    const finalAlpha = a * alpha;
     const vertices = subChunk.chunk.vertices;
     for (let i = 0, o = subChunk.vertexArea.start + 5; i < 16; ++i, o += 9) {
       vertices[o] = r;
       vertices[o + 1] = g;
       vertices[o + 2] = b;
-      vertices[o + 3] = a;
+      vertices[o + 3] = finalAlpha;
     }
   }
 }

packages/core/src/2d/assembler/TiledSpriteAssembler.ts

@@ -1,11 +1,12 @@
-import { MathUtil, Matrix } from "@galacean/engine-math";
+import { MathUtil, Matrix, Vector2 } from "@galacean/engine-math";
 import { Logger } from "../../base";
 import { StaticInterfaceImplement } from "../../base/StaticInterfaceImplement";
+import { UIImage } from "../../ui";
+import { DisorderedArray } from "../../utils/DisorderedArray";
 import { SpriteTileMode } from "../enums/SpriteTileMode";
 import { Sprite } from "../sprite";
 import { SpriteRenderer } from "../sprite/SpriteRenderer";
 import { ISpriteAssembler } from "./ISpriteAssembler";
-import { DisorderedArray } from "../../utils/DisorderedArray";
 
 /**
  * @internal
@@ -18,7 +19,7 @@ export class TiledSpriteAssembler {
   static _uvRow = new DisorderedArray<number>();
   static _uvColumn = new DisorderedArray<number>();
 
-  static resetData(renderer: SpriteRenderer, vertexCount: number): void {
+  static resetData(renderer: SpriteRenderer | UIImage, vertexCount: number): void {
     if (vertexCount) {
       const manager = renderer._getChunkManager();
       const lastSubChunk = renderer._subChunk;
@@ -33,8 +34,15 @@ export class TiledSpriteAssembler {
     }
   }
 
-  static updatePositions(renderer: SpriteRenderer): void {
-    const { width, height, sprite, tileMode, tiledAdaptiveThreshold: threshold } = renderer;
+  static updatePositions(
+    renderer: SpriteRenderer | UIImage,
+    width: number,
+    height: number,
+    pivot: Vector2,
+    flipX: boolean = false,
+    flipY: boolean = false
+  ): void {
+    const { sprite, tileMode, tiledAdaptiveThreshold: threshold } = renderer;
     // Calculate row and column
     const { _posRow: posRow, _posColumn: posColumn, _uvRow: uvRow, _uvColumn: uvColumn } = TiledSpriteAssembler;
     const maxVertexCount = renderer._getChunkManager().maxVertexCount;
@@ -64,16 +72,16 @@ export class TiledSpriteAssembler {
           );
     TiledSpriteAssembler.resetData(renderer, vertexCount);
     // Update renderer's worldMatrix
-    const { x: pivotX, y: pivotY } = renderer.sprite.pivot;
-    const localTransX = renderer.width * pivotX;
-    const localTransY = renderer.height * pivotY;
+    const { x: pivotX, y: pivotY } = pivot;
+    const localTransX = width * pivotX;
+    const localTransY = height * pivotY;
     // Renderer's worldMatrix
     const { _worldMatrix: worldMatrix } = TiledSpriteAssembler;
     const { elements: wE } = worldMatrix;
     // Parent's worldMatrix
     const { elements: pWE } = renderer.entity.transform.worldMatrix;
-    const sx = renderer.flipX ? -1 : 1;
-    const sy = renderer.flipY ? -1 : 1;
+    const sx = flipX ? -1 : 1;
+    const sy = flipY ? -1 : 1;
     let wE0: number, wE1: number, wE2: number;
     let wE4: number, wE5: number, wE6: number;
     (wE0 = wE[0] = pWE[0] * sx), (wE1 = wE[1] = pWE[1] * sx), (wE2 = wE[2] = pWE[2] * sx);
@@ -132,14 +140,9 @@ export class TiledSpriteAssembler {
         o += 36;
       }
     }
-
-    const { min, max } = renderer._bounds;
-    min.set(posRow.get(0), posColumn.get(0), 0);
-    max.set(posRow.get(rowLength), posColumn.get(columnLength), 0);
-    renderer._bounds.transform(worldMatrix);
   }
 
-  static updateUVs(renderer: SpriteRenderer): void {
+  static updateUVs(renderer: SpriteRenderer | UIImage): void {
     const { _posRow: posRow, _posColumn: posColumn, _uvRow: uvRow, _uvColumn: uvColumn } = TiledSpriteAssembler;
     const rowLength = posRow.length - 1;
     const columnLength = posColumn.length - 1;
@@ -173,16 +176,17 @@ export class TiledSpriteAssembler {
     }
   }
 
-  static updateColor(renderer: SpriteRenderer): void {
+  static updateColor(renderer: SpriteRenderer | UIImage, alpha: number = 1): void {
     const subChunk = renderer._subChunk;
     const { r, g, b, a } = renderer.color;
+    const finalAlpha = a * alpha;
     const vertices = subChunk.chunk.vertices;
     const vertexArea = subChunk.vertexArea;
     for (let i = 0, o = vertexArea.start + 5, n = vertexArea.size / 9; i < n; ++i, o += 9) {
       vertices[o] = r;
       vertices[o + 1] = g;
       vertices[o + 2] = b;
-      vertices[o + 3] = a;
+      vertices[o + 3] = finalAlpha;
     }
   }
 

packages/core/src/2d/sprite/Sprite.ts

@@ -1,10 +1,11 @@
-import { BoundingBox, MathUtil, Rect, Vector2, Vector4 } from "@galacean/engine-math";
+import { MathUtil, Rect, Vector2, Vector4 } from "@galacean/engine-math";
 import { Engine } from "../../Engine";
 import { UpdateFlagManager } from "../../UpdateFlagManager";
 import { ReferResource } from "../../asset/ReferResource";
+import { ignoreClone } from "../../clone/CloneManager";
 import { Texture2D } from "../../texture/Texture2D";
-import { SpriteModifyFlags } from "../enums/SpriteModifyFlags";
 import { SpriteAtlas } from "../atlas/SpriteAtlas";
+import { SpriteModifyFlags } from "../enums/SpriteModifyFlags";
 
 /**
  * 2D sprite.
@@ -20,7 +21,6 @@ export class Sprite extends ReferResource {
 
   private _positions: Vector2[] = [new Vector2(), new Vector2(), new Vector2(), new Vector2()];
   private _uvs: Vector2[] = [new Vector2(), new Vector2(), new Vector2(), new Vector2()];
-  private _bounds: BoundingBox = new BoundingBox();
 
   private _texture: Texture2D = null;
   private _atlasRotated: boolean = false;
@@ -248,14 +248,6 @@ export class Sprite extends ReferResource {
     return this._uvs;
   }
 
-  /**
-   * @internal
-   */
-  _getBounds(): BoundingBox {
-    this._dirtyUpdateFlag & SpriteUpdateFlags.positions && this._updatePositions();
-    return this._bounds;
-  }
-
   /**
    * @internal
    */
@@ -279,7 +271,6 @@ export class Sprite extends ReferResource {
     this._region = null;
     this._pivot = null;
     this._border = null;
-    this._bounds = null;
     this._atlas = null;
     this._texture = null;
     this._updateFlagManager = null;
@@ -324,10 +315,6 @@ export class Sprite extends ReferResource {
     positions[1].set(right, bottom);
     positions[2].set(left, top);
     positions[3].set(right, top);
-
-    const { min, max } = this._bounds;
-    min.set(left, bottom, 0);
-    max.set(right, top, 0);
     this._dirtyUpdateFlag &= ~SpriteUpdateFlags.positions;
   }
 
@@ -382,6 +369,7 @@ export class Sprite extends ReferResource {
     this._updateFlagManager.dispatch(type);
   }
 
+  @ignoreClone
   private _onRegionChange(): void {
     const { _region: region } = this;
     // @ts-ignore
@@ -397,10 +385,12 @@ export class Sprite extends ReferResource {
     region._onValueChanged = this._onRegionChange;
   }
 
+  @ignoreClone
   private _onPivotChange(): void {
     this._dispatchSpriteChange(SpriteModifyFlags.pivot);
   }
 
+  @ignoreClone
   private _onBorderChange(): void {
     const { _border: border } = this;
     // @ts-ignore