Introduzione
I giochi web spesso riproducono decine di brevi suoni. Caricare ciascuno di essi come file separato significa effettuare decine di richieste, e sui dispositivi mobili alcuni browser consentono il caricamento di un solo suono alla volta. Uno sprite audio risolve entrambi i problemi: un singolo file contiene tutti i suoni e un file manifest indica dove si trova ciascuno di essi.
Gli sprite vengono solitamente creati con strumenti da riga di comando che richiedono FFmpeg. Il Creatore di Sprite Audio di ToolBuddy li crea direttamente nel browser. Questa guida illustra come creare uno sprite funzionante partendo da clip separate.
Cosa contiene un pacchetto di sprite
Il pacchetto è costituito da un singolo file audio con le clip disposte in sequenza, separate da brevi intervalli, e da un manifesto JSON. Nel manifesto Howler, ogni clip ha un offset, una durata in millisecondi e un flag di loop; il nome della clip deriva dal nome del file.
Carica e ordina le clip
Seleziona i tuoi clip: file audio MP3, WAV, M4A, AAC, OGG/Opus, FLAC o WebM. Verranno visualizzati nella scheda Clip nell'ordine in cui li hai aggiunti.
Ordina per nome o dimensione, oppure sposta le clip verso l'alto o verso il basso. Il pulsante "Ripristina" nell'intestazione del Pannello di controllo ripristina l'ordine in cui le hai aggiunte. L'ordine influisce solo sulla posizione delle clip nel file; il codice le riproduce in base al nome.
Rifinisci e modella ogni clip
Seleziona una clip per visualizzarne l'anteprima; i punti di taglio vengono visualizzati come maniglie sulla forma d'onda. Nel pannello di controllo imposta l'inizio e la fine esatti, il guadagno, l'attivazione e la disattivazione della dissolvenza in entrata e in uscita, il flag di loop per le basi musicali e l'eliminazione del silenzio ai bordi.
| Impostazione della clip | Allineare | Perché |
|---|---|---|
| Inizio / Fine | All'interno della clip | Interrompere il silenzio o un clic |
| Guadagno | da -24 a +24 dB | Bilanciare i suoni forti e deboli |
| Dissolvenza in entrata/uscita | Da 0 a 5 secondi | Evitate di fare clic ai bordi |
| Ciclo continuo | Acceso/spento | Musica di sottofondo e atmosfera |
| Silenzio discreto | Acceso/spento | Rimuovere l'introduzione e la coda silenziose |
Imposta le opzioni dello sprite
Seleziona il manifesto Howler per Howler.js. Imposta la frequenza di campionamento (44,1 kHz è adatta alla maggior parte dei giochi; 22,05 kHz per file più piccoli), mono o stereo, l'intervallo tra le clip (0,05 s per impostazione predefinita, in modo che i suoni non si sovrappongano), un crossfade opzionale e il formato di output: MP3 o OGG per le dimensioni, WAV per la modifica.
Crea, visualizza in anteprima, scarica
Seleziona "Crea sprite". L'anteprima passa all'intero sprite, con ogni clip rappresentata da una banda numerata; fai clic su una banda per selezionare quella clip, oppure passa a "Clip" per ascoltare un singolo suono.
Scarica il file ZIP con l'audio e il file JSON insieme, oppure il file JSON da solo se hai modificato solo il manifest.
Utilizzalo in Howler.js
Carica lo sprite con new Howl({ src: ['audio-sprite.mp3'], sprite: manifest.sprite }) e riproduci un suono con sound.play('coin'). Se necessario, fornisci un file OGG insieme all'MP3 per i browser meno recenti; crea lo sprite due volte con i due formati.
- Mantieni univoci i nomi delle clip: diventeranno le chiavi nella mappa dello sprite.
- Lascia lo spazio predefinito; non costa quasi nulla ed evita sovrapposizioni.
- Utilizzare il flag loop per i loop di sfondo, non per gli effetti one-shot.
Offset su cui puoi contare
I codificatori MP3 aggiungono un breve ritardo all'inizio di un file, che in precedenza causava uno spostamento di ogni offset dello sprite. ToolBuddy scrive l'intestazione senza intervallo che indica ai decoder di saltarla, e i suoi test decodificano lo sprite e verificano che ogni clip inizi nel punto specificato nel manifest.
Scritto da
Ankit Kumar
Ingegnere software senior e fondatore di ToolBuddy
Progettare utilità basate sul browser senza requisiti di caricamento utilizzando le tecnologie WebAssembly, Web Audio e Canvas.