Text: gradient fills, moving labels, and the typings the docs promised

packages/examples/src/examples/afterBurner/ExampleAfterBurner.tsx

@@ -32,7 +32,6 @@ import {
 	Light3d,
 	loader,
 	state,
-	Vector3d,
 	video,
 } from "melonjs";
 import { createExampleComponent } from "../utils";
@@ -161,15 +160,15 @@ const createGame = async () => {
 			// A key light plus an ambient fill so the shadowed side stays
 			// readable rather than black.
 			app.world.addChild(
-				new Light3d(0, 0, 0, {
+				new Light3d({
 					type: "directional",
-					direction: new Vector3d(-0.35, -0.7, -0.6),
+					direction: [-0.35, 0.7, -0.6],
 					color: new Color(255, 244, 226),
 					intensity: 1.2,
 				}),
 			);
 			app.world.addChild(
-				new Light3d(0, 0, 0, {
+				new Light3d({
 					type: "ambient",
 					color: new Color(128, 146, 178),
 					intensity: 0.6,

packages/examples/src/examples/afterBurner/sfx.ts

@@ -119,26 +119,27 @@ export function playEnemyHit(pan = 0): void {
 		filter: { type: "lowpass", frequency: 1600, Q: 0.5 },
 		filterSweep: 0.18,
 	});
-	// 5. secondary blast — real explosions double-tap
-	setTimeout(() => {
-		audio.noise({
-			type: "white",
-			duration: 0.05,
-			gain: 0.4,
-			attack: 0.001,
-			pan,
-			filter: { type: "highpass", frequency: 1200, Q: 0.8 },
-		});
-		audio.tone({
-			freq: 70,
-			duration: 0.32,
-			wave: "sine",
-			gain: 0.5,
-			attack: 0.002,
-			pitchSlide: 0.3,
-			pan,
-		});
-	}, 80);
+	// 5. secondary blast — real explosions double-tap. `delay` puts it on
+	//    the audio clock, so the 80ms gap holds through a frame spike.
+	audio.noise({
+		type: "white",
+		duration: 0.05,
+		gain: 0.4,
+		attack: 0.001,
+		pan,
+		filter: { type: "highpass", frequency: 1200, Q: 0.8 },
+		delay: 0.08,
+	});
+	audio.tone({
+		freq: 70,
+		duration: 0.32,
+		wave: "sine",
+		gain: 0.5,
+		attack: 0.002,
+		pitchSlide: 0.3,
+		pan,
+		delay: 0.08,
+	});
 }
 
 /**

packages/examples/src/examples/dragAndDrop/ExampleDragAndDrop.tsx

@@ -10,6 +10,7 @@ import {
 	DropTarget,
 	game,
 	Text,
+	timer,
 	video,
 } from "melonjs";
 import { createExampleComponent } from "../utils";
@@ -106,10 +107,16 @@ class DropTarget1 extends DropTarget {
 
 		// indicate a succesful drop
 		this.color = "green";
-		// set the color back to red after a second
-		window.setTimeout(() => {
-			this.color = "red";
-		}, 1000);
+		// set the color back to red after a second. `timer.setTimeout`, not the
+		// window one: the third argument makes it respect the engine's pause
+		// state, so a paused game does not quietly finish the countdown
+		timer.setTimeout(
+			() => {
+				this.color = "red";
+			},
+			1000,
+			true,
+		);
 	}
 }
 

packages/examples/src/examples/materialTextures/ExampleMaterialTextures.tsx

@@ -125,15 +125,15 @@ function buildScene(app: Application) {
 	// One directional key light plus a dim ambient fill. The key is what the
 	// specular highlight rides: a highlight needs a direction to reflect, so
 	// an ambient-only scene would show none however glossy the material.
-	const key = new Light3d(0, 0, {
+	const key = new Light3d({
 		type: "directional",
-		direction: new Vector3d(-0.45, -0.75, 0.5),
+		direction: [-0.45, 0.75, 0.5],
 		color: "#fff6e8",
 		intensity: 1.15,
 	});
 	key.name = "key";
 	world.addChild(key);
-	world.addChild(new Light3d(0, 0, { type: "ambient", color: "#3b4870" }));
+	world.addChild(new Light3d({ type: "ambient", color: "#3b4870" }));
 
 	// a floor for the shadows to land on
 	const F = 900;