Share
Det er veldig viktig i et spill at du oppdager kollisjoner på riktig måte. Ingen skal spille et spill hvor ting begynner å eksplodere selv når de er mange piksler fra hverandre. Foruten grafikken og lydene, er dette en ting du bør prøve å holde så nøyaktig som mulig.
I denne opplæringen vil du lære om detektering og feilsøking i detalj.
Før du kan oppdage eventuelle kollisjoner, må du legge til Kollisjon komponent til en enhet. Denne komponenten vil med hell oppdage kollisjon mellom to konvekse polygoner. Denne komponenten har to hendelser: Hiton og HitOff. De Hiton Hendelsen utløses når en kollisjon oppstår. Det vil ikke bli utløst igjen hvis ikke kollisjoner av den aktuelle typen opphører. De HitOff Hendelsen utløses når en kollisjon opphører.
Hvis du sjekker for kollisjon med flere komponenter, og alle disse kollisjonene oppstår samtidig, vil hver kollisjon brenne sin egen Hiton begivenhet. Dataene som mottas fra en kollisjonshendelse, er kun gyldige så lenge kollisjonen fortsatt forekommer.
Du kan bruke .checkHits () metode for å utføre kollisjonskontroller mot alle enheter med en spesifisert komponent. Å ringe denne metoden flere ganger vil ikke resultere i flere redundante sjekker.
Vær oppmerksom på at treff sjekker utføres ved å legge inn hver ny ramme. La oss si at det er to gjenstander som ennå ikke har kollidert når treffkontrollen utføres. Nå, hvis et av objektene flytter til et nytt sted og overlapper det andre objektet senere i samme ramme, blir treff hendelsene ikke sparket før en kollisjonskontroll utføres igjen i neste ramme.
Hvis du bare skal oppdage den første kollisjonen mellom ulike enheter, kan du bruke .ignoreHits (String componentList) metode. De componentList variabel er en kommaseparert liste over komponenter som du ikke lenger vil oppdage kollisjoner. Når det ikke gis noen argumenter, vil det stoppe kollisjonsdeteksjon med alle enheter. Her er et eksempel:
Accentsconagua
littleBox.bind ("HitOn", funksjon (hitData) Crafty ("Obstacle"). farge ("rødt"); this.ignoreHits ('Obstacle'););Du kan se at Crafty ikke bare begynner å oppdage Hiton hendelse men også HitOff begivenhet. Det er derfor fargen på den store boksen ikke endres tilbake til svart.
En annen lignende metode som kalles .resetHitChecks (String componentList) kan brukes til å sjekke om kollisjon mellom bestemte komponenter. Denne metoden vil fortsette å skyte Hiton hendelsen igjen og igjen så lenge kollisjonen fortsatt skjer.
Når enheter beveger seg kontinuerlig, er det veldig vanskelig å se om kollisjonene blir sparket til rett tid. I den ovennevnte demo ser det ut som om Hiton hendelsen skyter litt før selve hendelsen. Crafty gir deg muligheten til å tegne hitbokser rundt enheter slik at du faktisk kan se hva som skjer.
Det er to komponenter som du kan bruke til feilsøkingsformål. Disse er WiredHitBox og SoldHitBox.
Den første komponenten vil tillate deg å bruke .debugStroke ([String strokeColor]) metode som vil tegne en disposisjon rundt enheten med en gitt farge. Når det ikke er gitt farger, brukes farge rød til å tegne omrisset.
På samme måte brukes den andre komponenten til å fylle enhetene med en gitt farge ved hjelp av .debugFill ([String fyllstil]) metode. Når det ikke er gitt farger, brukes farge rød. Her er en demonstrasjon med .debugStroke () metode.
Du kan også opprette en tilpasset hitboks for kollisjonsdeteksjon. Dette er nyttig når du bruker bilde sprites i spillet ditt som ikke er rektangulære. De .kollisjon() Metode som du kan bruke til å opprette et tilpasset treffområde aksepterer en enkelt parameter som brukes til å sette koordinatene til den nye treffboksen.
Disse koordinatene kan leveres i form av et polygonobjekt, en rekke x, y koordinatpar eller en liste med x, y koordinatpar. Polygonens punkter er merket med urviseren, og de er plassert i forhold til den uroterte tilstanden til vår enhet. Det tilpassede hitområdet vil automatisk rotere seg selv når enheten roterer.
Det er noen ting du bør huske på når du bruker tilpassede hitområder. Slårområdet som du definerer, skal danne et konvekt polygon for at kollisjonsdeteksjonen fungerer som den skal. For de som ikke er kjent med begrepet, er en konveks polygon en polygon med alle innvendige vinkler mindre enn 180 °. Du kan også se liten ytelsesforringelse når det ramte området du definerte ligger utenfor enheten selv.
Det egendefinerte treffområdet du definerte vil ikke ha noen effekt med mindre du legger til Kollisjon komponent til hver enhet som ditt treffområde trenger for å oppdage en kollisjon.
littleBox.collision (80, 0, 100, 100, 50, 100) .debugStroke ('green') .checkHits ('Obstacle');I ovennevnte demo har vi definert en tilpasset hitboks som ligger utenfor oransje boksen. Som du ser, blir den store blokken bare blå når den kolliderer med trekanten. Posisjonen til oransje boksen spiller ingen rolle.
La oss ta en titt på et annet eksempel som bruker et romskip av Gumichan01. Standard hitboksen for romskipet er grensen til spritet selv. I det nåværende scenariet berører øverste høyre hjørne av romskipet blokken først, men det er faktisk tomt. For brukere som spiller spillet ditt, er dette et tilfelle av dårlig kollisjonsdeteksjon.
Hva du kan gjøre her, er å definere ditt eget treffområde ved hjelp av en trekantet form som følgende kode. Den tilpassede hit-polygonen som du definerer, kan ha så mange sider som du vil. Bare vær sikker på at den fremdeles er en konveks polygon.
spaceShip.collision (8, 0, 0, 48, 70, 48);
Etter å ha fullført alle disse opplæringsprogrammene, bør du nå kunne lage dine egne små spill med god grafikk, flotte lydeffekter, scener og kollisjonsdeteksjon. Jeg skal minne deg på at jeg har brukt Crafty versjon 0.7.1 i denne opplæringen, og demoene fungerer kanskje ikke med andre versjoner av biblioteket.
JavaScript har blitt et av de de facto-språkene for å jobbe på nettet. Det er ikke uten det er læringskurver, og det er nok av rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.
Hvis du har noen spørsmål, gi meg beskjed i kommentarene.
