@vpmedia/phaser 1.104.0 → 1.106.0

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

@@ -5,7 +5,7 @@ import { Node } from './earcut_node.js';
  * @param {object} list - The list of points to process.
  * @returns {object} The processed earcut data structure.
  */
-export function sortLinked(list) {
+export function sortLinked(list: any) {
   let i;
   let p;
   let q;
@@ -72,7 +72,7 @@ export function sortLinked(list) {
  * @param {object} b - The second point of the triangle.
  * @returns {number} The calculated area of the triangle.
  */
-export function compareX(a, b) {
+export function compareX(a: any, b: any) {
   return a.x - b.x;
 }
 
@@ -85,7 +85,7 @@ export function compareX(a, b) {
  * @param {number} size - The size of the bounding box.
  * @returns {number} The calculated distance from the point to the triangle edge.
  */
-export function zOrder(x, y, minX, minY, size) {
+export function zOrder(x: number, y: number, minX: number, minY: number, size: number) {
   // coords are transformed into non-negative 15-bit integer range
   x = (32767 * (x - minX)) / size;
   y = (32767 * (y - minY)) / size;
@@ -107,7 +107,7 @@ export function zOrder(x, y, minX, minY, size) {
  * @param {number} minY - The minimum y-coordinate of the bounding box.
  * @param {number} size - The size of the bounding box.
  */
-export function indexCurve(start, minX, minY, size) {
+export function indexCurve(start: any, minX: number, minY: number, size: number) {
   let p = start;
   do {
     if (p.z === null) p.z = zOrder(p.x, p.y, minX, minY, size);
@@ -125,7 +125,7 @@ export function indexCurve(start, minX, minY, size) {
  * @param {object} start - TBD.
  * @returns {object} The calculated point that is the closest to the triangle edge.
  */
-export function getLeftmost(start) {
+export function getLeftmost(start: any) {
   let p = start;
   let leftmost = start;
   do {
@@ -147,7 +147,16 @@ export function getLeftmost(start) {
  * @param {number} py - TBD.
  * @returns {object} TBD.
  */
-export function pointInTriangle(ax, ay, bx, by, cx, cy, px, py) {
+export function pointInTriangle(
+  ax: number,
+  ay: number,
+  bx: number,
+  by: number,
+  cx: number,
+  cy: number,
+  px: number,
+  py: number
+) {
   return (
     (cx - px) * (ay - py) - (ax - px) * (cy - py) >= 0 &&
     (ax - px) * (by - py) - (bx - px) * (ay - py) >= 0 &&
@@ -162,7 +171,7 @@ export function pointInTriangle(ax, ay, bx, by, cx, cy, px, py) {
  * @param {object} r - TBD.
  * @returns {number} TBD.
  */
-export function area(p, q, r) {
+export function area(p: any, q: any, r: any) {
   return (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y);
 }
 
@@ -172,7 +181,7 @@ export function area(p, q, r) {
  * @param {object} p2 - The second point of the triangle.
  * @returns {boolean} True if the point is inside the triangle, false otherwise.
  */
-export function equals(p1, p2) {
+export function equals(p1: any, p2: any) {
   return p1.x === p2.x && p1.y === p2.y;
 }
 
@@ -184,7 +193,7 @@ export function equals(p1, p2) {
  * @param {object} q2 - The second point of the second line segment.
  * @returns {boolean} True if the line segments intersect, false otherwise.
  */
-export function intersects(p1, q1, p2, q2) {
+export function intersects(p1: any, q1: any, p2: any, q2: any) {
   return area(p1, q1, p2) > 0 !== area(p1, q1, q2) > 0 && area(p2, q2, p1) > 0 !== area(p2, q2, q1) > 0;
 }
 
@@ -194,7 +203,7 @@ export function intersects(p1, q1, p2, q2) {
  * @param {object} b - The second point of the line segment.
  * @returns {boolean} True if the points are collinear, false otherwise.
  */
-export function intersectsPolygon(a, b) {
+export function intersectsPolygon(a: any, b: any) {
   let p = a;
   do {
     if (p.i !== a.i && p.next.i !== a.i && p.i !== b.i && p.next.i !== b.i && intersects(p, p.next, a, b)) return true;
@@ -209,7 +218,7 @@ export function intersectsPolygon(a, b) {
  * @param {object} b - The second point of the cross product.
  * @returns {object} The calculated cross product result.
  */
-export function locallyInside(a, b) {
+export function locallyInside(a: any, b: any) {
   return area(a.prev, a, a.next) < 0
     ? area(a, b, a.next) >= 0 && area(a, a.prev, b) >= 0
     : area(a, b, a.prev) < 0 || area(a, a.next, b) < 0;
@@ -221,7 +230,7 @@ export function locallyInside(a, b) {
  * @param {object} b - The second point of the triangle.
  * @returns {boolean} True if the point is inside the triangle, false otherwise.
  */
-export function middleInside(a, b) {
+export function middleInside(a: any, b: any) {
   let p = a;
   let inside = false;
   const px = (a.x + b.x) / 2;
@@ -241,7 +250,7 @@ export function middleInside(a, b) {
  * @param {object} b - The second point of the triangle.
  * @returns {boolean} True if the point is inside the triangle, false otherwise.
  */
-export function isValidDiagonal(a, b) {
+export function isValidDiagonal(a: any, b: any) {
   return (
     equals(a, b) ||
     (a.next.i !== b.i &&
@@ -259,7 +268,7 @@ export function isValidDiagonal(a, b) {
  * @param {object} b - TBD.
  * @returns {object} TBD.
  */
-export function splitPolygon(a, b) {
+export function splitPolygon(a: any, b: any) {
   const a2 = new Node(a.i, a.x, a.y);
   const b2 = new Node(b.i, b.x, b.y);
   const an = a.next;
@@ -283,7 +292,7 @@ export function splitPolygon(a, b) {
  * @param {object} last - TBD.
  * @returns {object} TBD.
  */
-export function insertNode(i, x, y, last) {
+export function insertNode(i: number, x: number, y: number, last: any) {
   const p = new Node(i, x, y);
   if (!last) {
     p.prev = p;
@@ -301,7 +310,7 @@ export function insertNode(i, x, y, last) {
  * TBD.
  * @param {object} p - TBD.
  */
-export function removeNode(p) {
+export function removeNode(p: any) {
   p.next.prev = p.prev;
   p.prev.next = p.next;
   if (p.prevZ) {
@@ -317,7 +326,7 @@ export function removeNode(p) {
  * @param {object} ear - TBD.
  * @returns {boolean} TBD.
  */
-export function isEar(ear) {
+export function isEar(ear: any) {
   const a = ear.prev;
   const b = ear;
   const c = ear.next;
@@ -339,7 +348,7 @@ export function isEar(ear) {
  * @param {number} size - TBD.
  * @returns {boolean} TBD.
  */
-export function isEarHashed(ear, minX, minY, size) {
+export function isEarHashed(ear: any, minX: number, minY: number, size: number) {
   const a = ear.prev;
   const b = ear;
   const c = ear.next;
@@ -390,7 +399,7 @@ export function isEarHashed(ear, minX, minY, size) {
  * @param {boolean} clockwise - Whether the triangles should be clockwise or counterclockwise.
  * @returns {object} The processed earcut data structure with triangulation information.
  */
-export function linkedList(data, start, end, dim, clockwise) {
+export function linkedList(data: any, start: number, end: number, dim: number, clockwise: boolean) {
   let sum = 0;
   let i;
   let j;
@@ -415,7 +424,7 @@ export function linkedList(data, start, end, dim, clockwise) {
  * @param {object} end - The ending point in the data structure.
  * @returns {object} The calculated bounding box with min and max coordinates.
  */
-export function filterPoints(start, end?) {
+export function filterPoints(start: any, end?: any) {
   if (!start) return start;
   if (!end) end = start;
   let p = start;
@@ -441,7 +450,7 @@ export function filterPoints(start, end?) {
  * @param {object} outerNode - The outer node that contains the hole.
  * @returns {object} The processed hole data structure.
  */
-export function findHoleBridge(hole, outerNode) {
+export function findHoleBridge(hole: any, outerNode: any) {
   let p = outerNode;
   const hx = hole.x;
   const hy = hole.y;
@@ -490,7 +499,7 @@ export function findHoleBridge(hole, outerNode) {
  * @param {object} hole - The hole to process.
  * @param {object} outerNode - The outer node that contains the hole.
  */
-export function eliminateHole(hole, outerNode) {
+export function eliminateHole(hole: any, outerNode: any) {
   outerNode = findHoleBridge(hole, outerNode);
   if (outerNode) {
     const b = splitPolygon(outerNode, hole);
@@ -506,7 +515,7 @@ export function eliminateHole(hole, outerNode) {
  * @param {object} dim - The dimension of the data (2 or 3).
  * @returns {object} The processed earcut data structure with holes included.
  */
-export function eliminateHoles(data, holeIndices, outerNode, dim) {
+export function eliminateHoles(data: any, holeIndices: any, outerNode: any, dim: any) {
   const queue = [];
   let i;
   let len;
@@ -536,7 +545,7 @@ export function eliminateHoles(data, holeIndices, outerNode, dim) {
  * @param {number} dim - The dimension of the data (2 or 3).
  * @returns {object} The processed triangulation data structure.
  */
-export function cureLocalIntersections(start, triangles, dim) {
+export function cureLocalIntersections(start: any, triangles: any, dim: number) {
   let p = start;
   do {
     const a = p.prev;
@@ -566,7 +575,7 @@ export function cureLocalIntersections(start, triangles, dim) {
  * @param {number} minY - The minimum y-coordinate of the bounding box.
  * @param {number} size - The size of the bounding box.
  */
-export function splitEarcut(start, triangles, dim, minX, minY, size) {
+export function splitEarcut(start: any, triangles: any, dim: number, minX: number, minY: number, size: number) {
   // look for a valid diagonal that divides the polygon into two
   let a = start;
   do {
@@ -599,7 +608,15 @@ export function splitEarcut(start, triangles, dim, minX, minY, size) {
  * @param {number} size - The size of the bounding box.
  * @param {object} pass - The pass information for triangulation.
  */
-export function earcutLinked(ear, triangles, dim, minX?, minY?, size?, pass?) {
+export function earcutLinked(
+  ear: any,
+  triangles: any,
+  dim: number,
+  minX?: number,
+  minY?: number,
+  size?: number,
+  pass?: any
+) {
   if (!ear) return;
   // interlink polygon nodes in z-order
   if (!pass && size) indexCurve(ear, minX, minY, size);
@@ -647,7 +664,7 @@ export function earcutLinked(ear, triangles, dim, minX?, minY?, size?, pass?) {
  * @param {number} dim - The dimension of the data (2 or 3).
  * @returns {object} The processed earcut data structure with triangulation information.
  */
-export function triangulate(data, holeIndices, dim) {
+export function triangulate(data: any, holeIndices: any, dim: number) {
   dim = dim || 2;
   const hasHoles = holeIndices && holeIndices.length;
   const outerLen = hasHoles ? holeIndices[0] * dim : data.length;

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

@@ -15,7 +15,7 @@ export class Node {
    * @param {number} x - The x coordinate of the vertex.
    * @param {number} y - The y coordinate of the vertex.
    */
-  constructor(i, x, y) {
+  constructor(i: number, x: number, y: number) {
     // vertice index in coordinates array
     this.i = i;
     // vertex coordinates

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

@@ -1,20 +1,20 @@
-// @ts-nocheck
 export class FastSpriteBatch {
-vertSize;
-maxSize;
-size;
-vertices;
-indices;
-vertexBuffer;
-indexBuffer;
-lastIndexCount;
-drawing;
-currentBatchSize;
-currentBaseTexture;
-currentBlendMode;
-renderSession;
-shader;
-matrix;
+  [key: string]: any;
+  vertSize!: any;
+  maxSize!: any;
+  size!: any;
+  vertices!: any;
+  indices!: any;
+  vertexBuffer!: any;
+  indexBuffer!: any;
+  lastIndexCount!: any;
+  drawing!: any;
+  currentBatchSize!: any;
+  currentBaseTexture!: any;
+  currentBlendMode!: any;
+  renderSession!: any;
+  shader!: any;
+  matrix!: any;
   /**
    * Creates a new FastSpriteBatch instance.
    * @param {WebGLRenderingContext & { id: number }} gl - The WebGL rendering context.
@@ -72,7 +72,7 @@ matrix;
    * @param {object} spriteBatch - The sprite batch to render.
    * @param {object} renderSession - The render session to use.
    */
-  begin(spriteBatch, renderSession) {
+  begin(spriteBatch: any, renderSession: any) {
     this.renderSession = renderSession;
     this.shader = this.renderSession.shaderManager.fastShader;
     this.matrix = spriteBatch.worldTransform.toArray(true);
@@ -90,7 +90,7 @@ matrix;
    * Flushes the sprite batch to WebGL.
    * @param {object} spriteBatch - The sprite batch to flush.
    */
-  render(spriteBatch) {
+  render(spriteBatch: any) {
     const children = spriteBatch.children;
     const sprite = children[0];
     // if the uvs have not updated then no point rendering just yet!
@@ -114,7 +114,7 @@ matrix;
    * Renders a sprite using WebGL.
    * @param {import('../../display/image.js').Image} sprite - The sprite to render.
    */
-  renderSprite(sprite) {
+  renderSprite(sprite: import('../../display/image.js').Image) {
     if (!sprite.visible) {
       return;
     }

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

@@ -1,8 +1,8 @@
-// @ts-nocheck
 export class WebGLFilterManager {
-filterStack;
-offsetX;
-offsetY;
+  [key: string]: any;
+  filterStack!: any;
+  offsetX!: any;
+  offsetY!: any;
   /**
    * Creates a new FilterManager instance.
    */
@@ -16,7 +16,7 @@ offsetY;
    * Initializes the filter manager with a WebGL context.
    * @param {WebGLRenderingContext} gl - The WebGL rendering context.
    */
-  setContext(gl) {
+  setContext(gl: WebGLRenderingContext) {
     this.gl = gl;
     this.texturePool = [];
     this.initShaderBuffers();

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

@@ -1,11 +1,11 @@
-// @ts-nocheck
 import { SCALE_LINEAR } from '../../core/const.js';
 
 export class FilterTexture {
-gl;
-frameBuffer;
-texture;
-renderBuffer;
+  [key: string]: any;
+  gl!: any;
+  frameBuffer!: any;
+  texture!: any;
+  renderBuffer!: any;
   /**
    * Creates a new FilterTexture instance.
    * @param {WebGLRenderingContext} gl - The WebGL rendering context.
@@ -13,7 +13,7 @@ renderBuffer;
    * @param {number} height - The height of the filter texture.
    * @param {number} scaleMode - The scale mode to use.
    */
-  constructor(gl, width, height, scaleMode) {
+  constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number) {
     this.gl = gl;
     this.frameBuffer = gl.createFramebuffer();
     this.texture = gl.createTexture();
@@ -47,7 +47,7 @@ renderBuffer;
    * @param {number} width - The new width of the filter texture.
    * @param {number} height - The new height of the filter texture.
    */
-  resize(width, height) {
+  resize(width: number, height: number) {
     if (this.width === width && this.height === height) {
       return;
     }

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { GEOM_CIRCLE, GEOM_ELLIPSE, GEOM_POLYGON, GEOM_RECTANGLE, GEOM_ROUNDED_RECTANGLE } from '../../core/const.js';
 import { Point } from '../../geom/point.js';
 import { hex2rgb } from '../../util/math.js';
@@ -33,7 +32,7 @@ export const getGraphicsDataPool = () => {
  * @param {number} type - The type of graphics data to create.
  * @returns {object} The newly created graphics data object.
  */
-export const switchMode = (webGL, type) => {
+export const switchMode = (webGL: any, type: number) => {
   let webGLData;
   if (!webGL.data.length) {
     webGLData = getGraphicsDataPool().pop() || new GraphicsData(webGL.gl);
@@ -56,7 +55,7 @@ export const switchMode = (webGL, type) => {
  * @param {object} graphicsData - The graphics data to update.
  * @param {GraphicsData} webGLData - The WebGL graphics data object.
  */
-export const buildLine = (graphicsData, webGLData) => {
+export const buildLine = (graphicsData: any, webGLData: GraphicsData) => {
   // TODO OPTIMISE!
   let i = 0;
   let points = graphicsData.points;
@@ -221,7 +220,7 @@ export const buildLine = (graphicsData, webGLData) => {
  * @param {object} graphicsData - The graphics data to update.
  * @param {GraphicsData} webGLData - The WebGL graphics data object.
  */
-export const buildRectangle = (graphicsData, webGLData) => {
+export const buildRectangle = (graphicsData: any, webGLData: GraphicsData) => {
   //
   // need to convert points to a nice regular data
   //
@@ -270,7 +269,14 @@ export const buildRectangle = (graphicsData, webGLData) => {
  * @param {number} toY - The ending y-coordinate.
  * @returns {number[]} The calculated points for the quadratic bezier curve.
  */
-export const quadraticBezierCurve = (fromX, fromY, cpX, cpY, toX, toY) => {
+export const quadraticBezierCurve = (
+  fromX: number,
+  fromY: number,
+  cpX: number,
+  cpY: number,
+  toX: number,
+  toY: number
+) => {
   let xa;
   let ya;
   let xb;
@@ -304,7 +310,7 @@ export const quadraticBezierCurve = (fromX, fromY, cpX, cpY, toX, toY) => {
  * @param {object} graphicsData - The graphics data to update.
  * @param {GraphicsData} webGLData - The WebGL graphics data object.
  */
-export const buildRoundedRectangle = (graphicsData, webGLData) => {
+export const buildRoundedRectangle = (graphicsData: any, webGLData: GraphicsData) => {
   const rrectData = graphicsData.shape;
   const x = rrectData.x;
   const y = rrectData.y;
@@ -354,7 +360,7 @@ export const buildRoundedRectangle = (graphicsData, webGLData) => {
  * @param {object} graphicsData - The graphics data to update.
  * @param {GraphicsData} webGLData - The WebGL graphics data object.
  */
-export const buildCircle = (graphicsData, webGLData) => {
+export const buildCircle = (graphicsData: any, webGLData: GraphicsData) => {
   // need to convert points to a nice regular data
   const circleData = graphicsData.shape;
   const x = circleData.x;
@@ -405,7 +411,7 @@ export const buildCircle = (graphicsData, webGLData) => {
  * @param {object} graphicsData - The graphics data to update.
  * @param {GraphicsData} webGLData - The WebGL graphics data object.
  */
-export const buildComplexPoly = (graphicsData, webGLData) => {
+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();
   if (points.length < 6) {
@@ -450,7 +456,7 @@ export const buildComplexPoly = (graphicsData, webGLData) => {
  * @param {GraphicsData} webGLData - TBD.
  * @returns {boolean} TBD.
  */
-export const buildPoly = (graphicsData, webGLData) => {
+export const buildPoly = (graphicsData: any, webGLData: GraphicsData) => {
   const points = graphicsData.points;
   if (points.length < 6) {
     return false;
@@ -488,7 +494,7 @@ export const buildPoly = (graphicsData, webGLData) => {
  * @param {import('../graphics.js').Graphics} graphics - The graphics object to update.
  * @param {WebGLRenderingContext & { id: number }} gl - The WebGL rendering context.
  */
-export const updateGraphics = (graphics, gl) => {
+export const updateGraphics = (graphics: import('../graphics.js').Graphics, gl) => {
   const stencilBufferLimit = getStencilBufferLimit();
   // get the contexts graphics object
   let webGL = graphics._webGL[gl.id];
@@ -577,7 +583,7 @@ export const updateGraphics = (graphics, gl) => {
  * @param {import('../graphics.js').Graphics} graphics - The graphics object to update.
  * @param {object} renderSession - The rendering session.
  */
-export const renderGraphics = (graphics, renderSession) => {
+export const renderGraphics = (graphics: import('../graphics.js').Graphics, renderSession: any) => {
   const gl = renderSession.gl;
   const projection = renderSession.projection;
   const offset = renderSession.offset;

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

@@ -1,19 +1,19 @@
-// @ts-nocheck
 export class GraphicsData {
-gl;
-color;
-points;
-indices;
-buffer;
-indexBuffer;
-mode;
-alpha;
-dirty;
+  [key: string]: any;
+  gl!: any;
+  color!: any;
+  points!: any;
+  indices!: any;
+  buffer!: any;
+  indexBuffer!: any;
+  mode!: any;
+  alpha!: any;
+  dirty!: any;
   /**
    * Creates a new GraphicsData instance.
    * @param {WebGLRenderingContext} gl - The WebGL rendering context.
    */
-  constructor(gl) {
+  constructor(gl: WebGLRenderingContext) {
     this.gl = gl;
     // TODO does this need to be split before uploading??
     this.color = [0, 0, 0]; // color split!

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

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

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { RENDER_WEBGL } from '../../core/const.js';
 import { Point } from '../../geom/point.js';
 import { Rectangle } from '../../geom/rectangle.js';
@@ -8,16 +7,17 @@ import { FilterTexture } from './filter_texture.js';
 import { Texture } from './texture.js';
 
 export class RenderTexture extends Texture {
-width;
-height;
-resolution;
-frame;
-crop;
-renderer;
-textureBuffer;
-render;
-projection;
-valid;
+  [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;
   /**
    * Creates a new RenderTexture instance.
    * @param {number} width - The width of the render texture.
@@ -26,7 +26,13 @@ valid;
    * @param {number} scaleMode - The scale mode to use.
    * @param {number} resolution - The resolution to use.
    */
-  constructor(width, height, renderer, scaleMode, resolution = 1) {
+  constructor(
+    width: number,
+    height: number,
+    renderer: import('./renderer.js').WebGLRenderer | import('../canvas/renderer.js').CanvasRenderer,
+    scaleMode: number,
+    resolution: number = 1
+  ) {
     const w = width || 100;
     const h = height || 100;
     const res = resolution || 1;

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import {
   BLEND_ADD,
   BLEND_COLOR,
@@ -33,28 +32,29 @@ import { WebGLStencilManager } from './stencil_manager.js';
 import { getWebGLContextErrorCode, getWebGLContextErrorName } from './util.js';
 
 export class WebGLRenderer {
-type;
-resolution;
-autoResize;
-contextLost;
-clearBeforeRender;
-width;
-height;
-view;
-_contextOptions;
-projection;
-offset;
-shaderManager;
-spriteBatch;
-filterManager;
-stencilManager;
-blendModeManager;
-renderSession;
+  [key: string]: any;
+  type!: any;
+  resolution!: any;
+  autoResize!: any;
+  contextLost!: any;
+  clearBeforeRender!: any;
+  width!: any;
+  height!: any;
+  view!: any;
+  _contextOptions!: any;
+  projection!: any;
+  offset!: any;
+  shaderManager!: any;
+  spriteBatch!: any;
+  filterManager!: any;
+  stencilManager!: any;
+  blendModeManager!: any;
+  renderSession!: any;
   /**
    * Creates a new WebGLRenderer instance.
    * @param {import('../../core/game.js').Game} game - The game instance.
    */
-  constructor(game) {
+  constructor(game: import('../../core/game.js').Game) {
     /** @type {number} */
     this.type = RENDER_WEBGL;
     this.resolution = game.config.resolution;
@@ -143,7 +143,7 @@ renderSession;
    * @param {import('../../core/game.js').Game} game - The game instance.
    * @throws {Error}
    */
-  initContext(game) {
+  initContext(game: import('../../core/game.js').Game) {
     game.logger.info('initContext');
     // TODO: view.addEventListener('webglcontextcreationerror', this.onWebGLContextCreationError, false);
     /** @type {WebGLRenderingContext & { id: number }} */
@@ -187,7 +187,7 @@ renderSession;
    * Renders the stage to WebGL.
    * @param {import('../../core/stage.js').Stage} stage - The root stage to render.
    */
-  render(stage) {
+  render(stage: import('../../core/stage.js').Stage) {
     if (this.contextLost) {
       return;
     }
@@ -212,7 +212,7 @@ renderSession;
    * @param {object} buffer - The render buffer.
    * @param {import('../../geom/matrix.js').Matrix} matrix - The transformation matrix.
    */
-  renderDisplayObject(displayObject, projection, buffer, matrix) {
+  renderDisplayObject(displayObject: any, projection: Point, buffer?: any, matrix?: any) {
     this.renderSession.blendModeManager.setBlendMode(BLEND_NORMAL);
     // reset the render session data..
     this.renderSession.drawCount = 0;
@@ -237,7 +237,7 @@ renderSession;
    * @param {number} width - The new width of the canvas.
    * @param {number} height - The new height of the canvas.
    */
-  resize(width, height) {
+  resize(width: number, height: number) {
     this.width = width * this.resolution;
     this.height = height * this.resolution;
     this.view.width = this.width;
@@ -256,7 +256,7 @@ renderSession;
    * @param {import('./base_texture.js').BaseTexture} texture - The base texture to update.
    * @returns {boolean} Whether the update was successful.
    */
-  updateTexture(texture) {
+  updateTexture(texture: import('./base_texture.js').BaseTexture) {
     if (!texture.hasLoaded) {
       return false;
     }