Share
Het is erg belangrijk in een game dat je botsingen goed opmerkt. Niemand gaat een spel spelen waarbij dingen beginnen te exploderen, zelfs als ze veel pixels uit elkaar liggen. Afgezien van de graphics en geluiden, is dit nog een ding dat je moet proberen zo accuraat mogelijk te houden.
In deze zelfstudie leert u meer over het detecteren en debuggen van botsingen in detail.
Voordat u eventuele botsingen kunt detecteren, moet u de Botsing component van een entiteit. Deze component detecteert met succes een botsing tussen twee convexe veelhoeken. Dit onderdeel heeft twee evenementen: Hiton en HitOff. De Hiton gebeurtenis wordt getriggerd wanneer een botsing plaatsvindt. Het wordt niet opnieuw geactiveerd tenzij botsingen van dat specifieke type ophouden. De HitOff gebeurtenis wordt geactiveerd wanneer een aanrijding ophoudt.
Als u een botsing met meerdere componenten controleert en al deze botsingen gelijktijdig optreden, vuurt elke botsing zijn eigen botsing Hiton evenement. De gegevens die worden ontvangen van een botsinggebeurtenis zijn alleen geldig zolang de botsing nog steeds plaatsvindt.
U kunt de .checkHits () methode om botsingscontroles uit te voeren tegen alle entiteiten met een gespecificeerd onderdeel. Als deze methode meerdere keren wordt aangeroepen, resulteert dit niet in meerdere overtollige controles.
Houd er rekening mee dat hitcontroles worden uitgevoerd bij het invoeren van elk nieuw frame. Laten we zeggen dat er twee objecten zijn die nog niet zijn gebotcht wanneer de treffercontrole wordt uitgevoerd. Als een van de objecten nu naar een nieuwe locatie wordt verplaatst en later in hetzelfde frame overlapt met het tweede object, worden de hitgebeurtenissen niet afgevuurd totdat een botsing opnieuw wordt uitgevoerd in het volgende frame.
Als u alleen de eerste botsing tussen verschillende entiteiten moet detecteren, kunt u de .ignoreHits (String componentList) methode. De componentList variabele is een door komma's gescheiden lijst van componenten waarmee u niet langer botsingen wilt detecteren. Als er geen argumenten worden opgegeven, stopt het de botsingsdetectie met alle entiteiten. Hier is een voorbeeld:
Accentsconagua
littleBox.bind ("HitOn", functie (hitData) Crafty ("Obstacle"). color ('red'); this.ignoreHits ('Obstacle'););Je kunt zien dat Crafty niet alleen begint met het detecteren van de Hiton evenement maar ook de HitOff evenement. Daarom verandert de kleur van de grote doos niet in zwart.
Een andere soortgelijke methode genaamd .resetHitChecks (String componentList) kan worden gebruikt om opnieuw te controleren op een botsing tussen specifieke componenten. Deze methode blijft de Hiton evenement opnieuw en opnieuw zolang de botsing nog steeds gebeurt.
Wanneer entiteiten continu bewegen, is het erg moeilijk om te zien of de botsingen op het juiste moment worden afgevuurd. In de bovenstaande demo lijkt het alsof het Hiton evenement vuurt iets vóór de daadwerkelijke gebeurtenis. Crafty geeft je de mogelijkheid om treffers rond entiteiten te tekenen, zodat je echt kunt zien wat er aan de hand is.
Er zijn twee componenten die u kunt gebruiken voor foutopsporing. Dit zijn WiredHitBox en SoldHitBox.
Met het eerste onderdeel kunt u de .debugStroke ([String strokeColor]) methode, die een omtrek zal tekenen rond de entiteit met een bepaalde kleur. Als er geen kleur wordt opgegeven, wordt de kleur rood gebruikt om de omtrek te tekenen.
Evenzo wordt de tweede component gebruikt om de entiteiten met een bepaalde kleur te vullen met behulp van de .debugFill ([String fillStyle]) methode. Als er geen kleur wordt opgegeven, wordt de kleur rood gebruikt. Hier is een demo met de .debugStroke () methode.
U kunt ook een aangepast treffervak maken voor botsingsdetectie. Dit is handig als u beeldsprites in uw spel gebruikt die niet rechthoekig zijn. De .botsing() methode die u kunt gebruiken om een aangepast hitgebied aan te maken, accepteert een enkele parameter die wordt gebruikt om de coördinaten van het nieuwe hitvak in te stellen.
Deze coördinaten kunnen worden geleverd in de vorm van een polygoonobject, een array van x-, y-coördinaatparen of een lijst van x-, y-coördinaatparen. De punten van de polygoon zijn gemarkeerd met de klok mee en ze zijn gepositioneerd ten opzichte van de niet-geroteerde toestand van onze entiteit. Het aangepaste hitgebied zal zichzelf automatisch roteren wanneer de entiteit ronddraait.
Er zijn een paar dingen die u in gedachten moet houden wanneer u aangepaste hitgebieden gebruikt. Het hitgebied dat u definieert, moet een convexe polygoon vormen om de botsingsdetectie correct te laten werken. Voor degenen die niet bekend zijn met de term, is een convexe polygoon een veelhoek met alle binnenhoeken kleiner dan 180 °. Mogelijk ziet u ook een lichte achteruitgang van de prestaties wanneer het getroffen gebied buiten de entiteit zelf ligt.
Het aangepaste hitgebied dat u hebt gedefinieerd, heeft geen effect tenzij u de Botsing component voor elke entiteit waarmee uw hitzone een botsing moet detecteren.
littleBox.collision (80, 0, 100, 100, 50, 100) .debugStroke ('green') .checkHits ('Obstacle');In de bovenstaande demo hebben we een aangepast treffervak gedefinieerd dat buiten het oranje vakje ligt. Zoals je kunt zien, wordt het grote blok alleen blauw als het botst met de driehoek. De positie van het oranje vak doet er niet toe.
Laten we een ander voorbeeld bekijken dat een ruimteschip van Gumichan01 gebruikt. De standaardhit-box voor het ruimteschip is de grens van de sprite zelf. In het huidige scenario raakt de rechterbovenhoek van het ruimteschip het blok eerst aan, maar die ruimte is eigenlijk leeg. Voor gebruikers die je game spelen, is dit een geval van slechte collision detection.
Wat u hier kunt doen, is uw eigen hitgebied definiëren met behulp van een driehoekige vorm zoals de volgende code. De aangepaste hitvakpolygoon die u definieert, kan zoveel zijden hebben als u wilt. Zorg er wel voor dat het nog steeds een convexe polygoon is.
spaceShip.collision (8, 0, 0, 48, 70, 48);
Na het voltooien van al deze tutorials zou je nu in staat moeten zijn om je eigen kleine games te maken met geweldige graphics, mooie geluidseffecten, scènes en botsingsdetectie. Ik wil u eraan herinneren dat ik Crafty-versie 0.7.1 in deze zelfstudie heb gebruikt en dat de demo's mogelijk niet werken met andere versies van de bibliotheek.
JavaScript is een van de de-facto talen geworden van het werken op het web. Het is niet zonder zijn leercurve, en er zijn ook genoeg kaders en bibliotheken om je bezig te houden. Als u op zoek bent naar extra bronnen om te studeren of te gebruiken in uw werk, kijk dan wat we beschikbaar hebben op de Envato-marktplaats.
Laat het me weten in de comments als je vragen hebt.
