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,7 +9,6 @@ import {
 	TextureAtlas,
 	UIBaseElement,
 	UISpriteElement,
-	video,
 } from "melonjs";
 import { createExampleComponent } from "../utils";
 
@@ -20,8 +19,6 @@ let texture: TextureAtlas;
 class ButtonUI extends UISpriteElement {
 	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, {
@@ -33,16 +30,18 @@ class ButtonUI extends UISpriteElement {
 		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, {
+		// add label as child — drawn automatically by the container
+		const font = new Text(this.width / 2, this.height / 2, {
 			font: "kenpixel",
 			size: 12,
 			fillStyle: "black",
 			textAlign: "center",
 			textBaseline: "middle",
+			text: label,
 		});
+		this.addChild(font);
 	}
 
 	override onOver() {
@@ -70,20 +69,6 @@ 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 {
@@ -116,14 +101,16 @@ class CheckBoxUI extends UISpriteElement {
 		this.label_off = offLabel;
 		this.floating = false;
 
-		this.font = new Text(0, 0, {
+		// add label as child — positioned to the right of the checkbox
+		this.font = new Text(this.width, this.height / 2, {
 			font: "kenpixel",
 			size: 12,
 			fillStyle: "black",
 			textAlign: "left",
 			textBaseline: "middle",
-			text: offLabel,
+			text: onLabel,
 		});
+		this.addChild(this.font);
 
 		this.getBounds().width += this.font.measureText().width;
 	}
@@ -140,26 +127,18 @@ class CheckBoxUI extends UISpriteElement {
 		if (selected) {
 			this.setRegion(this.on_icon_region);
 			this.isSelected = true;
+			this.font.setText(this.label_on);
 		} else {
 			this.setRegion(this.off_icon_region);
 			this.isSelected = false;
+			this.font.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 +171,6 @@ class UIContainer extends UIBaseElement {
 				fillStyle: "black",
 				textAlign: "center",
 				textBaseline: "top",
-				bold: true,
 				text: label,
 			}),
 		);
@@ -247,7 +225,7 @@ class PlayScreen extends Stage {
 }
 
 const createGame = () => {
-	const app = new App(800, 600, {
+	const _app = new App(800, 600, {
 		parent: "screen",
 		scale: "auto",
 		scaleMethod: "flex-width",