Remove all internal global renderer imports

packages/melonjs/CHANGELOG.md

@@ -19,6 +19,9 @@
 
 ### Fixed
 - Application: `Object.assign(defaultApplicationSettings, options)` mutated the shared defaults object in both `Application.init()` and `video.init()` — creating multiple Application instances would corrupt settings. Fixed with object spread.
+- Text/Light2d: fix invalid `pool.push` on CanvasRenderTarget instances that were never pool-registered (would throw on destroy)
+- CanvasRenderTarget: `destroy(renderer)` now properly cleans up WebGL GPU textures and cache entries (previously leaked in Light2d)
+- Text: always use power-of-two texture sizes for offscreen canvas (removes WebGL version check dependency)
 - Application: prevent white flash on load by setting a black background on the parent element when no background is defined
 - WebGLRenderer: `setBlendMode()` now tracks the `premultipliedAlpha` flag — previously only the mode name was checked, causing incorrect GL blend function when mixing PMA and non-PMA textures with the same blend mode
 - TMX: fix crash in `getObjects(false)` when a map contains an empty object group (Container.children lazily initialized)

packages/melonjs/src/application/application.ts

@@ -31,7 +31,6 @@ import { getUriFragment } from "../utils/utils.ts";
 import CanvasRenderer from "../video/canvas/canvas_renderer.js";
 import type Renderer from "./../video/renderer.js";
 import { autoDetectRenderer } from "../video/utils/autodetect.js";
-import { setRenderer } from "../video/video.js";
 import { defaultApplicationSettings } from "./defaultApplicationSettings.ts";
 import { consoleHeader } from "./header.ts";
 import { onresize } from "./resize.ts";
@@ -277,9 +276,6 @@ export default class Application {
 			this.renderer = new CustomRenderer(this.settings);
 		}
 
-		// set the global renderer reference for renderables that depend on it
-		setRenderer(this.renderer);
-
 		// make this the active game instance for modules that reference the global
 		setDefaultGame(this);
 

packages/melonjs/src/level/tiled/TMXTileset.js

@@ -1,8 +1,8 @@
+import { game } from "../../application/application.ts";
 import { getImage, getTMX } from "../../loader/loader.js";
 import { Vector2d } from "../../math/vector2d.ts";
 import timer from "../../system/timer.ts";
 import { getBasename, getExtension } from "../../utils/file.ts";
