Flame & Flutter con Dart: crea tus primeros juegos móviles

Vamos a crear un proyecto en Flutter y agregar Flame.

Como regalo por adquirir este curso, tienes acceso a una versión gratis del libro completo para que puedas usarlo como soporte con los primeros capítulos.

Vamos a mostrar un sprite/imagen en Flutter con Flame.

Vamos a mostrar un circulo en Flutter con Flame.

Vamos a mostrar un rectángulo en Flutter con Flame.

Vamos a mostrar un circulo en Flutter con Flame.

Vamos a conocer el uso básico de la función de update.

Crearemos un componente de Sprite.

Vamos a modificar la posición de un sprite.

Conoceremos cómo usar el teclado para la clase FlameGame.

Conoceremos cómo usar el teclado a nivel de componente.

Vas a realizar el movimiento del sprite mediante las teclas asdw y flechas.

Vamos a conseguir imágenes para el juego.

Vamos a aprender a generar nuestros sprite sheets.

Vamos a cargar un sprite sheet en la aplicación de Flutter.

Vamos a hablar de los factores claves para generar un listado animado de sprites en base a posiciones.

Vamos a crear la función para generar un sprite animado.

Vamos a realizar algunas pruebas con la función anterior cargando una animación.

Vamos a definir el resto de las animaciones que se encuentran disponibles en el sprite sheet.

Vamos a realizar algunas pruebas con la función anterior cargando un

Vamos a trabajar con el evento tap a nivel de la clase tipo Game.

Vas a realizar un cambio de animación cada vez que se realice un toque en la pantalla.

Vas a implementar el movimiento en el eje de las X y varias la animación en consideración.

Vamos a conocer como hacer el efecto de flip o vuelta y la propiedad de ancho para especificar el eje.

Vamos a implementar la velocidad constante usando el dt al momento de desplazarse.

Vamos a combinar teclas para correr.

Vamos a dibujar un círculo mediante un PositionComponent.

Vamos a mover el círculo a un extremo.

Vamos a conocer cómo manejar las colisiones entre el círculo y los extremos de la pantalla.

Vamos a invertir la dirección de desplazamiento del círculo al colisionar con los bordes de la pantalla.

Como reto, debes de al menos analizar cómo podemos colisionar entre figuras y aplicar alguna lógica.

Vamos a colocar un contador de colisiones.

Conoceremos cómo usar las colisiones en los sprite.

Como reto, debes de al menos analizar cómo podemos colisionar entre figuras y aplicar alguna lógica.

Vamos a crear un nuevo proyecto y presentar la estructura base del nuevo proyecto.

Vamos a generar círculos cada cierto tiempo generados de manera aleatoria.

Vamos a evitar que el player se salga de la pantalla.

Vamos a cambiar la animación cuando el player entra en contacto con el borde de la pantalla.

Vamos a ajustar el ángulo de los círculos al generar los mismos.

Vamos a implementar un sencillo esquema de gravedad sobre el player.

Vamos a remover los círculos de colisión cuando ya no sean visibles.

Vamos a implementar la habilidad de salto usando la gravedad para el carácter.

1. Vamos a crear una clase con las primitivas que luego vamos a sobrescribir.

Vamos a convertir los círculos en meteoritos animados.

Vamos a generar un contador para las colisiones.

Vamos a aprender a cambiar el color de fondo de la ventana.

Vamos a aprender a cambiar el color de fondo de la ventana.

Vamos a establecer una imagen de fondo mediante una clase aparte

Vamos a realizar algunas pruebas variando el tamaño de fondo del componente.

Vamos a conocer como se carga un componente y escuchar cuando él mismo ha sido cargado; aparte de, consultar sus propiedades.

Vamos a actualizar el juego para que no pueda escapar por los bordes impuestos por el fondo y no por la ventana.

Vamos a aprender a mover la cámara en base a la posición del player.

Vamos a adaptar el componente de meteorito para que se adapte a la posición de la cámara y tamaño de la ventana.

Vamos a introducir algunos conceptos claves y herramientas a utilizar.

Vamos a crear un mapa con Tiled Map Editor.

Vamos a crear la estructura de un proyecto base en Flutter Flame.

Vamos a cargar el mapa anterior en un nuevo proyecto en Flutter con Flame.

