Kraftig utover det grunnleggende Lyder og scener

Akkurat som bilder eller sprites spiller lyd også en viktig rolle i spill. Riktig bakgrunnsmusikk kan angi stemningen for spillet. På samme måte, inkludert lydeffekter for ting som en krasj eller geværbrann, vil spillet bli mye mer interessant.

Du kan også legge til scener i spillet ditt for å gjøre det mer organisert. For eksempel, i stedet for å vise spillskjermbildet direkte til brukerne, kan du først vise dem startskjermbildet hvor de kan velge et vanskelighetsnivå for spillet eller øke / redusere volumet av bakgrunnsmusikk. 

I denne opplæringen lærer du hvordan du legger til lyder og scener i spillene dine ved hjelp av Crafty.

Legge til lyd

Prosessen for å legge til lyder i et spill ligner på å legge til sprite-ark. Du må opprette et aktivobjekt og deretter levere en rekke lydfiler for forskjellige lydeffekter. Crafty vil da laste den første filen som støttes av nettleseren. Her er et eksempel:

var game_assets = "audio": "back_music": ["back_music.wav", "back_music.ogg", "back_music.mp3"], "gun_shot": ["gun_shot.wav", "gun_shot.ogg" "gun_shot.mp3"]; Crafty.load (game_assets);

Når du har lagt til lydfilene, kan du spille dem med Crafty.audio.play (String id, Antall repeatCount, Antall volum). Den første parameteren er id av filen vi vil spille. For å spille bakgrunnsmusikk, kan du passere "Back_music" som id

Du kan kontrollere hvor mange ganger en lydfil spilles med den andre parameteren. Når denne parameteren ikke er spesifisert, spilles filen bare en gang. Du vil sannsynligvis ønske å fortsette å spille noen lyder. Et slikt eksempel er bakgrunnsmusikken til et spill. Dette kan oppnås ved å sette den andre parameteren til -1. 

Den tredje parameteren styrer volumet av den oppgitte lydfilen. Den kan ha en verdi mellom 0,0 og 1,0. Dette er koden for å spille bakgrunnsmusikk:

Crafty.audio.play ("back_music", -1, 0,5);

Du kan også spille av lydfiler basert på enkelte hendelser som kollisjon mellom enheter eller et nøkkelpresse.

walking_hero.bind ('KeyDown', funksjon (evt) hvis (evt.key == Crafty.keys.UP_ARROW) walking_hero.animate ("jumping", 1); Crafty.audio.play ("gun_shot", 1) ;);

Husk at du må legge til tastaturkomponenten i helten din før den kan oppdage KeyDown begivenhet. Ovennevnte kode binder KeyDown hendelse til helten og kontrollerer om nøkkelen ble presset med evt.key. Hvis du trykker på pil opp-knappen, spilles en hoppende animasjon for helten en gang. En skuddlyd spilles også.

Prøv å trykke på Pil opp tast inn følgende demonstrasjon, og du vil se alt i bruk. Jeg har kommentert linjen som spiller bakgrunnsmusikken, men du kan bare uncomment det mens du spiller med demoen. 

Bakgrunnsmusikken i demonstrasjonen er opprettet av Rosalila, og skuddlyden er av Luke.RUSTLTD.

Det finnes mange andre metoder du kan bruke til å manipulere lydene som spilles av Crafty. Du kan dempe og deaktivere alle lydfiler som spilles i spillet ved å bruke .stum() og .unmute () henholdsvis. Du kan også pause og gjenoppta lydfiler basert på deres id ved å bruke .pause (Id) og .gjenoppta (Id) metode.

Det er en grense på maksimum antall lyder som kan spilles samtidig i Crafty. Standardgrensen for denne verdien er 7. Hver av de forskjellige lydene spiller samtidig er en kanal. Du kan imidlertid angi din egen verdi ved å bruke Crafty.audio.setChannels (nummer n). Du kan også sjekke om en bestemt lydfil for øyeblikket spiller på minst en kanal ved hjelp av .isPlaying (string ID) metode. Det vil returnere en boolsk indikerer om lyden spiller eller ikke.

Scenes in Crafty

Spillskjermbildet er vanligvis ikke det første du ser i et spill. Vanligvis er det første skjermbildet du ser, lasteskjermen eller hovedmenyskjermbildet. Så, når du har angitt forskjellige alternativer som lyd- eller vanskelighetsnivå, kan du klikke på avspillingsknappen for å gå videre til selve spillskjermbildet. Til slutt, når spillet er over, kan du vise brukere et spill over skjermen.

Disse forskjellige spill skjermene eller scenene gjør spillet mer organisert. En scene i Crafty kan opprettes ved å ringe Crafty.defineScene (String sceneName, Function init [, Function uninit])

Den første parameteren er navnet på scenen. Den andre parameteren er initialiseringsfunksjonen, som setter ting opp når scenen spilles. Den tredje parameteren er en valgfri funksjon som utføres før neste scene spilles og etter alle enhetene med 2D komponent i gjeldende scene har blitt ødelagt.

Her er koden for å definere laste skjermen:

Crafty.defineScene ("loading_screen", funksjon () Crafty.background ("oransje"); var loadingText = Crafty.e ("2D, lerret, tekst, tastatur") .attr (x: 140, y: 120 ) .text ("Scenes Demo") .textFont (størrelse: '50px', vekt: 'fet') .textColor ("hvit"); loadingText.bind ('KeyDown', funksjon (evt) Crafty.enterScene ("game_screen");););

I ovennevnte kode har jeg definert a "Loading_screen" scene. Initialiseringsfunksjonen angir bakgrunnsfarge til oransje og viser litt tekst for å gi brukeren litt informasjon om hva som kommer neste. Du kan inkludere en logo og noen menyalternativer i et aktuelt spill her. Hvis du trykker på en tast mens lerretet er i fokus, tar du deg til selve spillskjermbildet. De .enterScene (String sceneName) Metoden har blitt brukt her for å laste inn "Game_screen"

I den følgende demonstrasjonen kan du trykke UP-tasten 10 ganger for å gå til den endelige skjermen.

Konklusjon

Etter å ha fullført denne opplæringen, bør du kunne legge til en rekke lydeffekter til spillet ditt og kunne kontrollere lydutgangen. Du kan nå også vise forskjellige skjermer til en bruker i forskjellige situasjoner. 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. 

I neste og siste opplæring i denne serien lærer du hvordan du forbedrer kollisjonsdeteksjonen i Crafty.