@vpmedia/phaser 1.123.0 → 1.125.0

package/src/phaser/display/image.ts

@@ -7,12 +7,14 @@ import { DisplayObject } from './display_object.js';
 import { getBounds, getLocalBounds, renderCanvas, renderWebGL, setTexture } from './sprite_util.js';
 import { Texture } from './webgl/texture.js';
 import type { Game } from '../core/game.js';
-import type { Frame } from '../core/frame.js';
+import { Frame } from '../core/frame.js';
 import type { Matrix } from '../geom/matrix.js';
 import type { RenderSession } from './render_session.js';
+import type { AbstractFilter } from './webgl/abstract_filter.js';
+import type { ImageCacheEntry } from '../core/cache.js';
 
 export class Image extends DisplayObject {
-  public key!: any;
+  public key!: string | number | Texture | null;
   public texture!: Texture;
   declare public _width: number;
   declare public _height: number;
@@ -21,8 +23,8 @@ export class Image extends DisplayObject {
   public tilingTexture!: Texture | null;
   public tintedTexture!: HTMLCanvasElement | null;
   public blendMode!: number;
-  public shader!: object | null;
-  public _frame!: any;
+  public shader!: AbstractFilter | null;
+  public _frame!: Frame | Rectangle | null;
   public pendingDestroy!: boolean;
   declare public events: EventManager;
   public animations!: AnimationManager;
@@ -98,11 +100,11 @@ export class Image extends DisplayObject {
     this.tintedTexture = null;
     this.shader = null;
     this._frame = null;
-    if (this.events) {
+    if (this.events as EventManager | undefined) {
       this.events.destroy();
     }
     this.events = null!;
-    if (this.animations) {
+    if (this.animations as AnimationManager | undefined) {
       this.animations.destroy();
     }
     this.animations = null!;
@@ -117,7 +119,7 @@ export class Image extends DisplayObject {
       this.destroy();
       return;
     }
-    if (!this.exists || !this.parent?.exists) {
+    if (!this.exists || this.parent?.exists !== true) {
       this.renderOrderID = -1;
       return;
     }
@@ -125,7 +127,7 @@ export class Image extends DisplayObject {
       this.game.stage.currentRenderOrderID += 1;
       this.renderOrderID = this.game.stage.currentRenderOrderID;
     }
-    if (this.animations) {
+    if (this.animations as AnimationManager | undefined) {
       this.animations.update();
     }
     for (const child of this.children) {
@@ -161,7 +163,7 @@ export class Image extends DisplayObject {
       this.setTexture(textureKey);
     } else {
       const img = cache.getImage(textureKey ?? undefined, true);
-      if (img) {
+      if (img as ImageCacheEntry | undefined) {
         this.key = img.key;
         this.setTexture(new Texture(img.base));
         this.texture.baseTexture.skipRender = textureKey === '__default';
@@ -180,7 +182,7 @@ export class Image extends DisplayObject {
    * Sets the current frame of this image.
    * @param {Frame} frame - The frame to set.
    */
-  public setFrame(frame: Frame): void {
+  public setFrame(frame: Frame | Rectangle): void {
     this._frame = frame;
     this.texture.frame.x = frame.x;
     this.texture.frame.y = frame.y;
@@ -190,25 +192,26 @@ export class Image extends DisplayObject {
     this.texture.crop.y = frame.y;
     this.texture.crop.width = frame.width;
     this.texture.crop.height = frame.height;
-    if (frame.trimmed) {
+    const trimmed = frame instanceof Frame && frame.trimmed ? frame : null;
+    if (trimmed) {
       if (this.texture.trim) {
-        this.texture.trim.x = frame.spriteSourceSizeX;
-        this.texture.trim.y = frame.spriteSourceSizeY;
-        this.texture.trim.width = frame.sourceSizeW;
-        this.texture.trim.height = frame.sourceSizeH;
+        this.texture.trim.x = trimmed.spriteSourceSizeX;
+        this.texture.trim.y = trimmed.spriteSourceSizeY;
+        this.texture.trim.width = trimmed.sourceSizeW;
+        this.texture.trim.height = trimmed.sourceSizeH;
       } else {
         this.texture.trim = new Rectangle(
-          frame.spriteSourceSizeX,
-          frame.spriteSourceSizeY,
-          frame.sourceSizeW,
-          frame.sourceSizeH
+          trimmed.spriteSourceSizeX,
+          trimmed.spriteSourceSizeY,
+          trimmed.sourceSizeW,
+          trimmed.sourceSizeH
         );
       }
-      this.texture.width = frame.sourceSizeW;
-      this.texture.height = frame.sourceSizeH;
-      this.texture.frame.width = frame.sourceSizeW;
-      this.texture.frame.height = frame.sourceSizeH;
-    } else if (!frame.trimmed && this.texture.trim) {
+      this.texture.width = trimmed.sourceSizeW;
+      this.texture.height = trimmed.sourceSizeH;
+      this.texture.frame.width = trimmed.sourceSizeW;
+      this.texture.frame.height = trimmed.sourceSizeH;
+    } else if (this.texture.trim) {
       this.texture.trim = null;
     }
     if (this.cropRect) {
@@ -281,7 +284,7 @@ export class Image extends DisplayObject {
    * @param {boolean} copy - Whether to copy the rect or use it directly.
    */
   public crop(rect: Rectangle, copy = false): void {
-    if (rect) {
+    if (rect as Rectangle | undefined) {
       if (copy && this.cropRect !== null) {
         this.cropRect.setTo(rect.x, rect.y, rect.width, rect.height);
       } else if (copy && this.cropRect === null) {
@@ -308,13 +311,14 @@ export class Image extends DisplayObject {
     const oldY = this.texture.crop.y;
     const oldW = this.texture.crop.width;
     const oldH = this.texture.crop.height;
+    const frame = this._frame!;
     this._crop = clone(this.cropRect, this._crop);
-    this._crop.x += this._frame.x;
-    this._crop.y += this._frame.y;
-    const cx = Math.max(this._frame.x, this._crop.x);
-    const cy = Math.max(this._frame.y, this._crop.y);
-    const cw = Math.min(this._frame.right, this._crop.right) - cx;
-    const ch = Math.min(this._frame.bottom, this._crop.bottom) - cy;
+    this._crop.x += frame.x;
+    this._crop.y += frame.y;
+    const cx = Math.max(frame.x, this._crop.x);
+    const cy = Math.max(frame.y, this._crop.y);
+    const cw = Math.min(frame.right, this._crop.right) - cx;
+    const ch = Math.min(frame.bottom, this._crop.bottom) - cy;
     this.texture.crop.x = cx;
     this.texture.crop.y = cy;
     this.texture.crop.width = cw;

package/src/phaser/display/sprite_util.ts

@@ -6,6 +6,7 @@ import type { Texture } from './webgl/texture.js';
 import type { Matrix } from '../geom/matrix.js';
 import type { RenderSession } from './render_session.js';
 import { setSmoothing } from './canvas/util.js';
+import type { Rectangle } from '../geom/rectangle.js';
 
 /**
  * Sets the texture of a sprite.
@@ -29,7 +30,7 @@ export const setTexture = (target: Image, texture: Texture, destroyBase = false)
  * @param {object} matrix - The transformation matrix.
  * @returns {Rectangle} The bounds rectangle.
  */
-export const getBounds = (target: Image, matrix: Matrix | null = null) => {
+export const getBounds = (target: Image, matrix: Matrix | null = null): Rectangle => {
   if (target.currentBounds) {
     return target.currentBounds;
   }
@@ -110,7 +111,7 @@ export const getBounds = (target: Image, matrix: Matrix | null = null) => {
  * @param {Image} target - The target image to get local bounds for.
  * @returns {Rectangle} The local bounds rectangle.
  */
-export const getLocalBounds = (target: Image) => {
+export const getLocalBounds = (target: Image): Rectangle => {
   const matrixCache = target.worldTransform;
   target.worldTransform = getIdentityMatrix();
   for (const child of target.children) {
@@ -221,7 +222,7 @@ export const renderCanvas = (
     renderSession.context.globalAlpha = target.worldAlpha;
 
     //  If smoothingEnabled is supported and we need to change the smoothing property for this texture
-    if (renderSession.smoothProperty && renderSession.scaleMode !== target.texture.baseTexture.scaleMode) {
+    if (renderSession.smoothProperty !== null && renderSession.scaleMode !== target.texture.baseTexture.scaleMode) {
       renderSession.scaleMode = target.texture.baseTexture.scaleMode;
       setSmoothing(renderSession.context, renderSession.smoothProperty, renderSession.scaleMode === SCALE_LINEAR);
     }

package/src/phaser/display/text.test.ts

@@ -36,99 +36,102 @@ const createContext2D = (): CanvasRenderingContext2D =>
 const createGame = (): Game =>
   ({
     renderer: { resolution: 1 },
-    cache: { getImage: () => null },
-    add: { existing: (child: unknown) => child },
+    cache: { getImage: (): null => null },
+    add: { existing: (child: unknown): unknown => child },
   }) as unknown as Game;
 
 const createText = (value: string | number): Text => new Text(createGame(), 0, 0, value);
 
-describe('Text', () => {
+describe('Text', (): void => {
   const originalGetContext = HTMLCanvasElement.prototype.getContext;
 
-  beforeAll(() => {
-    HTMLCanvasElement.prototype.getContext = function getContext(this: HTMLCanvasElement, id: string) {
+  beforeAll((): void => {
+    HTMLCanvasElement.prototype.getContext = function getContext(
+      this: HTMLCanvasElement,
+      id: string
+    ): CanvasRenderingContext2D | null {
       return id === '2d' ? createContext2D() : null;
     } as typeof HTMLCanvasElement.prototype.getContext;
   });
 
-  beforeEach(() => {
+  beforeEach((): void => {
     getRegistry().CACHE_MISSING_IMAGE = textureFromCanvas(document.createElement('canvas'));
   });
 
-  afterAll(() => {
+  afterAll((): void => {
     HTMLCanvasElement.prototype.getContext = originalGetContext;
   });
 
-  describe('constructor', () => {
-    it('keeps a string as-is', () => {
+  describe('constructor', (): void => {
+    it('keeps a string as-is', (): void => {
       expect(createText('hello').text).toBe('hello');
     });
 
     // Callers pass numbers straight into game.add.text(). The constructor must coerce:
     // updateText() calls .split() on the value, which throws on a number.
-    it('coerces a number to its string form', () => {
+    it('coerces a number to its string form', (): void => {
       expect(createText(42).text).toBe('42');
     });
 
-    it('coerces zero rather than falling back to the empty string', () => {
+    it('coerces zero rather than falling back to the empty string', (): void => {
       expect(createText(0).text).toBe('0');
     });
 
-    it('coerces a negative number', () => {
+    it('coerces a negative number', (): void => {
       expect(createText(-7).text).toBe('-7');
     });
 
-    it('defaults to the empty string', () => {
+    it('defaults to the empty string', (): void => {
       expect(new Text(createGame(), 0, 0).text).toBe('');
     });
 
-    it('renders a numeric label without throwing', () => {
-      expect(() => createText(2026)).not.toThrow();
+    it('renders a numeric label without throwing', (): void => {
+      expect((): Text => createText(2026)).not.toThrow();
     });
   });
 
-  describe('text setter', () => {
-    it('coerces a number assigned after construction', () => {
+  describe('text setter', (): void => {
+    it('coerces a number assigned after construction', (): void => {
       const text = createText('start');
       text.text = 99;
       expect(text.text).toBe('99');
     });
   });
 
-  describe('fontSize', () => {
+  describe('fontSize', (): void => {
     // A px-suffixed size cannot be read with Number(); it yields NaN. An autofix made exactly that
     // substitution once already.
-    it('reads a px size back as a number', () => {
+    it('reads a px size back as a number', (): void => {
       const text = new Text(createGame(), 0, 0, 'hello', { font: '20px Arial' });
       expect(text.fontSize).toBe(20);
     });
 
-    it('round trips through the setter', () => {
+    it('round trips through the setter', (): void => {
       const text = createText('hello');
       text.fontSize = 32;
       expect(text.fontSize).toBe(32);
     });
 
-    it('reads zero back as zero', () => {
+    it('reads zero back as zero', (): void => {
       const text = createText('hello');
       text.fontSize = 0;
       expect(text.fontSize).toBe(0);
     });
 
-    it('never reports NaN for a styled font', () => {
+    it('never reports NaN for a styled font', (): void => {
       const text = new Text(createGame(), 0, 0, 'hello', { font: 'bold 14px Arial' });
       expect(Number.isNaN(text.fontSize)).toBe(false);
     });
   });
 
-  describe('setText', () => {
-    it('coerces a number', () => {
+  describe('setText', (): void => {
+    it('coerces a number', (): void => {
       const text = createText('start');
       text.setText(123);
       expect(text.text).toBe('123');
     });
 
-    it('returns itself for chaining', () => {
+    it('returns itself for chaining', (): void => {
       const text = createText('start');
       expect(text.setText('next')).toBe(text);
     });

package/src/phaser/display/text.ts

@@ -199,16 +199,16 @@ export class Text extends Image {
       tabs: source.tabs ?? 0,
     };
     const components = this.fontToComponents(resolved.font);
-    if (resolved.fontStyle) {
+    if (resolved.fontStyle !== undefined && resolved.fontStyle !== '') {
       components.fontStyle = resolved.fontStyle;
     }
-    if (resolved.fontVariant) {
+    if (resolved.fontVariant !== undefined && resolved.fontVariant !== '') {
       components.fontVariant = resolved.fontVariant;
     }
-    if (resolved.fontWeight) {
+    if (resolved.fontWeight !== undefined && resolved.fontWeight !== '') {
       components.fontWeight = String(resolved.fontWeight);
     }
-    if (resolved.fontSize) {
+    if (resolved.fontSize !== undefined && resolved.fontSize !== '') {
       const fontSize = typeof resolved.fontSize === 'number' ? `${resolved.fontSize}px` : resolved.fontSize;
       resolved.fontSize = fontSize;
       components.fontSize = fontSize;
@@ -229,10 +229,7 @@ export class Text extends Image {
   public updateText(): void {
     this.texture.baseTexture.resolution = this._res;
     this.context.font = this.style.font;
-    let outputText: any = this.text;
-    if (this.style.wordWrap) {
-      outputText = this.runWordWrap(this.text);
-    }
+    const outputText = this.style.wordWrap ? this.runWordWrap(this.text) : this.text;
     // Split text into lines
     const lines = outputText.split(/(?:\r\n|\r|\n)/);
     // Calculate text width
@@ -250,24 +247,28 @@ export class Text extends Image {
     }
     this._charCount = 0;
     for (let i = 0; i < drawnLines; i += 1) {
+      const currentLine = lines[i]!;
       if (tabs === 0) {
         //  Simple layout (no tabs)
         lineWidth = this.style.strokeThickness + this.padding.x;
-        lineWidth += this.hasCharacterStyles() ? this.measureLine(lines[i]) : this.context.measureText(lines[i]).width;
+        lineWidth += this.hasCharacterStyles()
+          ? this.measureLine(currentLine)
+          : this.context.measureText(currentLine).width;
         // Adjust for wrapped text
         if (this.style.wordWrap) {
           lineWidth -= this.context.measureText(' ').width;
         }
       } else {
         // Complex layout (tabs)
-        const line = lines[i].split(/(?:\t)/);
+        const line = currentLine.split(/(?:\t)/);
         lineWidth = this.padding.x + this.style.strokeThickness;
         if (Array.isArray(tabs)) {
           let tab = 0;
           for (let c = 0; c < line.length; c += 1) {
+            const part = line[c]!;
             const section = this.hasCharacterStyles()
-              ? this.measureLine(line[c])
-              : Math.ceil(this.context.measureText(line[c]).width);
+              ? this.measureLine(part)
+              : Math.ceil(this.context.measureText(part).width);
             if (c > 0) {
               tab += tabs[c - 1]!;
             }
@@ -301,7 +302,7 @@ export class Text extends Image {
     }
     this.canvas.height = height * this._res;
     this.context.scale(this._res, this._res);
-    if (this.style.backgroundColor) {
+    if (this.style.backgroundColor !== null && this.style.backgroundColor !== '') {
       this.context.fillStyle = this.style.backgroundColor;
       this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
     }
@@ -317,6 +318,7 @@ export class Text extends Image {
     this._charCount = 0;
     // Draw text line by line
     for (let i = 0; i < drawnLines; i += 1) {
+      const line = lines[i]!;
       // Split the line by
       linePositionX = this.style.strokeThickness / 2;
       linePositionY = this.style.strokeThickness / 2 + i * lineHeight + fontProperties.ascent;
@@ -333,22 +335,22 @@ export class Text extends Image {
         linePositionY = Math.round(linePositionY);
       }
       if (this.hasCharacterStyles()) {
-        this.updateLine(lines[i], linePositionX, linePositionY);
+        this.updateLine(line, linePositionX, linePositionY);
       } else {
         if (this.style.stroke && this.style.strokeThickness) {
           this.updateShadow(this.style.shadowStroke ?? false);
           if (tabs === 0) {
-            this.context.strokeText(lines[i], linePositionX, linePositionY);
+            this.context.strokeText(line, linePositionX, linePositionY);
           } else {
-            this.renderTabLine(lines[i], linePositionX, linePositionY, false);
+            this.renderTabLine(line, linePositionX, linePositionY, false);
           }
         }
         if (this.style.fill) {
           this.updateShadow(this.style.shadowFill ?? false);
           if (tabs === 0) {
-            this.context.fillText(lines[i], linePositionX, linePositionY);
+            this.context.fillText(line, linePositionX, linePositionY);
           } else {
-            this.renderTabLine(lines[i], linePositionX, linePositionY, true);
+            this.renderTabLine(line, linePositionX, linePositionY, true);
           }
         }
       }
@@ -382,16 +384,17 @@ export class Text extends Image {
         }
       }
     } else {
+      let cursor = x;
       for (const part of text) {
         const section = Math.ceil(this.context.measureText(part).width);
         //  How far to the next tab?
-        snap = snapToCeil(x, tabs);
+        snap = snapToCeil(cursor, tabs);
         if (fill) {
           this.context.fillText(part, snap, y);
         } else {
           this.context.strokeText(part, snap, y);
         }
-        x = snap + section;
+        cursor = snap + section;
       }
     }
   }
@@ -439,24 +442,24 @@ export class Text extends Image {
         const components = this.fontToComponents(this.context.font);
         const charFontStyle = this.fontStyles[this._charCount];
         const charFontWeight = this.fontWeights[this._charCount];
-        if (charFontStyle) {
+        if (charFontStyle !== undefined && charFontStyle !== null && charFontStyle !== '') {
           components.fontStyle = charFontStyle;
         }
-        if (charFontWeight) {
+        if (charFontWeight !== undefined && charFontWeight !== null && charFontWeight !== '') {
           components.fontWeight = charFontWeight;
         }
         this.context.font = this.componentsToFont(components);
       }
       if (this.style.stroke && this.style.strokeThickness) {
         const charStrokeColor = this.strokeColors[this._charCount];
-        if (charStrokeColor) {
+        if (charStrokeColor !== undefined && charStrokeColor !== null && charStrokeColor !== '') {
           this.context.strokeStyle = charStrokeColor;
         }
         this.updateShadow(this.style.shadowStroke ?? false);
       }
       if (this.style.fill) {
         const charFillColor = this.colors[this._charCount];
-        if (charFillColor) {
+        if (charFillColor !== undefined && charFillColor !== null && charFillColor !== '') {
           this.context.fillStyle = charFillColor;
         }
         this.updateShadow(this.style.shadowFill ?? false);
@@ -474,36 +477,37 @@ export class Text extends Image {
    * @param {number} y - The y position to start updating from.
    */
   public updateLine(line: string, x: number, y: number): void {
+    let cursor = x;
     for (const letter of line) {
       if (this.fontWeights.length > 0 || this.fontStyles.length > 0) {
         const components = this.fontToComponents(this.context.font);
         const charFontStyle = this.fontStyles[this._charCount];
         const charFontWeight = this.fontWeights[this._charCount];
-        if (charFontStyle) {
+        if (charFontStyle !== undefined && charFontStyle !== null && charFontStyle !== '') {
           components.fontStyle = charFontStyle;
         }
-        if (charFontWeight) {
+        if (charFontWeight !== undefined && charFontWeight !== null && charFontWeight !== '') {
           components.fontWeight = charFontWeight;
         }
         this.context.font = this.componentsToFont(components);
       }
       if (this.style.stroke && this.style.strokeThickness) {
         const charStrokeColor = this.strokeColors[this._charCount];
-        if (charStrokeColor) {
+        if (charStrokeColor !== undefined && charStrokeColor !== null && charStrokeColor !== '') {
           this.context.strokeStyle = charStrokeColor;
         }
         this.updateShadow(this.style.shadowStroke ?? false);
-        this.context.strokeText(letter, x, y);
+        this.context.strokeText(letter, cursor, y);
       }
       if (this.style.fill) {
         const charFillColor = this.colors[this._charCount];
-        if (charFillColor) {
+        if (charFillColor !== undefined && charFillColor !== null && charFillColor !== '') {
           this.context.fillStyle = charFillColor;
         }
         this.updateShadow(this.style.shadowFill ?? false);
-        this.context.fillText(letter, x, y);
+        this.context.fillText(letter, cursor, y);
       }
-      x += this.context.measureText(letter).width;
+      cursor += this.context.measureText(letter).width;
       this._charCount += 1;
     }
   }
@@ -738,7 +742,7 @@ export class Text extends Image {
    * @param {string} font - The font string to convert.
    * @returns {{ font: string, fontStyle?: string, fontVariant?: string, fontWeight?: string, fontSize?: string, fontFamily?: string }} The font components.
    */
-  public fontToComponents(font: string) {
+  public fontToComponents(font: string): FontComponents {
     // The format is specified in http://www.w3.org/TR/CSS2/fonts.html#font-shorthand:
     // style - normal | italic | oblique | inherit
     // variant - normal | small-caps | inherit
@@ -776,31 +780,20 @@ export class Text extends Image {
    * @returns {string} The font string.
    */
   public componentsToFont(components: FontComponents): string {
-    const parts = [];
-    let v;
-    v = components.fontStyle;
-    if (v && v !== 'normal') {
-      parts.push(v);
-    }
-    v = components.fontVariant;
-    if (v && v !== 'normal') {
-      parts.push(v);
-    }
-    v = components.fontWeight;
-    if (v && v !== 'normal') {
-      parts.push(v);
-    }
-    v = components.fontSize;
-    if (v && v !== 'medium') {
-      parts.push(v);
-    }
-    v = components.fontFamily;
-    if (v) {
-      parts.push(v);
-    }
+    const parts: string[] = [];
+    const push = (value: string | number | undefined, skip: string): void => {
+      if (value !== undefined && value !== '' && value !== skip) {
+        parts.push(String(value));
+      }
+    };
+    push(components.fontStyle, 'normal');
+    push(components.fontVariant, 'normal');
+    push(components.fontWeight, 'normal');
+    push(components.fontSize, 'medium');
+    push(components.fontFamily, '');
     if (parts.length === 0) {
       // Fallback to whatever value the 'font' was
-      parts.push(components.font);
+      parts.push(components.font ?? '');
     }
     return parts.join(' ');
   }
@@ -826,19 +819,20 @@ export class Text extends Image {
    * @param {string[]|string[][]} list - The list of text to parse.
    * @returns {Text} This Text object for chaining.
    */
-  public parseList(list: any): this {
+  public parseList(list: string[] | string[][]): this {
     if (!Array.isArray(list)) {
       return this;
     }
     let s = '';
     for (let i = 0; i < list.length; i += 1) {
-      if (Array.isArray(list[i])) {
-        s += list[i].join('\t');
+      const row = list[i]!;
+      if (Array.isArray(row)) {
+        s += row.join('\t');
         if (i < list.length - 1) {
           s += '\n';
         }
       } else {
-        s += list[i];
+        s += row;
         if (i < list.length - 1) {
           s += '\t';
         }
@@ -963,7 +957,7 @@ export class Text extends Image {
    * @returns {CanvasRenderingContext2D} The font properties canvas context.
    */
   public getFontPropertiesContext(): CanvasRenderingContext2D {
-    if (!globalThis.PhaserRegistry.fontPropertiesContext) {
+    if (globalThis.PhaserRegistry.fontPropertiesContext === undefined) {
       const canvas = this.getFontPropertiesCanvas();
       const context = canvas.getContext('2d', { willReadFrequently: true });
       if (!context) {
@@ -1023,7 +1017,7 @@ export class Text extends Image {
       context.textBaseline = 'alphabetic';
       context.fillStyle = '#000';
       context.fillText('|MÉq', 0, baseline);
-      if (!context.getImageData(0, 0, width, height)) {
+      if (context.getImageData(0, 0, width, height) === null) {
         const fallback: FontProperties = {
           ascent: baseline,
           descent: baseline + 6,
@@ -1166,7 +1160,7 @@ export class Text extends Image {
     if (typeof size === 'number') {
       return size;
     }
-    if (size && /(?:^0$|px$)/.exec(size)) {
+    if (size !== undefined && size !== '' && /(?:^0$|px$)/.exec(size)) {
       // Number() cannot read the value here: the string carries a px suffix.
       // eslint-disable-next-line unicorn/prefer-number-coercion
       return Number.parseInt(size, 10);

package/src/phaser/display/webgl/abstract_filter.ts

@@ -1,31 +1,41 @@
+import { v4 as uuidv4 } from 'uuid';
+import type { NormalShader } from './shader/normal.js';
+
+/** A shader uniform: its GLSL type and the value bound to it. */
+export type ShaderUniform = {
+  type: string;
+  value: unknown;
+};
+
 export class AbstractFilter {
-  [key: string]: any;
-  public passes!: any;
-  public shaders!: any;
-  public dirty!: any;
-  public padding!: any;
-  public uniforms!: any;
-  public fragmentSrc!: any;
+  public _UID: string;
+  public passes: AbstractFilter[];
+  public shaders: NormalShader[];
+  public dirty: boolean;
+  public padding: number;
+  public uniforms: Record<string, ShaderUniform>;
+  public fragmentSrc: string[];
   /**
    * Creates a new AbstractFilter instance.
    * @param {string[]} fragmentSrc - The fragment shader source.
    * @param {object} uniforms - The uniform variables for the shader.
    */
-  public constructor(fragmentSrc: string[], uniforms?: any) {
+  public constructor(fragmentSrc: string[], uniforms?: Record<string, ShaderUniform>) {
+    this._UID = uuidv4();
     this.passes = [this];
     this.shaders = [];
     this.dirty = true;
     this.padding = 0;
     this.uniforms = uniforms ?? {};
-    this.fragmentSrc = fragmentSrc || [];
+    this.fragmentSrc = fragmentSrc;
   }
 
   /**
    * Initializes the filter.
    */
   public syncUniforms(): void {
-    for (let i = 0, j = this.shaders.length; i < j; i += 1) {
-      this.shaders[i].dirty = true;
+    for (const shader of this.shaders) {
+      shader.dirty = true;
     }
   }
 }