@vpmedia/phaser 1.111.0 → 1.113.0

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

@@ -1,11 +1,12 @@
 import { SCALE_LINEAR } from '../../core/const.js';
 
 export class FilterTexture {
-  [key: string]: any;
-  gl!: any;
-  frameBuffer!: any;
-  texture!: any;
-  renderBuffer!: any;
+  public width!: number;
+  public height!: number;
+  public gl!: any;
+  public frameBuffer!: any;
+  public texture!: any;
+  public renderBuffer!: any;
   /**
    * Creates a new FilterTexture instance.
    * @param {WebGLRenderingContext} gl - The WebGL rendering context.
@@ -13,11 +14,11 @@ export class FilterTexture {
    * @param {number} height - The height of the filter texture.
    * @param {number} scaleMode - The scale mode to use.
    */
-  constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number) {
+  public constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number) {
     this.gl = gl;
     this.frameBuffer = gl.createFramebuffer();
     this.texture = gl.createTexture();
-    scaleMode = scaleMode || window.PhaserRegistry.TEXTURE_SCALE_MODE;
+    scaleMode = scaleMode || globalThis.PhaserRegistry.TEXTURE_SCALE_MODE;
     gl.bindTexture(gl.TEXTURE_2D, this.texture);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === SCALE_LINEAR ? gl.LINEAR : gl.NEAREST);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === SCALE_LINEAR ? gl.LINEAR : gl.NEAREST);
