Fix UI example: replace standalone Text.draw() with preDraw/draw/postDraw

Text.draw(renderer, text, x, y) standalone pattern was removed in 19.0.
Use pos.set + setText + preDraw/draw/postDraw instead.

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

Author: obiot

packages/examples/src/examples/ui/ExampleUI.tsx

@@ -9,40 +9,32 @@ import {
 	TextureAtlas,
 	UIBaseElement,
 	UISpriteElement,
-	video,
+	UITextButton,
 } from "melonjs";
 import { createExampleComponent } from "../utils";
 
 const base = `${import.meta.env.BASE_URL}assets/ui/`;
 
 let texture: TextureAtlas;
 
-class ButtonUI extends UISpriteElement {
+class ButtonUI extends UITextButton {
 	private unclicked_region: object;
 	private clicked_region: object;
-	private font: Text;
-	private label: string;
 
 	constructor(x: number, y: number, color: string, label: string) {
 		super(x, y, {
 			image: texture,
 			region: `${color}_button04`,
+			font: "kenpixel",
+			size: 12,
+			text: label,
 		});
 
 		this.unclicked_region = texture.getRegion(`${color}_button04`);
 		this.clicked_region = texture.getRegion(`${color}_button05`);
 		this.anchorPoint.set(0, 0);
 		this.setOpacity(0.5);
-		this.label = label;
 		this.floating = false;
-
-		this.font = new Text(0, 0, {
-			font: "kenpixel",
-			size: 12,
-			fillStyle: "black",
-			textAlign: "center",
-			textBaseline: "middle",
-		});
 	}
 
 	override onOver() {
@@ -70,29 +62,15 @@ class ButtonUI extends UISpriteElement {
 		);
 		return false;
 	}
-
-	override draw(renderer: Parameters<UISpriteElement["draw"]>[0]) {
-		super.draw(renderer);
-		this.font.draw(
-			renderer,
-			this.label,
-			this.pos.x + this.width / 2,
-			this.pos.y + this.height / 2,
-		);
-	}
-
-	override onDestroyEvent() {
-		this.font.destroy();
-	}
 }
 
 class CheckBoxUI extends UISpriteElement {
 	private on_icon_region: object;
 	private off_icon_region: object;
-	private font: Text;
 	private isSelected: boolean;
 	private label_on: string;
 	private label_off: string;
+	label: Text;
 
 	constructor(
 		x: number,
@@ -116,16 +94,15 @@ class CheckBoxUI extends UISpriteElement {
 		this.label_off = offLabel;
 		this.floating = false;
 
-		this.font = new Text(0, 0, {
+		// create label as a sibling — added to the parent by the caller
+		this.label = new Text(x + this.width, y + this.height / 2, {
 			font: "kenpixel",
 			size: 12,
 			fillStyle: "black",
 			textAlign: "left",
 			textBaseline: "middle",
-			text: offLabel,
+			text: onLabel,
 		});
-
-		this.getBounds().width += this.font.measureText().width;
 	}
 
 	override onOver() {
@@ -140,26 +117,18 @@ class CheckBoxUI extends UISpriteElement {
 		if (selected) {
 			this.setRegion(this.on_icon_region);
 			this.isSelected = true;
+			this.label.setText(this.label_on);
 		} else {
 			this.setRegion(this.off_icon_region);
 			this.isSelected = false;
+			this.label.setText(this.label_off);
 		}
 	}
 
 	override onClick() {
 		this.setSelected(!this.isSelected);
 		return false;
 	}
-
-	override draw(renderer: Parameters<UISpriteElement["draw"]>[0]) {
-		super.draw(renderer);
-		this.font.draw(
-			renderer,
-			` ${this.isSelected ? this.label_on : this.label_off}`,
-			this.pos.x + this.width,
-			this.pos.y + this.height / 2,
-		);
-	}
 }
 
 class UIContainer extends UIBaseElement {
@@ -192,7 +161,6 @@ class UIContainer extends UIBaseElement {
 				fillStyle: "black",
 				textAlign: "center",
 				textBaseline: "top",
-				bold: true,
 				text: label,
 			}),
 		);
@@ -213,28 +181,29 @@ class PlayScreen extends Stage {
 
 		const cbPanel = new UIBaseElement(125, 75, 100, 100);
 
-		cbPanel.addChild(
-			new CheckBoxUI(
-				0,
-				0,
-				texture,
-				"green_boxCheckmark",
-				"grey_boxCheckmark",
-				"Music ON",
-				"Music OFF",
-			),
+		const cb1 = new CheckBoxUI(
+			0,
+			0,
+			texture,
+			"green_boxCheckmark",
+			"grey_boxCheckmark",
+			"Music ON",
+			"Music OFF",
 		);
-		cbPanel.addChild(
-			new CheckBoxUI(
-				0,
-				50,
-				texture,
-				"green_boxCheckmark",
-				"grey_boxCheckmark",
-				"Sound FX ON",
-				"Sound FX OFF",
-			),
+		cbPanel.addChild(cb1);
+		cbPanel.addChild(cb1.label);
+
+		const cb2 = new CheckBoxUI(
+			0,
+			50,
+			texture,
+			"green_boxCheckmark",
+			"grey_boxCheckmark",
+			"Sound FX ON",
+			"Sound FX OFF",
 		);
+		cbPanel.addChild(cb2);
+		cbPanel.addChild(cb2.label);
 
 		panel.addChild(cbPanel);
 
@@ -247,7 +216,7 @@ class PlayScreen extends Stage {
 }
 
 const createGame = () => {
-	const app = new App(800, 600, {
+	new App(800, 600, {
 		parent: "screen",
 		scale: "auto",
 		scaleMethod: "flex-width",