Share
Fino a questo punto in questa serie, hai imparato come manipolare entità diverse e utilizzare la tastiera per spostarle. In questa parte, imparerai come utilizzare il loop di gioco in Crafty per controllare continuamente vari eventi e animare entità diverse.
Il ciclo di gioco in Crafty è implementato in Crafty.timer.step, che utilizza eventi globali per comunicare con il resto dei motori. Il ciclo è guidato da requestAnimationFrame quando disponibile. Ogni ciclo è costituito da una o più chiamate al EnterFrame evento e una sola chiamata a RenderScene che si traduce nel ridisegno di ogni livello.
Il valore finale di tutte le proprietà e le variabili viene risolto prima che una scena sia resa. Ad esempio, se si sposta il lettore 5 px a destra dieci volte all'interno di un singolo EnterFrame evento, verrà disegnato direttamente a 50 px a destra saltando tutti i disegni intermedi.
Tutto ciò che nel tuo gioco deve cambiare nel tempo è in definitiva collegato al EnterFrame evento. Puoi usare il .bind () metodo per associare entità diverse a questo evento. Le funzioni legate a questo evento vengono anche passate a un oggetto con proprietà come dt che determina il numero di millisecondi che sono passati dall'ultimo EnterFrame evento.
Puoi usare il dt proprietà per fornire un'esperienza di gioco fluida determinando fino a che punto dovrebbe avanzare lo stato del gioco.
Il RenderScene l'evento viene utilizzato per assicurarsi che tutto ciò che è visibile sullo schermo corrisponda all'ultimo stato del gioco EnterFrame evento. Normalmente, non è necessario associare questo evento a se non si decide di implementare il proprio livello di rendering personalizzato.
Puoi usare il Gemello componente quando si desidera animare le proprietà 2D di un'entità in un determinato periodo di tempo. Puoi animare il X, y, w, h, rotazione, e alfa proprietà che utilizzano questo componente. Animiamo il valore x e l'altezza delle caselle arancione e nere che hai creato nelle ultime due esercitazioni.
Ecco il codice che ti serve:
blackBox.tween (x: 500, 3000); orangeBox.tween (x: 50, h: 100, rotazione: 360, 3000);
Probabilmente hai notato che la scatola arancione non ruota attorno al suo centro ma il suo angolo in alto a sinistra. È possibile modificare il centro di rotazione usando il .origine() metodo. Può accettare due argomenti interi, che determinano l'offset dei pixel dell'origine negli assi xey.
Accetta anche un valore stringa come argomento. Il valore stringa può essere una combinazione di centro, alto, basso, medio, sinistro e destro. Per esempio, .origine ( "centro") ruoterà l'entità attorno al suo centro, e .origine ("in basso a destra") ruoterà l'entità attorno all'angolo in basso a destra.
È possibile mettere in pausa o riprendere tutte le interpolazioni associate a una determinata entità utilizzando .pauseTweens () e .resumeTweens () metodi. Allo stesso modo, puoi anche usare .cancelTween () per cancellare un'interpolazione specifica.
Il Crafty.timer oggetto gestisce tutte le zecche del gioco in Crafty. Puoi usare il .FPS () metodo con questo oggetto per ottenere il frame rate di destinazione. Tieni presente che non è il frame rate effettivo.
Puoi anche usare il .simulateFrames (fotogrammi numerici [, Numero passo temporale]) metodo per far avanzare lo stato del gioco di un dato numero di fotogrammi. Il timestep è la durata per passare ogni frame. Se non viene specificato, viene utilizzato un valore predefinito di 20 ms.
Un altro metodo utile è .passo(), che farà avanzare il gioco eseguendo un passo. Un singolo passaggio può essere costituito da uno o più fotogrammi seguiti da un rendering. Il numero di frame dipende dal timer steptype. Questo metodo attiva una varietà di eventi come EnterFrame e exitFrame per ogni frame e PreRender, RenderScene, e PostRender eventi per ogni rendering.
Ci sono tre diverse modalità di steptype: fisso, variabile, e semifissa. Nel fisso modalità, ogni frame in Crafty viene inviato lo stesso valore di dt. Tuttavia, questo steptype può attivare più fotogrammi prima di ogni rendering per raggiungere la velocità di gioco desiderata.
Puoi anche attivare solo un fotogramma prima di ogni rendering usando il variabile modalità. In questo caso, il valore di dt è uguale al tempo trascorso dall'ultimo frame.
Finalmente, il semifissa la modalità attiva più fotogrammi per render e il tempo trascorso dall'ultimo fotogramma è equamente diviso tra loro.
Se hai letto tutti i tutorial di questa serie, dovresti aver acquisito già abbastanza conoscenze per creare un gioco di base. In questa sezione, imparerai come mettere tutto ciò che hai imparato da usare e creare un gioco in cui il giocatore principale deve mangiare un pezzo di cibo.
Il cibo sarà un quadrato rosso rotante. Non appena il cibo entra in contatto con il giocatore, scompare dalla vecchia posizione e genera in una nuova posizione casuale. Il giocatore può essere spostato usando A, W, S, D o i tasti freccia.
Un'altra cosa di cui devi occuparti è la posizione del giocatore. Dovrebbe rimanere ai limiti del livello di gioco.
Scriviamo prima il codice per il cibo:
Accentsconagua
var foodBox = Crafty.e ("2D, Canvas, Color, Food") .attr (x: 150, y: 250, w: 15, h: 15) .color ("red") .origin ("centro ") .bind (" EnterFrame ", function (eventData) this.rotation + = 4;);Di default, Crafty avrebbe usato l'angolo in alto a sinistra dell'entità alimentare per ruotarlo. Impostando l'origine al centro si assicura che l'entità alimentare ruoti attorno al suo centro.
var playerBox = Crafty.e ("2D, Canvas, Color, Fourway, Collision") .attr (x: 50, y: 360, w: 50, h: 50) .color ("nero") .fourway ( 200) .bind ("EnterFrame", function (eventData) if (this.x < 0) this.x = 0; if(this.y < 0) this.y = 0; if(this.x > (stageWidth - this.w)) this.x = stageWidth - this.w; if (this.y> (stageHeight - this.h)) this.y = stageHeight - this.h; );L'entità del giocatore controlla la posizione corrente del giocatore in ciascun fotogramma e reimposta la posizione se il giocatore tenta di uscire dal livello di gioco.
Puoi usare a Testo entità per tenere traccia del punteggio. Il punteggio è mostrato nell'angolo in alto a sinistra. Il gameScore variabile memorizza il numero di volte che il giocatore colpisce l'entità alimentare.
var scoreText = Crafty.e ('2D, DOM, Text') .attr (x: 10, y: 10) .textFont (size: '25px'); scoreText.text (gameScore.toString ());Ora, devi solo scrivere il codice per spostare il cibo in una posizione diversa quando viene rilevato un colpo. Il seguente codice farà esattamente questo.
playerBox.checkHits ("Cibo"). bind ("HitOn", function (hitData) foodBox.x = Math.random () * (stageWidth - foodBox.w); foodBox.y = Math.random () * (stageHeight - foodBox.h); gameScore + = 1; scoreText.text (gameScore.toString ()););È necessario tenere presente che si sottraggono la larghezza e l'altezza della propria entità alimentare rispettivamente dalla larghezza e dall'altezza dello stage. Questo fa sì che il cibo sia sempre completamente all'interno del palco. Ecco una demo del gioco:
Con l'aiuto di Crafty, hai creato un gioco di base scrivendo poche righe di codice. In questo momento, il gioco manca di alcune funzionalità che potrebbero renderlo più interessante. Innanzitutto, non ci sono suoni. Secondo, non c'è modo per il giocatore di uscire, e il livello di difficoltà rimane lo stesso per tutta la partita. Nella prossima serie imparerai su suono, sprite, eventi del mouse e altre funzionalità della libreria.
Se hai avuto problemi o dubbi durante il passaggio di tutti gli esempi della serie, fammelo sapere nei commenti.
