Share
È molto importante in un gioco che rilevi correttamente le collisioni. Nessuno gioca a un gioco in cui le cose iniziano a esplodere anche quando sono molti pixel separati. Oltre alla grafica e ai suoni, questa è un'altra cosa che dovresti cercare di mantenere il più preciso possibile.
In questo tutorial, imparerai a scoprire e debuggare le collisioni in dettaglio.
Prima di poter rilevare eventuali collisioni, è necessario aggiungere il Collisione componente a un'entità. Questo componente rileva con successo una collisione tra due poligoni convessi. Questo componente ha due eventi: Hiton e HitOff. Il Hiton l'evento viene attivato quando si verifica una collisione. Non verrà attivato nuovamente a meno che non cessino le collisioni di quel tipo specifico. Il HitOff l'evento viene attivato quando cessa una collisione.
Se stai verificando la collisione con più componenti e tutte queste collisioni si verificano simultaneamente, ogni collisione genererà il proprio Hiton evento. I dati ricevuti da un evento di collisione sono validi solo fino a quando la collisione è ancora in corso.
Puoi usare il .checkHits () metodo per eseguire i controlli di collisione contro tutte le entità con un componente specificato. La chiamata di questo metodo più volte non comporterà più controlli ridondanti.
Tieni presente che i controlli di hit vengono eseguiti dopo l'immissione di ogni nuovo frame. Diciamo che ci sono due oggetti che non sono ancora entrati in collisione quando viene eseguito il controllo dei colpi. Ora, se uno degli oggetti si sposta in una nuova posizione e si sovrappone più tardi con il secondo oggetto nello stesso frame, gli eventi di successo non verranno attivati finché non viene eseguito nuovamente un controllo di collisione nel fotogramma successivo.
Se devi rilevare solo la prima collisione tra entità diverse, puoi utilizzare il comando .ignoreHits (String componentList) metodo. Il ComponentList variabile è un elenco di componenti separati da virgole con i quali non si desidera più rilevare le collisioni. Quando non vengono forniti argomenti, interromperà il rilevamento delle collisioni con tutte le entità. Ecco un esempio:
Accentsconagua
littleBox.bind ("HitOn", function (hitData) Crafty ("Obstacle"). color ('red'); this.ignoreHits ('Obstacle'););Puoi vedere che Crafty non solo inizia a rilevare il Hiton evento ma anche il HitOff evento. Ecco perché il colore della grande scatola non cambia in nero.
Un altro metodo simile chiamato .resetHitChecks (String ComponentList) può essere usato per ricontrollare la collisione tra componenti specifici. Questo metodo continuerà a sparare Hiton evento ancora e ancora fino a quando la collisione sta ancora accadendo.
Quando le entità si muovono continuamente, è molto difficile vedere se le collisioni vengono sparate al momento giusto. Nella demo sopra, sembra che il Hiton l'evento sta sparando leggermente prima dell'evento reale. Crafty ti offre la possibilità di disegnare le hit box attorno alle entità in modo che tu possa effettivamente vedere cosa sta succedendo.
Esistono due componenti che è possibile utilizzare per scopi di debug. Questi sono WiredHitBox e SoldHitBox.
Il primo componente ti permetterà di usare il .debugStroke ([String strokeColor]) metodo, che disegnerà un contorno attorno all'entità con un determinato colore. Quando non viene fornito alcun colore, il colore rosso viene utilizzato per disegnare il contorno.
Allo stesso modo, il secondo componente è usato per riempire le entità con un dato colore usando il .debugFill ([String fillStyle]) metodo. Quando non viene fornito alcun colore, viene utilizzato il colore rosso. Ecco una demo con il .debugStroke () metodo.
È anche possibile creare una hit box personalizzata per il rilevamento delle collisioni. Ciò è utile quando usi sprite di immagini nel tuo gioco che non sono rettangolari. Il .collisione() Il metodo che è possibile utilizzare per creare un'area di impatto personalizzata accetta un singolo parametro che viene utilizzato per impostare le coordinate della nuova casella di riscontro.
Queste coordinate possono essere fornite sotto forma di un oggetto poligono, una matrice di coppie di coordinate x, y o un elenco di coppie di coordinate x, y. I punti del poligono sono contrassegnati in senso orario e sono posizionati rispetto allo stato non ruotato della nostra entità. L'area di successo personalizzata ruoterà automaticamente su se stessa quando l'entità ruota.
Ci sono alcune cose che dovresti tenere a mente quando usi aree di successo personalizzate. L'area attiva definita deve formare un poligono convesso affinché il rilevamento della collisione funzioni correttamente. Per coloro che non hanno familiarità con il termine, un poligono convesso è un poligono con tutti gli angoli interni inferiori a 180 °. Potresti anche vedere un leggero peggioramento delle prestazioni quando l'area colpita che hai definito si trova all'esterno dell'entità stessa.
L'area di successo personalizzata che hai definito non avrà alcun effetto a meno che tu non aggiunga il Collisione componente ad ogni entità con la quale l'area colpita deve rilevare una collisione.
littleBox.collision (80, 0, 100, 100, 50, 100) .debugStroke ('green') .checkHits ('Ostacolo');Nella demo sopra, abbiamo definito una hit box personalizzata che si trova all'esterno della casella arancione. Come puoi vedere, il blocco grande diventa blu solo quando entra in collisione con il triangolo. La posizione della scatola arancione non ha importanza.
Diamo un'occhiata a un altro esempio che utilizza un'astronave di Gumichan01. La casella di scelta predefinita per l'astronave è il limite dello sprite stesso. Nello scenario attuale, l'angolo in alto a destra dell'astronave tocca prima il blocco, ma quello spazio è effettivamente vuoto. Per gli utenti che stanno giocando il tuo gioco, questo è un caso di rilevamento di collisione errato.
Quello che puoi fare qui è definire la tua area di successo usando una forma triangolare come il seguente codice. Il poligono di hit box personalizzato che definisci può avere tutti i lati che vuoi. Assicurati che sia ancora un poligono convesso.
spaceShip.collision (8, 0, 0, 48, 70, 48);
Dopo aver completato tutti questi tutorial, ora dovresti essere in grado di creare i tuoi piccoli giochi con una grafica eccezionale, effetti sonori piacevoli, scene e rilevamento di collisioni. Dovrei ricordarti che ho usato la versione 0.7.1 di Crafty in questo tutorial, e le demo potrebbero non funzionare con altre versioni della libreria.
JavaScript è diventato una delle lingue di fatto di lavorare sul web. Non è senza le curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione sul mercato Envato.
Se hai domande, fammelo sapere nei commenti.
