@vpmedia/phaser 1.120.0 → 1.121.0

package/src/phaser/display/canvas/util.test.ts

@@ -0,0 +1,122 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { addToDOM, create, removeFromDOM, setBackgroundColor, setTouchAction, setUserSelect } from './util.js';
+
+const createCanvas = (): HTMLCanvasElement => create(null, 32, 16, '', true);
+
+describe('canvas util', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('create', () => {
+    it('sizes the canvas as asked', () => {
+      const canvas = createCanvas();
+      expect(canvas.width).toBe(32);
+      expect(canvas.height).toBe(16);
+    });
+
+    it('falls back to 256 square for a zero size', () => {
+      const canvas = create(null, 0, 0, '', true);
+      expect(canvas.width).toBe(256);
+      expect(canvas.height).toBe(256);
+    });
+
+    it('assigns the id it is given and leaves an empty one off', () => {
+      expect(create(null, 32, 16, 'stage', true).id).toBe('stage');
+      expect(createCanvas().id).toBe('');
+    });
+
+    it('takes the canvas out of the flow', () => {
+      expect(createCanvas().style.display).toBe('block');
+    });
+  });
+
+  describe('addToDOM', () => {
+    it('appends to the element with the given id', () => {
+      const host = document.createElement('div');
+      host.id = 'host';
+      document.body.append(host);
+      const canvas = createCanvas();
+      addToDOM(canvas, 'host');
+      expect(canvas.parentElement).toBe(host);
+    });
+
+    it('appends to an element passed directly', () => {
+      const host = document.createElement('div');
+      document.body.append(host);
+      const canvas = createCanvas();
+      addToDOM(canvas, host);
+      expect(canvas.parentElement).toBe(host);
+    });
+
+    it('falls back to the body for an id nothing matches', () => {
+      const canvas = createCanvas();
+      addToDOM(canvas, 'nothing-here');
+      expect(canvas.parentElement).toBe(document.body);
+    });
+
+    it('falls back to the body when given no parent', () => {
+      const canvas = createCanvas();
+      addToDOM(canvas, null);
+      expect(canvas.parentElement).toBe(document.body);
+    });
+
+    it('hides the parent overflow unless told not to', () => {
+      const host = document.createElement('div');
+      document.body.append(host);
+      addToDOM(createCanvas(), host);
+      expect(host.style.overflow).toBe('hidden');
+      const other = document.createElement('div');
+      document.body.append(other);
+      addToDOM(createCanvas(), other, false);
+      expect(other.style.overflow).toBe('');
+    });
+
+    it('survives an id that is not a valid bare selector', () => {
+      const host = document.createElement('div');
+      host.id = 'game.container';
+      document.body.append(host);
+      const canvas = createCanvas();
+      addToDOM(canvas, 'game.container');
+      expect(canvas.parentElement).toBe(host);
+    });
+  });
+
+  describe('removeFromDOM', () => {
+    it('detaches an attached canvas', () => {
+      const canvas = createCanvas();
+      document.body.append(canvas);
+      removeFromDOM(canvas);
+      expect(canvas.parentElement).toBeNull();
+    });
+
+    it('leaves a detached canvas alone', () => {
+      const canvas = createCanvas();
+      expect(() => {
+        removeFromDOM(canvas);
+      }).not.toThrow();
+    });
+  });
+
+  describe('style helpers', () => {
+    it('sets the background colour', () => {
+      expect(setBackgroundColor(createCanvas(), 'rgb(255, 0, 0)').style.backgroundColor).toBe('rgb(255, 0, 0)');
+    });
+
+    it('disables touch actions', () => {
+      expect(setTouchAction(createCanvas()).style.getPropertyValue('touch-action')).toBe('none');
+    });
+
+    it('falls back to none for an empty touch action', () => {
+      expect(setTouchAction(createCanvas(), '').style.getPropertyValue('touch-action')).toBe('none');
+    });
+
+    it('disables user selection', () => {
+      expect(setUserSelect(createCanvas()).style.getPropertyValue('user-select')).toBe('none');
+    });
+
+    it('falls back to none for an empty user selection', () => {
+      expect(setUserSelect(createCanvas(), '').style.getPropertyValue('user-select')).toBe('none');
+    });
+  });
+});

package/src/phaser/display/canvas/util.ts

