Share
Al igual que las imágenes o sprites, el sonido también juega un papel vital en los juegos. La música de fondo adecuada puede establecer el ambiente para el juego. De manera similar, incluir efectos de sonido para cosas como choques o disparos hará que el juego sea mucho más interesante..
También puedes agregar escenas a tu juego para hacerlo más organizado. Por ejemplo, en lugar de mostrar directamente la pantalla del juego a los usuarios, primero puede mostrarles la pantalla de inicio donde pueden elegir un nivel de dificultad para el juego o aumentar / disminuir el volumen de la música de fondo..
En este tutorial, aprenderá cómo agregar sonidos y escenas a sus juegos usando Crafty.
El proceso para agregar sonidos a un juego es similar a agregar hojas de sprites. Debe crear un objeto de activo y luego suministrar una serie de archivos de audio para diferentes efectos de sonido. Crafty cargará el primer archivo que sea compatible con el navegador. Aquí hay un ejemplo:
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);
Una vez que haya agregado los archivos de audio, puede reproducirlos usando Crafty.audio.play (id de cadena, número de repetición de recuento, volumen de número). El primer parámetro es el Carné de identidad del archivo que queremos reproducir. Para reproducir la música de fondo, puede pasar "back_music" como Carné de identidad.
Puede controlar cuántas veces se reproduce un archivo de audio usando el segundo parámetro. Cuando este parámetro no se especifica, el archivo se reproduce solo una vez. Probablemente querrás seguir reproduciendo algunos sonidos continuamente. Un ejemplo es la música de fondo de un juego. Esto se puede lograr estableciendo el segundo parámetro en -1.
El tercer parámetro controla el volumen del archivo de audio dado. Puede tener cualquier valor entre 0.0 y 1.0. Este es el código para reproducir música de fondo:
Accentsconagua
Crafty.audio.play ("back_music", -1, 0.5);También puede reproducir archivos de audio en función de algunos eventos, como colisión entre entidades o pulsando una tecla.
walking_hero.bind ('KeyDown', function (evt) if (evt.key == Crafty.keys.UP_ARROW) walking_hero.animate ("jumping", 1); Crafty.audio.play ("gun_shot", 1) ;);Tenga en cuenta que debe agregar el componente de teclado a su héroe antes de que pueda detectar el KeyDown evento. El código anterior une el KeyDown Evento al héroe y comprueba si la tecla fue presionada usando evt.key. Si se presiona la tecla de flecha arriba, una vez se reproduce una animación de salto para el héroe. También se reproduce un sonido de disparo..
Intenta presionar el Flecha arriba Introduzca la siguiente demostración y verá todo en acción. He comentado la línea que reproduce la música de fondo, pero puedes descomentarla mientras juegas con la demo..
La música de fondo en la demo ha sido creada por Rosalila, y el sonido de disparo es de Luke.RUSTLTD.
Hay muchos otros métodos que puedes usar para manipular los sonidos que reproduce Crafty. Puede silenciar y activar el sonido de todos los archivos de audio que se están reproduciendo en el juego usando .mudo() y .unmute () respectivamente. También puede pausar y reanudar archivos de audio en función de su Carné de identidad usando el .pausa (Id) y .desacoplar (Id) método.
Hay un límite en el número máximo de sonidos que se pueden reproducir simultáneamente en Crafty. El límite predeterminado para este valor es 7. Cada uno de los diferentes sonidos que se reproducen simultáneamente es un canal. Sin embargo, puedes establecer tu propio valor usando Crafty.audio.setChannels (Número n). También puede verificar si un archivo de audio dado se está reproduciendo actualmente en al menos un canal usando el .isPlaying (ID de cadena) método. Devolverá un indicador booleano que indica si el audio se está reproduciendo o no..
La pantalla del juego generalmente no es lo primero que ves en un juego. Normalmente, la primera pantalla que ve es la pantalla de carga o la pantalla del menú principal. Luego, una vez que haya configurado diferentes opciones como audio o nivel de dificultad, puede hacer clic en el botón de reproducción para pasar a la pantalla del juego real. Finalmente, cuando el juego termina, puedes mostrar a los usuarios un juego sobre la pantalla.
Estas diferentes pantallas de juego o escenas hacen que tu juego esté más organizado. Una escena en Crafty se puede crear llamando Crafty.defineScene (String sceneName, Function init [, Function uninit]).
El primer parámetro es el nombre de la escena. El segundo parámetro es la función de inicialización, que configura las cosas cuando se reproduce la escena. El tercer parámetro es una función opcional que se ejecuta antes de que se reproduzca la siguiente escena y después de todas las entidades con 2D componente en la escena actual han sido destruidos.
Aquí está el código para definir la pantalla de carga:
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");););En el código anterior, he definido una "cargando pantalla" escena. La función de inicialización establece el color de fondo en naranja y muestra algo de texto para proporcionar al usuario alguna información sobre lo que viene a continuación. Puede incluir un logotipo y algunas opciones de menú en un juego real aquí. Si presiona cualquier tecla mientras el lienzo está enfocado, lo llevará a la pantalla del juego real. los .enterScene (String sceneName) método se ha utilizado aquí para cargar el "game_screen".
En la siguiente demostración, puede presionar la tecla ARRIBA 10 veces para ir a la pantalla final.
Después de completar este tutorial, deberías poder agregar una variedad de efectos de sonido a tu juego y poder controlar la salida de audio. Ahora también puede mostrar diferentes pantallas a un usuario en diferentes situaciones. Debo recordarte que he usado la versión 0.7.1 de Crafty en este tutorial y que las demostraciones podrían no funcionar con otras versiones de la biblioteca..
En el siguiente y último tutorial de esta serie, aprenderá cómo mejorar la detección de colisiones en Crafty.
