Share
Se hai mai sviluppato giochi HTML5 in precedenza, potresti avere familiarità con alcuni motori di gioco che possono rendere molto più semplice lo sviluppo del gioco. Hanno tutto il codice necessario per rilevare collisioni, generare entità diverse o aggiungere effetti sonori al gioco. In questo tutorial imparerai su un altro motore di gioco chiamato Crafty. È molto facile da usare e supporta tutti i principali browser, tra cui IE9.
Una volta minified, la libreria ha una dimensione di soli 127kb, quindi non comporterà grandi ritardi nel caricamento del gioco. Supporta mappe sprite, quindi puoi disegnare facilmente le entità di gioco sullo schermo. Puoi anche creare eventi personalizzati che possono essere attivati ogni volta che vuoi e su qualunque oggetto tu voglia.
Ci sono anche componenti per suoni, animazioni e altri effetti. Nel complesso, questo motore di gioco è un'ottima scelta se vuoi sviluppare alcuni giochi HTML5 di base.
La prima cosa che devi fare è includere Crafty nel tuo progetto. Puoi scaricare il file e caricarlo nei tuoi progetti oppure puoi collegarti direttamente alla versione minificata ospitata su un CDN. Una volta caricata la libreria, è possibile utilizzare la seguente riga per inizializzare Crafty:
Crafty.init ([Larghezza numero, Altezza numero, stage_elem]);
I primi due argomenti determinano la larghezza e l'altezza del nostro palco. Il terzo argomento è usato per specificare l'elemento che useremo come nostro palcoscenico. Se il terzo argomento non viene fornito, Crafty utilizzerà a div con id cr-stage come il suo palcoscenico. Allo stesso modo, se mancano gli argomenti width e height, Crafty imposterà la larghezza e l'altezza del nostro stage uguale alla larghezza e all'altezza della finestra.
A questo punto, dovresti avere il seguente codice:
Le entità sono elementi costitutivi di un gioco Crafty. Tutto, dal giocatore ai nemici e agli ostacoli, viene rappresentato usando le entità. È possibile passare un elenco di componenti a un'entità. Ciascuno di questi componenti aggiungerà funzionalità aggiuntive alla nostra entità assegnando proprietà e metodi da quel componente all'entità. Puoi anche concatenare altri metodi a un'entità per impostare varie proprietà come larghezza, altezza, posizione e colore. Ecco un esempio molto semplice di aggiunta di componenti a un'entità:
Accentsconagua
Crafty.e ('2D, Canvas, Color');Ogni entità che si desidera visualizzare all'utente avrà bisogno sia del componente 2D sia di un livello di rendering. Il livello di rendering può essere DOM, Tela, o WebGL. Si noti che il supporto WebGL è stato aggiunto nella versione 0.7.1. Attualmente, solo il folletto, Immagine, SpriteAnimation, e Colore i componenti supportano il rendering WebGL. Testo entità ancora da usare DOM o Tela per adesso.
Ora puoi usare il attr () metodo per impostare il valore di varie proprietà tra cui la larghezza, l'altezza e la posizione della propria entità. La maggior parte dei metodi in Crafty restituiscono l'entità su cui sono chiamati e attr () non fa eccezione. Ciò significa che sarai in grado di concatenare più metodi per impostare altre proprietà dei tuoi elementi. Ecco un esempio:
Crafty.e ("2D, Canvas, Color") .attr (x: 200, y: 100, w: 200, h: 50) .color ("orange");Questo creerà un'entità rettangolare arancione sul palco.
Ora che hai creato l'entità, scriviamo del codice per spostarlo usando la tastiera. Puoi muovere un'entità in quattro direzioni diverse, cioè su, giù, sinistra e destra, aggiungendo il Quattro vie componente ad esso.
L'entità può quindi essere spostata utilizzando i tasti freccia o W, A, S e D. È possibile passare un numero come argomento al quattro vie costruttore per impostare la velocità dell'entità. Ecco come dovrebbe apparire ora il codice dell'entità:
Crafty.e ("2D, Canvas, Color, Fourway") .attr (x: 200, y: 100, w: 200, h: 50) .color ("orange") .fourway (300);Puoi limitare il movimento di un'entità a due sole direzioni usando il twoway componente. Sostituire il Quattro vie componente nel codice sopra con twoway Confinerà il movimento della scatola solo nella direzione orizzontale. Questo è evidente dalla seguente demo:
È anche possibile aggiungere i propri componenti a entità diverse per l'identificazione o per raggruppare entità simili. In questo caso, sto aggiungendo il Pavimento componente alla nostra scatola arancione. È possibile utilizzare alcuni altri nomi descrittivi per consentire l'identificazione di entità diverse.
Crafty.e ("2D, Canvas, Color, Twoway, Floor") .attr (x: 200, y: 340, w: 200, h: 50) .color ("orange") .twoway (300);C'è un altro componente molto utile che puoi usare per muovere gli elementi, e viene chiamato il Gravità componente. Quando viene aggiunto a un'entità, farà cadere quell'entità. Potresti voler fermare l'entità data di cadere ulteriormente, una volta che incontra altre entità. Questo può essere ottenuto passando un componente identificatore come argomento alla funzione gravità. Ecco il codice che fa cadere il piccolo quadrato nero sul pavimento o sulla piattaforma:
Crafty.e ("2D, Canvas, Color, Gravity") .attr (x: 200, y: 50, w: 50, h: 50) .color ("black") .gravity ("Floor");Come vedi nel tutorial, siamo stati in grado di creare la struttura di base di un gioco semplice usando un codice molto piccolo. Tutto quello che dovevamo fare era aggiungere componenti alle nostre entità e specificare i valori di diverse proprietà come larghezza, altezza o velocità di movimento.
Questo tutorial intendeva darti un'idea di base delle entità e di altri concetti relativi a Crafty. Nella parte successiva, imparerai a conoscere le entità in modo molto più dettagliato. Se hai domande su questo tutorial, fammelo sapere nei commenti.
