Share
Net als afbeeldingen of sprites, speelt geluid ook een cruciale rol in games. De juiste achtergrondmuziek kan de stemming voor het spel bepalen. Evenzo, inclusief geluidseffecten voor zaken als een crash of geweervuur maakt het spel veel interessanter.
Je kunt ook scènes aan je spel toevoegen om het overzichtelijker te maken. In plaats van bijvoorbeeld het gamevenster rechtstreeks aan gebruikers te laten zien, kunt u hen eerst het startscherm laten zien waar ze een moeilijkheidsniveau voor het spel kunnen kiezen of het volume achtergrondmuziek kunnen verhogen / verlagen..
In deze tutorial leer je hoe je met Crafty geluiden en scènes aan je games kunt toevoegen.
Het proces voor het toevoegen van geluiden aan een game is vergelijkbaar met het toevoegen van sprite-sheets. U moet een activumobject maken en vervolgens een array met audiobestanden leveren voor verschillende geluidseffecten. Crafty laadt vervolgens het eerste bestand dat wordt ondersteund door de browser. Hier is een voorbeeld:
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);
Nadat u de audiobestanden hebt toegevoegd, kunt u ze afspelen met Crafty.audio.play (String id, Number repeatCount, Number volume). De eerste parameter is de ID kaart van het bestand dat we willen spelen. Om de achtergrondmuziek te spelen, kunt u slagen "Back_music" zoals ID kaart.
U kunt bepalen hoe vaak een audiobestand wordt afgespeeld met de tweede parameter. Als deze parameter niet is opgegeven, wordt het bestand slechts eenmaal afgespeeld. Je wilt waarschijnlijk continu sommige geluiden blijven spelen. Een voorbeeld hiervan is de achtergrondmuziek van een game. Dit kan worden bereikt door de tweede parameter in te stellen op -1.
De derde parameter bepaalt het volume van het gegeven audiobestand. Het kan elke waarde tussen 0,0 en 1,0 hebben. Dit is de code om achtergrondmuziek af te spelen:
Accentsconagua
Crafty.audio.play ("back_music", -1, 0.5);U kunt ook audiobestanden afspelen op basis van bepaalde gebeurtenissen, zoals een botsing tussen entiteiten of een toetsdruk.
walking_hero.bind ('KeyDown', functie (evt) if (evt.key == Crafty.keys.UP_ARROW) walking_hero.animate ("jumping", 1); Crafty.audio.play ("gun_shot", 1) ;);Houd er rekening mee dat je het Keyboard-onderdeel aan je held moet toevoegen voordat het het kan detecteren Toets neer evenement. De bovenstaande code bindt de Toets neer evenement voor de held en controleert of de toets is ingedrukt met evt.key. Als u op de toets Pijl-omhoog drukt, wordt eenmaal voor de held een springanimatie afgespeeld. Er wordt ook een geweerschotgeluid afgespeeld.
Druk op de Pijltje omhoog toets de volgende demo in en je ziet het allemaal in actie. Ik heb commentaar gegeven op de regel die de achtergrondmuziek afspeelt, maar je kunt het commentaar gewoon weghalen tijdens het spelen met de demo.
De achtergrondmuziek in de demo is gemaakt door Rosalila en het schotschot is van Luke.RUSTLTD.
Er zijn veel andere methoden die je kunt gebruiken om de geluiden van Crafty te manipuleren. U kunt alle audiobestanden die in het spel worden gespeeld dempen en weer inschakelen met behulp van .dempen() en .unmute () respectievelijk. U kunt ook audiobestanden pauzeren en hervatten op basis van hun ID kaart door de .pauze (Id) en .hervatten (Id) methode.
Er is een limiet op het maximale aantal geluiden dat tegelijkertijd in Crafty kan worden gespeeld. De standaardlimiet voor deze waarde is 7. Elk van de verschillende gelijktijdig spelende geluiden is een kanaal. U kunt echter uw eigen waarde instellen met behulp van Crafty.audio.setChannels (Number n). U kunt ook controleren of een bepaald audiobestand momenteel wordt afgespeeld op ten minste één kanaal met behulp van de .isPlaying (string ID) methode. Er wordt een Boolean geretourneerd die aangeeft of de audio wordt afgespeeld of niet.
Het spelscherm is over het algemeen niet het eerste dat je in een game ziet. Meestal is het eerste scherm dat u ziet het laadscherm of het hoofdmenuscherm. Als u vervolgens verschillende opties hebt ingesteld, zoals audio- of moeilijkheidsniveau, kunt u op de afspeelknop klikken om naar het daadwerkelijke gamescherm te gaan. Eindelijk, als het spel voorbij is, kun je gebruikers een game over het scherm laten zien.
Deze verschillende gameschermen of scènes maken je spel overzichtelijker. Een scène in Crafty kan worden gemaakt door te bellen Crafty.defineScene (String sceneName, functie init [, Function uninit]).
De eerste parameter is de naam van de scène. De tweede parameter is de initialisatiefunctie, waarmee dingen worden ingesteld wanneer de scène wordt afgespeeld. De derde parameter is een optionele functie die wordt uitgevoerd voordat de volgende scène wordt afgespeeld en na alle entiteiten met 2D component in de huidige scène is vernietigd.
Hier is de code voor het definiëren van het laadscherm:
Crafty.defineScene ("loading_screen", function () Crafty.background ("orange"); var loadingText = Crafty.e ("2D, Canvas, Text, Keyboard") .attr (x: 140, y: 120 ) .text ("Scenes Demo") .textFont (size: '50px', weight: 'bold') .textColor ("white"); loadingText.bind ('KeyDown', function (evt) Crafty.enterScene ("game_screen");););In de bovenstaande code, heb ik een gedefinieerd "Loading_screen" tafereel. De initialisatiefunctie stelt de achtergrondkleur in op oranje en toont wat tekst om de gebruiker wat informatie te geven over wat er daarna komt. U kunt hier een logo en enkele menu-opties opnemen in een echte game. Als u op een willekeurige toets drukt terwijl het canvas in focus is, gaat u naar het daadwerkelijke gamescherm. De .enterScene (String sceneName) methode is hier gebruikt om de "Game_screen".
In de volgende demo kun je 10 keer op de UP-toets drukken om naar het laatste scherm te gaan.
Na het voltooien van deze tutorial, zou je verschillende geluidseffecten aan je spel kunnen toevoegen en de audio-uitvoer kunnen besturen. U kunt nu ook verschillende schermen laten zien aan een gebruiker in verschillende situaties. Ik wil u eraan herinneren dat ik Crafty-versie 0.7.1 in deze zelfstudie heb gebruikt en dat de demo's mogelijk niet werken met andere versies van de bibliotheek.
In de volgende en laatste zelfstudie van deze serie leert u hoe u collision detection in Crafty kunt verbeteren.