-import { renderer } from "../../video/video.js";
 import { resolveEmbeddedImage } from "./TMXUtils.js";
 
 /**
@@ -348,7 +348,7 @@ export default class TMXTileset {
 		}
 
 		// create a texture atlas for the given tileset
-		this.texture = renderer.cache.get(this.image, {
+		this.texture = game.renderer.cache.get(this.image, {
 			framewidth: this.tilewidth,
 			frameheight: this.tileheight,
 			margin: this.margin,

packages/melonjs/src/renderable/imagelayer.js

@@ -9,7 +9,6 @@ import {
 	VIEWPORT_ONRESIZE,
 } from "../system/event.ts";
 import * as stringUtil from "./../utils/string.ts";
-import { renderer } from "./../video/video.js";
 import Sprite from "./sprite.js";
 
 /**
@@ -160,7 +159,10 @@ export default class ImageLayer extends Sprite {
 	 * @ignore
 	 */
 	createPattern() {
-		this._pattern = renderer.createPattern(this.image, this._repeat);
+		const renderer = this.parentApp?.renderer ?? game.renderer;
+		if (renderer) {
+			this._pattern = renderer.createPattern(this.image, this._repeat);
+		}
 	}
 
 	/**

packages/melonjs/src/renderable/light2d.js

@@ -1,6 +1,6 @@
+import { game } from "../application/application.ts";
 import { ellipsePool } from "./../geometries/ellipse.ts";
 import { colorPool } from "./../math/color.ts";
-import pool from "../system/legacy_pool.js";
 import CanvasRenderTarget from "../video/rendertarget/canvasrendertarget.js";
 import Renderable from "./renderable.js";
 
@@ -205,8 +205,8 @@ export default class Light2d extends Renderable {
 	destroy() {
 		colorPool.release(this.color);
 		this.color = undefined;
-		pool.push(this.texture);
-		this.texture.destroy();
+		const renderer = this.parentApp?.renderer ?? game.renderer;
+		this.texture.destroy(renderer);
 		this.texture = undefined;
 		ellipsePool.release(this.visibleArea);
 		this.visibleArea = undefined;

packages/melonjs/src/renderable/sprite.js

@@ -1,9 +1,9 @@
+import { game } from "../application/application.ts";
 import { getImage } from "./../loader/loader.js";
 import { Color } from "../math/color.ts";
 import { vector2dPool } from "../math/vector2d.ts";
 import { on } from "../system/event.ts";
 import { TextureAtlas } from "./../video/texture/atlas.js";
-import { renderer } from "./../video/video.js";
 import Renderable from "./renderable.js";
 
 /**
@@ -223,7 +223,7 @@ export default class Sprite extends Renderable {
 					this.current.height =
 					settings.frameheight =
 						settings.frameheight || this.image.height;
-				this.source = renderer.cache.get(this.image, settings);
+				this.source = game.renderer.cache.get(this.image, settings);
 				this.textureAtlas = this.source.getAtlas();
 			}
 		}

packages/melonjs/src/renderable/text/text.js

@@ -1,8 +1,7 @@
+import { game } from "../../application/application.ts";
 import { Color, colorPool } from "../../math/color.ts";
 import { nextPowerOfTwo } from "../../math/math.ts";
-import pool from "../../system/legacy_pool.js";
 import CanvasRenderTarget from "../../video/rendertarget/canvasrendertarget.js";
-import { renderer as globalRenderer } from "../../video/video.js";
 import Renderable from "../renderable.js";
 import TextMetrics from "./textmetrics.js";
 import setContextStyle from "./textstyle.js";
@@ -165,7 +164,7 @@ export default class Text extends Renderable {
 		// font name and type
 		this.setFont(settings.font, settings.size);
 
-		// aditional
+		// additional font styles
 		if (settings.bold === true) {
 			this.bold();
 		}
@@ -192,8 +191,13 @@ export default class Text extends Renderable {
 	 * @returns {Text} this object for chaining
 	 */
 	bold() {
-		this.font = "bold " + this.font;
-		this.isDirty = true;
+		if (
+			!this.font.startsWith("bold ") &&
+			!this.font.startsWith("italic bold ")
+		) {
+			this.font = "bold " + this.font;
+			this.isDirty = true;
+		}
 		return this;
 	}
 
