Share
Nell'ultima serie di Crafty, hai imparato a conoscere diversi modi di spostare gli elementi usando la tastiera. Mentre una tastiera può aiutarti a creare una varietà di giochi, alcune situazioni richiedono il controllo di diversi eventi del mouse per rendere il gioco più piacevole. Ad esempio, considera un gioco in cui i fumetti vengono visualizzati in posizioni casuali sullo schermo. Se l'utente deve fare clic sui palloncini per guadagnare punti, sarà sicuramente necessario un componente Mouse.
Allo stesso modo, il Tastiera componente non sarà di alcuna utilità quando si sviluppano giochi per dispositivi mobili. In questo caso, dovrai fare affidamento sul componente Touch per creare i tuoi giochi. In questo tutorial, imparerai a conoscere sia i componenti Mouse e Touch in Crafty.
Il Topo componente è usato per aggiungere eventi di base del mouse alle entità. Ecco un elenco di tutti gli eventi inclusi in questo componente:
Tieni presente che gli eventi del mouse verranno attivati su un'entità solo se è stato aggiunto Topo componente a loro. Ecco un codice che lega il MouseMove evento alla scatola nella demo qui sotto:
Accentsconagua
var Box = Crafty.e ("2D, Canvas, Color, Mouse") .attr (x: 200, y: 100, w: 200, h: 200) .color ("nero") .origin ("centro ") .bind ('MouseMove', function () this.rotation + = 1;);Dopo che la scatola è stata vincolata al MouseMove evento, ogni movimento del mouse sopra il riquadro lo farà ruotare di 1 grado. Il .origine() il metodo è stato usato per impostare il punto di rotazione della nostra scatola al centro. Può anche prendere altri valori come "in alto a sinistra", "in basso a destra", eccetera.
Prova a spostare il cursore dentro e fuori dalla scatola nella demo. Tenendo premuto un pulsante del mouse all'interno della casella si attiverà il MouseDown evento e cambia il colore della scatola in rosso.
UN MouseEvent l'oggetto viene anche passato come parametro alla funzione di callback di tutti questi eventi del mouse. Contiene tutti i dati relativi a quel particolare evento del mouse.
Puoi anche controllare quale pulsante del mouse è stato cliccato dall'utente usando il mousebutton proprietà. Ad esempio, un clic sinistro può essere rilevato usando Crafty.mouseButtons.LEFT. Allo stesso modo, un clic del tasto centrale può essere rilevato utilizzando Crafty.mouseButtons.MIDDLE.
Il mouseDrag componente fornisce un'entità con diversi eventi del mouse drag-and-drop. Tuttavia, l'aggiunta di questi eventi non ha molto senso se l'entità non può essere trascinata e rilasciata. È possibile aggiungere capacità di trascinamento della selezione a un'entità utilizzando il comando trascinabili componente. Questo componente ascolta eventi dal mouseDrag componente e muove di conseguenza l'entità data. Il mouseDrag componente viene automaticamente aggiunto a qualsiasi entità con trascinabili componente.
Il trascinabili componente ha tre metodi: .EnableDrag (), .disableDrag (), e .dragDirection (). I primi due metodi abilitano e disabilitano il trascinamento su un'entità, rispettivamente. Il terzo metodo è usato per impostare la direzione di trascinamento.
Per impostazione predefinita, l'entità si sposterà in qualsiasi direzione del movimento del cursore. Tuttavia, puoi limitare il movimento dell'entità a una direzione verticale usando this.dragDirection (x: 0, y: 1). Allo stesso modo, puoi forzare un'entità a muoversi solo in una direzione orizzontale usando this.dragDirection (x: 1, y: 0).
Puoi anche specificare la direzione direttamente in gradi. Ad esempio, per spostare un elemento di 45 gradi, puoi semplicemente usarlo this.dragDirection (45) invece di this.dragDirection (x: 1, y: 1).
Oltre a trascinare e rilasciare elementi in giro, è anche necessario sapere quando il trascinamento è iniziato e interrotto. Questo può essere ottenuto usando startDrag e stopDrag eventi. C'è anche un trascinando evento che viene attivato mentre un'entità viene trascinata.
Ecco il codice per trascinare la casella rossa nella demo di seguito:
var hBox = Crafty.e ("2D, Canvas, Color, Draggable") .attr (x: 50, y: 50, w: 50, h: 50) .color ("red") .dragDirection (0) .bind ('Dragging', function (evt) this.color ("black");) .bind ('StopDrag', function (evt) this.color ("red"););Dopo aver impostato la larghezza, l'altezza e la posizione della scatola, ho usato .dragDirection (0) per limitare il movimento della nostra scatola in direzione orizzontale. Ho anche usato il .bind () metodo per associare l'entità al trascinando e stopDrag metodo.
La modifica del colore in nero fornisce all'utente l'indicazione che l'entità viene attualmente trascinata. Puoi anche usare il startDrag evento invece di trascinando perché il colore dell'entità deve essere modificato solo una volta. Il trascinando l'evento è più appropriato quando devi cambiare o monitorare continuamente una proprietà dell'entità che viene trascinata. Ad esempio, è possibile utilizzare il seguente codice per disabilitare il trascinamento sulla casella una volta raggiunta la posizione desiderata.
hBox.bind ('Dragging', function (evt) this.color ("black"); if (this.x> 300) this.disableDrag (););Se è necessario accedere ad eventi relativi al tocco per un'entità, è possibile utilizzare il Toccare componente. Questo componente ti dà accesso a quattro diversi eventi:
I primi tre eventi hanno accesso a TouchEvent oggetto, che contiene tutte le informazioni sul tocco.
Alcuni giochi o progetti potrebbero richiedere di rilevare più tocchi. Questo può essere ottenuto abilitando il multi-touch Crafty.multitouch (vero). Passando questo metodo vero o falso attiva e disattiva il multi-tocco.
Prima di usare il Toccare componente nei tuoi progetti, dovresti sapere che è attualmente incompatibile con il trascinabili componente.
Dopo aver completato questo tutorial, ora dovresti essere in grado di gestire correttamente diversi eventi del mouse o creare facilmente giochi basati su drag-and-drop. Tieni presente che in questo tutorial ho utilizzato la versione 0.7.1 di Crafty e che le demo potrebbero non funzionare con altre versioni della libreria.
Nel prossimo tutorial, imparerai come usare i fogli sprite per animare diversi personaggi del gioco in Crafty.
