@vpmedia/phaser 1.123.0 → 1.124.0

package/src/phaser/display/graphics.ts

@@ -38,6 +38,22 @@ export type GraphicsWebGLBucket = {
   gl: IdentifiedWebGLRenderingContext;
 };
 
+/**
+ * Reports whether a triangle winds towards the viewer. In two dimensions the cross product is a
+ * scalar, so its sign alone says which way the face points.
+ * @param {Point[]} points - The three corners of the triangle, in order.
+ * @returns {boolean} True when the triangle faces the viewer.
+ */
+const isFrontFacing = (points: Point[]): boolean => {
+  const [a, b, c] = points;
+  if (!a || !b || !c) {
+    return true;
+  }
+  const ab = new Point(b.x - a.x, b.y - a.y);
+  const cb = new Point(b.x - c.x, b.y - c.y);
+  return cb.cross(ab) > 0;
+};
+
 export class Graphics extends DisplayObject {
   declare public type: number;
   declare public renderable: boolean;
@@ -887,18 +903,10 @@ export class Graphics extends DisplayObject {
    */
   public drawTriangle(points: Point[], cull = false): void {
     const triangle = new Polygon(points);
-    if (cull) {
-      const [a, b, c] = points as [Point, Point, Point];
-      const cameraToFace = new Point(0 - a.x, 0 - a.y);
-      const ab = new Point(b.x - a.x, b.y - a.y);
-      const cb = new Point(b.x - c.x, b.y - c.y);
-      const faceNormal = cb.cross(ab);
-      if (cameraToFace.dot(faceNormal as any) > 0) {
-        this.drawPolygon(triangle);
-      }
-    } else {
-      this.drawPolygon(triangle);
+    if (cull && !isFrontFacing(points)) {
+      return;
     }
+    this.drawPolygon(triangle);
   }
 
   /**
@@ -907,43 +915,41 @@ export class Graphics extends DisplayObject {
    * @param {number[]} indices - The indices of the vertices to use.
    * @param {boolean} cull - Whether to perform backface culling.
    */
-  public drawTriangles(vertices: any, indices: number[], cull = false): void {
-    const point1 = new Point();
-    const point2 = new Point();
-    const point3 = new Point();
-    let points = [];
+  public drawTriangles(vertices: Point[] | number[], indices: number[], cull = false): void {
+    let points: Point[] = [];
     let i;
     if (!indices) {
       if (vertices[0] instanceof Point) {
-        for (i = 0; i < vertices.length / 3; i += 1) {
-          this.drawTriangle([vertices[i * 3], vertices[i * 3 + 1], vertices[i * 3 + 2]], cull);
+        const corners = vertices as Point[];
+        for (i = 0; i < corners.length / 3; i += 1) {
+          this.drawTriangle([corners[i * 3]!, corners[i * 3 + 1]!, corners[i * 3 + 2]!], cull);
         }
       } else {
-        for (i = 0; i < vertices.length / 6; i += 1) {
-          point1.x = vertices[i * 6 + 0]!;
-          point1.y = vertices[i * 6 + 1]!;
-          point2.x = vertices[i * 6 + 2]!;
-          point2.y = vertices[i * 6 + 3]!;
-          point3.x = vertices[i * 6 + 4]!;
-          point3.y = vertices[i * 6 + 5]!;
-          this.drawTriangle([point1, point2, point3], cull);
+        const coordinates = vertices as number[];
+        for (i = 0; i < coordinates.length / 6; i += 1) {
+          this.drawTriangle(
+            [
+              new Point(coordinates[i * 6 + 0], coordinates[i * 6 + 1]),
+              new Point(coordinates[i * 6 + 2], coordinates[i * 6 + 3]),
+              new Point(coordinates[i * 6 + 4], coordinates[i * 6 + 5]),
+            ],
+            cull
+          );
         }
       }
     } else if (vertices[0] instanceof Point) {
+      const corners = vertices as Point[];
       for (i = 0; i < indices.length / 3; i += 1) {
-        points.push(vertices[indices[i * 3]!]);
-        points.push(vertices[indices[i * 3 + 1]!]);
-        points.push(vertices[indices[i * 3 + 2]!]);
+        points.push(corners[indices[i * 3]!]!, corners[indices[i * 3 + 1]!]!, corners[indices[i * 3 + 2]!]!);
         if (points.length === 3) {
           this.drawTriangle(points, cull);
           points = [];
         }
       }
     } else {
+      const coordinates = vertices as number[];
       for (i = 0; i < indices.length; i += 1) {
-        point1.x = vertices[indices[i]! * 2]!;
-        point1.y = vertices[indices[i]! * 2 + 1]!;
-        points.push(point1.copyTo({} as any));
+        points.push(new Point(coordinates[indices[i]! * 2], coordinates[indices[i]! * 2 + 1]));
         if (points.length === 3) {
           this.drawTriangle(points, cull);
           points = [];

package/src/phaser/display/group.ts

@@ -288,11 +288,11 @@ export class Group extends DisplayObject {
    * @param {boolean} silent - Whether to dispatch events.
    * @returns {boolean} True if the child was removed, false otherwise.
    */
-  public remove(child: any, destroy = true, silent = false): boolean {
+  public remove(child: DisplayObject, destroy = true, silent = false): boolean {
     if (this.children.length === 0 || !this.children.includes(child)) {
       return false;
     }
-    if (!silent && child.events && !child.destroyPhase) {
+    if (!silent && child.events) {
       child.events.onRemovedFromGroup$dispatch(child, this);
     }
     const removed = this.removeChild(child);
@@ -301,7 +301,7 @@ export class Group extends DisplayObject {
       this.next();
     }
     if (destroy && removed) {
-      (removed as any).destroy(true);
+      removed.destroy(true);
     }
     return true;
   }
@@ -323,7 +323,7 @@ export class Group extends DisplayObject {
       }
       const removed = this.removeChild(first);
       if (destroy && removed) {
-        (removed as any).destroy(true, destroyTexture);
+        removed.destroy(true, destroyTexture);
       }
     } while (this.children.length > 0);
     this.cursor = null;

package/src/phaser/display/image.ts

@@ -7,12 +7,13 @@ 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';
 
 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 +22,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;
@@ -180,7 +181,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 +191,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) {
@@ -308,13 +310,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) {

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

@@ -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]!;
             }
@@ -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);
           }
         }
       }
@@ -738,7 +740,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
@@ -826,19 +828,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';
         }

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

@@ -1,17 +1,27 @@
+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;
@@ -24,8 +34,8 @@ export class AbstractFilter {
    * 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;
     }
   }
 }

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

@@ -1,7 +1,6 @@
 export class WebGLBlendModeManager {
-  [key: string]: any;
-  public gl: any = null;
-  public currentBlendMode: any = 99_999;
+  public gl!: WebGLRenderingContext;
+  public currentBlendMode = 99_999;
   /**
    * Creates a new BlendModeManager instance.
    */
@@ -26,7 +25,7 @@ export class WebGLBlendModeManager {
     this.currentBlendMode = blendMode;
     const blendModeWebGL = globalThis.PhaserRegistry.blendModesWebGL[this.currentBlendMode];
     if (blendModeWebGL) {
-      this.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]);
+      this.gl.blendFunc(blendModeWebGL[0]!, blendModeWebGL[1]!);
     }
     return true;
   }
@@ -35,6 +34,6 @@ export class WebGLBlendModeManager {
    * Sets the blend mode for the WebGL context.
    */
   public destroy(): void {
-    this.gl = null;
+    this.gl = null!;
   }
 }