Share
Opp til dette punktet i denne serien har du lært å manipulere forskjellige enheter og bruke tastaturet til å flytte dem rundt. I denne delen lærer du hvordan du bruker spillsløyfen i Crafty til å kontinuerlig sjekke for ulike hendelser og animere forskjellige enheter.
Spillsløyfen i Crafty er implementert i Crafty.timer.step, som bruker globale hendelser til å kommunisere med resten av motoren. Sløyfen drives av requestAnimationFrame når den er tilgjengelig. Hver sløyfe består av ett eller flere anrop til enterframe arrangement og en enkelt samtale til RenderScene som resulterer i omlegging av hvert lag.
Den endelige verdien av alle egenskapene og variablene er løst før en scene blir gjengitt. For eksempel, hvis du flytter spilleren 5 px til høyre ti ganger i en enkelt enterframe arrangement, blir det direkte tegnet 50 px til høyre ved å hoppe over alle mellomliggende tegninger.
Alt i spillet ditt som må endres over tid, er i siste instans knyttet til enterframe begivenhet. Du kan bruke .binde() metode for å binde forskjellige enheter til denne hendelsen. Funksjoner som er bundet til dette arrangementet, sendes også et objekt med egenskaper som dt som bestemmer antall millisekunder som har gått siden sist enterframe begivenhet.
Du kan bruke dt eiendom for å gi en jevn spillopplevelse ved å bestemme hvor langt spilltilstanden skal gå videre.
De RenderScene Hendelsen brukes til å sørge for at alt som er synlig på skjermen, stemmer overens med dagens tilstand av spillet enterframe begivenhet. Normalt trenger du ikke å binde denne hendelsen selv, med mindre du bestemmer deg for å implementere ditt eget tilpassede gjengelag.
Du kan bruke Tween komponent når du bare vil animere 2D-egenskapene til et foretak over en bestemt tidsperiode. Du kan animere x, y, w, h, rotasjon, og alfa egenskaper som bruker denne komponenten. La oss animere x-verdien og høyden til oransje og svarte boksene du har opprettet i de to siste opplæringsprogrammene.
Her er koden du trenger:
blackbox.tween (x: 500, 3000); orangeBox.tween (x: 50, h: 100, rotasjon: 360, 3000);
Du har sikkert lagt merke til at oransje boksen ikke roterer rundt sentrum, men øverst til venstre. Du kan endre rotasjonssenteret ved å bruke .opprinnelse() metode. Den kan akseptere to heltallargumenter, som bestemmer opprinnelse av pikselforskjell i x- og y-aksene.
Det aksepterer også en strengverdi som argument. Strengverdien kan være en kombinasjon av senter, topp, bunn, midten, venstre og høyre. For eksempel, .opprinnelse ( "center") vil rotere enheten rundt sentrum, og .opprinnelse ("nederst til høyre") vil rotere enheten rundt nederst til høyre.
Du kan sette pause eller gjenoppta alle tweens tilknyttet en gitt enhet ved hjelp av .pauseTweens () og .resumeTweens () metoder. På samme måte kan du også bruke .cancelTween () å avbryte en bestemt tween.
De Crafty.timer objektet håndterer alle spillflåttene i Crafty. Du kan bruke .FPS () Metode med dette objektet for å få målrammen. Husk at det ikke er den faktiske bildesatsen.
Du kan også bruke .simulateFrames (nummer rammer [, Antall tidstrinn]) metode for å fremme spilltilstanden med et gitt antall rammer. De timestep er varigheten å passere hver ramme. Hvis det ikke er angitt, brukes en standardverdi på 20 ms.
En annen nyttig metode er .skritt(), som vil fremme spillet ved å utføre et trinn. Et enkelt trinn kan bestå av en eller flere rammer etterfulgt av en gjengivelse. Antallet rammer vil avhenge av timeren steptype. Denne metoden utløser en rekke hendelser som enterframe og ExitFrame for hver ramme og prerender, RenderScene, og PostRender hendelser for hver gjengivelse.
Det er tre forskjellige moduser av steptype: fast, variabel, og semifixed. I fast modus, blir hver ramme i Crafty sendt til samme verdi av dt. Men dette steptype kan utløse flere rammer før hver gjengivelse for å oppnå målspillets hastighet.
Du kan også utløse bare en ramme før hver gjengivelse ved å bruke variabel modus. I dette tilfellet er verdien av dt er lik den faktiske tiden som er gått siden den siste rammen.
Endelig, den semifixed modus utløser flere rammer per gjengivelse, og tiden siden siste ramme er like delt mellom dem.
Hvis du har lest alle opplæringsprogrammene i denne serien, bør du ha fått nok kunnskap nå for å skape et veldig grunnleggende spill. I denne delen lærer du hvordan du legger alt du lærte å bruke og skape et spill hvor hovedspilleren må spise et stykke mat.
Maten vil være et roterende rødt firkant. Så snart maten kommer i kontakt med spilleren, forsvinner den fra det gamle stedet og gyter på et nytt tilfeldig sted. Spilleren kan flyttes med A, W, S, D, eller piltastene.
En ting du må ta vare på, er spillerenes posisjon. Det er ment å være med grensene til spillfasen.
La oss skrive koden for maten først:
Accentsconagua
var foodBox = Crafty.e ("2D, Lerret, Farge, Mat") .attr (x: 150, y: 250, w: 15, h: 15) .color ("rød") .origin ") .bind (" EnterFrame ", funksjon (eventData) this.rotation + = 4;);Som standard ville Crafty ha brukt øverste venstre hjørne av matenheten til å rotere den. Innstilling av opprinnelse til senter sørger for at matenheten roterer rundt senteret.
var playerBox = Crafty.e ("2D, Lerret, Farge, Fourway, Kollisjon") .attr (x: 50, y: 360, w: 50, h: 50) .color ("svart") .fourway 200) .bind ("EnterFrame", funksjon (eventData) if (this.x < 0) this.x = 0; if(this.y < 0) this.y = 0; if(this.x > (stageWidth - this.w)) this.x = stageWidth - this.w; hvis (this.y> (sceneHeight - this.h)) this.y = stageHeight - this.h; );Spillerenheten kontrollerer gjeldende plassering av spilleren i hver ramme og tilbakestiller posisjonen hvis spilleren prøver å gå utenfor spillfasen.
Du kan bruke en Tekst enhet for å holde oversikt over poengsummen. Poengsummen er vist øverst til venstre. De gameScore variabel lagrer antall ganger spilleren treffer matenheten.
var scoreText = Crafty.e ('2D, DOM, Text') .attr (x: 10, y: 10) .textFont (size: '25px'); scoreText.text (gameScore.toString ());Nå må du bare skrive koden for å flytte maten til et annet sted når et treff er oppdaget. Følgende kode vil gjøre akkurat det.
playerBox.checkHits ("Food"). bind ("HitOn", funksjon (hitData) foodBox.x = Math.random () * (stageWidth - foodBox.w); foodBox.y = Math.random () * (stageHeight - foodBox.h); gameScore + = 1; scoreText.text (gameScore.toString ()););Du må huske på at du trekker bredden og høyden av matenheten fra scenens bredde og høyde henholdsvis. Dette sørger for at maten alltid er helt inne i scenen. Her er en demonstrasjon av spillet:
Med hjelp av Crafty har du laget et veldig grunnleggende spill ved å skrive noen linjer med kode. For øyeblikket mangler spillet noen få funksjoner som kan gjøre det mer interessant. For det første er det ingen lyder. For det andre er det ingen måte for spilleren å komme seg ut, og vanskelighetsgraden forblir også den samme gjennom hele spillet. Du vil lære om lyd, sprites, musevents og andre funksjoner i biblioteket i neste serie.
Hvis du hadde noen problemer eller tvil mens du går gjennom alle eksemplene i serien, gi meg beskjed i kommentarene.
