BeeEngine logo BeeEngine JAVASCRIPT 2D ENGINE

Pulsante su Canvas in JavaScript: click, hover e UI

Documentazione – BeeEngine
v2.10.6

BeeButton — Documentazione Tecnica

Pulsante sul pass ui: click al rilascio, input.mouse

📁 Panoramica

BeeButton è un pulsante su schermo. Estende BeeEntity. Vive in src/input/BeeButton.js. drawLayer è ui: il disegno sta in pixel del canvas, dopo il restore della camera. Lo aggiungi con addEntity. Il loop chiama update e il pass ui chiama draw.

Il rettangolo è worldX, worldY, width, height di adesso. I bordi destro e basso sono dentro. Di default è 160×50, testo Button, font 20px Arial. Il mouse è input.mouse di BeeInput: x, y, pressed, wasPressed.

const play = new BeeButton({ x: 320, y: 240, text: ‘Play’, onClick(button) { button.text = ‘OK’; } }); gioco.addEntity(play);

📁 Click

onClick parte al rilascio, se il puntatore è ancora nel rettangolo. wasPressed da solo non basta.

  1. pressione wasPressed dentro il rettangolo: down true e hover true. onClick non parte.
  2. 2. rilascio pressed non è più true. Ancora dentro: onClick(button) una volta, poi down false.
  3. 3. fuoriIl rilascio fuori dal rettangolo non chiama onClick. down torna false.

📁 Dove è facile sbagliare

Il frame della pressione conta. down diventa true solo se in quel frame il puntatore è già dentro. hover richiede visible, active e non destroyed.

Stato spento. active === false o destroyed mettono hover e down a false. visible === false azzera down e non chiama onClick. In pausa il motore non aggiorna le entità: il bottone resta all’ultimo frame.

Mouse assente. Senza input.mouse, o con x / y non finiti, hover è false e non lancia. draw senza ctx esce. Se onClick non è una funzione, il rilascio azzera solo down.

📁 Riepilogo API

Il colore premuto vince sull’hover. Il bordo del rettangolo è bianco. Il testo è centrato, baseline middle.

Membro Ritorna Scopo
new BeeButton(options?) BeeButton x y default 0. width 160, height 50. text Button. Sfondi #333, #555, #222. Testo white. drawLayer ui.
update(dt, input, engine) Legge input.mouse. Aggiorna hover e down. Al rilascio dentro chiama onClick(this).
draw(ctx) Rettangolo e testo in worldX / worldY. Senza ctx, o se non è visible: return.
onClick Funzione (button) => void, oppure null. Una volta per rilascio valido.
hover / down boolean hover: puntatore nel rettangolo. down: pressione partita dentro, non ancora rilasciata.
text / font / color / background / hoverBackground / pressedBackground Contenuto e colori del disegno. down usa pressedBackground, altrimenti l’hover, altrimenti background.