@@ -10,20 +10,20 @@ import { create as createCanvas } from './pool.js';
  * @returns {HTMLCanvasElement} The created HTML canvas element.
  */
 export const create = (
-  parent: any,
+  parent: object | null,
   width: number,
   height: number,
   id: string,
   skipPool: boolean
 ): HTMLCanvasElement => {
-  width = width || 256;
-  height = height || 256;
-  const canvas = skipPool ? document.createElement('canvas') : createCanvas(parent, width, height);
-  if (typeof id === 'string' && id !== '') {
+  const canvasWidth = width || 256;
+  const canvasHeight = height || 256;
+  const canvas = skipPool ? document.createElement('canvas') : createCanvas(parent, canvasWidth, canvasHeight);
+  if (id !== '') {
     canvas.id = id;
   }
-  canvas.width = width;
-  canvas.height = height;
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
   canvas.style.display = 'block';
   return canvas;
 };
@@ -46,9 +46,9 @@ export const setBackgroundColor = (canvas: HTMLCanvasElement, color = 'rgb(0,0,0
  * @returns {HTMLCanvasElement} The modified canvas element.
  */
 export const setTouchAction = (canvas: HTMLCanvasElement, value = 'none'): HTMLCanvasElement => {
-  value = value || 'none';
-  canvas.style.setProperty('-ms-touch-action', value);
-  canvas.style.setProperty('touch-action', value);
+  const touchAction = value || 'none';
+  canvas.style.setProperty('-ms-touch-action', touchAction);
+  canvas.style.setProperty('touch-action', touchAction);
   return canvas;
 };
 
@@ -59,13 +59,13 @@ export const setTouchAction = (canvas: HTMLCanvasElement, value = 'none'): HTMLC
  * @returns {HTMLCanvasElement} The modified canvas element.
  */
 export const setUserSelect = (canvas: HTMLCanvasElement, value = 'none'): HTMLCanvasElement => {
-  value = value || 'none';
-  canvas.style.setProperty('-webkit-touch-callout', value);
-  canvas.style.setProperty('-webkit-user-select', value);
-  canvas.style.setProperty('-khtml-user-select', value);
-  canvas.style.setProperty('-moz-user-select', value);
-  canvas.style.setProperty('-ms-user-select', value);
-  canvas.style.setProperty('user-select', value);
+  const userSelect = value || 'none';
+  canvas.style.setProperty('-webkit-touch-callout', userSelect);
+  canvas.style.setProperty('-webkit-user-select', userSelect);
+  canvas.style.setProperty('-khtml-user-select', userSelect);
+  canvas.style.setProperty('-moz-user-select', userSelect);
+  canvas.style.setProperty('-ms-user-select', userSelect);
+  canvas.style.setProperty('user-select', userSelect);
   canvas.style.setProperty('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
   return canvas;
 };
@@ -77,20 +77,21 @@ export const setUserSelect = (canvas: HTMLCanvasElement, value = 'none'): HTMLCa
  * @param {boolean} overflowHidden - Whether to set overflow hidden on the parent.
  * @returns {HTMLCanvasElement} The added canvas element.
  */
-export const addToDOM = (canvas: HTMLCanvasElement, parent: any, overflowHidden = true): HTMLCanvasElement => {
-  let target;
-  if (parent) {
-    if (typeof parent === 'string') {
-      // hopefully an element ID
-      target = document.querySelector(`#${parent}`);
-    } else if (typeof parent === 'object' && parent.nodeType === 1) {
-      // quick test for a HTMLelement
-      target = parent;
-    }
+export const addToDOM = (
+  canvas: HTMLCanvasElement,
+  parent: string | HTMLElement | null,
+  overflowHidden = true
+): HTMLCanvasElement => {
+  let target: HTMLElement | null = null;
+  if (typeof parent === 'string') {
+    // hopefully an element ID
+    target = document.querySelector<HTMLElement>(`#${CSS.escape(parent)}`);
+  } else if (parent?.nodeType === 1) {
+    target = parent;
   }
   // Fallback, covers an invalid ID and a non HTMLelement object
   target ??= document.body;
-  if (overflowHidden && target.style) {
+  if (overflowHidden) {
     target.style.overflow = 'hidden';
   }
   target.append(canvas);
@@ -102,9 +103,7 @@ export const addToDOM = (canvas: HTMLCanvasElement, parent: any, overflowHidden
  * @param {HTMLCanvasElement} canvas - The canvas element to remove.
  */
 export const removeFromDOM = (canvas: HTMLCanvasElement): void => {
-  if (canvas && canvas.parentNode) {
-    canvas.parentNode.removeChild(canvas);
-  }
+  canvas.remove();
 };
 
 /**
@@ -140,10 +139,10 @@ export const getSmoothingPrefix = (context: CanvasRenderingContext2D): string |
   const VENDORS = ['i', 'webkitI', 'msI', 'mozI', 'oI'];
   // the vendor-prefixed smoothing flags predate the standard property and are absent from lib.dom
   const smoothingFlags = context as unknown as Record<string, boolean | undefined>;
-  for (let i = 0; i < VENDORS.length; i += 1) {
-    const s = `${VENDORS[i]}mageSmoothingEnabled`;
-    if (context && smoothingFlags[s]) {
-      return s;
+  for (const vendor of VENDORS) {
+    const flag = `${vendor}mageSmoothingEnabled`;
+    if (smoothingFlags[flag]) {
+      return flag;
     }
   }
   return null;

package/src/phaser/display/display_object.ts

@@ -6,6 +6,8 @@ import { PI_2 } from '../util/math.js';
 import { renderCanvas, renderWebGL } from './sprite_util.js';
 import type { Graphics } from './graphics.js';
 import type { Game } from '../core/game.js';
+import type { EventManager } from '../core/event_manager.js';
+import type { Image } from './image.js';
 import type { RenderSession } from './render_session.js';
 
 export class DisplayObject {
@@ -43,18 +45,18 @@ export class DisplayObject {
   /** @type {boolean} */
   public ignoreChildInput = false;
   public name: string | null = null;
-  public data: any = null;
+  public data: object | null = null;
   public game!: Game;
   public type!: number;
-  public _cachedSprite!: any;
+  public _cachedSprite!: Image | null;
   public rotationCache!: number;
   public worldRotation!: number;
-  public transformCallback!: any;
-  public transformCallbackContext!: any;
+  public transformCallback!: ((worldTransform: Matrix, parentTransform: Matrix) => void) | null;
+  public transformCallbackContext!: unknown;
   public _width!: number;
   public _height!: number;
   public z!: number;
-  public events!: any;
+  public events!: EventManager;
   public renderOrderID!: number;
   /**
    * Creates a new DisplayObject instance.
@@ -111,9 +113,9 @@ export class DisplayObject {
     /** @type {boolean} */
     this.ignoreChildInput = false;
     /** @type {string | null } */
-    this.name = this.name ?? null;
+    this.name ??= null;
     /** @type {object | null } */
-    this.data = this.data ?? null;
+    this.data ??= null;
     /** @type {Game } */
     this.game = game;
   }
@@ -133,7 +135,7 @@ export class DisplayObject {
     this.exists = false;
     this.renderable = false;
     this.visible = false;
-    // TODO: investigate how to clean up properly object references without breaking delayed tween cleanups.
+    // the geometry below is deliberately left alive: a delayed tween may still be reading it
     /*
     This.position = null;
     this.scale = null;
@@ -177,7 +179,7 @@ export class DisplayObject {
       this.children.splice(index, 0, child);
       return child;
     }
-    throw new Error(`${child}addChildAt: The index ${index} supplied is out of bounds ${this.children.length}`);
+    throw new Error(`addChildAt: index ${index} is out of bounds for ${this.children.length} children`);
   }
 
   /**
@@ -362,10 +364,7 @@ export class DisplayObject {
     //  Set the World values
     this.worldAlpha = this.alpha * p.worldAlpha;
     // This.worldPosition.setTo(wt.tx, wt.ty);
-    this.worldScale.setTo(
-      this.scale.x * Math.sqrt(wt.a * wt.a + wt.c * wt.c),
-      this.scale.y * Math.sqrt(wt.b * wt.b + wt.d * wt.d)
-    );
+    this.worldScale.setTo(this.scale.x * Math.hypot(wt.a, wt.c), this.scale.y * Math.hypot(wt.b, wt.d));
     this.worldRotation = Math.atan2(-wt.c, wt.d);
     // Reset the bounds each time this is called!
     this.currentBounds = null;
@@ -384,23 +383,22 @@ export class DisplayObject {
    * @param {DisplayObject} targetCoordinateSpace - The coordinate space to calculate bounds in.
    * @returns {Rectangle} The bounds rectangle of this display object.
    */
-  public getBounds(targetCoordinateSpace?: any): Rectangle {
-    const isTargetCoordinateSpaceDisplayObject = targetCoordinateSpace && targetCoordinateSpace.contains !== undefined;
+  public getBounds(targetCoordinateSpace?: unknown): Rectangle {
+    const candidate = targetCoordinateSpace as DisplayObject | undefined;
+    const isTargetCoordinateSpaceDisplayObject = Boolean(candidate?.contains);
+    let target = this as DisplayObject;
     let isTargetCoordinateSpaceThisOrParent = true;
-    if (!isTargetCoordinateSpaceDisplayObject) {
-      targetCoordinateSpace = this;
-    } else if (targetCoordinateSpace.contains !== undefined) {
-      isTargetCoordinateSpaceThisOrParent = targetCoordinateSpace.contains(this);
-    } else {
-      isTargetCoordinateSpaceThisOrParent = false;
+    if (isTargetCoordinateSpaceDisplayObject) {
+      target = candidate!;
+      isTargetCoordinateSpaceThisOrParent = target.contains(this);
     }
     let i;
     let matrixCache;
     if (isTargetCoordinateSpaceDisplayObject) {
-      matrixCache = targetCoordinateSpace.worldTransform;
-      targetCoordinateSpace.worldTransform = getIdentityMatrix();
-      for (i = 0; i < targetCoordinateSpace.children.length; i += 1) {
-        targetCoordinateSpace.children[i].updateTransform();
+      matrixCache = target.worldTransform;
+      target.worldTransform = getIdentityMatrix();
+      for (i = 0; i < target.children.length; i += 1) {
+        target.children[i]!.updateTransform();
       }
     }
     let minX = Infinity;
@@ -468,13 +466,13 @@ export class DisplayObject {
     bounds.width = maxX - minX;
     bounds.height = maxY - minY;
     if (isTargetCoordinateSpaceDisplayObject) {
-      targetCoordinateSpace.worldTransform = matrixCache;
-      for (i = 0; i < targetCoordinateSpace.children.length; i += 1) {
-        targetCoordinateSpace.children[i].updateTransform();
+      target.worldTransform = matrixCache!;
+      for (i = 0; i < target.children.length; i += 1) {
+        target.children[i]!.updateTransform();
       }
     }
     if (!isTargetCoordinateSpaceThisOrParent) {
-      const targetCoordinateSpaceBounds = targetCoordinateSpace.getBounds();
+      const targetCoordinateSpaceBounds = target.getBounds();
       bounds.x -= targetCoordinateSpaceBounds.x;
       bounds.y -= targetCoordinateSpaceBounds.y;
     }
@@ -587,7 +585,6 @@ export class DisplayObject {
    * @throws {Error} This method is not implemented yet.
    */
   public generateTexture(): void {
-    // TODO
     throw new Error('display_object.generateTexture() is not implemented');
   }
 
@@ -634,9 +631,7 @@ export class DisplayObject {
   /**
    * Generates a cached sprite for this display object.
    */
-  public generateCachedSprite(): void {
-    // TODO
-  }
+  public generateCachedSprite(): void {}
 
   /**
    * Destroys the cached sprite for this display object.
@@ -665,11 +660,7 @@ export class DisplayObject {
    */
   public set width(value: number) {
     const { width } = this.getLocalBounds();
-    if (width !== 0) {
-      this.scale.x = value / width;
-    } else {
-      this.scale.x = 1;
-    }
+    this.scale.x = width === 0 ? 1 : value / width;
     this._width = value;
   }
 
@@ -687,11 +678,7 @@ export class DisplayObject {
    */
   public set height(value: number) {
     const { height } = this.getLocalBounds();
-    if (height !== 0) {
-      this.scale.y = value / height;
-    } else {
-      this.scale.y = 1;
-    }
+    this.scale.y = height === 0 ? 1 : value / height;
     this._height = value;
   }
 

package/src/phaser/display/graphics.ts

@@ -25,8 +25,11 @@ import type { IdentifiedWebGLRenderingContext } from './webgl/util.js';
 /** Graphics attaches the buffer it draws into onto its cached sprite. */
 export type CachedSprite = Image & { buffer: CanvasBuffer };
 
-/** drawShape only records a current path for polygon data, so its shape is always a Polygon. */
-export type PolygonPath = GraphicsData & { shape: Polygon };
+/** A polygon whose vertices have been flattened to a bare x, y number list. */
+export type FlatPolygon = Omit<Polygon, 'points'> & { points: number[] };
+
+/** drawShape only records a current path for polygon data, and it flattens what it records. */
+export type PolygonPath = Omit<GraphicsData, 'shape'> & { shape: FlatPolygon };
 
 /** Per-context WebGL state cached on a graphics object, keyed by gl context id. */
 export type GraphicsWebGLBucket = {
@@ -110,7 +113,6 @@ export class Graphics extends DisplayObject {
    * Destroys the graphics object and clears all data.
    */
   public override destroy(): void {
-    // TODO
     this.clear();
     super.destroy();
   }
@@ -190,8 +192,8 @@ export class Graphics extends DisplayObject {
     if (points.length === 0) {
       this.moveTo(0, 0);
     }
-    const fromX = points.at(-2);
-    const fromY = points.at(-1);
+    const fromX = points.at(-2)!;
+    const fromY = points.at(-1)!;
     let j = 0;
     for (let i = 1; i <= n; i += 1) {
       j = i / n;
@@ -229,8 +231,8 @@ export class Graphics extends DisplayObject {
     let t2;
     let t3;
     const { points } = this.currentPath!.shape;
-    const fromX = points.at(-2);
-    const fromY = points.at(-1);
+    const fromX = points.at(-2)!;
+    const fromY = points.at(-1)!;
     let j = 0;
     for (let i = 1; i <= n; i += 1) {
       j = i / n;
@@ -267,8 +269,8 @@ export class Graphics extends DisplayObject {
       this.moveTo(x1, y1);
     }
     const { points } = this.currentPath!.shape;
-    const fromX = points.at(-2);
-    const fromY = points.at(-1);
+    const fromX = points.at(-2)!;
+    const fromY = points.at(-1)!;
     const a1 = fromY - y1;
     const b1 = fromX - x1;
     const a2 = y2 - y1;
@@ -373,12 +375,10 @@ export class Graphics extends DisplayObject {
     this.filling = true;
     this.fillColor = color || 0;
     this.fillAlpha = alpha ?? 1;
-    if (this.currentPath) {
-      if (this.currentPath.shape.points.length <= 2) {
-        this.currentPath.fill = this.filling;
-        this.currentPath.fillColor = this.fillColor;
-        this.currentPath.fillAlpha = this.fillAlpha;
-      }
+    if (this.currentPath && this.currentPath.shape.points.length <= 2) {
+      this.currentPath.fill = this.filling;
+      this.currentPath.fillColor = this.fillColor;
+      this.currentPath.fillAlpha = this.fillAlpha;
     }
     return this;
   }
@@ -452,13 +452,7 @@ export class Graphics extends DisplayObject {
    * @returns {Graphics} This Graphics object for chaining.
    */
   public drawPolygon(path: Polygon): this {
-    let points;
-    if (path instanceof Polygon) {
-      points = path.points;
-    } else {
-      points = path;
-    }
-    // TODO
+    const points = path instanceof Polygon ? path.points : path;
     /*
     if (!Array.isArray(points)) {
       points = new Array(arguments.length);
@@ -490,7 +484,6 @@ export class Graphics extends DisplayObject {
    * Generates a texture from the graphics object (not implemented).
    */
   public override generateTexture(): void {
-    // TODO
     this.game.logger.warn('graphics.generateTexture() is not implemented');
   }
 
@@ -700,10 +693,8 @@ export class Graphics extends DisplayObject {
     this.worldTransform.applyInverse(point, tempPoint);
     const { graphicsData } = this;
     for (const data of graphicsData) {
-      if (data.fill && data.shape) {
-        if (data.shape.contains(tempPoint.x, tempPoint.y)) {
-          return true;
-        }
+      if (data.fill && data.shape?.contains(tempPoint.x, tempPoint.y)) {
+        return true;
       }
     }
     return false;
@@ -718,15 +709,13 @@ export class Graphics extends DisplayObject {
     let minY = Infinity;
     let maxY = -Infinity;
     if (this.graphicsData.length > 0) {
-      let shape;
       let points;
       let x;
       let y;
       let w;
       let h;
       for (const data of this.graphicsData) {
-        const { lineWidth } = data;
-        shape = data.shape;
+        const { lineWidth, shape } = data;
         if (shape instanceof Rectangle || shape instanceof RoundedRectangle) {
           x = shape.x - lineWidth / 2;
           y = shape.y - lineWidth / 2;
@@ -737,8 +726,7 @@ export class Graphics extends DisplayObject {
           minY = y < minY ? y : minY;
           maxY = y + h > maxY ? y + h : maxY;
         } else if (shape instanceof Circle) {
-          x = shape.x;
-          y = shape.y;
+          ({ x, y } = shape);
           w = shape.radius + lineWidth / 2;
           h = shape.radius + lineWidth / 2;
           minX = x - w < minX ? x - w : minX;
@@ -746,8 +734,7 @@ export class Graphics extends DisplayObject {
           minY = y - h < minY ? y - h : minY;
           maxY = y + h > maxY ? y + h : maxY;
         } else if (shape instanceof Ellipse) {
-          x = shape.x;
-          y = shape.y;
+          ({ x, y } = shape);
           w = shape.width + lineWidth / 2;
           h = shape.height + lineWidth / 2;
           minX = x - w < minX ? x - w : minX;
@@ -756,14 +743,14 @@ export class Graphics extends DisplayObject {
           maxY = y + h > maxY ? y + h : maxY;
         } else {
           // POLY - assumes points are sequential, not Point objects
-          points = shape.points;
+          ({ points } = shape);
           for (let j = 0; j < points.length; j += 1) {
-            if (points[j] instanceof Point) {
-              x = points[j].x;
-              y = points[j].y;
+            const vertex = points[j];
+            if (vertex instanceof Point) {
+              ({ x, y } = vertex);
             } else {
-              x = points[j];
-              y = points[j + 1];
+              x = vertex!;
+              y = points[j + 1] as number;
               if (j < points.length - 1) {
                 j += 1;
               }
@@ -850,11 +837,9 @@ export class Graphics extends DisplayObject {
    * @returns {GraphicsData} The graphics data for the drawn shape.
    */
   public drawShape(shape: GraphicsShape): GraphicsData {
-    if (this.currentPath) {
-      // check current path!
-      if (this.currentPath.shape.points.length <= 2) {
-        this.graphicsData.pop();
-      }
+    // check current path!
+    if (this.currentPath && this.currentPath.shape.points.length <= 2) {
+      this.graphicsData.pop();
     }
     this.currentPath = null;
     //  Handle mixed-type polygons

package/src/phaser/display/group.ts

@@ -11,7 +11,7 @@ export class Group extends DisplayObject {
   declare public z: number;
   public ignoreDestroy!: boolean;
   public pendingDestroy!: boolean;
-  public classType!: Function;
+  public classType!: new (game: Game, ...args: never[]) => DisplayObject;
   public cursor!: DisplayObject | null;
   public inputEnableChildren!: boolean;
   public onChildInputDown!: Signal;

package/src/phaser/display/image.ts

@@ -146,33 +146,26 @@ export class Image extends DisplayObject {
     frame: string | number | null = 0,
     stopAnimation = true
   ): void {
-    if (key === PENDING_ATLAS) {
-      key = frame ?? 0;
-      frame = 0;
-    } else {
-      frame = frame ?? 0;
-    }
+    const isPendingAtlas = key === PENDING_ATLAS;
+    const textureKey = isPendingAtlas ? (frame ?? 0) : key;
+    const textureFrame = isPendingAtlas ? 0 : (frame ?? 0);
     if (stopAnimation) {
       this.animations.stop();
     }
-    this.key = key;
+    this.key = textureKey;
     this.customRender = false;
     const { cache } = this.game;
     const smoothed = !this.texture.baseTexture.scaleMode;
     let setFrame = true;
-    if (key instanceof Texture) {
-      this.setTexture(key);
+    if (textureKey instanceof Texture) {
+      this.setTexture(textureKey);
     } else {
-      const img = cache.getImage(key ?? undefined, true);
+      const img = cache.getImage(textureKey ?? undefined, true);
       if (img) {
         this.key = img.key;
         this.setTexture(new Texture(img.base));
-        if (key === '__default') {
-          this.texture.baseTexture.skipRender = true;
-        } else {
-          this.texture.baseTexture.skipRender = false;
-        }
-        setFrame = !this.animations.loadFrameData(img.frameData, frame);
+        this.texture.baseTexture.skipRender = textureKey === '__default';
+        setFrame = !this.animations.loadFrameData(img.frameData, textureFrame);
       }
     }
     if (setFrame) {

package/src/phaser/display/sprite_util.ts

@@ -30,7 +30,6 @@ export const setTexture = (target: Image, texture: Texture, destroyBase = false)
  * @returns {Rectangle} The bounds rectangle.
  */
 export const getBounds = (target: Image, matrix: Matrix | null = null) => {
-  // TODO verify
   if (target.currentBounds) {
     return target.currentBounds;
   }