Add GUI Infrastructure

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

@@ -1,11 +1,20 @@
+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;
+  updateAlpha?(renderer: Renderer, alpha: number): void;
 }

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

@@ -1,5 +1,6 @@
-import { BoundingBox, Matrix } from "@galacean/engine-math";
+import { BoundingBox, 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]);
@@ -74,15 +82,25 @@ 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;
+    }
+  }
+
+  static updateAlpha(renderer: SpriteRenderer, alpha: number = 1): void {
+    const subChunk = renderer._subChunk;
+    const finalAlpha = renderer.color.a * alpha;
+    const vertices = subChunk.chunk.vertices;
+    for (let i = 0, o = subChunk.vertexArea.start + 5; i < 4; ++i, o += 9) {
+      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]);
@@ -118,7 +127,7 @@ export class SlicedSpriteAssembler {
     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 +140,25 @@ 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;
+    }
+  }
+
+  static updateAlpha(renderer: SpriteRenderer, alpha: number = 1): void {
+    const subChunk = renderer._subChunk;
+    const finalAlpha = renderer.color.a * alpha;
+    const vertices = subChunk.chunk.vertices;
+    for (let i = 0, o = subChunk.vertexArea.start + 5; i < 16; ++i, o += 9) {
+      vertices[o + 3] = finalAlpha;
     }
   }
 }

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

@@ -1,7 +1,8 @@
-import { MathUtil, Matrix } from "@galacean/engine-math";
+import { MathUtil, Matrix, Vector2 } from "@galacean/engine-math";
 import { DisorderedArray } from "../../DisorderedArray";
 import { Logger } from "../../base";
 import { StaticInterfaceImplement } from "../../base/StaticInterfaceImplement";
+import { UIImage } from "../../ui";
 import { SpriteTileMode } from "../enums/SpriteTileMode";
 import { Sprite } from "../sprite";
 import { SpriteRenderer } from "../sprite/SpriteRenderer";
@@ -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);
@@ -139,7 +147,7 @@ export class TiledSpriteAssembler {
     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 +181,27 @@ 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;
+    }
+  }
+
+  static updateAlpha(renderer: SpriteRenderer, alpha: number = 1): void {
+    const subChunk = renderer._subChunk;
+    const finalAlpha = renderer.color.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 + 3] = finalAlpha;
     }
   }
 

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

@@ -238,8 +238,9 @@ export class SpriteMask extends Renderer {
   }
 
   protected override _updateBounds(worldBounds: BoundingBox): void {
-    if (this.sprite) {
-      SimpleSpriteAssembler.updatePositions(this);
+    const { sprite } = this;
+    if (sprite) {
+      SimpleSpriteAssembler.updatePositions(this, this.width, this.height, sprite.pivot, this._flipX, this._flipY);
     } else {
       worldBounds.min.set(0, 0, 0);
       worldBounds.max.set(0, 0, 0);
@@ -250,7 +251,8 @@ export class SpriteMask extends Renderer {
    * @inheritdoc
    */
   protected override _render(context: RenderContext): void {
-    if (!this.sprite?.texture || !this.width || !this.height) {
+    const { _sprite: sprite } = this;
+    if (!sprite?.texture || !this.width || !this.height) {
       return;
     }
 
@@ -266,7 +268,7 @@ export class SpriteMask extends Renderer {
 
     // Update position
     if (this._dirtyUpdateFlag & RendererUpdateFlags.WorldVolume) {
-      SimpleSpriteAssembler.updatePositions(this);
+      SimpleSpriteAssembler.updatePositions(this, this.width, this.height, sprite.pivot, this._flipX, this._flipY);
       this._dirtyUpdateFlag &= ~RendererUpdateFlags.WorldVolume;
     }
 

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

@@ -18,6 +18,7 @@ import { SpriteMaskInteraction } from "../enums/SpriteMaskInteraction";
 import { SpriteModifyFlags } from "../enums/SpriteModifyFlags";
 import { SpriteTileMode } from "../enums/SpriteTileMode";
 import { Sprite } from "./Sprite";
+import { ComponentType } from "../../enums/ComponentType";
 
 /**
  * Renders a Sprite for 2D graphics.
@@ -267,6 +268,7 @@ export class SpriteRenderer extends Renderer {
    */
   constructor(entity: Entity) {
     super(entity);
+    this._componentType = ComponentType.SpriteRenderer;
     this.drawMode = SpriteDrawMode.Simple;
     this._dirtyUpdateFlag |= SpriteRendererUpdateFlags.Color;
     this.setMaterial(this._engine._spriteDefaultMaterial);
@@ -315,16 +317,18 @@ export class SpriteRenderer extends Renderer {
   }
 
   protected override _updateBounds(worldBounds: BoundingBox): void {
-    if (this.sprite) {
-      this._assembler.updatePositions(this);
+    const { _sprite: sprite } = this;
+    if (sprite) {
+      this._assembler.updatePositions(this, this.width, this.height, sprite.pivot);
     } else {
       worldBounds.min.set(0, 0, 0);
       worldBounds.max.set(0, 0, 0);
     }
   }
 
   protected override _render(context: RenderContext): void {
-    if (!this.sprite?.texture || !this.width || !this.height) {
+    const { _sprite: sprite } = this;
+    if (!sprite?.texture || !this.width || !this.height) {
       return;
     }
 
@@ -339,7 +343,7 @@ export class SpriteRenderer extends Renderer {
 
     // Update position
     if (this._dirtyUpdateFlag & RendererUpdateFlags.WorldVolume) {
-      this._assembler.updatePositions(this);
+      this._assembler.updatePositions(this, this.width, this.height, sprite.pivot);
       this._dirtyUpdateFlag &= ~RendererUpdateFlags.WorldVolume;
     }