Share
Este foarte important într-un joc să detectați coliziunile în mod corespunzător. Nimeni nu va juca un joc în care lucrurile încep să explodeze chiar și atunci când sunt cu mai mulți pixeli în afară. Pe lângă grafică și sunete, acesta este un lucru pe care ar trebui să-l păstrați cât mai exact posibil.
În acest tutorial, veți afla despre detectarea și depanarea coliziunilor în detaliu.
Înainte de a putea detecta orice coliziune, trebuie să adăugați Coliziune componentă unei entități. Această componentă va detecta cu succes o coliziune între oricare două poligoane convexe. Această componentă are două evenimente: Lovit pe și HitOff. Lovit pe evenimentul este declanșat când apare o coliziune. Nu va fi declanșată din nou decât în caz de coliziune a tipului respectiv. HitOff evenimentul este declanșat când o coliziune încetează.
Dacă verificați pentru coliziune cu mai multe componente și toate aceste ciocniri apar simultan, fiecare coliziune va declanșa propria sa Lovit pe eveniment. Datele primite de la un eveniment de coliziune sunt valabile numai atâta timp cât se produce încă o coliziune.
Puteți utiliza funcția .checkHits () metoda de efectuare a verificărilor de coliziune împotriva tuturor entităților cu o componentă specificată. Apelarea acestei metode de mai multe ori nu va duce la mai multe controale redundante.
Rețineți că se efectuează verificări la intrarea în fiecare nou cadru. Să presupunem că există două obiecte care nu s-au ciocnit încă când se efectuează verificarea de succes. Acum, dacă unul dintre obiecte se mișcă într-o locație nouă și se suprapune cu cel de-al doilea obiect mai târziu în același cadru, evenimentele lovite nu vor fi declanșate până când o verificare a coliziunii nu va fi efectuată din nou în cadrul următor.
Dacă trebuie să detectați doar prima coliziune între diferite entități, puteți utiliza .ignoreHits (String componentList) metodă. componentList variabilă este o listă de componente componente separate de virgule, cu care nu mai doriți să detectați coliziunile. Când nu sunt furnizate argumente, se va opri detectarea coliziunilor cu toate entitățile. Iată un exemplu:
Accentsconagua
Funcția (hitData) Crafty ("Obstacol"). culoare ("roșu"); this.ignoreHits ("Obstacle"););Puteți vedea că Craft nu numai că începe să detecteze Lovit pe eveniment, dar și HitOff eveniment. De aceea, culoarea cutiei mari nu se schimba inapoi la negru.
O altă metodă similară numită .resetHitChecks (String componentList) poate fi folosit pentru a verifica din nou coliziunea dintre componentele specifice. Această metodă va continua să tragă Lovit pe eveniment din nou și din nou atâta timp cât se întâmplă încă o coliziune.
Atunci când entitățile se mișcă continuu, este foarte greu să vezi dacă coliziunile sunt declanșate la momentul potrivit. În demonstrația de mai sus, se pare că Lovit pe evenimentul se trage puțin înainte de evenimentul real. Craft vă oferă opțiunea de a desena cutii de jur împrejur în jurul entităților, astfel încât să puteți vedea de fapt ce se întâmplă.
Există două componente pe care le puteți utiliza pentru depanare. Acestea sunt WiredHitBox și SoldHitBox.
Prima componentă vă va permite să utilizați .debugStroke ([String strokeColor]) , care va trasa un contur în jurul entității cu o anumită culoare. Când nu este furnizată nici o culoare, culoarea roșie este folosită pentru a desena conturul.
În mod similar, a doua componentă este utilizată pentru a umple entitățile cu o anumită culoare utilizând .debugFill ([String stil de fișier]) metodă. Când nu este furnizată nici o culoare, este utilizată culoarea roșie. Aici este un demo cu .debugStroke () metodă.
De asemenea, puteți crea o casetă de lovituri personalizată pentru detectarea coliziunilor. Acest lucru este util atunci când utilizați sprite de imagine în joc care nu sunt dreptunghiulare. .coliziune() metoda pe care o puteți utiliza pentru a crea o zonă de lovire personalizată acceptă un singur parametru care este utilizat pentru a seta coordonatele cutiei noi de lovituri.
Aceste coordonate pot fi furnizate sub forma unui obiect poligon, o serie de perechi de coordonate x, y sau o listă de perechi de coordonate x, y. Punctele din poligon sunt marcate în sensul acelor de ceasornic și sunt poziționate în raport cu starea netratată a entității noastre. Zona personalizată de lovire se va roti automat când entitatea se rotește.
Există câteva lucruri pe care trebuie să le țineți cont atunci când utilizați zone personalizate de lovituri. Zona de lovire pe care o definiți ar trebui să formeze un poligon convex pentru ca detecția coliziunii să funcționeze corect. Pentru cei care nu sunt familiarizați cu termenul, un poligon convex este un poligon cu toate unghiurile interioare mai mici de 180 °. De asemenea, s-ar putea să observați o ușoară degradare a performanței când zona de lovire pe care ați definit-o se află în afara entității în sine.
Zona personalizată de lovituri pe care ați definit-o nu va avea niciun efect dacă nu adăugați Coliziune componenta la fiecare entitate cu care zona dvs. de lovit trebuie să detecteze o coliziune.
littleBox.collision (80, 0, 100, 100, 50, 100) .debugStroke ("verde") .checkHits ("Obstacle");În demonstrația de mai sus, am definit o casetă de lovituri personalizată care se află în afara casetei portocalii. După cum puteți vedea, blocul mare devine albastru numai atunci când se ciocnește cu triunghiul. Poziția cutiei portocalii nu contează.
Să aruncăm o privire la un alt exemplu care utilizează o navă spațială de la Gumichan01. Caseta de salvare implicită pentru nava spațială este limita sprite-ului în sine. În scenariul curent, colțul din dreapta sus al navei spațiale atinge mai întâi blocul, dar acest spațiu este de fapt gol. Pentru utilizatorii care vă joacă jocul, acesta este un caz de detectare a coliziunilor proaste.
Ce puteți face aici este definirea zonei dvs. de lovitură propriu utilizând o formă triunghiulară precum codul următor. Poligonul personalizat al căsuței de lovitură pe care îl definiți poate avea câte părți doriți. Asigurați-vă că este încă un poligon convex.
spaceShip.collision (8, 0, 0, 48, 70, 48);
După ce ați terminat toate aceste tutoriale, acum ar trebui să vă puteți crea propriile jocuri minunate, cu o grafică excelentă, efecte sonore frumoase, scene și detectarea coliziunilor. Trebuie să vă reamintesc că am folosit versiunea Crafty 0.7.1 în acest tutorial și că demo-urile ar putea să nu funcționeze cu alte versiuni ale bibliotecii.
JavaScript a devenit una dintre limbile de-facto de lucru pe web. Nu este fără curbele de învățare și există o mulțime de cadre și biblioteci pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem la dispoziție pe piața Envato.
Dacă aveți întrebări, anunțați-ne în comentarii.
