Share
În ultimul tutorial, ați învățat despre elementele de bază ale entităților și despre modul în care acestea sunt elementele de bază ale jocului dvs. În acest tutorial, veți trece dincolo de elementele de bază și veți afla mai multe despre entități.
Fiecare entitate este alcătuită din componente diferite. Fiecare dintre aceste componente adaugă propria funcționalitate entității. Craft oferă o mulțime de componente încorporate, dar puteți crea și propriile componente personalizate Crafty.c ().
Ați învățat despre câteva componente de bază cum ar fi 2D, pânză, Culoare, și Patru direcții în primul tutorial. Să începem prin crearea unei alte entități utilizând aceste componente:
Accentsconagua
var playerBox = Crafty.e ("2D, Canvas, Color, Fourway") .attr (x: 50, y: 50, ;Când aveți o mulțime de entități cu componente diferite, ar putea deveni necesar să știți dacă o anumită entitate are o componentă specifică atașată la aceasta. Acest lucru poate fi realizat folosind .are () metodă.
În mod similar, puteți adăuga componente la o entitate utilizând .addComponent (). Pentru a adăuga simultan mai multe componente, le poți transmite ca un șir cu diferite componente separate prin virgule sau să treci fiecare componentă ca argument diferit. Nimic nu se va întâmpla dacă entitatea are deja componenta pe care încercați să o adăugați.
playerBox.addComponent ("Jumper, Gravity, Collision"); playerBox.addComponent ("Jumper", "Gravitate", "Coliziune");De asemenea, puteți elimina componente dintr-o entitate utilizând .removeComponent (Componenta șir [, soft]). Această metodă are două argumente. Prima este componenta pe care doriți să o eliminați, iar al doilea argument determină dacă elementul trebuie să fie îndepărtat moale sau înlăturat. Îndepărtarea moale va provoca numai .are () a se intoarce fals atunci când este cerut pentru acea componentă specifică. O îndepărtare tare va elimina toate proprietățile și metodele asociate acelei componente.
În mod prestabilit, toate componentele sunt eliminate. Puteți seta al doilea argument la fals pentru a elimina cu greu o componentă.
Probabil că va trebui să setați diferite valori pentru atributele specifice ale tuturor entităților din joc. De exemplu, o entitate care reprezintă hrana principalului jucător din joc ar trebui să pară diferită de entitatea care reprezintă jucătorul în sine. În mod similar, o putere în sus va arăta diferită de entitățile alimentare. Crafty vă permite să setați valorile diferitelor entități într-un joc fie separat, fie folosind simultan .attr ().
Entitatea principală este stocată în prezent în playerBox variabil. Astfel, puteți seta valoarea diferitelor proprietăți direct utilizând următorul cod:
playerBox.x = 50; playerBox.y = 50; playerBox.z = 2; playerBox.attr (x: 50, y: 50, z: 2)
z proprietatea stabilește indexul z al diferitelor entități. O entitate cu o valoare mai mare z valoarea va fi atrasă pe o altă valoare cu o valoare mai mică. Rețineți că numai numerele întregi sunt permise ca valori z-index valide.
Să creăm o entitate alimentară cu dimensiuni mai mici, o poziție diferită și o rotație aplicată. Rotația este specificată în grade, iar utilizarea unei valori negative rotește entitatea în sens invers acelor de ceasornic.
var foodBox = Crafty.e ("2D, Canvas, Culoare, Alimente") .attr (x: 150, y: 250, w: 10, h: 10) .color ("roșu"); foodBox.attr (z: 1, rotație: 45);După cum puteți vedea în demonstrația de mai jos, atât hrana cât și jucătorul principal se disting ușor acum. Dacă încercați să mutați principalul jucător peste mâncare, veți vedea că mâncarea este acum trasă sub jucătorul principal din cauza unui z-index inferior.
Există o mulțime de evenimente care ar putea fi necesare pentru a răspunde la dezvoltarea unui joc. De exemplu, va trebui să legați entitatea jucătorului de a Tasta în jos eveniment dacă doriți să crească în dimensiune atunci când o tastă specifică este apăsată. Crafty vă permite să legați entități diferite de anumite evenimente utilizând .lega() metodă. Iată un exemplu:
playerBox.bind ('KeyDown', funcția (e) if (e.key == Crafty.keys.T) this.alpha = 0.5; dacă (e.key == Crafty.keys.O) this. alfa = 1;);În următoarea demo, încercați să mutați playerul peste mâncare, apoi apăsați tastele "T" și "O". Apăsând "T" se va seta opacitatea player-ului la 0.5, iar apăsarea "O" va readuce opacitatea la 1.
Acum, să legăm un eveniment de coliziune jucătorului nostru, astfel încât acesta să crească la mărime ori de câte ori se lovește de mâncare. Va trebui să adăugăm o componentă de coliziune jucătorului și să folosim .checkHits () metodă. Această metodă va efectua verificări de coliziune împotriva tuturor entităților care au cel puțin una dintre componentele specificate când .checkHits () a fost chemat.
Când apare o coliziune, a Lovit pe evenimentul va fi concediat. Acesta va avea, de asemenea, câteva informații relevante despre evenimentul de succes. A HitOff evenimentul este, de asemenea, concediat de îndată ce se termină coliziunea.
playerBox.checkHits ("Food") .bind ("HitOn", funcție (hitData) this.color ("verde"); this.w = this.w + 3; this.h = this.h + 3; );Lățimea și înălțimea playerului crește de fiecare dată când apare o lovitură. Putem folosi acest eveniment pentru o mulțime de lucruri, inclusiv schimbarea poziției alimentelor sau creșterea scorului în joc. De asemenea, ați putea distruge entitatea alimentară utilizând distruge() după detectarea loviturii.
În secțiunea anterioară, trebuia să schimbăm proprietățile unei singure entități. Acest lucru se poate face cu ușurință utilizând variabila atribuită fiecărei entități. Acest lucru nu este practic atunci când avem de-a face cu aproximativ 20 de entități diferite.
Dacă ați folosit anterior jQuery, ați putea fi familiarizat cu modul în care selectează elementele. De exemplu, puteți utiliza $ ( "P") pentru a selecta toate paragrafele. În mod similar, puteți selecta toate entitățile care utilizează aceeași componentă comună Șiret ( "component").
Iată câteva exemple:
// Selectați toate entitățile care au componenta Gravity Crafty ("Gravity"); // Selectați toate entitățile care au DOM sau componenta Canvas Crafty ("Gravity, Jumper"); // Selectați toate entitățile care au atât Gravity cât și Jumper Crafty ("Gravity Jumper");Odată ce ați selectat, puteți obține numărul de elemente selectate utilizând proprietatea lungime. Puteți, de asemenea, să repetați prin fiecare dintre aceste entități sau să le legați de evenimente simultan. Următorul cod va schimba toate entitățile alimentare ale căror X valoarea este mai mare de 300 până la purpuriu.
Crafty ("Food") fiecare (funcția () if (this.x> 300) this.color ("purple"););Odată ce ai o selecție, poți folosi obține() pentru a obține o serie de entități din selecție. De asemenea, puteți accesa entitatea la un anumit index utilizând get (index).
În acest tutorial, ați învățat cum să adăugați sau să eliminați componente dintr-o entitate. De asemenea, ați învățat cum să selectați entități cu o anumită componentă sau componente și să le manipulați atributele și proprietățile unul câte unul. Toate aceste lucruri vor fi foarte utile atunci când vrem să manipulăm diferite entități pe ecranul nostru pe baza unei serii de evenimente.
Dacă aveți întrebări legate de tutorial, anunțați-ne în comentarii.
