Share
I alle de praktiske opplæringsoppgavene frem til dette punktet har du brukt firkantede eller rektangulære bokser for å forstå forskjellige begreper som animasjon og tastatur- eller berøringshendelser. Selv om dette er en fin måte å raskt lære mer om biblioteket, vil du mest sannsynlig like å bruke bilder i dine faktiske spill.
I denne opplæringen lærer du hvordan du laster sprite ark for å bruke forskjellige bilder i spillet ditt. Etter det vil du lære å animere forskjellige tegn ved hjelp av sprite animasjon.
For de som ikke er kjent med sprite ark, er de bildefiler som inneholder flere mindre grafikk arrangert sammen i et rutenett. Hver av disse mindre grafikk eller sprites kan brukes alene eller sammen med andre bilder for å animere forskjellige objekter.
Du kan ikke bare laste inn et spritark i Crafty direkte og begynne å bruke det. Du må også fortelle den bredden og høyden til forskjellige fliser eller sprites i spritarket. Du kan også gi bestemte navn til individuelle bilder. For eksempel kan en sprite med en liten stein i den bli kalt "small_stone" for enkel referanse. Å huske et flisernavn er mye enklere enn å huske de faktiske koordinatene til forskjellige bilder.
Vi skal bruke følgende sprite-ark ved å tøye i forskjellige demoer av denne opplæringen.
Den har mange bilder som kan brukes når spilleren går, hopper, står i tomgang eller blir skutt. I dette tilfellet er bredden og høyden på de fleste fliser henholdsvis 80 px og 94 px. Noen sprite ark kan også ha ekstra polstring rundt individuelle fliser eller sprite arket som helhet. Disse kan angis når du laster spritarket ved hjelp av paddingX, paddingY, og paddingAroundBorder eiendommer.
Her er koden vi trenger for å laste ovenstående sprite ark i vårt spill:
var game_assets = "sprites": "hero_spritesheet.png": tile: 80, tileh: 94, kart: hero_idle: [0, 0], hero_walking: [1, 1], hero_jumping: [2, 3] , hero_sitting: [0, 4]; Crafty.load (game_assets);
Flisene er referert ved å bruke et par tall. Det første nummeret bestemmer kolonnen til vår sprite, og det andre nummeret bestemmer rad. Tallene er nullbaserte. For eksempel kan sprite i første kolonne og første rad nås ved å bruke [0, 0]. På samme måte kan sprite i tredje kolonne og fjerde rad nås med [2, 3]. Som nevnt tidligere, kan du gi forskjellige navn til individuelle sprites for enkel bruk.
Når du har lastet et spritark, kan du gjøre bildene på skjermen ved å bruke følgende kode:
Accentsconagua
var idle_hero = Crafty.e ("2D, Canvas, hero_idle") .attr (x: 10, y: 10);De x og y attributter bestemmer stedet der sprites skal gjengis. Du kan også angi bredden og høyden til individuelle sprites ved å bruke w og h egenskaper.
Siden sprite har a 2D komponent, kan du bruke alle egenskapene og egenskapene til 2D komponent til disse bildene. For eksempel kan du vende helten vår horisontalt slik at den vender mot den andre retningen ved å bruke this.flip ( "X"). På samme måte kan du rotere en sprite ved å bruke rotasjon Tilskrive eller gjøre det transparent ved å bruke alfa Egenskap.
var sitting_hero = Crafty.e ("2D, Canvas, hero_sitting") .attr (x: 440, y: 250) .flip ("X");La oss si at du trenger å gjengi bare en del av et gitt sprite på lerretet. Du kan gjøre det med hjelp av .avling (nummer x, y nummer, antall w, Number h) metode. De to første parametrene bestemmer spriteens x- og y-offsetverdier. De to siste parametrene bestemmer bredden og høyden på den beskårne sprite. Alle verdiene bør angis i piksler.
Frem til dette punktet har du flyttet forskjellige enheter rundt ved å endre deres x og y egenskaper. Det var ikke et problem da du bare flyttet bare rektangulære bokser mesteparten av tiden. Men å flytte hovedpersonen vår rundt ved å skyve den som dette vil se veldig unaturlig ut. Å legge til animasjon til objekter som mynter som en spiller kan samle, vil også gjøre spillet morsommere.
Alle sprite-relaterte animasjoner krever at du legger til SpriteAnimation komponent til enheten. Denne komponenten behandler de forskjellige bildene i et sprite-kart som animasjonsrammer.
Informasjonen om en animasjon er lagret i snelle gjenstand. Hjulobjektet har fem forskjellige egenskaper:
id som er navnet på hjuletrammer array som har en liste med rammer for animasjonen i formatet [xpos, ypos] currentFrame eiendom som returnerer indeksen for gjeldende rammelettelser eiendom som bestemmer hvordan animasjonen skal bevege seg fremovervarighet eiendom som setter animasjonsvarigheten i millisekunderDet er fire forskjellige hendelser som kan utløses av en sprite animasjon. Disse er:
Alle disse hendelsene mottar snelle objekt som en parameter.
Ved siden av snelle objekt, det er også a .snelle () metode som brukes til å definere sprite animasjoner. Du kan bruke .animere () metode for å spille noen av de definerte animasjonene.
Prosessen med sprite animasjon begynner med å lage en statisk sprite på lerretet.
var walking_hero = Crafty.e ('2D, Canvas, hero_walking, SpriteAnimation') .attr (x: 40, y: 20);De hero_walking bildet i det ovennevnte tilfellet er det første bildet brukeren ser før animasjonen. Attributtene brukes til å spesifisere plasseringen til gjeldende enhet. Når enheten er opprettet, kan du bruke .snelle () metode for å definere selve animasjonen.
walking_hero.reel ("walking", 1000, [[0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1]]);Denne metoden aksepterer tre parametere. Den første parameteren er id av animasjonen blir opprettet. Den andre parameteren brukes til å angi lengden på animasjonen i millisekunder, og den tredje parameteren er en rekke arrays som inneholder kolonnen (x) og rad (y) -posisjonen for suksessive rammer. I dette tilfellet inneholder oppstillingen posisjonen til alle sprites i den andre raden.
En annen versjon av denne metoden krever fem parametere. De to første parametrene er hjulet id og animasjonslengde. Den tredje og fjerde parametre brukes til å sette start x og y posisjon for animasjonen på sprite kartet. Den siste parameteren angir antall sekvensielle rammer i animasjonen. Når den er satt til en negativ verdi, vil animasjonen spille bakover.
Ovennevnte rulleanimasjon kan også opprettes ved hjelp av følgende kode:
walking_hero.reel ("walking", 1000, 0, 1, 6);Mens denne versjonen er kortfattet, er den litt begrenset. Denne metoden er bare nyttig hvis alle sprites som du vil inkludere i animasjonen, er i en enkelt rad. Videre vil animasjonen vise disse bildene i den rekkefølgen de vises i sprite-arket.
Når du har definert animasjonen, kan du spille den ved hjelp av .animere (reel_Id [, loopCount]) metode. Den første parameteren er animasjonen du vil spille, og den andre parameteren bestemmer antall ganger du vil spille denne animasjonen. Animasjonene spilles en gang som standard. Innstilling loopCount til -1 vil spille animasjonen på ubestemt tid.
I enkelte tilfeller vil du kanskje spille en animasjon bare en gang basert på en hendelse. For eksempel bør en hopp animasjon spilles når brukeren trykker på en knapp for å få spilleren til å hoppe. Du kan prøve det ut i den ovennevnte demo. Trykk på Pil opp nøkkelen vil gjøre den andre sprite hoppe. Her er koden for å oppdage nøkkelpressen:
jumping_hero.bind ('KeyDown', funksjon (evt) hvis (evt.key == Crafty.keys.UP_ARROW) jumping_hero.animate ("jumping", 1););Du kan også pause og gjenoppta animasjoner midtveis ved å bruke .pauseAnimation () og .resumeAnimation () fremgangsmåter.
Hvis en enkelt sprite har flere animasjoner knyttet til den, kan du avgjøre om en bestemt animasjon spilles for øyeblikket ved å bruke .isPlaying ([String reelId]) metode. Hvis nei id er gitt, vil det sjekke om noen animasjon spiller i det hele tatt.
Etter å ha fullført denne opplæringen, bør du kunne laste inn dine egne sprite-ark i Crafty og bruke dem til å representere forskjellige spill-enheter i stedet for ulike rektangler. Du kan nå også bruke forskjellige animasjoner til en enhet basert på ulike hendelser. Jeg skal minne deg på at jeg har brukt Crafty versjon 0.7.1 i denne opplæringen, og demoene fungerer kanskje ikke med andre versjoner av biblioteket.
JavaScript har blitt et av de de facto-språkene for å jobbe på nettet. Det er ikke uten det er læringskurver, og det er nok av rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.
I neste veiledning lærer du hvordan du legger til lyder i spillet ditt.
