BeeEngine logo BeeEngine JAVASCRIPT 2D ENGINE

Menu di Gioco Canvas JS: Voci, Input e Transizioni

Documentazione – BeeEngine
v2.8.1

BeeMenuScene — Documentazione Tecnica

Scena di menu: next / onStart / items

📁 Panoramica

BeeMenuScene è una scena per BeeSceneManager, non un widget BeeUI. Vive in src/gameplay/BeeMenuScene.js. Due modi: senza items è una splash (Invio / Spazio / click → onStart o next). Con items è una lista: frecce / WASD, conferma, click sulla riga. Ogni voce ha onSelect o next.

Quello che non è: un pause menu sopra il gioco, un focus Tab, un gamepad. Il loop non chiama scenes.update in pausa: niente input vivo a dt = 0. Il draw sì (pass schermo, dopo la camera).

const menu = new BeeMenuScene({ title: ‘BEE ENGINE’, subtitle: ‘PLATFORM’, next: ‘game’ }); gioco.scenes.add(‘menu’, menu); gioco.scenes.add(‘game’, partita); gioco.scenes.change(‘menu’);

📁 Attivazione

Senza engine (scena non passata da scenes.add e update senza terzo argomento) è no-op + warn. Una scena next inesistente la lancia scenes.change.

  1. 1. voceSe c’è item.onSelect, quella vince e non cambia scena da sola.
  2. 2. next voceitem.next → scenes.change.
  3. 3. scenaonStart(engine, this) oppure this.next.
  4. 4. nienteWarn in console. Nessun default 'game'.

enter(data) può sovrascrivere title, subtitle, next, onStart, items, selected. hint / footer restano quelli del costruttore. exit() è vuoto: uscire non significa “parte la partita”.

📁 Input e disegno

Tasti via event.code: Enter, Space, ArrowUp/Down, KeyW/S. Il click (e il primo dito, mouse.wasPressed) in splash attiva; con voci, solo se il punto sta in itemBounds (320×32, centro, da height * 0.52). Click sulla riga = seleziona + attiva subito.

draw è il pass UI del manager (scenes.drawUI), spazio schermo, ctx.save/restore. Il blink usa time.elapsed (simulazione): in pausa il draw gira comunque, ma elapsed è fermo.

📁 Dove è facile sbagliare

Menu + gioco.pause() = morto. Il loop non ticka le scene. Non è un overlay di pausa: per quello c’è BeeUI (la demo main.js).

onSelect non chiama change. Se la voce deve andare a 'game', o lo fai tu nell’hook o metti next e togli onSelect.

Registra prima di ascoltare. scenes.add('menu', scene) inietta engine. Senza, Invio fa warn e basta.

Non è BeeUI. Niente anchor, focus, nine-slice. È canvas 2D a mano, una colonna di label.

📁 Esempio: voci + onStart

const menu = new BeeMenuScene({ title: ‘BEE ENGINE’, items: [ { label: ‘Gioca’, next: ‘game’ }, { label: ‘Esci’, onSelect: () => gioco.stop() } ] }); gioco.scenes.add(‘menu’, menu); gioco.scenes.change(‘menu’, { subtitle: ‘v2.8.1’ });

📁 Riepilogo API

Oggetto scena: enter / exit / update / draw. Il manager accetta anche onEnter / onExit; questa classe usa i nomi corti.

Membro Ritorna Scopo
new BeeMenuScene(options?) BeeMenuScene title, subtitle, hint, footer, items, next, onStart. engine resta null finché add / update.
enter(data) — Patch opzionale: title, subtitle, next, onStart, items, selected. Poi clamp.
exit() — Vuoto. Niente log “avvio partita”.
update(dt, input, engine) — Naviga / attiva. Early-return senza input. Lega this.engine.
draw(ctx, engine) — Pass schermo, save/restore. Blink su time.elapsed.
itemBounds(index, w, h) {x,y,w,h} Hit-box della riga. Pubblico se vuoi allineare un overlay.
items[] / selected array / number Voce: label, next?, onSelect?.
next / onStart string / fn Target splash o fallback se la voce non ha next/onSelect.