Share
Nell'ultimo tutorial, hai imparato a conoscere le entità in Crafty e come puoi manipolarle usando metodi diversi. In questo tutorial, imparerai a conoscere diversi componenti che ti permetteranno di spostare diverse entità attorno usando la tastiera.
Crafty ha tre diversi componenti per muovere gli elementi. Questi sono twoway, Quattro vie, e multiway. Questo tutorial ti presenterà tutti questi componenti. Alla fine, imparerai a conoscere il Tastiera componente e vari metodi ad esso associati.
Il twoway componente consente a un'entità di spostarsi a sinistra o a destra usando i tasti freccia o A e D. Consente inoltre all'entità di saltare usando la freccia su o il tasto W. Dovrai aggiungere un Gravità componente alle tue entità per farle saltare.
Il .twoway () il metodo accetta due argomenti. Il primo determina la velocità dell'entità nella direzione orizzontale, mentre il secondo argomento determina la velocità di salto dell'entità. Tralasciando il secondo argomento si imposta il valore della velocità di salto pari al doppio della velocità in direzione orizzontale.
Il Quattro vie componente consentirà a un'entità di muoversi in quattro direzioni diverse usando i tasti freccia o W, A, S, D. .quattro vie() il metodo accetta solo un argomento, che determinerà la velocità dell'entità data in tutte le direzioni.
Uno dei principali inconvenienti del Quattro vie componente è che non ti permette di impostare velocità diverse per le direzioni orizzontali e verticali.
D'altra parte, il multiway componente consente di impostare la velocità in ciascun asse singolarmente. Consente inoltre di assegnare tasti diversi per spostare l'entità in direzioni diverse. Il primo argomento nel .più vie () il metodo è la velocità della nostra entità. Il secondo argomento è un oggetto per determinare quale chiave muoverà l'entità in quale direzione.
Le direzioni sono specificate in gradi. 180 è a sinistra, 0 è a destra, -90 è in alto e 90 in basso. Ecco alcuni esempi:
blackBox.multiway (x: 150, y: 75, W: -90, S: 90, D: 0, A: 180); orangeBox.multiway (150, I: -90, K: 90, L: 0, J: 180); purpleBox.multiway (150, Y: -45, G: -135, B: 135, H: 45);
Il codice sopra imposta la velocità della scatola nera uguale a 150 nella direzione orizzontale e 75 nella direzione verticale. La scatola arancione si sposta a una velocità di 150 in tutte le direzioni, ma è stata assegnata una chiave diversa per il movimento. La scatola viola non si muove rigorosamente orizzontalmente o verticalmente ma con un angolo di 45 gradi. La velocità qui è espressa in pixel al secondo.
Fondamentalmente, puoi assegnare qualsiasi tasto a qualsiasi direzione usando il multiway componente. Questo può essere molto utile quando si desidera spostare più entità in modo indipendente.
Questo componente ha anche un .velocità() metodo, che può essere utilizzato per modificare la velocità di un'entità in un secondo momento. Puoi anche disabilitare i controlli chiave in qualsiasi momento usando il .disableControl () metodo.
I tre componenti nelle sezioni precedenti ti consentono di spostare un'entità usando diversi tasti. Tuttavia, potresti volere più controllo su ciò che accade quando viene premuto un tasto. Ad esempio, potresti voler rendere il giocatore più grande una volta premuto un tasto specifico o rendere il giocatore più potente una volta premuto un altro tasto. Questo può essere ottenuto usando il Tastiera componente.
Questo componente ti dà anche accesso a .isDown (String keyName / KeyCode) metodo, che restituirà vero o falso in base alla pressione del tasto KeyName o Chiave.
Crafty ha anche due diversi eventi di tastiera, KeyDown e KeyUp. Puoi associare questi eventi a qualsiasi entità nel tuo gioco senza utilizzare il Tastiera componente. Il KeyDown l'evento viene attivato ogni volta che il DOM keydown evento si verifica. Allo stesso modo, il KeyUp l'evento viene attivato ogni volta che il DOM keyup evento si verifica.
Accentsconagua
blackBox.bind ('KeyDown', function () if (this.isDown ('L')) this.w + = 5;); orangeBox.bind ('KeyDown', function (e) if (e.key == Crafty.keys.K) this.h + = 5;);Nel codice sopra, il scatola nera già avuto il Tastiera componente. Questo ci ha permesso di usare il .è giù() metodo per determinare il tasto premuto.
Prova a premere L e K nella demo seguente per aumentare rispettivamente la larghezza e l'altezza dei due riquadri.
È molto facile aggiungere del testo al tuo gioco usando Crafty. Innanzitutto, è necessario creare un'entità con il Testo componente. Quindi, puoi aggiungere del testo all'entità usando il .testo() metodo, che accetta una stringa come parametro.
La posizione del testo può essere controllata usando il .attr () metodo per impostare il valore di X e y coordinate. Allo stesso modo, il colore del testo può essere specificato usando il .colore del testo() metodo. Alcune altre proprietà come la taglia, peso, e famiglia del carattere può essere impostato utilizzando il .textFont () metodo. Ecco un esempio:
var playerName = Crafty.e ('2D, DOM, Text') .attr (x: 10, y: 10); playerName.text ( 'ZombieHunter'); playerName.textColor ( 'rosso'); Come ho detto prima, il .testo() metodo richiede di fornire una stringa come parametro. Ciò significa che se il punteggio del gioco è un numero, dovrai convertirlo in una stringa per il .testo() metodo per renderlo.
La maggior parte delle proprietà e dei metodi 2D funzionerà senza alcun problema con il Testo componente. Ad esempio, puoi ruotare e spostarlo facilmente. Tuttavia, ci sono due cose che devi tenere a mente. Lo stile del testo funziona meglio quando viene eseguito il rendering utilizzando il DOM. Quando si esegue il rendering su Canvas, la larghezza e l'altezza dell'entità di testo verranno impostate automaticamente.
Usando la conoscenza di questo e dell'ultimo tutorial, ora dovresti essere in grado di spostare diverse entità usando la tastiera. È inoltre possibile modificare l'aspetto del lettore principale e di altre entità in base ai diversi tasti premuti.
Se hai domande su questo tutorial, fammelo sapere nei commenti.
