Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. 2D Games

Crafty Más Allá de los Básicos: Sonidos y Escenas

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Crafty Beyond the Basics.
Crafty Beyond the Basics: Sprites
Crafty Beyond the Basics: Collisions

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Justo como las imágenes o sprites, el sonido también juega un rol vital en los juegos. La música de fondo adecuada puede establecer el humor para el juego. De manera similar, incluir efectos de sonido para cosas como un choque o tiroteos hará el juego 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, puedes mostrarles primero la pantalla de inicio en donde pueden elegir el nivel de dificultad para el juego o incrementar/disminuir el volumen de la música de fondo.

En este tutorial aprenderás cómo agregar sonidos y escenas a tus juegos usando Crafty.

Agregando Sonidos

El proceso para agregar sonidos a un juego es similar a agregar hojas de sprites. Necesitas crear un objeto de recurso y después proveer un arreglo de archivos de audio para diferentes efectos de sonido. Crafty cargará entonces el primer archivo que sea soportado por el navegador. Aquí está un ejemplo:

Una vez que has agregado los archivos de audio, puedes reproducirlos usando Crafty.audio.play(String id, Number repeatCount, Number volume). El primer parámetro es el Id del archivo que queremos reproducir. Para reproducir la música de fondo, puedes pasar "back_music" como Id.

Ahora puedes controlar cuántas veces es reproducido un archivo de audio usando el segundo parámetro. Cuando este parámetro no es especificado, el archivo es reproducido solo una vez. Probablemente querrás mantener reproduciendo continuamente algunos sonidos. Un ejemplo es la música de fondo del juego. Esto puede ser logrado estableciendo el segundo parámetro a -1.

El tercer parámetro controla el volumen del archivo de audio dado. Este puede tener cualquier valor entre 0.0 y 1.0. Este es el código para reproducir música de fondo:

También puedes reproducir archivos de audio basados en algunos eventos como colisión entre entidades o la presión de una tecla.

Ten en mente que necesitas agregar el componente Keyboard a tu héroe antes de que detecte el evento KeyDown. El código de arriba enlaza el evento KeyDown al héroe y revisa si la tecla fue presionada usando evt.key. Si la tecla Flecha Arriba es presionada, una animación de salto es reproducida para el héroe una vez. Un sonido de disparo es reproducido también.

Intenta presionar la tecla Flecha Arriba en el siguiente demo y lo verás en acción. He comentado la línea que reproduce la música de fondo, pero puedes descomentarla mientras juegas con demo.

La música de fondo en el demo ha sido creada por Rosalila, y el sonido de disparo es por Luke.RUSTLTD.

Hay muchos otros métodos que puedes usar para manipular sonidos reproducidos por Crafty. Puedes silenciar y reanudar todos los archivos de audio que están siendo reproducidos en el juego usando .mute() y .unmute() respectivamente. También puedes pausar y reanudar archivos de audio basado en su Id usando el método .pause(Id) y .unpause(Id).

Hay un límite en el número máximo de sonidos que pueden ser reproducidos de manera simultánea en Crafty. El límite por defecto para este valor es 7. Cada uno de los diferentes sonidos reproduciéndose de manera simultánea es un canal. Sin embargo, puedes establecer tu propio valor usando Crafty.audio.setChannels(Number n). También puedes revisar un si un archivo de audio dado está actualmente en reproducción en al menos un canal usando el método .isPlaying(string ID). Este devolverá un Booleano indicando si el audio se está reproduciendo o no.

Escenas en Crafty

La pantalla del juego no es generalmente la primera cosa que ves en un juego. Usualmente, la primera pantalla que ves es la pantalla de carga o la pantalla del menú principal. Entonces, una vez que has establecido diferentes opciones como audio o nivel de dificultad, puedas dar clic al botón para continuar a la pantalla del juego. Finalmente, cuando el juego termina, puedes mostrar a los usuarios una pantalla de juego terminado.

Estas diferentes pantallas de juego o escenas hacen a tu juego más organizado. Una escena en Crafty puede ser creada 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 la escena es reproducida. El tercer parámetro es una función opcional que es ejecutada antes de que la siguiente escena sea reproducida y después de que todas las entidades con componentes 2D en la escena actual hayan sido destruidas.

Aquí está el código para definir la pantalla de carga:

En el código de arriba, he definido una escena "loading_screen". La función de inicialización establece el color de fondo a naranja y muestra algún texto para dar al usuario alguna información sobre lo que sigue. Puedes incluir un logo y algunas opciones de menú en el juego real aquí. Presionar cualquier tecla mientras el lienzo está en foco te llevará a la pantalla del juego. El método .enterScene(String sceneName) ha sido usado aquí para cargar la "game_screen".

En el siguiente demo, puedes presionar la tecla Arriba 10 veces para ir a la pantalla final.

Conclusión

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 puedes mostrar también diferentes pantallas a un usuario en diferentes situaciones. Debería recordarte que he usado Crafty versión 0.7.1 en este tutorial, y los demos podrían no funcionar con otras versiones en la librería.

En el siguiente y final tutorial de esta serie, aprenderás cómo mejorar la detección de colisión en Crafty.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.