El so i la música són elements fonamentals per crear una experiència de joc immersiva. En aquest tema aprendràs com afegir efectes de so i música de fons als teus jocs amb Phaser, des de la càrrega fins a la reproducció i el control del volum.
Conceptes clau
- Tipus de so: Efectes de so (SFX) i música de fons (BGM).
- Càrrega d’arxius d’àudio: Com carregar sons i música al teu projecte.
- Reproducció i control: Com iniciar, aturar, pausar i ajustar el volum dels sons.
- Gestió de múltiples sons: Com gestionar diversos sons alhora.
- Formats d’àudio compatibles: OGG, MP3, WAV, etc.
- Càrrega d’arxius d’àudio
Abans de poder utilitzar sons o música, has de carregar els arxius d’àudio durant la fase de pre-càrrega de la teva escena.
// Exemple de pre-càrrega d'àudio a Phaser
preload() {
this.load.audio('jump', 'assets/sounds/jump.wav');
this.load.audio('bgm', [
'assets/music/background.mp3',
'assets/music/background.ogg'
]);
}Explicació:
this.load.audio(clau, ruta): Carrega un arxiu d’àudio. Pots passar un array de rutes per assegurar compatibilitat entre navegadors.- Les claus (
'jump','bgm') s’utilitzen després per referenciar els sons.
- Reproducció de sons i música
Un cop carregats, pots reproduir els sons i la música fàcilment.
// Exemple de reproducció d'un efecte de so
let jumpSound = this.sound.add('jump');
jumpSound.play();
// Exemple de reproducció de música de fons en bucle
let bgm = this.sound.add('bgm', { loop: true, volume: 0.5 });
bgm.play();Explicació:
this.sound.add(clau, opcions): Afegeix un so a la memòria. Pots passar opcions comloop(repetició) ivolume..play(): Reprodueix el so.- Pots controlar el volum i si la música es repeteix.
- Control avançat de l’àudio
Phaser permet controlar l’àudio de manera detallada:
| Acció | Exemple de codi | Explicació |
|---|---|---|
| Pausar la música | bgm.pause(); |
Pausa la música |
| Reprendre la música | bgm.resume(); |
Reprèn la música pausada |
| Aturar la música | bgm.stop(); |
Atura la música completament |
| Ajustar el volum | bgm.setVolume(0.2); |
Canvia el volum (0.0 a 1.0) |
| Reproduir només un cop | jumpSound.play({ loop: false }); |
Reprodueix l’efecte de so una sola vegada |
- Bones pràctiques i consells
- Evita la saturació: No reprodueixis massa sons alhora per evitar soroll i saturació.
- Formats d’àudio: Proporciona més d’un format (OGG, MP3) per garantir compatibilitat.
- Pre-càrrega: Carrega tots els sons abans de començar el joc per evitar retards.
- Control de volum: Permet als jugadors ajustar el volum o silenciar el joc.
- Exercicis pràctics
Exercici 1: Afegir un efecte de so a una acció
Enunciat:
Carrega un efecte de so anomenat 'coin' i fes que es reprodueixi cada cop que el jugador recull una moneda.
Solució:
// Preload
preload() {
this.load.audio('coin', 'assets/sounds/coin.wav');
}
// Create
create() {
this.coinSound = this.sound.add('coin');
}
// Quan el jugador recull una moneda
collectCoin() {
this.coinSound.play();
// Altres accions relacionades amb la moneda...
}Consell:
Assegura’t que la funció collectCoin() s’executa quan el jugador col·lisiona amb una moneda.
Exercici 2: Música de fons amb control de volum
Enunciat:
Carrega una música de fons i fes que es reprodueixi en bucle. Afegeix un botó per silenciar o activar el so.
Solució:
// Preload
preload() {
this.load.audio('bgm', [
'assets/music/background.mp3',
'assets/music/background.ogg'
]);
}
// Create
create() {
this.bgm = this.sound.add('bgm', { loop: true, volume: 0.5 });
this.bgm.play();
// Botó per silenciar/activar
this.isMuted = false;
this.muteButton = this.add.text(10, 10, 'Silencia', { fontSize: '16px', fill: '#fff' })
.setInteractive()
.on('pointerdown', () => {
this.isMuted = !this.isMuted;
this.bgm.setMute(this.isMuted);
this.muteButton.setText(this.isMuted ? 'Activa so' : 'Silencia');
});
}Error comú:
Oblidar-se de passar l’opció loop: true farà que la música només soni una vegada.
Resum
- Has après a carregar, reproduir i controlar efectes de so i música de fons a Phaser.
- Saps com gestionar el volum, la repetició i la pausa dels sons.
- Has practicat amb exercicis per integrar l’àudio en accions del joc i la interfície d’usuari.
Pròxim pas:
A la següent secció aprendràs a crear botons i menús interactius per millorar la interfície del teu joc.
Phaser - Desenvolupament de jocs amb JavaScript
Mòdul 1: Introducció al desenvolupament de jocs i Phaser
- Què és el desenvolupament de jocs?
- Visió general de Phaser
- Configuració del teu entorn de desenvolupament
- El teu primer projecte amb Phaser
Mòdul 2: Fonaments de Phaser
- Entendre el bucle del joc
- Configuració del joc i escenes
- Carregar i mostrar imatges
- Treballar amb text
- Gestió d’entrada (teclat i ratolí)
Mòdul 3: Sprites i animació
- Què són els sprites?
- Afegir i moure sprites
- Fonaments de l’animació de sprites
- Grups de sprites i gestió
Mòdul 4: Física i interactivitat en el joc
- Introducció a la física a Phaser
- Activar la física en els sprites
- Col·lisions i superposicions
- Objectes interactius i esdeveniments
Mòdul 5: Món del joc i càmera
Mòdul 6: Àudio i interfície d’usuari
Mòdul 7: Arquitectura del joc i gestió d’estats
Mòdul 8: Funcionalitats avançades de joc
- Efectes de partícules
- Tweens i animacions
- Timers i esdeveniments retardats
- IA i comportament dels enemics