Flutter & Flame Paso 6: Efectos y sonido | Autor: Christian Muehle | Diciembre de 2021
En este artículo, agregaremos efectos de sonido y partículas al juego. Los juegos de cohetes requieren explosiones adecuadas y partes visuales y de audio coincidentes.
Bienvenido a la Parte 6 de nuestra serie. Si acaba de encontrar este artículo, puede comenzar con el primero en el siguiente enlace:
Al igual que con todos los demás artículos, puede encontrar el código fuente correspondiente después de la URL a continuación. Por supuesto, si desea obtener el código más reciente que puede que ya no coincida, puede clonar el repositorio de GitHub:
Aparte de arrozAin Paquete de llamas, También puede utilizar otros paquetes opcionales para casos de uso específicos. El ecosistema Flame proporciona, por ejemplo, motor de física, soporte de controlador Hay mucho mas. Para usar audio en nuestro juego, agregaremos lo siguiente a nuestro pubspec.yml documento:
flame_audio: ^1.0.0-rc.15
El paquete flame_audio se basa en Paquete de reproductor de audio Y consulte su documentación, puede encontrar Flame audio La web no figura como plataforma, pero los reproductores de audio sí.
En mi prueba Flame audio Funciona bien en la red, por lo que podemos ignorarlo por ahora.
Reproducir sonido
Los juegos pueden tener diferentes «tipos» de sonidos, siendo los más comunes la música de fondo y los efectos de sonido. La música de fondo puede repetirse y comenzar a reproducirse después de la carga, por lo que los efectos de sonido deben reproducirse con frecuencia y rapidez.
Encontrarás la documentación completa Flame audio En el documento de la llama:
El contenido importante del enlace del documento anterior es el siguiente:
- Dependiendo de cómo cargue los archivos de audio, deben ubicarse en una carpeta específica. Sin embargo, si lo desea, puede cambiar esta configuración.
- El archivo de audio debe cargarse antes de reproducirse, y la carga provocará un retraso.
- El formato de audio seleccionado debe ser compatible con la plataforma de destino. Recomendado: MP3, OGG y WAV
El siguiente código muestra nuestro componente de reproductor de audio actual, puede ver que tenemos 3 métodos:
Para evitar cualquier retraso al reproducir nuestra voz por primera vez, almacenamos en caché los archivos (los cargamos en la memoria) en nuestro Cargar activos método. Solo especificamos el nombre del archivo (incluido el final) porque usamos la ruta del activo predeterminada:
assets/audio/
No olvide decirle a su aplicación Flutter que incluya los archivos de esta carpeta en su paquete al incluir la ruta en la sección de activos. pubspec.yml documento:
Reproducir sonido
Como se mencionó anteriormente, tenemos varias formas de reproducir archivos de sonido (bucle, inicio, parada, etc.). Hasta ahora, MoonLander solo necesita la siguiente línea:
FlameAudio.play('engine.mp3');
También podemos configurar el volumen al reproducir el efecto (entre 0 y 1, el valor predeterminado es 1).Cada vez que llamas Tocar, La llama te subrayó Reproductor de música Si es necesario, la salida de audio se puede controlar con mucha precisión. Debido a que cargamos el archivo al principio, nuestros efectos de sonido se reproducirán inmediatamente.
Comencemos a usar nuestra voz en el juego: primero, necesitamos crear un Reproductor de audio MoonLander Clasifique y guárdelo en nuestro juego.Esto es en carga Método de juego, también llamamos Cargar activos Método para almacenar en caché nuestros efectos de sonido.
Componente explosivo
La parte de audio de nuestra explosión está lista, y ahora necesitamos conectarla a un elemento visual y activarla cuando nuestro cohete choca (o se queda sin combustible).
Agreguemos un nuevo Componente explosivo ampliar Componente de animación de SpriteNuestra tabla de sprites de explosión tiene solo una fila, por lo que no tenemos que lidiar con múltiples estados de animación como un cohete.
Es posible que haya encontrado un código nuevo en el componente anterior: a través del constructor, le decimos a Flame que elimine el componente después de que se complete la animación.Combinado con los eventos del ciclo de vida del componente, en este ejemplo Eliminar Método, completamos las siguientes tareas:
- Cuando se agrega un componente de explosión al juego, cargará la hoja de sprites y generará animación.
- La animación comenzará a reproducirse.
- Muchas gracias Hay referencias de juegos mixin (tenga en cuenta que especificamos el tipo exacto de juego aquí) podemos acceder al objeto del reproductor de audio y comenzar la explosión
- Una vez completada la animación, Flame eliminará el componente y llamará Eliminar. en Eliminar Usaremos nuestro Hay referencias de juegos mezcla
Este es un componente completo, que incluye efectos visuales con animación, eventos del ciclo de vida y efectos de sonido. Debido al sistema de componentes, se realiza mucho trabajo pesado debajo del capó.
En términos generales, los efectos de partículas se componen de muchos elementos pequeños que pueden interactuar entre sí o con otros elementos del mundo del juego. Se pueden utilizar para mostrar chispas que salen de un incendio o para simular explosiones.
Los efectos de las partículas pueden ser básicos o muy complejos, según el caso de uso. Flame proporciona una amplia gama de categorías prefabricadas:
Una partícula (independientemente de su tipo y comportamiento) debe agregarse a su juego como cualquier otro componente.Para mayor comodidad, Flame ha proporcionado un Componente de partículas,Residencia en Componentes clase. A diferencia de otros componentes, las partículas tienen un ciclo de vida predeterminado y se eliminarán una vez que finalice el ciclo de vida.
Antes de mirar el código, definamos primero lo que queremos del sistema de partículas:
- Las partículas deben salir del cohete desde el fondo.
- Las partículas solo deben generarse cuando el jugador usa el motor
- Las partículas deben volar en diferentes direcciones y usar varios colores.
Creemos un archivo para recopilar nuestros diferentes efectos de partículas, asígnele el nombre Generador de partículas dardo:
Como sugiere la documentación, puede apilar varios comportamientos para crear lo que necesita, al igual que el árbol de widgets de Flutter. En nuestro ejemplo, hacemos lo siguiente (de arriba a abajo en el código anterior):
- Definir lo básico Componente de partículas Como nuestro elemento padre, se ejecutará a través de los eventos del ciclo de vida del componente Flame.
- Elegimos uno Partículas aceleradas Como segundo elemento, esta partícula parte de una posición y se mueve a una velocidad determinada hasta el final de su ciclo de vida.
- El último elemento es también nuestro hijo. Partículas aceleradas Es un Partículas redondasEstablecemos un radio y un color aleatorio entre amarillo y rojo.
solo Partículas redondas Es un elemento visual y requiere otros elementos para describir el comportamiento.Esta Generador de partículas Solo proporciona una instancia aleatoria compartida para la generación digital.
Usar generador
Ahora tenemos que agregar partículas a nuestro juego, esto está en Componentes del cohete Una vez que el jugador usa el motor (y todavía tiene combustible):
Esta _createEngine partículas El método llama a nuestro Generador de partículas Y agregue el resultado a nuestro juego (como cualquier otro componente). Para asegurarnos de que emitimos partículas en el extremo inferior del sprite, usamos la posición actual y le agregamos un desplazamiento.
importante: Recuerde clonar el vector de posición usando el siguiente comando clon Cambia el método anterior. Si se olvida de esto, ¡la posición de su componente cambiará!
Para activar la generación de partículas, llamamos a este método cada vez que usamos el joystick virtual. Para cada llamada de actualización usando el joystick activo, generamos una partícula y el resultado es el siguiente:
Tenemos algo que celebrar 🙂 Desde el comienzo de esta serie (incluso al comienzo de este artículo), hemos utilizado el candidato de lanzamiento de Flame. ¡Pero ahora se lanza la versión estable!
Para MoonLander, tenemos que ajustar dos partes del código, una es solo una refactorización menor del código para seguir la clase base actualizada.Un cambio más importante está relacionado con el componente HUD, como se describe en el documento Flame a continuación. show Los atributos se reemplazan:
Para todos los componentes prefabricados, este cambio ha sido realizado por el equipo de Flame para nuestra personalización. Información del cohete Debemos configurar los siguientes componentes como:
Para asegurarnos de que los componentes funcionen como antes (y no se vean afectados por la cámara), debemos configurar D llegar Tipo de ubicación viewport (Lo que fue antes show = Verdadero).
En el próximo artículo, nos centraremos en el estado apropiado del juego, incluidos los niveles de almacenamiento y los niveles de carga. Deja que realmente ganes un nivel y obtengas puntos.
Nuestro motor produce partículas, entonces, ¿qué hay de producir partículas del suelo cuando el cohete se acerca al suelo? Un poco de polvo espacial volador estará muy limpio;)
Documento de llama:
https://docs.flame-engine.org/1.0.0-releasecandidate.18/index.html
Activos del juego utilizados:
GitHub: