Share
In de laatste zelfstudie hebt u geleerd over de basisprincipes van entiteiten en hoe zij de bouwstenen in uw spel zijn. In deze zelfstudie gaat u verder dan de basisbeginselen en leert u meer over entiteiten in detail.
Elke entiteit bestaat uit verschillende componenten. Elk van deze componenten voegt zijn eigen functionaliteit toe aan de entiteit. Crafty biedt veel ingebouwde componenten, maar u kunt ook uw eigen aangepaste componenten maken met Crafty.c ().
Je leerde over een paar basiscomponenten zoals 2D, Canvas, Kleur, en Vier weg in de eerste tutorial. Laten we beginnen met het maken van een andere entiteit die deze componenten gebruikt:
Accentsconagua
var playerBox = Crafty.e ("2D, Canvas, Color, Fourway") .attr (x: 50, y: 50, w: 50, h: 50) .color ("black") .fwayway (200) ;Wanneer u veel entiteiten met verschillende componenten hebt, kan het noodzakelijk worden om te weten of een bepaalde entiteit een specifieke component heeft die eraan is gekoppeld. Dit kan worden bereikt door de .heeft () methode.
Evenzo kunt u componenten toevoegen aan een entiteit met behulp van .addComponent (). Als u meerdere componenten tegelijk wilt toevoegen, kunt u deze doorgeven als een tekenreeks met verschillende componenten gescheiden door komma's of elk onderdeel doorgeven als een ander argument. Er gebeurt niets als de entiteit al de component heeft die u probeert toe te voegen.
playerBox.addComponent ("Jumper, Gravity, Collision"); playerBox.addComponent ("Jumper", "Gravity", "Collision");U kunt ook componenten van een entiteit verwijderen met behulp van .removeComponent (String Component [, soft]). Deze methode vergt twee argumenten. De eerste is de component die u wilt verwijderen en het tweede argument bepaalt of het element zacht moet worden verwijderd of hard moet worden verwijderd. Zachte verwijdering zal alleen maar veroorzaken .heeft () terugbrengen vals wanneer gevraagd voor dat specifieke onderdeel. Een harde verwijdering verwijdert alle bijbehorende eigenschappen en methoden van die component.
Standaard zijn alle componenten zacht verwijderd. U kunt het tweede argument instellen op vals om een component hard te verwijderen.
Je zult waarschijnlijk verschillende waarden moeten instellen voor specifieke attributen van alle entiteiten in je game. Een entiteit die het eten van de hoofdspeler in het spel vertegenwoordigt, moet er bijvoorbeeld anders uitzien dan de entiteit die de speler zelf vertegenwoordigt. Evenzo zal een power-up er anders uitzien dan voedselentiteiten. Met Crafty kunt u de waarden van verschillende entiteiten in een spel afzonderlijk of allemaal tegelijk instellen met .attr ().
De hoofdentiteit is momenteel opgeslagen in de PlayerBox variabel. U kunt dus de waarde van verschillende eigenschappen rechtstreeks instellen met behulp van de volgende code:
playerBox.x = 50; playerBox.y = 50; playerBox.z = 2; playerBox.attr (x: 50, y: 50, z: 2)
De z eigenschap stelt de z-index van verschillende entiteiten in. Een entiteit met hoger z waarde wordt getrokken over een andere met een lagere waarde. Houd er rekening mee dat alleen gehele getallen zijn toegestaan als geldige z-indexwaarden.
Laten we een voedselentiteit creëren met een kleiner formaat, een andere positie en rotatie erop. De rotatie wordt in graden gespecificeerd en als een negatieve waarde wordt gebruikt, roteert de entiteit tegen de wijzers van de klok in.
var foodBox = Crafty.e ("2D, Canvas, Color, Food") .attr (x: 150, y: 250, w: 10, h: 10) .color ("red"); foodBox.attr (z: 1, rotatie: 45);Zoals je in de onderstaande demo kunt zien, zijn zowel het eten als de hoofdspeler nu gemakkelijk te onderscheiden. Als je de hoofdspeler boven het eten probeert te verplaatsen, zul je zien dat het eten nu onder de hoofdspeler wordt getrokken vanwege een lagere Z-index.
Er zijn veel evenementen waar je misschien op moet reageren tijdens het ontwikkelen van een game. U moet bijvoorbeeld de spelerentiteit binden aan een Toets neer gebeurtenis als u wilt dat het in omvang toeneemt wanneer op een specifieke toets wordt gedrukt. Met Crafty kunt u verschillende entiteiten aan specifieke gebeurtenissen binden met behulp van de .binden() methode. Hier is een voorbeeld:
playerBox.bind ('KeyDown', functie (e) if (e.key == Crafty.keys.T) this.alpha = 0.5; if (e.key == Crafty.keys.O) this. alpha = 1;);Probeer in de volgende demo de speler over het eten te bewegen en druk vervolgens op de 'T' - en 'O'-toetsen. Als u op 'T' drukt, wordt de dekking van de speler ingesteld op 0,5 en als u op 'O' drukt, wordt de dekking teruggezet naar 1.
Laten we nu een botsingsgebeurtenis aan onze speler koppelen, zodat deze in omvang toeneemt wanneer het voedsel raakt. We zullen een botscomponent aan de speler moeten toevoegen en de .checkHits () methode. Deze methode voert botsingscontroles uit tegen alle entiteiten die ten minste een van de componenten hebben die zijn opgegeven wanneer .checkHits () heette.
Wanneer een botsing optreedt, Hiton evenement zal worden afgevuurd. Het bevat ook relevante informatie over de hitgebeurtenis. EEN HitOff evenement wordt ook afgevuurd zodra de botsing eindigt.
playerBox.checkHits ("Food") .bind ("HitOn", functie (hitData) this.color ("green"); this.w = this.w + 3; this.h = this.h + 3; );De breedte en hoogte van de speler nemen toe bij elke hit. We kunnen dit evenement gebruiken voor veel dingen, zoals het veranderen van de positie van het eten of het verhogen van de score in het spel. Je zou ook de voedselentiteit kunnen vernietigen door de vernietigen() methode zodra de treffer werd gedetecteerd.
In het vorige gedeelte moesten we gewoon de eigenschappen van een enkele entiteit wijzigen. Dit zou gemakkelijk kunnen worden gedaan door de variabele te gebruiken die aan elke entiteit is toegewezen. Dit is niet praktisch wanneer het om 20 verschillende entiteiten gaat.
Als u jQuery eerder hebt gebruikt, bent u wellicht bekend met de manier waarop het elementen selecteert. U kunt bijvoorbeeld gebruiken $ ( "P") om alle paragrafen te selecteren. Op dezelfde manier kunt u alle entiteiten selecteren die dezelfde gemeenschappelijke component hebben Geslepen ( "component").
Hier zijn een paar voorbeelden:
// Selecteer alle entiteiten die de Gravity-component Crafty ("Gravity") hebben; // Selecteer alle entiteiten met DOM of Canvas-component Crafty ("Gravity, Jumper"); // Selecteer alle entiteiten die zowel Gravity als Jumper-component Crafty hebben ("Gravity Jumper");Nadat u de selectie hebt gemaakt, kunt u het aantal elementen selecteren dat is geselecteerd met de eigenschap length. U kunt ook elk van deze entiteiten doorlopen of gebeurtenissen tegelijkertijd aan alle entiteiten binden. De volgende code zal alle voedselentiteiten veranderen waarvan X waarde is groter dan 300 tot paars.
Crafty ("Food"). Each (function () if (this.x> 300) this.color ("purple"););Zodra u een selectie heeft, kunt u gebruiken krijgen() om een array van alle entiteiten in de selectie te verkrijgen. U kunt de entiteit ook via een specifieke index gebruiken via te krijgen (index).
In deze zelfstudie hebt u geleerd hoe u componenten van een entiteit toevoegt of verwijdert. Je hebt ook geleerd entiteiten met een bepaald onderdeel of componenten te selecteren en hun attributen en eigenschappen één voor één te manipuleren. Al deze dingen zullen erg handig zijn als we verschillende entiteiten op ons scherm willen manipuleren op basis van verschillende gebeurtenissen.
Als je vragen hebt over de tutorial, laat het me dan weten in de comments.
