Share
Până în acest moment în această serie, ați învățat cum să manipulați diferite entități și să folosiți tastatura pentru a le muta în jurul lor. În această parte, veți învăța cum să folosiți buclă de joc în Crafty pentru a verifica în permanență diverse evenimente și a anima diferite entități.
Buclele jocului Crafty sunt implementate în Crafty.timer.step, care utilizează evenimentele globale pentru a comunica cu restul motoarelor. Bucla este condusă de requestAnimationFrame atunci când este disponibilă. Fiecare buclă este formată din unul sau mai multe apeluri către EnterFrame eveniment și un singur apel către RenderScene care are ca rezultat redesenarea fiecărui strat.
Valoarea finală a tuturor proprietăților și variabilelor este rezolvată înainte de redarea unei scene. De exemplu, dacă mutați jucătorul cu 5 px la dreapta de zece ori în interiorul unui singur EnterFrame eveniment, va fi desenat direct 50 de pixeli spre dreapta, sărind peste toate desenele intermediare.
Totul din jocul pe care trebuie să îl schimbe în timp este în cele din urmă legat de EnterFrame eveniment. Puteți utiliza funcția .lega() metodă de a lega entități diferite de acest eveniment. Funcțiile legate de acest eveniment sunt, de asemenea, transmise unui obiect cu proprietăți precum dt care determină numărul de milisecunde care au trecut de la ultima EnterFrame eveniment.
Puteți utiliza funcția dt de proprietate pentru a oferi o experienta buna de joc prin determinarea cat de departe stadiul jocului ar trebui sa avanseze.
RenderScene evenimentul este folosit pentru a vă asigura că tot ceea ce este vizibil pe ecran se potrivește cel mai mult cu starea actuală a jocului EnterFrame eveniment. În mod normal, nu va trebui să vă obligați singur acest eveniment dacă nu vă decideți să implementați propriul layer de randare personalizat.
Puteți utiliza funcția Tween atunci când doriți doar să animați proprietățile 2D ale unei entități pe o anumită perioadă de timp. Puteți anima X, y, w, h, rotație, și alfa proprietăți utilizând această componentă. Să animăm valoarea x și înălțimea cutiilor portocalii și negre pe care le-ați creat în ultimele două tutoriale.
Iată codul de care aveți nevoie:
BlackBox.tween (x: 500, 3000); orangeBox.tween (x: 50, h: 100, rotație: 360, 3000);
Probabil ați observat că cutia portocalie nu se rotește în jurul centrului, ci în colțul din stânga sus. Puteți schimba centrul de rotație utilizând butonul .origine() metodă. Poate accepta două argumente întregi, care determină decalajul de origine a pixelilor în axele x și y.
De asemenea, acceptă o valoare de șir ca argument. Valoarea șirului poate fi o combinație de centru, de sus, de jos, de mijloc, de stânga și de dreapta. De exemplu, .origine ( „centru“) va roti entitatea în jurul centrului și .origine ("partea din dreapta jos") va roti entitatea în jurul colțului din dreapta jos.
Puteți întrerupe sau relua toate tweens-urile asociate cu o entitate dată folosind .pauseTweens () și .resumeTweens () metode. În mod similar, puteți utiliza, de asemenea .cancelTween () pentru a anula o anumită modificare.
Crafty.timer obiect mânere toate ticks joc în Crafty. Puteți utiliza funcția .FPS () cu acest obiect pentru a obține rata țintă a cadrelor. Rețineți că nu este rata efectivă a cadrelor.
De asemenea, puteți utiliza funcția .simulateFrames (Număr cadre [Număr timestep]) pentru a avansa starea jocului printr-un anumit număr de cadre. timestep este durata de trecere a fiecărui cadru. Dacă nu este specificat, se folosește o valoare implicită de 20ms.
O altă metodă utilă este .Etapa(), care va avansa jocul prin efectuarea unui pas. Un singur pas poate fi format dintr-unul sau mai multe cadre urmate de o randare. Numărul de cadre va depinde de cronometrele steptype. Această metodă declanșează o varietate de evenimente, cum ar fi EnterFrame și ExitFrame pentru fiecare cadru și prerender, RenderScene, și PostRender evenimente pentru fiecare randare.
Există trei moduri diferite de steptype: fix, variabil, și semiregide. În fix mod, fiecare cadru din Craft este trimis la aceeași valoare dt. Totuși, asta steptype poate declanșa mai multe cadre înainte de fiecare randare pentru a atinge viteza țintă a jocului.
De asemenea, puteți declanșa un singur cadru înaintea fiecărei randări utilizând butonul variabil Mod. În acest caz, valoarea lui dt este egal cu timpul efectiv scurs de la ultimul cadru.
În cele din urmă, semiregide modul declanșează mai multe cadre pe randare, iar timpul de la ultimul cadru este egal împărțit între ele.
Dacă ați citit toate tutorialele din această serie, ar fi trebuit să dobândiți suficiente cunoștințe până acum pentru a crea un joc foarte simplu. În această secțiune, veți învăța cum să puneți tot ce ați învățat să utilizați și să creați un joc în care jucătorul principal trebuie să mănânce o bucată de mâncare.
Mâncarea va fi un pătrat roșu rotativ. De îndată ce mâncarea intră în contact cu jucătorul, acesta dispare din vechea locație și provoacă o nouă locație aleatorie. Playerul poate fi mutat folosind A, W, S, D sau tastele săgeată.
Un alt lucru pe care trebuie să-l ocupați este poziția jucătorului. Se presupune că rămâne cu limitele scenei jocului.
Să scriem mai întâi codul pentru alimente:
Accentsconagua
var foodBox = Crafty.e ("2D, Canvas, Culoare, Alimente") .attr (x: 150, y: 250, w: 15, h: 15) .color ") .bind (funcția" EnterFrame ", eventData) this.rotation + = 4;);În mod implicit, Crafty ar fi folosit colțul din stânga sus al entității alimentare pentru al roti. Setarea originii în centru vă asigură că entitatea alimentară se rotește în jurul centrului.
var jucătorBox = Crafty.e ("2D, Canvas, Color, Fourway, Coliziune") .attr (x: 50, y: 360, w: 50, 200) .bind (funcția "EnterFrame", 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; dacă (this.y> (stageHeight - this.h)) this.y = stageHeight - this.h; );Entitatea jucătorului verifică locația curentă a playerului în fiecare cadru și resetează locația dacă jucătorul încearcă să meargă în afara etapei de joc.
Puteți utiliza a Text entitate pentru a urmări scorul. Scorul este afișat în colțul din stânga sus. gameScore variabila stochează numărul de repetări pe care playerul le lovește entității alimentare.
var scorText = Crafty.e ('2D, DOM, Text') .attr (x: 10, y: 10) .textFont (size: '25px'); scoreText.text (gameScore.toString ());Acum, trebuie doar să scrieți codul pentru a muta mâncarea într-o altă locație atunci când este detectată o lovitură. Următorul cod va face exact acest lucru.
playerBox.checkHits ("Alimentare") .bind ("HitOn", funcția (hitData) foodBox.x = Math.random () * (stageWidth - foodBox.w), foodBox.y = Math.random - foodBox.h); gameScore + = 1; scoreText.text (gameScore.toString ()););Trebuie să țineți cont de faptul că scădeți lățimea și înălțimea entității dvs. alimentare din lățimea și înălțimea etapei. Acest lucru vă asigură că mâncarea este întotdeauna complet în interiorul scenei. Aici este un demo al jocului:
Cu ajutorul lui Crafty, ați creat un joc foarte simplu, scriind câteva rânduri de cod. Chiar acum, jocul nu are câteva caracteristici care ar putea face mai interesant. În primul rând, nu există sunete. În al doilea rând, nu există nicio cale de ieșire a jucătorului, iar nivelul de dificultate rămâne, de asemenea, același pe tot parcursul jocului. Veți învăța despre sunet, sprites, evenimente de mouse și alte caracteristici ale bibliotecii în seria următoare.
Dacă ați avut probleme sau îndoieli în timp ce treceți prin toate exemplele din serie, anunțați-ne în comentarii.
