Komme i gang med praktiske Entiteter

I den siste opplæringen lærte du om grunnleggende om enheter og hvordan de er byggeklossene i spillet ditt. I denne opplæringen vil du gå utover det grunnleggende og lære mer om enheter i detalj.

Enheter og deres komponenter

Hver enhet består av forskjellige komponenter. Hver av disse komponentene legger sin egen funksjonalitet til enheten. Crafty tilbyr mange innebygde komponenter, men du kan også lage dine egne tilpassede komponenter ved hjelp av Crafty.c ().

Du lærte om noen få grunnleggende komponenter som 2D, Lerret, Farge, og Fourway i den første opplæringen. La oss begynne med å opprette en annen enhet ved hjelp av disse komponentene:

Var spillerBox = Crafty.e ("2D, Lerret, Farge, Firevei") .attr (x: 50, y: 50, w: 50, h: 50) .color ("svart") .fourway (200) ;

Når du har mange enheter med ulike komponenter, kan det bli nødvendig å vite om en gitt enhet har en bestemt komponent knyttet til den. Dette kan oppnås ved å bruke .har () metode.

På samme måte kan du legge til komponenter til et foretak ved å bruke .addComponent (). Hvis du vil legge til flere komponenter samtidig, kan du sende dem som en streng med forskjellige komponenter skilt av kommaer eller sende hver komponent som et annet argument. Ingenting vil skje hvis enheten allerede har komponenten du prøver å legge til. 

playerBox.addComponent ("Jumper, Gravity, Collision"); playerBox.addComponent ("Jumper", "Gravity", "Collision");

Du kan også fjerne komponenter fra en enhet ved hjelp av .removeComponent (String Component [, soft]). Denne metoden tar to argumenter. Den første er komponenten du vil fjerne, og det andre argumentet avgjør om elementet skal være mykt fjernet eller hardt fjernet. Myk fjerning vil bare forårsake .har () å returnere falsk når forespurt for den bestemte komponenten. En hard fjerning vil fjerne alle tilhørende egenskaper og metoder for den komponenten. 

Som standard er alle komponenter mykt fjernet. Du kan sette det andre argumentet til falsk å fjerne en komponent hardt. 

Angi verdier for forskjellige attributter

Du vil sannsynligvis måtte sette forskjellige verdier for bestemte attributter av alle enhetene i spillet ditt. For eksempel skal en enhet som representerer maten til hovedspilleren i spillet, se annerledes ut enn enheten som representerer spilleren selv. På samme måte vil en oppstart se annerledes ut enn mat-enheter. Crafty lar deg sette verdiene til forskjellige enheter i et spill enten separat eller alt på en gang med .attr ().

Hovedinnretningen er for tiden lagret i PlayerBox variabel. Så du kan angi verdien av forskjellige egenskaper direkte ved hjelp av følgende kode:

playerBox.x = 50; playerBox.y = 50; playerBox.z = 2; playerBox.attr (x: 50, y: 50, z: 2)

De z eiendom angir z-indeksen for ulike enheter. En enhet med høyere z verdien vil bli trukket over en annen med en lavere verdi. Husk at kun heltall er tillatt som gyldige z-indeksverdier.

La oss lage en mat-enhet med mindre størrelse, en annen posisjon og rotasjon som er brukt på den. Rotasjonen er spesifisert i grader, og ved å bruke en negativ verdi roterer enheten i moturs retning.

var foodBox = Crafty.e ("2D, Canvas, Color, Food") .attr (x: 150, y: 250, w: 10, h: 10) .color ("rød"); foodBox.attr (z: 1, rotasjon: 45);

Som du kan se i demonstrasjonen nedenfor, er både mat og hovedspiller enkelt å skille mellom. Hvis du prøver å flytte hovedspilleren over maten, vil du se at maten nå er trukket under hovedspilleren på grunn av en lavere z-indeks.

Bindende hendelser til enheter

Det er mange hendelser som du kanskje trenger å svare på mens du utvikler et spill. For eksempel må du binde spillerens entitet til en KeyDown hendelse hvis du vil at den skal vokse i størrelse når du trykker på en bestemt nøkkel. Crafty lar deg binde forskjellige enheter til bestemte hendelser ved hjelp av .binde() metode. Her er et eksempel:

playerBox.bind ('KeyDown', funksjon (e) if (e.key == Crafty.keys.T) this.alpha = 0.5; hvis (e.key == Crafty.keys.O) this. alfa = 1;);

I den følgende demoen, prøv å flytte spilleren over maten og trykk deretter på 'T' og 'O' -tastene. Hvis du trykker på 'T', setter du opaciteten til spilleren til 0,5, og trykke på 'O' vil gjenopprette opaciteten tilbake til 1.

La oss nå knytte et kollisjonsarrangement til spilleren vår slik at den vokser i størrelse når den rammer mat. Vi må legge til en kollisjonskomponent til spilleren og bruke .checkHits () metode. Denne metoden vil utføre kollisjonskontroller mot alle enhetene som har minst en av komponentene som ble angitt når .checkHits () ble kalt. 

Når en kollisjon oppstår, a Hiton hendelsen vil bli sparket. Det vil også ha noen relevant informasjon om treffhendelsen. EN HitOff Hendelsen blir også avfyrt når kollisjonen avsluttes.

playerBox.checkHits ("Food") .bind ("HitOn", funksjon (hitData) this.color ("green"); this.w = this.w + 3; this.h = this.h + 3; );

Bredden og høyden på spilleren øker hver gang et treff oppstår. Vi kan bruke denne hendelsen for mange ting, blant annet ved å endre posisjonen til mat eller øke poengsummen i spillet. Du kan også ødelegge matenheten ved å bruke ødelegge() metode når treff ble oppdaget.

Lag et valg

I den forrige delen måtte vi bare endre egenskapene til en enkelt enhet. Dette kan gjøres enkelt ved å bruke variabelen som er tildelt hver enhet. Dette er ikke praktisk når vi arbeider med rundt 20 forskjellige enheter.

Hvis du har brukt jQuery før, kan du være kjent med måten den velger elementer på. For eksempel kan du bruke $ ( "P") å velge alle avsnittene. På samme måte kan du velge alle enheter som har samme felles komponent ved å bruke Slu ( "komponent"). 

Her er noen eksempler:

// Velg alle enheter som har Gravity-komponenten Crafty ("Gravity"); // Velg alle enheter som har enten DOM eller Canvas-komponent Crafty ("Gravity, Jumper"); // Velg alle enheter som har både Gravity and Jumper-komponent Crafty ("Gravity Jumper");

Når du har valgt, kan du få antall elementer valgt med bruk av lengdeegenskapen. Du kan også iterere gjennom hver av disse enhetene eller binde hendelser til dem alle samtidig. Følgende kode vil forandre alle mat-enheter hvis x verdien er større enn 300 til lilla.

Crafty ("Food"). Hver (funksjon () hvis this.x> 300) this.color ("purple"););

Når du har et valg, kan du bruke få() for å få en rekke av alle enheter i valget. Du kan også få tilgang til enheten ved en bestemt indeks ved hjelp av få (indeks).

Siste tanker

I denne opplæringen lærte du hvordan du legger til eller fjerner komponenter fra en enhet. Du lærte også å velge enheter med en gitt komponent eller komponenter og manipulere deres attributter og egenskaper en etter en. Alle disse tingene vil være svært nyttige når vi ønsker å manipulere forskjellige enheter på vår skjerm basert på en rekke arrangementer.

Hvis du har spørsmål om opplæringen, gi meg beskjed i kommentarene.