Con la capa de objetos definida antes, vamos a usarla para crear PositionComponent.

Vamos a realizar algunos cambios en el codigo fuente de la app para adaptarlo al mapa tile.

Vamos a realizar algunas adaptaciones para detectar cuando el player esta saltando.

Vamos a realizar modificaciones adicionales para modificar el desplazamiento y adaptar el salto.

Vamos a modificar la animación de salto para que no se mantenga en un loop.

Vamos a realizar algunas pruebas para el desplazamiento del player con los tiles y el componente de hitbox del player.

Vamos a actualizar el mecanismo de desplazamiento horizontal del player al del vector de velocidad.

Vamos a crear componentes individuales de hitbox para el player.

Vamos a agregar el componente de meteorito en el juego.

Vamos a cambiar la inicialización de la posición del player.

Vamos a actualizar el esquema creado para realizar el desplazamiento.

Vamos a actualizar el esquema creado para realizar el desplazamiento.

Vamos a desplazar la cámara y usar un nuevo mapa.

Vamos a presentar el uso de los overlays para superponer widgets.

Vamos a crear el overlay para el game over.

Vamos a mostrar la comunicación entre los componentes y el overlay.

Vamos a mostrar la comunicación entre los overlays y los componentes.

Vamos a conocer algunas funciones claves para usar los overlays.

Vamos a conocer el problema del conteo con las colisiones entre el player y los meteoritos.

Vamos a conocer los tipos de colisiones y cómo adaptarlo al juego.

Vamos a crear una función para reiniciar parámetros del player.

Vamos a crear un contador de vidas en el overlay.

Vamos a reiniciar el nivel al detectar que el player quedó sin vida.

Vamos a implementar la función de pausar el juego.

Vamos a colocar un botón para reiniciar el nivel.

Vamos a modificar la implementación del movimiento para que la actualización de la propiedad de position se realice solo en la función de update.

Vamos a crear una función para bloquear los movimientos del player.

Vamos a crear una función para volver al player como invencible.

Vamos a modificar el mapa, para colocar algunos consumibles.

Vamos a pintar los consumibles en el mapa.

Vamos a implementar la lógica para ganar una vida.

Vamos a implementar la lógica para ganar una vida.

Al momento de hacer el reload del juego, debemos de recargar los consumibles.

Vamos a solventar el problema que dejamos de antes al momento de sobrescribir los consumibles.

Vamos a realizar algunos cambios en la función de reiniciar el juego.

Vamos a bloquear los movimientos del player fuera del entorno del mapa.

Vamos a colocar una imagen de fondo.

Vamos a corregir el problema de que el player puede quedar desnivelado al pisar los tiles.

Vamos a usar la función de clamp para controlar la velocidad de caída del player.

Hablaremos sobre el siguiente desarrollo a llevar a cabo.

Calculamos otro hitbox para el player y removemos el de foot.

Comenzamos implementando los nuevos cambios.

Vamos a terminar la implementación anterior.

Explicamos el detalle de los centros de colisión.

Explicamos cómo calcular la normal de la colisión.

Explicamos cómo calculamos la separación entre colisiones.

Crearemos los archivos y configuración base para el proyecto.

Vamos a crear las animaciones del player

Vamos a implementar el movimiento del player al presionar las teclas.

Vamos a mostrar otra implementación para el movimiento.

Vamos a solventar el problema de cuando dejamos de desplazarnos el player apunta siempre hacia la misma dirección.

Crearemos el mapa para nuestro juego.

Vamos a utilizar el mapa anterior en el proyecto.

Vamos a definir el apartado de los objetos en el mapa para que puedan ser colisionables.

Vamos a usar definir que la cámara siga al player y definir límites.

Vamos a implementar la lógica para las colisiones iniciales.

Vamos a ver otra implementación para manejar las colisiones.

Vamos a conocer la implementación final.

Vamos a conocer otra variante del esquema anterior, en la cual, prescindimos de una propiedad.

Vamos a trabajar en la colisión doble.

Vamos a definir los límites de la pantalla con el player.

Vamos a colocar el player en su posición en base a lo establecido en el mapa.

Vamos a variar el tamaño del hitbox del player.

Vamos a implementar la función de correr.