Testo su Canvas in JavaScript: label e HUD di gioco

Documentazione – BeeEngine

v2.10.3

BeeText — Documentazione Tecnica

Etichetta sul pass ui e barra drawHUD

📁 Panoramica

BeeText è una riga di testo. Estende BeeEntity. Vive in src/graphics/BeeText.js. drawLayer è ui: il pass è in pixel schermo, dopo il restore della camera. width e height sono 0, quindi il culling non la salta.

draw scrive text in worldX / worldY, con baseline top. drawHUD è un metodo statico: barra in alto con punteggio, titolo e vite. Il prefab text costruisce la label da text, x, y, font, color, align.

const label = new BeeText(‘HP 3’, 16, 12); gioco.addEntity(label);

📁 HUD

La label usa il baseline top. La barra fissa alphabetic, perché i testi stanno a y = 28.

1. labelPass ui. x / y sono pixel schermo se non ha un parent nel mondo.
2. drawFont, colore, align, baseline, poi fillText. Senza ctx, o con visible === false: return.
3. drawHUDBarra alta barHeight (45). Score a sinistra, titolo al centro, vite a destra. Chiamala da scene.draw.

📁 Dove è facile sbagliare

La barra è in pixel schermo. drawHUD legge ctx.canvas.width e disegna da 0, 0. Va chiamata da scene.draw, dopo il restore della camera. Sotto la camera la barra scrolla col mondo.

Punteggio e vite. -3 diventa -00003: il segno sta davanti agli zeri. Un valore non finito vale 0. Le vite si arrotondano per difetto: 1.5 è un cuore. Da 0 a 32 ripete l’icona; oltre scrive il numero. NaN vale 0, non lancia.

Un parent nel mondo. La label resta sul pass ui. worldX / worldY includono il parent, ma quel pass non applica la camera: la scritta non segue lo scroll.

📁 Esempio: label e barra

const label = new BeeText(‘HP 3’, 16, 12); gioco.addEntity(label); // scene.draw, a camera già restaurata BeeText.drawHUD(ctx, player.score, player.lives, ‘LIVELLO 1’);

Senza ctx, o senza ctx.canvas nella barra, i due metodi escono e non lanciano.

📁 Riepilogo API

Una sola riga: fillText non va a capo. Il font di default della label è bold 20px Arial, colore #ffffff, align left.

Membro	Ritorna	Scopo
`new BeeText(text?, x?, y?, font?, color?, align?)`	`BeeText`	Testo vuoto in `0, 0`. `baseline` `top`. Pass `ui`. Box 0×0.
`draw(ctx)`		`fillText` in `worldX` / `worldY`. Senza `ctx` o con `visible === false`: return.
`BeeText.drawHUD(ctx, score?, lives?, title?, options?)`		Barra in alto. Baseline `alphabetic`. Senza `ctx` o `canvas`: return. Titolo vuoto: non lo disegna.
`options.scoreLabel` / `livesLabel` / `livesIcon`		Default `SCORE`, `LIVES`, cuore. Icona non stringa: torna il cuore. Vite 0–32: icone. Oltre: il numero.
`options.barHeight` / `titleColor` / `textColor`		Barra 45 px, titolo `#FFD700`, score `#FFFFFF`. Le vite restano `#FF4444`.
`text` / `font` / `color` / `align` / `baseline`		Stato della label. Si leggono a ogni `draw`.