Add multi-camera support with minimap example (#1310)

* Add multi-camera support with minimap example

Add screenX, screenY, zoom, autoResize, isDefault, worldView, setViewport,
worldProjection and screenProjection to Camera2d for proper multi-camera
rendering. Add visibleInAllCameras to Renderable for per-camera floating
element filtering. Implement setProjection in CanvasRenderer to properly
apply ortho projection as canvas 2D transform. Auto-flush in WebGL
setProjection to prevent batched quads from rendering with wrong projection.
Add minimap camera example to platformer with viewport highlight and player
marker. Includes 95+ new unit tests.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Address Copilot review feedback on PR #1310

- Guard against duplicate minimap camera in onResetEvent
- Store and cleanup CANVAS_ONRESIZE listener in minimap destroy()
- Save/restore lineWidth in minimap postDraw
- Validate zoom setter to reject zero/negative values (fall back to 1)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: obiot

packages/examples/src/examples/platformer/createGame.ts

@@ -24,7 +24,7 @@ export const createGame = () => {
 		!video.init(800, 600, {
 			parent: "screen",
 			scaleMethod: "flex-width",
-			renderer: video.WEBGL,
+			renderer: video.AUTO,
 			preferWebGL1: false,
 			depthTest: "z-buffer",
 			subPixel: false,

packages/examples/src/examples/platformer/entities/minimap.ts

@@ -0,0 +1,92 @@
+import { Camera2d, event, game, level } from "melonjs";
+
+const MINIMAP_WIDTH = 180;
+const MINIMAP_HEIGHT = 100;
+
+/**
+ * A minimap camera that shows a zoomed-out view of the entire level
+ * in the top-right corner of the screen.
+ */
+export class MinimapCamera extends Camera2d {
+	private boundOnResize: (w: number) => void;
+
+	constructor() {
+		super(0, 0, MINIMAP_WIDTH, MINIMAP_HEIGHT);
+		this.name = "minimap";
+		this.screenX = game.viewport.width - MINIMAP_WIDTH - 10;
+		this.screenY = 10;
+
+		// prevent canvas resize from resetting this camera's dimensions/bounds
+		this.autoResize = false;
+
+		// reposition on canvas resize (keep anchored to top-right)
+		this.boundOnResize = (w: number) => {
+			this.screenX = w - MINIMAP_WIDTH - 10;
+		};
+		event.on(event.CANVAS_ONRESIZE, this.boundOnResize);
+
+		const currentLevel = level.getCurrentLevel();
+		if (currentLevel) {
+			const lw = currentLevel.cols * currentLevel.tilewidth;
+			const lh = currentLevel.rows * currentLevel.tileheight;
+			this.setBounds(0, 0, lw, lh);
+			this.zoom = Math.min(MINIMAP_WIDTH / lw, MINIMAP_HEIGHT / lh);
+		}
+	}
+
+	/**
+	 * Draw minimap overlays: viewport highlight, player marker, and border.
+	 */
+	override postDraw(renderer: any): void {
+		const viewport = game.viewport;
+		const screenPx = 1 / this.zoom; // 1 screen pixel in world units
+		const savedLineWidth = renderer.lineWidth;
+
+		// main camera's visible area in world space
+		const view = viewport.worldView;
+		renderer.setGlobalAlpha(0.9);
+		renderer.setColor("#ffffff");
+		renderer.lineWidth = 1.5 * screenPx;
+		renderer.strokeRect(view.left, view.top, view.width, view.height);
+
+		// player position marker
+		const players = game.world.getChildByProp("name", "mainPlayer");
+		if (players.length > 0) {
+			const player = players[0];
+			const markerSize = 4 * screenPx;
+			renderer.setGlobalAlpha(1.0);
+			renderer.setColor("#00ff00");
+			renderer.fillEllipse(
+				player.pos.x + player.width / 2,
+				player.pos.y + player.height / 2,
+				markerSize,
+				markerSize,
+			);
+		}
+
+		// minimap border
+		renderer.setGlobalAlpha(0.8);
+		renderer.setColor("#ffffff");
+		renderer.lineWidth = 2 * screenPx;
+		renderer.strokeRect(
+			0,
+			0,
+			MINIMAP_WIDTH / this.zoom,
+			MINIMAP_HEIGHT / this.zoom,
+		);
+
+		// restore lineWidth
+		renderer.lineWidth = savedLineWidth;
+
+		// restore the camera context
+		super.postDraw(renderer);
+	}
+
+	/**
+	 * Cleanup event listeners.
+	 */
+	override destroy(): void {
+		event.off(event.CANVAS_ONRESIZE, this.boundOnResize);
+		super.destroy();
+	}
+}

packages/examples/src/examples/platformer/play.ts

@@ -1,6 +1,7 @@
 import { audio, device, game, level, plugin, Stage } from "melonjs";
 import { VirtualJoypad } from "./entities/controls";
 import UIContainer from "./entities/HUD";
+import { MinimapCamera } from "./entities/minimap";
 import { gameState } from "./gameState";
 
 export class PlayScreen extends Stage {
@@ -14,6 +15,11 @@ export class PlayScreen extends Stage {
 		// load a level
 		level.load("map1");
 
+		// add a minimap camera (reuse if already present)
+		if (!this.cameras.has("minimap")) {
+			this.cameras.set("minimap", new MinimapCamera());
+		}
+
 		// reset the score
 		gameState.data.score = 0;
 

packages/melonjs/CHANGELOG.md

@@ -3,6 +3,8 @@
 ## [18.2.0] (melonJS 2)
 
 ### Added
+- Camera2d: added proper multi-camera support
+- Platformer example: minimap camera showing a zoomed-out view of the full level with viewport highlight and player marker
 
 ### Changed
 - TypeScript: convert leaf modules to TypeScript — plugin, camera, particles emitter, state, audio
@@ -15,6 +17,7 @@
 - UITextButton: fix `bindKey` settings type from `string` to `string | number`
 - Application: fix constructor `options` parameter not being optional
 - Application: fix `getUriFragment()` unsafe cast by making `url` parameter optional
+- CanvasRenderer: `setProjection()` now properly applies the projection matrix as a canvas 2D transform
 
 ### Performance