BeeEngine logo BeeEngine JAVASCRIPT 2D ENGINE

Virtual Joystick in JavaScript for Canvas Games (Touch + Mouse)

Documentazione – BeeEngine
v2.10.9

BeeJoystick — Documentazione Tecnica

Stick in basso a sinistra: dito o mouse, frecce e WASD

📁 Panoramica

BeeJoystick è lo stick virtuale. Vive in src/input/BeeJoystick.js. Non parte da solo: gioco.enableJoystick() lo crea, distrugge il controllo touch precedente e il loop lo disegna dopo il restore della camera, in pixel del canvas.

La base sta in basso a sinistra. margin 35, radius 45, knobRadius 18, deadZone 10. Si possono riassegnare dopo: il disegno successivo li rilegge. baseX è margin + radius. baseY è l’altezza del canvas meno margin + radius.

Il punto vale se dista dalla base al massimo radius + 20. Il pomello non esce dal raggio. Oltre la dead zone lo stick accende una coppia: ArrowLeft e KeyA, ArrowRight e KeyD, ArrowUp e KeyW, ArrowDown e KeyS. Nel canvas la y cresce verso il basso: il puntatore sopra la base è su.

gioco.enableJoystick(); function update(dt, input) { if (input.isPressed(‘ArrowLeft’) || input.isPressed(‘KeyA’)) x -= 180 * dt; if (input.isPressed(‘ArrowRight’) || input.isPressed(‘KeyD’)) x += 180 * dt; }

📁 Presa

Un solo controllo alla volta. Il secondo dito, o il mouse mentre c’è un dito, non entra.

  1. presa Il dito, o il tasto sinistro, parte dentro radius + 20. active diventa true.
  2. direzione Oltre la dead zone si accende la coppia di quell’asse. Il valore uguale a deadZone non basta: serve strettamente oltre.
  3. rilascio Fine del dito, mouse su, o il puntatore che esce dalla finestra. Pomello al centro, otto tasti spenti.

📁 Dove è facile sbagliare

Mouse e dito non si mischiano. mousedown è sul canvas. mousemove e mouseup sono sulla window, così il pomello segue anche fuori dalla base. Il destro si ignora. Un mouse con firesTouchEvents si ignora: quel gesto lo prende il dito. touchId è l’id del dito; col mouse resta null.

Le coordinate sono del bitmap. (client - rect) * (canvas / rettangolo CSS). Se il rettangolo CSS ha lato 0, il divisore usato è 1. Senza input.setKey il pomello si muove e non lancia. draw senza ctx esce.

Chi lo chiude. destroy toglie i listener e spegne le otto chiavi. BeeEngine.destroy lo chiama e mette touchControls a null. Dopo, un mousedown non riaccende ArrowLeft.

📁 Riepilogo API

La base è bianca, il pomello è #ffcc00. Da attivo l’alfa è più alto. Due assi insieme sono una diagonale: le due coppie stanno accese nello stesso momento.

Membro Ritorna Scopo
gioco.enableJoystick() BeeJoystick Crea lo stick, distrugge il controllo touch già presente e lo assegna a touchControls.
margin / radius / knobRadius / deadZone number 35, 45, 18 e 10. La base e il colpo li rileggono al movimento e al disegno.
baseX / baseY / stickX / stickY number Centro della base e centro del pomello, in pixel del bitmap.
active / touchId active è true durante la presa. touchId è l’identifier del dito, oppure null se comanda il mouse.
draw(ctx) Base e pomello. Senza ctx: return. Lo chiama il loop, dopo la camera.
destroy() Toglie touch, mouse e resize. Spegne le otto chiavi. Il destroy del motore lo chiama.