Share
In de laatste zelfstudie hebt u informatie ontvangen over entiteiten in Crafty en hoe u deze op verschillende manieren kunt manipuleren. In deze zelfstudie leer je over verschillende componenten waarmee je verschillende entiteiten rond het toetsenbord kunt verplaatsen.
Crafty heeft drie verschillende componenten om elementen rond te verplaatsen. Dit zijn Twoway, Vier weg, en multiway. In deze zelfstudie leert u al deze componenten kennen. Uiteindelijk leer je over de Toetsenbord component en verschillende methoden die ermee geassocieerd zijn.
De Twoway component staat een entiteit toe om naar links of rechts te bewegen met behulp van de pijltjestoetsen of A en D. Het laat de entiteit ook toe om te springen met behulp van de pijl-omhoog of de W-toets. U moet een toevoegen Zwaartekracht component aan uw entiteiten om ze te laten springen.
De .drieweg () methode accepteert twee argumenten. De eerste bepaalt de snelheid van de entiteit in de horizontale richting, terwijl het tweede argument de springsnelheid van de entiteit bepaalt. Als u het tweede argument verlaat, wordt de waarde van de springsnelheid gelijk aan tweemaal de snelheid in de horizontale richting.
De Vier weg component laat een entiteit toe om in vier verschillende richtingen te bewegen met behulp van de pijltoetsen of W, A, S, D. De .vier weg() methode accepteert slechts één argument, dat de snelheid van de gegeven entiteit in alle richtingen zal bepalen.
Een groot nadeel van de Vier weg component is dat je niet in staat bent om verschillende snelheden in te stellen voor de horizontale en verticale richtingen.
Aan de andere kant, de multiway component stelt u in staat om de snelheid in elke as individueel in te stellen. U kunt ook verschillende toetsen toewijzen om de entiteit in verschillende richtingen te verplaatsen. Het eerste argument in de .multiway () methode is de snelheid van onze entiteit. Het tweede argument is een object om te bepalen welke toets de entiteit in welke richting zal verplaatsen.
De richtingen zijn aangegeven in graden. 180 is over, 0 is goed, -90 is omhoog en 90 is uitgeschakeld. Hier zijn een paar voorbeelden:
blackBox.multiway (x: 150, y: 75, W: -90, S: 90, D: 0, A: 180); orangeBox.multiway (150, I: -90, K: 90, L: 0, J: 180); purpleBox.multiway (150, Y: -45, G: -135, B: 135, H: 45);
De bovenstaande code stelt de snelheid in van de zwarte doos gelijk aan 150 in de horizontale richting en 75 in de verticale richting. Het oranje vak beweegt in alle richtingen met een snelheid van 150 maar heeft verschillende verplaatsingssleutels toegewezen gekregen. De paarse doos beweegt niet strikt horizontaal of verticaal maar onder een hoek van 45 graden. De snelheid is hier in pixels per seconde.
Kortom, u kunt elke toets toewijzen aan elke richting met behulp van de multiway component. Dit kan erg handig zijn als u meerdere entiteiten onafhankelijk van elkaar wilt verplaatsen.
Dit onderdeel heeft ook een .snelheid() methode, die kan worden gebruikt om de snelheid van een entiteit op een later tijdstip te wijzigen. U kunt de toetsbesturingselementen op elk gewenst moment ook uitschakelen met behulp van de .disableControl () methode.
Met de drie componenten in de vorige secties kunt u een entiteit verplaatsen met behulp van verschillende sleutels. Misschien wilt u echter meer controle over wat er gebeurt als u op een toets drukt. U wilt bijvoorbeeld de speler groter maken als op een bepaalde toets wordt gedrukt of de speler krachtiger maken als een andere toets wordt ingedrukt. Dit kan worden bereikt met behulp van de Toetsenbord bestanddeel.
Met deze component hebt u ook toegang tot de .isDown (String KEYNAME / KeyCode) methode, die true of false retourneert op basis van het feit of de ingedrukte toets het gegeven heeft KeyName of Sleutelcode.
Crafty heeft ook twee verschillende toetsenbordevenementen, Toets neer en KeyUp. U kunt deze gebeurtenissen binden aan elke entiteit in uw spel zonder de Toetsenbord component. De Toets neer gebeurtenis wordt geactiveerd wanneer de DOM toets neer gebeurtenis treedt op. Evenzo is de KeyUp gebeurtenis wordt geactiveerd wanneer de DOM keyup gebeurtenis treedt op.
Accentsconagua
blackBox.bind ('KeyDown', function () if (this.isDown ('L')) this.w + = 5;); orangeBox.bind ('KeyDown', functie (e) if (e.key == Crafty.keys.K) this.h + = 5;);In de bovenstaande code, de zwarte doos had al de Toetsenbord component. Dit stelde ons in staat om de .is uit de lucht() methode om de ingedrukte toets te bepalen.
Probeer in de volgende demo op L en K te drukken om respectievelijk de breedte en hoogte van de twee vakken te vergroten.
Het is heel gemakkelijk om tekst toe te voegen aan je spel met behulp van Crafty. Eerst moet u een entiteit maken met de Tekst component. Vervolgens kunt u tekst aan uw entiteit toevoegen met behulp van de .tekst() methode, die een string als parameter accepteert.
De locatie van de tekst kan worden geregeld met behulp van de .attr () methode om de waarde in te stellen X en Y coördinaten. Evenzo kan de kleur van de tekst worden opgegeven met behulp van de .tekst kleur() methode. Een paar andere eigenschappen zoals de grootte, gewicht, en familie van het lettertype kan worden ingesteld met behulp van de .textfont () methode. Hier is een voorbeeld:
var playerName = Crafty.e ('2D, DOM, Text') .attr (x: 10, y: 10); playerName.text (ZombieHunter); playerName.textColor ( 'red'); Zoals ik eerder al zei, de .tekst() methode vereist dat u een tekenreeks als parameter opgeeft. Dit betekent dat als de spelscore een getal is, u het moet converteren naar een tekenreeks voor de .tekst() methode om het te maken.
De meeste 2D-eigenschappen en -methoden werken zonder enig probleem met de Tekst component. U kunt bijvoorbeeld eenvoudig ronddraaien en verplaatsen. Er zijn echter twee dingen die u in gedachten moet houden. Styling van de tekst werkt het beste wanneer deze wordt weergegeven met de DOM. Bij weergave op Canvas worden de breedte en hoogte van de tekstentiteit automatisch ingesteld.
Met behulp van de kennis van deze en de laatste zelfstudie, zou je nu in staat moeten zijn om verschillende entiteiten te verplaatsen rond het gebruik van het toetsenbord. U kunt ook het uiterlijk van de hoofdspeler en andere entiteiten wijzigen op basis van de verschillende ingedrukte toetsen.
Als je vragen hebt over deze tutorial, laat me dit dan weten in de comments.
