Share
I den siste opplæringen lærte du om enheter i Crafty og hvordan du kan manipulere dem ved hjelp av forskjellige metoder. I denne opplæringen lærer du om ulike komponenter som lar deg flytte forskjellige enheter rundt ved hjelp av tastaturet.
Crafty har tre forskjellige komponenter for å flytte elementer rundt. Disse er toveis, Fourway, og multiway. Denne opplæringen vil introdusere deg til alle disse komponentene. Til slutt vil du lære om Tastatur komponent og ulike metoder knyttet til det.
De toveis komponenten tillater en enhet å flytte til venstre eller høyre ved hjelp av piltastene eller A og D. Det tillater også enheten å hoppe ved hjelp av opp-pilen eller W-tasten. Du må legge til en Tyngde komponent til dine enheter for å få dem til å hoppe.
De .toveis () Metoden aksepterer to argumenter. Den første bestemmer enhetens hastighet i horisontal retning, mens det andre argumentet bestemmer enhetens hopphastighet. Hvis du forlater det andre argumentet, setter du verdien av hopphastigheten tilsvarer to ganger hastigheten i horisontal retning.
De Fourway komponenten vil tillate et foretak å bevege seg i fire forskjellige retninger ved å enten bruke piltastene eller W, A, S, D. Den .fireveis () Metoden aksepterer bare ett argument, som vil bestemme hastigheten på den gitte enheten i alle retninger.
En stor ulempe ved Fourway komponenten er at den ikke tillater deg å angi forskjellige hastigheter for horisontale og vertikale retninger.
På den annen side, multiway komponent gir deg mulighet til å angi hastigheten i hver akse individuelt. Den lar deg også tilordne forskjellige nøkler for å flytte enheten i forskjellige retninger. Det første argumentet i .flerveis () Metoden er hastigheten på vår enhet. Det andre argumentet er et objekt for å bestemme hvilken nøkkel som vil flytte enheten i hvilken retning.
Veibeskrivelsen er spesifisert i grader. 180 er igjen, 0 er riktig, -90 er opp og 90 er nede. Her er noen eksempler:
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);
Koden ovenfor angir hastigheten til den svarte boksen lik 150 i horisontal retning og 75 i vertikal retning. Den oransje boksen beveger seg med en hastighet på 150 i alle retninger, men har blitt tildelt forskjellige nøkler for bevegelse. Den lilla boksen beveger seg ikke strengt horisontalt eller vertikalt, men i en 45 grader vinkel. Hastigheten her er i piksler per sekund.
I utgangspunktet kan du tildele noen nøkkel til hvilken som helst retning ved hjelp av multiway komponent. Dette kan være svært nyttig når du vil flytte flere enheter uavhengig.
Denne komponenten har også a .hastighet() metode, som kan brukes til å endre hastigheten til et foretak på et senere tidspunkt. Du kan også deaktivere tastkontrollene når som helst ved å bruke .disableControl () metode.
De tre komponentene i de forrige avsnittene lar deg flytte en enhet rundt ved hjelp av forskjellige taster. Men du vil kanskje ha mer kontroll over hva som skjer når du trykker på en tast. For eksempel vil du kanskje gjøre spilleren større når en bestemt tast er trykket eller gjør spilleren kraftigere når en annen tast er trykket. Dette kan oppnås ved å bruke Tastatur komponent.
Denne komponenten gir deg også tilgang til .isDown (String KeyName / nøkkelkoder) metode, som vil returnere sann eller falsk basert på om tastetrykket har gitt KeyName eller Nøkkelkode.
Crafty har også to forskjellige tastaturhendelser, KeyDown og KeyUp. Du kan binde disse hendelsene til enhver enhet i spillet ditt uten å bruke Tastatur komponent. De KeyDown Hendelsen utløses når DOM keydown hendelsen oppstår. På samme måte, KeyUp Hendelsen utløses når DOM keyup hendelsen oppstår.
Accentsconagua
blackbox.bind ('KeyDown', funksjon () hvis (this.isDown ('L')) this.w + = 5;); orangeBox.bind ('KeyDown', funksjon (e) hvis (e.key == Crafty.keys.K) this.h + = 5;);I ovennevnte kode, den svart boks hadde allerede Tastatur komponent. Dette tillot oss å bruke .er nede() metode for å bestemme tastetrykket.
Prøv å trykke L og K i følgende demo for å øke bredden og høyden på de to boksene henholdsvis.
Det er veldig enkelt å legge til tekst i spillet ditt med Crafty. Først må du opprette en enhet med Tekst komponent. Deretter kan du legge til tekst i enheten din ved hjelp av .tekst() metode som aksepterer streng som parameter.
Plasseringen av teksten kan styres ved å bruke .attr () metode for å angi verdien av x og y koordinater. På samme måte kan fargen på teksten spesifiseres ved hjelp av .tekstfargen () metode. Noen andre egenskaper som størrelse, vekt, og familie av skrifttypen kan stilles inn ved hjelp av .textFont () metode. Her er et eksempel:
var playerName = Crafty.e ('2D, DOM, Text') .attr (x: 10, y: 10); playerName.text ( 'ZombieHunter'); playerName.textColor ( 'rød'); Som jeg tidligere nevnte, .tekst() Metoden krever at du oppgir en streng som parameter. Dette betyr at hvis spillresultatet er et tall, må du konvertere det til en streng for .tekst() metode for å gjøre det.
De fleste 2D egenskaper og metoder vil fungere uten problemer med Tekst komponent. For eksempel kan du rotere og bevege den rundt med letthet. Det er imidlertid to ting du må huske på. Styling av teksten fungerer best når du gjengis ved hjelp av DOM. Når du gjøres på lerret, vil bredden og høyden på tekstenheten settes automatisk.
Ved å bruke kunnskapen fra denne og den siste opplæringen, bør du nå kunne flytte forskjellige enheter rundt ved hjelp av tastaturet. Du kan også endre utseendet på hovedspilleren og andre enheter basert på de forskjellige tastene du trykker på.
Hvis du har spørsmål om denne opplæringen, gi meg beskjed i kommentarene.