@@ -202,8 +206,13 @@ export default class Text extends Renderable {
 	 * @returns {Text} this object for chaining
 	 */
 	italic() {
-		this.font = "italic " + this.font;
-		this.isDirty = true;
+		if (
+			!this.font.startsWith("italic ") &&
+			!this.font.startsWith("bold italic ")
+		) {
+			this.font = "italic " + this.font;
+			this.isDirty = true;
+		}
 		return this;
 	}
 
@@ -278,18 +287,14 @@ export default class Text extends Renderable {
 			true,
 		);
 
-		// update the offScreenCanvas texture if required
-		let width = Math.ceil(this.metrics.width);
-		let height = Math.ceil(this.metrics.height);
-
-		if (globalRenderer.WebGLVersion === 1) {
-			// round size to next Pow2
-			width = nextPowerOfTwo(this.metrics.width);
-			height = nextPowerOfTwo(this.metrics.height);
-		}
+		// round the offscreen canvas size to the next power of two
+		// (required for WebGL1, harmless for WebGL2/Canvas)
+		const width = nextPowerOfTwo(this.metrics.width);
+		const height = nextPowerOfTwo(this.metrics.height);
 
 		// invalidate the texture
-		this.canvasTexture.invalidate(globalRenderer);
+		const renderer = this.parentApp?.renderer ?? game.renderer;
+		this.canvasTexture.invalidate(renderer);
 
 		// resize the cache canvas if necessary
 		if (
@@ -330,7 +335,8 @@ export default class Text extends Renderable {
 	 * @param {number} [y]
 	 */
 	draw(renderer, text, x = this.pos.x, y = this.pos.y) {
-		// "hacky patch" for backward compatibilty
+		// @deprecated since 10.6.0 — standalone draw without a parent container
+		// TODO: remove in 19.0.0
 		if (typeof this.ancestor === "undefined") {
 			// update position if changed
 			if (this.pos.x !== x || this.pos.y !== y) {
@@ -362,7 +368,7 @@ export default class Text extends Renderable {
 		// draw the text
 		renderer.drawImage(this.canvasTexture.canvas, x, y);
 
-		// for backward compatibilty
+		// @deprecated since 10.6.0 — TODO: remove in 19.0.0
 		if (typeof this.ancestor === "undefined") {
 			// restore previous context
 			renderer.restore();
@@ -396,17 +402,8 @@ export default class Text extends Renderable {
 	 * @ignore
 	 */
 	destroy() {
-		if (typeof globalRenderer.gl !== "undefined") {
-			// make sure the right batcher is active
-			globalRenderer.setBatcher("quad");
-			globalRenderer.currentBatcher.deleteTexture2D(
-				globalRenderer.currentBatcher.getTexture2D(this.glTextureUnit),
-			);
-			this.glTextureUnit = undefined;
-		}
-		globalRenderer.cache.delete(this.canvasTexture.canvas);
-		pool.push(this.canvasTexture);
-		this.canvasTexture.destroy();
+		const renderer = this.parentApp?.renderer ?? game.renderer;
+		this.canvasTexture.destroy(renderer);
 		this.canvasTexture = undefined;
 		colorPool.release(this.fillStyle);
 		colorPool.release(this.strokeStyle);

packages/melonjs/src/tweens/tween.ts

@@ -1,5 +1,5 @@
 import { game } from "../application/application.ts";
-import { off, on, STATE_RESUME } from "../system/event.js";
+import { GAME_AFTER_UPDATE, off, on, STATE_RESUME } from "../system/event.js";
 import { createPool } from "../system/pool.ts";
 import timer from "../system/timer.js";
 import { Easing, EasingFunction } from "./easing.js";
@@ -50,6 +50,7 @@ export default class Tween {
 	_onUpdateCallback: OnUpdateCallback<object> | null;
 	_onCompleteCallback: OnCompleteCallback<object> | null;
 	_tweenTimeTracker: number;
+	_lastUpdate: number;
 	isPersistent: boolean;
 	updateWhenPaused: boolean;
 	isRenderable: boolean;
@@ -99,8 +100,9 @@ export default class Tween {
 		this._onStartCallbackFired = false;
 		this._onUpdateCallback = null;
 		this._onCompleteCallback = null;
-		// tweens are synchronized with the game update loop
-		this._tweenTimeTracker = game.lastUpdate;
+		// track the last update timestamp from the game loop
+		this._lastUpdate = globalThis.performance.now();
+		this._tweenTimeTracker = this._lastUpdate;
 
 		// reset flags to default value
 		this.isPersistent = false;
@@ -126,13 +128,20 @@ export default class Tween {
 		}
 	}
 
+	/** @ignore */
+	_onAfterUpdate(lastUpdate: number) {
+		this._lastUpdate = lastUpdate;
+	}
+
 	/**
-	 * subscribe to the resume event when added
+	 * subscribe to events when added
 	 * @ignore
 	 */
 	onActivateEvent() {
 		// eslint-disable-next-line @typescript-eslint/unbound-method
 		on(STATE_RESUME, this._resumeCallback, this);
+		// eslint-disable-next-line @typescript-eslint/unbound-method
+		on(GAME_AFTER_UPDATE, this._onAfterUpdate, this);
 	}
 
 	/**
@@ -142,6 +151,8 @@ export default class Tween {
 	onDeactivateEvent() {
 		// eslint-disable-next-line @typescript-eslint/unbound-method
 		off(STATE_RESUME, this._resumeCallback, this);
+		// eslint-disable-next-line @typescript-eslint/unbound-method
+		off(GAME_AFTER_UPDATE, this._onAfterUpdate, this);
 	}
 
 	/**
@@ -344,8 +355,8 @@ export default class Tween {
 		// the original Tween implementation expect
 		// a timestamp and not a time delta
 		this._tweenTimeTracker =
-			game.lastUpdate > this._tweenTimeTracker
-				? game.lastUpdate
+			this._lastUpdate > this._tweenTimeTracker
+				? this._lastUpdate
 				: this._tweenTimeTracker + dt;
 		const time = this._tweenTimeTracker;
 

packages/melonjs/src/video/rendertarget/canvasrendertarget.js

@@ -286,9 +286,25 @@ class CanvasRenderTarget {
 	}
 
 	/**
+	 * Destroy this canvas render target and release associated GPU resources.
+	 * @param {CanvasRenderer|WebGLRenderer} [renderer] - the renderer to clean up WebGL resources from
 	 * @ignore
 	 */
-	destroy() {
+	destroy(renderer) {
+		if (
+			renderer &&
+			typeof renderer.gl !== "undefined" &&
+			typeof this.glTextureUnit !== "undefined"
+		) {
+			renderer.setBatcher("quad");
+			renderer.currentBatcher.deleteTexture2D(
+				renderer.currentBatcher.getTexture2D(this.glTextureUnit),
+			);
+			this.glTextureUnit = undefined;
+		}
+		if (renderer) {
+			renderer.cache.delete(this.canvas);
+		}
 		this.context = undefined;
 		this.canvas = undefined;
 	}

packages/melonjs/src/video/texture/atlas.js

@@ -1,8 +1,8 @@
+import { game } from "../../application/application.ts";
 import { getImage } from "./../../loader/loader.js";
 import { Vector2d } from "../../math/vector2d.ts";
 import Sprite from "./../../renderable/sprite.js";
 import pool from "../../system/legacy_pool.js";
-import { renderer } from "./../video.js";
 import { parseAseprite } from "./parser/aseprite.js";
 import { parseSpriteSheet } from "./parser/spritesheet.js";
 import { parseTexturePacker } from "./parser/texturepacker.js";
@@ -234,7 +234,7 @@ export class TextureAtlas {
 		// Add self to TextureCache if cache !== false
 		if (cache !== false) {
 			this.sources.forEach((source) => {
-				renderer.cache.set(source, this);
+				game.renderer.cache.set(source, this);
 			});
 		}
 	}
@@ -283,11 +283,6 @@ export class TextureAtlas {
 	 * @returns {object} the created region
 	 */
 	addRegion(name, x, y, w, h) {
-		// see https://github.com/melonjs/melonJS/issues/1281
-		if (renderer.settings.verbose === true) {
-			console.warn("Adding texture region", name, "for texture", this);
-		}
-
 		const source = this.getTexture();
 		const atlas = this.getAtlas();
 		const dw = source.width;
@@ -384,24 +379,22 @@ export class TextureAtlas {
 	 * @returns {Float32Array} the created region UVs
 	 */
 	addUVs(atlas, name, w, h) {
-		// ignore if using the Canvas Renderer
-		if (typeof renderer.gl !== "undefined") {
-			// Source coordinates
-			const s = atlas[name].offset;
-			const sw = atlas[name].width;
-			const sh = atlas[name].height;
-
-			atlas[name].uvs = new Float32Array([
-				s.x / w, // u0 (left)
-				s.y / h, // v0 (top)
-				(s.x + sw) / w, // u1 (right)
-				(s.y + sh) / h, // v1 (bottom)
-			]);
-			// Cache source coordinates
-			// see https://github.com/melonjs/melonJS/issues/1281
-			const key = s.x + "," + s.y + "," + w + "," + h;
-			atlas[key] = atlas[name];
-		}
+		// Source coordinates
+		const s = atlas[name].offset;
+		const sw = atlas[name].width;
+		const sh = atlas[name].height;
+
+		atlas[name].uvs = new Float32Array([
+			s.x / w, // u0 (left)
+			s.y / h, // v0 (top)
+			(s.x + sw) / w, // u1 (right)
+			(s.y + sh) / h, // v1 (bottom)
+		]);
+		// Cache source coordinates
+		// see https://github.com/melonjs/melonJS/issues/1281
+		const key = `${s.x},${s.y},${w},${h}`;
+		atlas[key] = atlas[name];
+
 		return atlas[name].uvs;
 	}