Share
Proprio come le immagini o gli sprite, anche il suono gioca un ruolo vitale nei giochi. La giusta musica di sottofondo può creare l'atmosfera per il gioco. Allo stesso modo, anche gli effetti sonori per cose come uno scontro o uno sparo renderanno il gioco molto più interessante.
Puoi anche aggiungere scene al tuo gioco per renderlo più organizzato. Ad esempio, invece di mostrare direttamente la schermata di gioco agli utenti, puoi prima mostrare loro la schermata iniziale dove possono scegliere un livello di difficoltà per il gioco o aumentare / diminuire il volume della musica di sottofondo.
In questo tutorial, imparerai come aggiungere suoni e scene ai tuoi giochi usando Crafty.
La procedura per aggiungere suoni a un gioco è simile all'aggiunta di fogli sprite. È necessario creare un oggetto oggetto e quindi fornire una serie di file audio per diversi effetti sonori. Crafty caricherà quindi il primo file supportato dal browser. Ecco un esempio:
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);
Dopo aver aggiunto i file audio, puoi riprodurli utilizzando Crafty.audio.play (String id, numero repeatCount, il volume Number). Il primo parametro è il Id del file che vogliamo riprodurre. Per riprodurre la musica di sottofondo, puoi passare "Back_music" come Id.
È possibile controllare quante volte viene riprodotto un file audio utilizzando il secondo parametro. Quando questo parametro non è specificato, il file viene riprodotto solo una volta. Probabilmente vorrai continuare a suonare continuamente alcuni suoni. Uno di questi esempi è la musica di sottofondo di un gioco. Questo può essere ottenuto impostando il secondo parametro su -1.
Il terzo parametro controlla il volume del file audio specificato. Può avere qualsiasi valore compreso tra 0.0 e 1.0. Questo è il codice per riprodurre la musica di sottofondo:
Accentsconagua
Crafty.audio.play ("back_music", -1, 0.5);Puoi anche riprodurre file audio in base a eventi come collisione tra entità o la pressione di un tasto.
walking_hero.bind ('KeyDown', function (evt) if (evt.key == Crafty.keys.UP_ARROW) walking_hero.animate ("jumping", 1); Crafty.audio.play ("gun_shot", 1) ;);Tieni presente che devi aggiungere il componente Tastiera al tuo eroe prima che possa rilevare il KeyDown evento. Il codice precedente lega il KeyDown evento all'eroe e controlla se il tasto è stato premuto usando evt.key. Se viene premuto il tasto Freccia su, per l'eroe viene riprodotta un'animazione saltata una volta. Viene riprodotto anche un suono di arma da fuoco.
Prova a premere il tasto Freccia su inserisci la demo seguente e vedrai tutto in azione. Ho commentato la linea che riproduce la musica di sottofondo, ma puoi semplicemente decommentarla mentre stai giocando con la demo.
La musica di sottofondo nella demo è stata creata da Rosalila e il suono degli spari è di Luke.RUSTLTD.
Ci sono molti altri metodi che puoi usare per manipolare i suoni suonati da Crafty. Puoi disattivare e riattivare tutti i file audio che vengono riprodotti nel gioco usando .mute () e .unmute () rispettivamente. Puoi anche mettere in pausa e riprendere i file audio in base al loro Id usando il .pausa (Id) e .riattivare (Id) metodo.
C'è un limite al numero massimo di suoni che possono essere riprodotti contemporaneamente in Crafty. Il limite predefinito per questo valore è 7. Ciascuno dei diversi suoni riprodotti contemporaneamente è un canale. Tuttavia, puoi impostare il tuo valore usando Crafty.audio.setChannels (Numero n). Puoi anche controllare se un dato file audio è attualmente in riproduzione su almeno un canale usando il .isPlaying (ID stringa) metodo. Restituirà un booleano che indica se l'audio è in riproduzione o meno.
Generalmente la schermata di gioco non è la prima cosa che vedi in un gioco. Di solito, la prima schermata che vedi è la schermata di caricamento o la schermata del menu principale. Quindi, una volta impostate diverse opzioni come audio o livello di difficoltà, è possibile fare clic sul pulsante di riproduzione per passare alla schermata di gioco attuale. Finalmente, quando il gioco è finito, puoi mostrare agli utenti un gioco sullo schermo.
Questi diversi schermi o scene di gioco rendono il gioco più organizzato. Una scena in Crafty può essere creata chiamando Crafty.defineScene (String sceneName, init Funzione [, UNINIT Funzione]).
Il primo parametro è il nome della scena. Il secondo parametro è la funzione di inizializzazione, che imposta le cose quando viene riprodotta la scena. Il terzo parametro è una funzione opzionale che viene eseguita prima che venga riprodotta la scena successiva e dopo tutte le entità con 2D componente nella scena corrente sono stati distrutti.
Ecco il codice per la definizione della schermata di caricamento:
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");););Nel codice precedente, ho definito a "Loading_screen" scena. La funzione di inizializzazione imposta il colore dello sfondo su arancione e mostra del testo per dare all'utente alcune informazioni su ciò che verrà dopo. Puoi includere un logo e alcune opzioni di menu in un gioco reale qui. Premendo un tasto qualsiasi mentre il canvas è a fuoco, si accede alla schermata di gioco effettiva. Il .enterScene (String sceneName) metodo è stato usato qui per caricare il "Game_screen".
Nella seguente demo, è possibile premere il tasto UP 10 volte per passare alla schermata finale.
Dopo aver completato questo tutorial, dovresti essere in grado di aggiungere una varietà di effetti sonori al tuo gioco ed essere in grado di controllare l'uscita audio. Ora puoi anche mostrare schermi diversi a un utente in diverse situazioni. Dovrei ricordarti che ho usato la versione 0.7.1 di Crafty in questo tutorial, e le demo potrebbero non funzionare con altre versioni della libreria.
Nel prossimo e ultimo tutorial di questa serie, imparerai come migliorare il rilevamento delle collisioni in Crafty.