@@ -36,8 +37,8 @@ export class FilterTexture {
   /**
    * Destroys this filter texture and cleans up resources.
    */
-  clear() {
-    const gl = this.gl;
+  public clear() {
+    const { gl } = this;
     gl.clearColor(0, 0, 0, 0);
     gl.clear(gl.COLOR_BUFFER_BIT);
   }
@@ -47,13 +48,13 @@ export class FilterTexture {
    * @param {number} width - The new width of the filter texture.
    * @param {number} height - The new height of the filter texture.
    */
-  resize(width: number, height: number) {
+  public resize(width: number, height: number) {
     if (this.width === width && this.height === height) {
       return;
     }
     this.width = width;
     this.height = height;
-    const gl = this.gl;
+    const { gl } = this;
     gl.bindTexture(gl.TEXTURE_2D, this.texture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
     // update the stencil buffer width and height
@@ -64,8 +65,8 @@ export class FilterTexture {
   /**
    * Updates the resolution of this filter texture.
    */
-  destroy() {
-    const gl = this.gl;
+  public destroy() {
+    const { gl } = this;
     gl.deleteFramebuffer(this.frameBuffer);
     gl.deleteTexture(this.texture);
     this.frameBuffer = null;

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

@@ -4,16 +4,15 @@ import { hex2rgb } from '../../util/math.js';
 import { triangulate } from './earcut.js';
 import { GraphicsData } from './graphics_data.js';
 import type { IdentifiedWebGLRenderingContext } from './util.js';
+import type { Graphics } from '../graphics.js';
 
 /**
  * Updates the graphics data for WebGL rendering.
  * @returns {number} The number of vertices in the graphics data.
  */
 export const getStencilBufferLimit = () => {
-  if (!window.PhaserRegistry.stencilBufferLimit) {
-    window.PhaserRegistry.stencilBufferLimit = 6;
-  }
-  return window.PhaserRegistry.stencilBufferLimit;
+  globalThis.PhaserRegistry.stencilBufferLimit ??= 6;
+  return globalThis.PhaserRegistry.stencilBufferLimit;
 };
 
 /**
@@ -21,10 +20,8 @@ export const getStencilBufferLimit = () => {
  * @returns {object[]} The graphics data array.
  */
 export const getGraphicsDataPool = () => {
-  if (!window.PhaserRegistry.graphicsDataPool) {
-    window.PhaserRegistry.graphicsDataPool = [];
-  }
-  return window.PhaserRegistry.graphicsDataPool;
+  globalThis.PhaserRegistry.graphicsDataPool ??= [];
+  return globalThis.PhaserRegistry.graphicsDataPool;
 };
 
 /**
@@ -35,14 +32,14 @@ export const getGraphicsDataPool = () => {
  */
 export const switchMode = (webGL: any, type: number) => {
   let webGLData;
-  if (!webGL.data.length) {
-    webGLData = getGraphicsDataPool().pop() || new GraphicsData(webGL.gl);
+  if (webGL.data.length === 0) {
+    webGLData = getGraphicsDataPool().pop() ?? new GraphicsData(webGL.gl);
     webGLData.mode = type;
     webGL.data.push(webGLData);
   } else {
-    webGLData = webGL.data[webGL.data.length - 1];
+    webGLData = webGL.data.at(-1);
     if (webGLData.mode !== type || type === 1) {
-      webGLData = getGraphicsDataPool().pop() || new GraphicsData(webGL.gl);
+      webGLData = getGraphicsDataPool().pop() ?? new GraphicsData(webGL.gl);
       webGLData.mode = type;
       webGL.data.push(webGLData);
     }
@@ -59,7 +56,7 @@ export const switchMode = (webGL: any, type: number) => {
 export const buildLine = (graphicsData: any, webGLData: GraphicsData) => {
   // TODO OPTIMISE!
   let i = 0;
-  let points = graphicsData.points;
+  let { points } = graphicsData;
   if (points.length === 0) {
     return;
   }
@@ -71,21 +68,21 @@ export const buildLine = (graphicsData: any, webGLData: GraphicsData) => {
   }
   // get first and last point.. figure out the middle!
   const firstPoint = new Point(points[0], points[1]);
-  let lastPoint = new Point(points[points.length - 2], points[points.length - 1]);
+  let lastPoint = new Point(points.at(-2), points.at(-1));
   // if the first point is the last point - gonna have issues :)
   if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) {
     // need to clone as we are going to slightly modify the shape..
-    points = points.slice();
+    points = [...points];
     points.pop();
     points.pop();
-    lastPoint = new Point(points[points.length - 2], points[points.length - 1]);
+    lastPoint = new Point(points.at(-2), points.at(-1));
     const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) * 0.5;
     const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) * 0.5;
     points.unshift(midPointX, midPointY);
     points.push(midPointX, midPointY);
   }
   const verts = webGLData.points;
-  const indices = webGLData.indices;
+  const { indices } = webGLData;
   const length = points.length / 2;
   let indexCount = points.length;
   let indexStart = verts.length / 6;
@@ -226,10 +223,10 @@ export const buildRectangle = (graphicsData: any, webGLData: GraphicsData) => {
   // need to convert points to a nice regular data
   //
   const rectData = graphicsData.shape;
-  const x = rectData.x;
-  const y = rectData.y;
-  const width = rectData.width;
-  const height = rectData.height;
+  const { x } = rectData;
+  const { y } = rectData;
+  const { width } = rectData;
+  const { height } = rectData;
 
   if (graphicsData.fill) {
     const color = hex2rgb(graphicsData.fillColor);
@@ -238,7 +235,7 @@ export const buildRectangle = (graphicsData: any, webGLData: GraphicsData) => {
     const g = color[1] * alpha;
     const b = color[2] * alpha;
     const verts = webGLData.points;
-    const indices = webGLData.indices;
+    const { indices } = webGLData;
     const vertPos = verts.length / 6;
     // start
     verts.push(x, y);
@@ -313,11 +310,11 @@ export const quadraticBezierCurve = (
  */
 export const buildRoundedRectangle = (graphicsData: any, webGLData: GraphicsData) => {
   const rrectData = graphicsData.shape;
-  const x = rrectData.x;
-  const y = rrectData.y;
-  const width = rrectData.width;
-  const height = rrectData.height;
-  const radius = rrectData.radius;
+  const { x } = rrectData;
+  const { y } = rrectData;
+  const { width } = rrectData;
+  const { height } = rrectData;
+  const { radius } = rrectData;
   let recPoints = [];
   recPoints.push(x, y + radius);
   recPoints = recPoints.concat(quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
@@ -333,15 +330,15 @@ export const buildRoundedRectangle = (graphicsData: any, webGLData: GraphicsData
     const g = color[1] * alpha;
     const b = color[2] * alpha;
     const verts = webGLData.points;
-    const indices = webGLData.indices;
+    const { indices } = webGLData;
     const vecPos = verts.length / 6;
     const triangles = triangulate(recPoints, null, 2);
     for (let i = 0; i < triangles.length; i += 3) {
-      indices.push(triangles[i] + vecPos);
-      indices.push(triangles[i] + vecPos);
-      indices.push(triangles[i + 1] + vecPos);
-      indices.push(triangles[i + 2] + vecPos);
-      indices.push(triangles[i + 2] + vecPos);
+      indices.push(triangles[i]! + vecPos);
+      indices.push(triangles[i]! + vecPos);
+      indices.push(triangles[i + 1]! + vecPos);
+      indices.push(triangles[i + 2]! + vecPos);
+      indices.push(triangles[i + 2]! + vecPos);
     }
     for (let i = 0; i < recPoints.length; i += 2) {
       // TODO verify
@@ -364,8 +361,8 @@ export const buildRoundedRectangle = (graphicsData: any, webGLData: GraphicsData
 export const buildCircle = (graphicsData: any, webGLData: GraphicsData) => {
   // need to convert points to a nice regular data
   const circleData = graphicsData.shape;
-  const x = circleData.x;
-  const y = circleData.y;
+  const { x } = circleData;
+  const { y } = circleData;
   let width;
   let height;
   // TODO - bit hacky??
@@ -385,7 +382,7 @@ export const buildCircle = (graphicsData: any, webGLData: GraphicsData) => {
     const g = color[1] * alpha;
     const b = color[2] * alpha;
     const verts = webGLData.points;
-    const indices = webGLData.indices;
+    const { indices } = webGLData;
     let vecPos = verts.length / 6;
     indices.push(vecPos);
     for (let i = 0; i < totalSegs + 1; i += 1) {
@@ -414,12 +411,12 @@ export const buildCircle = (graphicsData: any, webGLData: GraphicsData) => {
  */
 export const buildComplexPoly = (graphicsData: any, webGLData: GraphicsData) => {
   // TODO - no need to copy this as it gets turned into a Float32Array anyways..
-  const points = graphicsData.points.slice();
+  const points = [...graphicsData.points];
   if (points.length < 6) {
     return;
   }
   // get first and last point.. figure out the middle!
-  const indices = webGLData.indices;
+  const { indices } = webGLData;
   webGLData.points = points;
   webGLData.alpha = graphicsData.fillAlpha;
   webGLData.color = hex2rgb(graphicsData.fillColor);
@@ -458,13 +455,13 @@ export const buildComplexPoly = (graphicsData: any, webGLData: GraphicsData) =>
  * @returns {boolean} TBD.
  */
 export const buildPoly = (graphicsData: any, webGLData: GraphicsData) => {
-  const points = graphicsData.points;
+  const { points } = graphicsData;
   if (points.length < 6) {
     return false;
   }
   // get first and last point.. figure out the middle!
   const verts = webGLData.points;
-  const indices = webGLData.indices;
+  const { indices } = webGLData;
   const length = points.length / 2;
   // sort color
   const color = hex2rgb(graphicsData.fillColor);
@@ -478,11 +475,11 @@ export const buildPoly = (graphicsData: any, webGLData: GraphicsData) => {
   }
   const vertPos = verts.length / 6;
   for (let i = 0; i < triangles.length; i += 3) {
-    indices.push(triangles[i] + vertPos);
-    indices.push(triangles[i] + vertPos);
-    indices.push(triangles[i + 1] + vertPos);
-    indices.push(triangles[i + 2] + vertPos);
-    indices.push(triangles[i + 2] + vertPos);
+    indices.push(triangles[i]! + vertPos);
+    indices.push(triangles[i]! + vertPos);
+    indices.push(triangles[i + 1]! + vertPos);
+    indices.push(triangles[i + 2]! + vertPos);
+    indices.push(triangles[i + 2]! + vertPos);
   }
   for (let i = 0; i < length; i += 1) {
     verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha);
@@ -492,10 +489,10 @@ export const buildPoly = (graphicsData: any, webGLData: GraphicsData) => {
 
 /**
  * TBD.
- * @param {import('../graphics.js').Graphics} graphics - The graphics object to update.
+ * @param {Graphics} graphics - The graphics object to update.
  * @param {WebGLRenderingContext & { id: number }} gl - The WebGL rendering context.
  */
-export const updateGraphics = (graphics: import('../graphics.js').Graphics, gl: IdentifiedWebGLRenderingContext) => {
+export const updateGraphics = (graphics: Graphics, gl: IdentifiedWebGLRenderingContext) => {
   const stencilBufferLimit = getStencilBufferLimit();
   // get the contexts graphics object
   let webGL = graphics._webGL[gl.id];
@@ -528,13 +525,10 @@ export const updateGraphics = (graphics: import('../graphics.js').Graphics, gl:
     const data = graphics.graphicsData[i];
     if (data.type === GEOM_POLYGON) {
       // need to add the points the the graphics object..
-      data.points = data.shape.points.slice();
+      data.points = [...data.shape.points];
       if (data.shape.closed) {
         // close the poly if the value is true!
-        if (
-          data.points[0] !== data.points[data.points.length - 2] ||
-          data.points[1] !== data.points[data.points.length - 1]
-        ) {
+        if (data.points[0] !== data.points.at(-2) || data.points[1] !== data.points.at(-1)) {
           data.points.push(data.points[0], data.points[1]);
         }
       }
@@ -581,13 +575,13 @@ export const updateGraphics = (graphics: import('../graphics.js').Graphics, gl:
 
 /**
  * Updates the graphics data for WebGL rendering.
- * @param {import('../graphics.js').Graphics} graphics - The graphics object to update.
+ * @param {Graphics} graphics - The graphics object to update.
  * @param {object} renderSession - The rendering session.
  */
-export const renderGraphics = (graphics: import('../graphics.js').Graphics, renderSession: any) => {
-  const gl = renderSession.gl;
-  const projection = renderSession.projection;
-  const offset = renderSession.offset;
+export const renderGraphics = (graphics: Graphics, renderSession: any) => {
+  const { gl } = renderSession;
+  const { projection } = renderSession;
+  const { offset } = renderSession;
   let shader = renderSession.shaderManager.primitiveShader;
   let webGLData;
   if (graphics.dirty) {

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

@@ -1,19 +1,20 @@
 export class GraphicsData {
-  [key: string]: any;
-  gl!: any;
-  color!: any;
-  points!: any;
-  indices!: any;
-  buffer!: any;
-  indexBuffer!: any;
-  mode!: any;
-  alpha!: any;
-  dirty!: any;
+  public glPoints!: Float32Array | null;
+  public glIndicies!: Uint16Array | null;
+  public gl!: any;
+  public color!: any;
+  public points!: any;
+  public indices!: any;
+  public buffer!: any;
+  public indexBuffer!: any;
+  public mode!: any;
+  public alpha!: any;
+  public dirty!: any;
   /**
    * Creates a new GraphicsData instance.
    * @param {WebGLRenderingContext} gl - The WebGL rendering context.
    */
-  constructor(gl: WebGLRenderingContext) {
+  public constructor(gl: WebGLRenderingContext) {
     this.gl = gl;
     // TODO does this need to be split before uploading??
     this.color = [0, 0, 0]; // color split!
@@ -29,7 +30,7 @@ export class GraphicsData {
   /**
    * Destroys this graphics data and cleans up resources.
    */
-  reset() {
+  public reset() {
     this.points = [];
     this.indices = [];
     this.glPoints = null;
@@ -39,8 +40,8 @@ export class GraphicsData {
   /**
    * Updates the graphics data for WebGL rendering.
    */
-  upload() {
-    const gl = this.gl;
+  public upload() {
+    const { gl } = this;
     // this.lastIndex = graphics.graphicsData.length;
     this.glPoints = new Float32Array(this.points);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);

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

@@ -6,7 +6,7 @@ import { updateGraphics } from './graphics.js';
  * @param {object} renderSession - The rendering session.
  */
 export const pushMask = (maskData: any, renderSession: any) => {
-  const gl = renderSession.gl;
+  const { gl } = renderSession;
   if (maskData.dirty) {
     updateGraphics(maskData, gl);
   }
@@ -26,7 +26,7 @@ export const pushMask = (maskData: any, renderSession: any) => {
  * @param {object} renderSession - The rendering session.
  */
 export const popMask = (maskData: any, renderSession: any) => {
-  const gl = renderSession.gl;
+  const { gl } = renderSession;
   if (
     maskData._webGL[gl.id] === undefined ||
     maskData._webGL[gl.id].data === undefined ||

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

@@ -5,43 +5,45 @@ import { CanvasBuffer } from '../canvas/buffer.js';
 import { BaseTexture } from './base_texture.js';
 import { FilterTexture } from './filter_texture.js';
 import { Texture } from './texture.js';
+import type { WebGLRenderer } from './renderer.js';
+import type { CanvasRenderer } from '../canvas/renderer.js';
 
 export class RenderTexture extends Texture {
   [key: string]: any;
-  declare width: any;
-  declare height: any;
-  resolution!: any;
-  declare frame: any;
-  declare crop: any;
-  renderer!: any;
-  textureBuffer!: any;
-  render!: any;
-  projection!: any;
-  declare valid: any;
+  declare public width: any;
+  declare public height: any;
+  public resolution!: any;
+  declare public frame: any;
+  declare public crop: any;
+  public renderer!: any;
+  public textureBuffer!: any;
+  public render!: any;
+  public projection!: any;
+  declare public valid: any;
   /**
    * Creates a new RenderTexture instance.
    * @param {number} width - The width of the render texture.
    * @param {number} height - The height of the render texture.
-   * @param {import('./renderer.js').WebGLRenderer|import('../canvas/renderer.js').CanvasRenderer} renderer - The renderer to use.
+   * @param {WebGLRenderer|CanvasRenderer} renderer - The renderer to use.
    * @param {number} scaleMode - The scale mode to use.
    * @param {number} resolution - The resolution to use.
    */
-  constructor(
+  public constructor(
     width: number,
     height: number,
-    renderer: import('./renderer.js').WebGLRenderer | import('../canvas/renderer.js').CanvasRenderer,
+    renderer: WebGLRenderer | CanvasRenderer,
     scaleMode: number,
-    resolution: number = 1
+    resolution = 1
   ) {
     const w = width || 100;
     const h = height || 100;
     const res = resolution || 1;
-    const baseTexture = new BaseTexture(null, scaleMode || window.PhaserRegistry.TEXTURE_SCALE_MODE);
+    const baseTexture = new BaseTexture(null, scaleMode || globalThis.PhaserRegistry.TEXTURE_SCALE_MODE);
     baseTexture.width = width * res;
     baseTexture.height = height * res;
     baseTexture._glTextures = [];
     baseTexture.resolution = res;
-    baseTexture.scaleMode = scaleMode || window.PhaserRegistry.TEXTURE_SCALE_MODE;
+    baseTexture.scaleMode = scaleMode || globalThis.PhaserRegistry.TEXTURE_SCALE_MODE;
     baseTexture.hasLoaded = true;
     super(baseTexture, new Rectangle(0, 0, w * res, h * res));
     this.width = w;
@@ -51,8 +53,7 @@ export class RenderTexture extends Texture {
     this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution);
     this.renderer = renderer;
     if (this.renderer.type === RENDER_WEBGL) {
-      // @ts-ignore
-      const gl = this.renderer.gl;
+      const { gl } = this.renderer;
       this.baseTexture._dirty[gl.id] = false;
       this.textureBuffer = new FilterTexture(gl, this.width, this.height, this.baseTexture.scaleMode);
       this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture;
@@ -70,28 +71,28 @@ export class RenderTexture extends Texture {
   /**
    * Destroys this render texture and cleans up resources.
    */
-  resize() {
+  public resize() {
     // TODO
   }
 
   /**
    * Updates the size of this render texture.
    */
-  clear() {
+  public clear() {
     // TODO
   }
 
   /**
    * Updates the resolution of this render texture.
    */
-  renderWebGL() {
+  public renderWebGL() {
     // TODO
   }
 
   /**
    * Updates the scale mode of this render texture.
    */
-  renderCanvas() {
+  public renderCanvas() {
     // TODO
   }
 
@@ -99,7 +100,7 @@ export class RenderTexture extends Texture {
    * Gets the HTML image element for this render texture.
    * @returns {HTMLImageElement} The HTML image element.
    */
-  getImage() {
+  public getImage() {
     const image = new Image();
     image.src = this.getBase64();
     return image;
@@ -109,7 +110,7 @@ export class RenderTexture extends Texture {
    * Gets the base64 string representation of this render texture.
    * @returns {string} The base64 string representation.
    */
-  getBase64() {
+  public getBase64() {
     return this.getCanvas()?.toDataURL() ?? '';
   }
 
@@ -117,7 +118,7 @@ export class RenderTexture extends Texture {
    * Gets the canvas element for this render texture.
    * @returns {HTMLCanvasElement} The canvas element.
    */
-  getCanvas(): HTMLCanvasElement | null {
+  public getCanvas(): HTMLCanvasElement | null {
     // TODO
     return null;
   }