Flame: Desarrollo de juegos en 2D con Flutter y Dart

Con Flutter, podemos realizar todo tipo de aplicaciones sobre todo enfocadas al ámbito móvil, pero, también podemos utilizar el mismo proyecto para desarrollar no solamente en Android e iOS, si no, de escritorio para Linux, MacOS y Windows, y también para desarrollo web realizando cambios sutiles en el proyecto a nivel de código, aunque, Flutter va mucho más allá con Flame.

Flame, es un motor para crear juegos en 2D con Flutter; su instalación es extremadamente sencilla ya que, Flame no es más que un paquete pub; por lo tanto, con esto, podemos crear juegos en 2D con Flame para móvil, escritorio y web.

Con Flame, podemos crear componentes, que vienen siendo los equivalentes a los widgets en Flutter y en donde los componentes no son más que un elemento de nuestro juego, como un jugador, un enemigo, el fondo, un consumible, etc; y cada componente, contiene la implementación para el funcionamiento del mismo; por ejemplo, en el caso de un player o jugador, contiene la lógica para moverlo, cambio de animaciones, control de las vidas, consumibles, etc; y mediante una clase maestra, podemos organizar toda la lógica de estos componentes.

Este libro es mayoritariamente práctico, iremos conociendo los fundamentos de Flame en base a pequeños ejemplos hasta lograr conocer lo suficiente de la librería para crear un juego en 2D sencillo.

Flame, para el desarrollo de videojuegos en 2D

Flame es un motor de juego 2D de código abierto construido en el lenguaje de programación Dart y se utiliza junto con el framework de Flutter como un plugin más; por lo tanto, podemos usarlo para crear juegos en dispositivos móviles, de escritorio y web. 

Flame trae todo lo necesario para crear nuestros primeros juegos

Este motor de juego proporciona herramientas y componentes para manejar la lógica del juego, la animación de sprites, la detección de colisiones, la entrada del usuario mediante eventos taps, teclado, joystick y la física del juego; como la gravedad, saltos, caidas, etc.

Con Flame, se pueden crear juegos 2D con gráficos impresionantes y un alto rendimiento en dispositivos móviles y de escritorio; por lo tanto, con un solo proyecto, podemos usarlo para llevar nuestro juego para las distintas plataformas soportadas por Flutter. 

Flame también dispone de una serie de plugins que podemos usar para manejar el audio entre otros:

• flame_audio Es utilizado para manejar la reproductores de audio.
• flame_forge2d Es utilizado para manejar manejar las capacidades físicas utilizando nuestro propio puerto Box2D llamado Forge2D.
• flame_tiled Es utilizado para manejar la integración con los tiles.
• flame_svg Que proporciona integración con flutter_svg.

En resumen, se puede utilizar Flame con Flutter para crear y desarrollar juegos 2D con gráficos atractivos y un alto rendimiento en dispositivos móviles y de escritorio, dándoles a los desarrolladores una herramienta valiosa para crear una amplia variedad de juegos y aplicaciones.

Con Flame, podemos crear componentes, que vienen siendo los equivalentes a los widgets en Flutter y en donde los componentes no son más que un elemento de nuestro juego, como un jugador, un enemigo, el fondo, un consumible, etc; y cada componente, contiene la implementación para el funcionamiento del mismos; por ejemplo, en el caso de un player o jugador, contiene la lógica para moverlo, cambio de animaciones, control de las vidas, consumibles, etc; y mediante una clase maestra, podemos organizar toda la lógica de estos componentes.

Curso para aprender a desarrollar en Flame desde cero

Este libro es mayoritariamente práctico, iremos conociendo los fundamentos de Flame en base a pequeños ejemplos hasta lograr conocer lo suficiente de la librería para crear juegos senillos en 2D; como peudes ver en cada una de las secciones que componen el curso y libro, creamos diversas aplicaciones que tienen características en comunes como el uso de los sprites, sprites animados, sprites sheet, animaciones, colisiones, entrada… pero, viendolo desde enfoques distinto, lo cual es crucial para entender de una manera prática cada una de las funcionalidades de Flame y obtener un mejor entendimiento de todo el potencial de Flame.

Para quién es este curso y libro

• Este curso está dirigido a cualquier persona que quiera aprender a desarrollar en Flame y crear sus primeros juegos en 2D con Flutter multiplataforma.
• Para cualquier persona que quiera iniciar en el desarrollo de videojuegos para Android, iOS, Linux, Windows, MacOS o web.
• Para aquellas personas que conozcan cómo programar en Flutter.
• Para aquellas personas que quieran aprender algo nuevo.
• Para las personas que quieran mejorar una habilidad y que quieran crecer como desarrollador y que quiera seguir escalando su camino en el desarrollo de aplicaciones con Flutter.

Este curso tiene un enfoque práctico, conociendo los aspectos claves de la tecnología y pasando a la práctica, implementando de a poco pequeñas características y funcionalidades que pueden ser adaptadas a un juego real; por lo tanto, puedes ver el curso como un conjunto de guías o tutoriales en las cuales aprenderemos a manejar poco a poco Flame.

El curso y libro tienen un total de 14 secciones/capitulos, se recomienda que leas en el orden en el cual están dispuestos y a medida que vayamos explicando los fundamentos de Flame en base a ejemplos; una vez domines la librería, puedes consultar las secciones en el orden que desees.

En el curso, veremos en base a ejemplos reales, como animar sprite, vairar animaciones e implementar la lógica para tus primeros juegos en 2D.

Puedes ver cada una de las introducciones del curso y libro en:

Tanto el curso como el libro aun se encuentra en desarrollo.

Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:

Introducción

• 1 introducción

• 2 Como ver el curso

Crear un proyecto

• 1 Crear un proyecto

  Vamos a crear un proyecto en Flutter y agregar Flame.

Bases - Primeros pasos - Flame 1.7V

• 1 Introducción

• 2 Clase FlameGame: Ejemplo Sprite

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

• 3 Clase FlameGame: Ejemplo Canvas, círculo

  Vamos a mostrar un circulo en Flutter con Flame.

• 4 Reto: Clase FlameGame: Ejemplo Canvas, rectángulo

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

• 5 Clase Game: Ejemplo Canvas, círculo

  Vamos a mostrar un circulo en Flutter con Flame.

• 6 Clase Game/FlameGame: función update

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

• 7 SpriteComponent: Una sola imagen/sprite

  Vamos a mostrar una imagen mediante un componente.

• 8 SpriteComponent: Actualizar posición

  Vamos a modificar la posición de un sprite.

• 9 Entradas: Teclado, FlameGame

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

• 10 Entradas: Teclado, Componente

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

• 11 Reto: Mover sprite al pulsar flechas de direcciones

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

• 12 SpriteComponent: Conseguir sprites para tu juego

  Vamos a conseguir imágenes para el juego.

• 13 SpriteComponent: Texturepacker

  Vamos a aprender a generar nuestros sprite sheets.

• 14 SpriteComponent: Cargar un sprite sheet

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

• 15 SpriteAnimationComponent: Puntos claves

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

• 16 SpriteAnimationComponent: Pruebas

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

• 17 SpriteAnimationComponent: Pruebas

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

• 18 SpriteAnimationComponent: Resto de animaciones

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

• 19 SpriteAnimationComponent: Resto de animaciones

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

• 20 Entradas: Tap, Componente

  Vamos a trabajar con el evento tap a nivel del componente.

• 21 Reto: SpriteAnimationComponent: Cambiar animación por tap

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

• 22 Reto: Animaciones y entradas (teclado): animación de caminar y reposo

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

• 23 Flip o mirror del sprite (y ancho propiedad)

• 24 Velocidad constante

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

• 25 Combinación de teclas

  Vamos a combinar teclas para correr.

• 26 PositionComponent: Dibujar un círculo con hitbox

  Vamos a dibujar un círculo mediante un PositionComponent.

• 27 Reto: PositionComponent: Mover círculo en el eje X

  Vamos a mover el círculo a un extremo.

• 28 Detectar colisiones: ScreenHitbox

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

• 29 Colisiones y PositionComponent: Invertir dirección

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

• 30 Reto: Colisiones entre círculos

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

• 31 Contador para las colisiones

  Vamos a colocar un contador de colisiones.

• 32 Colisiones en los sprites y modo debug

  Conoceremos como usar las colisiones en los sprite.

• 33 Publicar en github

Juego 1, Lluvia de meteoros - Flame 1.7V

• 1 Introducción

• 2 Versión de Flame recomendada V1.7.3

• 3 Proyecto en código base

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

• 4 Generar círculos de colisión/hitbox por tiempo

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

• 5 Limitar que el player salga de pantalla

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

• 6 Player: Variar animación al detectar borde

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

• 7 Generar contenedor (círculo de colisión) para la colisión

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

• 8 Player: Implementar gravedad

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

• 9 Remover componentes no visibles (círculos de colisión)

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

• 10 Player: Implementar salto

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

• 11 Modularizar clase player

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

• 12 Sprite animado de meteorito

  Vamos a convertir los círculos en meteoritos animados.

• 13 Contador de impactos

  Vamos a generar un contador para las colisiones.

• 14 Publicar en github

Background en color e imagen - Flame 1.7V

• 1 Introducción

  Introducción

• 2 Color de fondo: Función

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

• 3 Color de fondo: Clase

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

• 4 Imagen de fondo

  Vamos a establecer una imagen de fondo mediante una clase aparte.

• 5 Pruebas con distintos tamaños de la imagen del fondo, parte 1

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

• 6 Pruebas con distintos tamaños de la imagen del fondo, parte 2

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

• 7 Actualizar componente player con las dimensiones del mapa

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

• 8 Establecer la cámara que siga al componente

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

• 9 Actualizar componente meteor con las dimensiones del mapa

  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.

• 10 Publicar en github

Background tiled - Flame 1.7V

• 1 Introducción

• 2 Editores, tileset y tiles

  Vamos a introducir algunos conceptos claves y herramientas a utilizar.

• 3 Tiled Map Editor, primeros pasos

  Vamos a crear un mapa con Tiled Map Editor.

• 4 Flame tiled y bases del juego

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

• 5 Cargar mapa tile

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

• 6 Iterar capa object y definir un PositionComponent

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

• 7 Detectar piso y gravedad

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

• 8 Publicar en github

Juego 2, Saltar entre tiles - Flame 1.7V

• 1 Introducción

• 2 Detectar player en el aire

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

• 3 Cambios en el componente de salto y desplazamiento

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

• 4 Animación de salto en un loop

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

• 5 Desplazamiento en los tiles

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

• 6 Desplazamiento horizontal con el vector de velocidad

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

• 7 Crear varios componentes de hitbox para el player

  Vamos a crear componentes individuales de hitbox para el player.

• 8 Agregar el componente de meteorito

  Vamos a agregar el componente de meteorito en el juego.

• 9 Posición del player

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

• 10 Modificar desplazamiento: X

  Vamos a actualizar el esquema creado para realizar el desplazamiento.

• 11 Modificar desplazamiento: Y

  Vamos a actualizar el esquema creado para realizar el desplazamiento.

• 12 Nuevo mapa y activar cámara

• 13 Overlay: Primeros pasos

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

• 14 Overlay: Game over

  Vamos a crear el overlay para el game over.

• 15 Instancia game en componentes y overlay

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

• 16 Instancia game en overlays y comunicación con los componentes

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

• 17 Funciones del overlay

  Vamos a conocer algunas funciones claves para usar los overlays.

• 18 Corregir contador de colisiones

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

• 19 Tipos de colisiones

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

• 20 Reset del player

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

• 21 Overlay: Contador de vidas

  Vamos a crear un contador de vidas en el overlay.

• 22 Reiniciar nivel al acabarse las vidas

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

• 23 Pausa

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

• 24 Reiniciar nivel

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

• 25 Actualizar posición con deltatime

  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.

• 26 Bloquear movimiento del player por tiempo

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

• 27 Invencibilidad

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

• 28 Consumibles en el mapa

  Vamos a modificar el mapa, para colocar algunos consumibles.

• 29 Consumibles en el mapa: Definir Sprite y registrar en la aplicación

  Vamos a implementar el consumo de items.

• 30 Consumibles en el mapa: Colocar en el mapa

  Vamos a pintar los consumibles en el mapa.

• 31 Consumibles en el mapa: Implementar lógica para ganar una vida

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

• 32 Consumibles en el mapa: Recargar en el reload

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

• 33 Consumibles en el mapa: Sobrescribir

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

• 34 Consumibles en el mapa: Implementar lógica para el resto

  Vamos a implementar la lógica para la invencibilidad del usuario y de ganar.

• 35 Colocar parámetros extras a la función de reset

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

• 36 Publicar en github

Opcional: Juego 2, experimentos varios - Flame 1.7V

• 1 Introducción

• 2 Variar el salto

• 3 Tamaño del mapa y movimiento del player

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

• 4 Imagen de fondo

  Vamos a colocar una imagen de fondo.

• 5 Desnivel entre el posicionamiento del player y los tiles

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

• 6 Evitar que el player caiga a una velocidad muy elevada

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

• 7 Fórmulas matemáticas básicas: Presentación

  Hablaremos sobre el siguiente desarrollo a llevar a cabo.

• 8 Fórmulas matemáticas: hitbox player

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

• 9 Fórmulas matemáticas: Implementación

  Comenzamos implementando los nuevos cambios.

• 10 Fórmulas matemáticas: Detalles finales

  Vamos a terminar la implementación anterior.

• 11 Fórmulas matemáticas: Centros de las colisiones

  Explicamos el detalle de los centros de colisión.

• 12 Fórmulas matemáticas: Normal de la colisión

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

• 13 Fórmulas matemáticas: Magnitud

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

• 14 Producto escalar

  Explicamos cómo calculamos el producto escalar.

• 15 Adaptar a pantallas pequeñas

• 16 Publicar en github

Juego 2, Updates Flame - Flame 1.7V - 1.8.1V

• 1 Flame 1.81 Animación Ticker

• 2 cameraComponent

Juego 3, desplazar XY

• 1 Introducción

• 2 Estructura base

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

• 3 Animaciones de movimiento

  Vamos a crear las animaciones del player.

• 4 Movimiento

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

• 5 Demo: Movimiento, isMoving

  Vamos a mostrar otra implementación para el movimiento.

• 6 Cambios en el movimiento y animación

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

• 7 Crear mapa

  Crearemos el mapa para nuestro juego.

• 8 Importar y usar mapa en el proyecto

  Vamos a utilizar el mapa anterior en el proyecto.

• 9 Componentes para los obstáculos

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

• 10 Cámara

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

• 11 Colisiones player obstáculos, estructura y pruebas iniciales

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

• 12 Colisiones player obstáculos, otras pruebas

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

• 13 Colisiones player obstáculos, implementación final

  Vamos a conocer la implementación final.

• 14 Colisiones player obstáculos, variante

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

• 15 Colisiones player obstáculos, doble colisión

  Vamos a trabajar en la colisión doble.

• 16 Límites de la pantalla para el player

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

• 17 Definir posición del player

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

• 18 Tamaño hitbox

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

• 19 Correr

  Vamos a implementar la función de correr.

• 20 Publicar en github

Juego 3, Enemigos

• 1 Introducción

• 2 Clase base

  Crearemos la clase base para los enemigos con la función de cambio de posición.

• 3 Clase zombie

  Crearemos una clase para crear un enemigo en pantalla.

• 4 Actualizar sprite

  Vamos a cambiar el sprite del enemigo por un zombie.

• 5 Colisiones entre objetos y límites para del mapa

  Vamos a tratar el problema que el player escapa del mapa y cae al vacío.

• 6 Manejar múltiples enemigos: Listado de enemigos por mapa

  Vamos a crear el archivo en el cual, mantendremos el tipo de movimiento, el patrón y la cantidad de enemigos.

• 7 Manejar múltiples enemigos: Mover al player en base a patrones

  Vamos a implementar la función para mover al enemigo por patrones.

• 8 Manejar múltiples enemigos: Terminar y probar

  Vamos a terminar las implementaciones anteriores y probar.

• 9 Capa de enemigos en el mapa

  Vamos a crear la capa de enemigos en el mapa.

• 10 Clase esqueleto

  Crearemos la capa de esqueleto.

• 11 Capa de objeto para los enemigos

  Vamos a usar la capa de enemigos del mapa.

• 12 Publicar en github

Juego 4, Plantas vs Zombies

• 1 Introducción

• 2 Sobre el proyecto

  Hablaremos sobre el proyecto.

• 3 Importar sprite iniciales de plantas

  Vamos a conocer cuales son las imágenes iniciales vamos a usar.

• 4 Crear un componente de planta, Base

  Vamos a crear la clase base para las plantas.

• 5 Crear un componente de planta, Peashooter

  Vamos a crear la estructura para la primera planta.

• 6 Reto, Crear un componente de planta, Cactus

  Vamos a crear la estructura para la segunda planta.

• 7 FlameGame: Agregar una planta por toque

  Vamos a agregar una planta por un toque.

• 8 Mapa: Diseñar

  Vamos a diseñar el mapa para nuestro juego.

• 9 Mapa: Cargar

  Vamos a cargar el mapa en el componente.

• 10 Componente: Agregar una planta por toque, parte1

  Vamos a realizar los cambios necesarios para manejar dado un tap en el componente de seed, agregar una planta desde FlameGame.

• 11 Componente: Agregar una planta por toque, parte2

  Vamos a agregar una planta desde SeedComponent dado un click.

• 12 Agregar una planta alineada en el SeedComponent

  Vamos a alinear las plantas agregadas en base a la posición del SeedComponent.

• 13 Escalar planta al tamaño del seed

  Vamos a escalar el tamaño de las plantas para que ocupe el tamaño del SeedComponent.

• 14 Evitar agregar varias plantas en un mismo lugar

• 15 Crear un componente de zombie, Base

  Crearemos la clase para definir el zombie.

• 16 Crear un componente de zombie, Cono

  Crearemos un componente tipo zombie para agregar en el mapa.

• 17 Reto, Crear un componente de zombie, Puerta

  Crearas otro componente de zombie.

• 18 Manejo del nivel

  Vamos a realizar la lógica para definir los zombies por niveles.

• 19 Agregar un zombie cada cierto tiempo

  Vamos a realizar la lógica para agregar zombies en el mapa.

• 20 Crear canales

  Vamos a crear la lógica para saber si un canal está ocupado o no.

• 21 Variar animación de las plantas a modo ataque

  Vamos a colocar la animación de las plantas en modo ataque al detectar un zombie en el canal.

• 22 Proyectil: Crear estructura

  Vamos a crear las bases para crear el proyectil para la planta.

• 23 Proyectil: Disparar

  Vamos a realizar la implementación para disparar.

• 24 Proyectil: Posición inicial

  Vamos a variar la posición inicial de la planta.

• 25 Vida y colisiones

  Vamos a definir las propiedades de vida y daño en los componentes de zombies y plantas.

• 26 La planta ataca a los zombies

  Vamos a realizar la implementación en la cual, la planta ataca al zombie mediante el proyectil.

• 27 Detener al zombie en contacto con las plantas

  Vamos a detener al zombie apenas esté en contacto con la planta para que luego inicie el ataque.

• 28 El zombie ataca a las plantas

  Vamos a realizar la implementación en la cual, el zombie ataca a la planta.

• 29 Variar animación del zombie en el modo ataque y al estar herido

  Vamos a crear un par de animaciones más para mostrar otros estados del zombie.

• 30 Cambiar tamaño del hitbox del zombie

  Vamos a modificar el hitbox del zombie para que no ocupe dos canales.

• 31 No colocar planta en espacio ocupado por un zombie

  Vamos a bloquear el espacio ocupado por un zombie para no poder sembrar en ella.

• 32 Drag, Implementar el componente de cámara y world

  Vamos a habilitar el componente de cámara y mundo al juego.

• 33 Drag, Crear un nuevo componente para el evento Drag

  Vamos a crear el componente para implementar el evento drag.

• 34 Drag, Implementar el evento Drag

  Vamos a implementar el evento drag.

• 35 Drag, Desplazar la cámara

  Vamos a implementar el drag de la cámara.

• 36 Agregar plantas y zombies al world

  Vamos a agregar las plantas y zombies al mundo.

• 37 Escalar componentes al tamaño de la ventana: Presentación

  Vamos a dar una implementación del desarrollo que vamos a realizar.

• 38 Escalar componentes al tamaño de la ventana: Calcular factor

  Vamos a calcular el factor de reescalado.

• 39 Escalar componentes al tamaño de la ventana: Fondo

  Vamos a acomodar el escalado con el fondo y los soles.

• 40 Escalar componentes al tamaño de la ventana: Seeds

  Vamos a acomodar el escalado con el seed.

• 41 Escalar componentes al tamaño de la ventana: Plantas

  Vamos a acomodar el escalado con las plantas.

• 42 Escalar componentes al tamaño de la ventana: Zombies

  Vamos a acomodar el escalado con los zombies.

• 43 Detalles finales

• 44 Publicar en github

Juego 4, experimentos varios

• 1 Introduccion

• 2 Overlay: Plantas

  Vamos a crear el overlay para mostrar las plantas seleccionables.

• 3 Overlay: Plantas, Seleccionar

  Vamos a crear la lógica para mostrar una planta seleccionada.

• 4 Overlay: Plantas, Marcar planta seleccionada

  Vamos a mostrar un borde para la imagen seleccionada.

• 5 Componente de soles

  Vamos a crear el componente para manejar los soles.

• 6 Desplazar soles onduladamente

  Vamos a variar el movimiento de las plantas en el eje de las X para que sea ondulado.

• 7 Contador de soles

  Vamos a crear un contador para los soles.

• 8 Overlay: Soles

  Vamos a crear un overlay para los soles.

• 9 Costo por plantas

  Vamos a realizar el descuento por el costo de las plantas al agregarlas en el campo.

• 10 Transparencia en el overlay de plantas

  Vamos a agregar un detalle visual a las plantas en el overlay para cuando no existan soles, colocar una opacidad a la planta.

• 11 Generar soles en el espacio del mapa

  Vamos a generar los soles en el espacio del mapa.

• 12 Recarga de las plantas: Configuración base

  Vamos a crear el contador con un container que se superponga a las plantas en el overlay para poder agregar plantas cuando se cumpla un tiempo desde la última interacción.

• 13 Recarga de las plantas: Reutilizar el widget de la animación

  amos a crear un widget reutilizable para el desarrollo anterior.

• 14 Mostrar animación al agregar la planta en el mapa

  Vamos a mostrar la animación del overlay al momento de agregar la planta en el mapa.

• 15 Reto: Evitar agregar una planta cuando hay una animación en progreso

  Vamos a bloquear el acceso a las plantas al momento de que inicie la animación.

• 16 Extra: Corregir sprite sheets, zombie cono, primera parte

  Vamos a corregir una de las imágenes del juego.

• 17 Extra: Corregir sprite sheets, zombie cono, segunda parte

  Vamos a corregir una de las imágenes del juego.

• 18 Bloquear planta individualmente

  Al agregar una planta se bloquean todas las plantas, vamos a hacer este bloqueo de manera individual.

• 19 Personalizar tiempo de bloqueo de las plantas

  Vamos a colocar que la duración de carga para cada planta es individual y personalizable.

• 20 Reubicar widgets del borde de las plantas en el overlay

  Vamos a acomodar los bordes de la planta para que el overlay se ajuste correctamente si está o seleccionada.

• 21 Pausa

  Implementaremos la opción de pausar el juego.

• 22 Reset

  Implementaremos la opción de reiniciar el juego.

• 23 Evento Drag, Presentación

  Veremos una presentación del evento Drag que será necesario para poder desplazar la cámara.

• 24 Publicar en github

Fondos parallax

• 1 Introducción

• 2 Crear proyecto

  Vamos a crear el proyecto en Flame.

• 3 Importar images parallax

  Vamos a descargar e instalar las capas para el fondo parallax en el proyecto. https://craftpix.net/freebies/free-cartoon-parallax-2d-backgrounds/

• 4 Crear el efecto parallax: Superponer fondos

  Vamos a crear un componente para superponer los fondos.

• 5 Crear el efecto parallax: Desplazar fondos, baseVelocity

  Vamos a conocer cómo desplazar las capas del parallax.

• 6 Crear el efecto parallax: Desplazar fondos a diferentes velocidades, velocityMultiplierDelta

  Vamos a conocer cómo desplazar cada capa a velocidades distintas y lograr la sensación de profundidad y con esto, el efecto parallax.

• 7 Crear una clase componente para el parallax

  Crearemos ahora un componente aparte en un archivo para el fondo parallax.

• 8 Player: Estructura base

  Crearemos la clase base para el player. https://www.deviantart.com/ottojoy/art/Shark-Sprites-434969176

• 9 Player: Definir animaciones

  Crearemos la animación del player en base al sprite sheet.

• 10 Player: Hitbox

  Crearemos el hitbox base para el player.

• 11 Player: Desplazamiento

  Implementamos en movimiento hacia los lados y arriba/abajo para el player.

• 12 Player: Rotación, primeros pasos

  Vamos a implementar que el player rota 90 grados por vez al presionar la tecla R.

• 13 Player: Rotación, flipVertically

  Vamos a hacer el flip vertical en la rotación a la derecha/izquierda.

• 14 Generar dulces: Fundamentos

  Hablaremos sobre la importancia de tener una estructura sólida, limpia y escalable para desarrollar las distintas funcionalidades del juego.

• 15 Generar dulces: Ideas iniciales

  Presentaremos parte de la solución a llevar a cabo para la creación de dulces en cualquiera de los lados de la pantalla.

• 16 Generar archivo ayuda food, primera parte

  Vamos a implementar la primera parte del archivo de ayuda para construir un alimento por pantalla.

• 17 Generar archivo ayuda food, primera parte

  Vamos a implementar la primera parte del archivo de ayuda para construir un alimento por pantalla.

• 18 Generar dulces: Sobre el componente

  Explicamos de manera básica el componente de alimento.

• 19 Generar dulces: Componente de alimento, estructura base

  Empezamos a crear las bases del componente de alimento.

• 20 Generar dulces: Componente de alimento, calcular posición

  Calcularemos la posición de incidencia del dulce.

• 21 Generar dulces: Componente de alimento, generar

  Vamos a definir la lógica para agregar los dulces en el main.

• 22 Generar dulces: Componente de alimento, remover

  Vamos a remover los dulces que no sean visibles en la pantalla.

• 23 Generar dulces: Componente de alimento, límites en la posición

  Vamos a verificar unas cotas máximas al momento de generar las posiciones.

• 24 Consumir alimentos: Hitbox

  Vamos a crear el hitbox para la boca del player.

• 25 Consumir alimentos: Colisión

  Vamos a detectar la colisión entre la boca y el alimento.

• 26 Consumir alimentos: Reproducir animación de masticando

  Vamos a reproducir la animación de masticando por un tiempo determinado especificado en el alimento.

• 27 Consumir alimentos: No consumir alimentos mientras mastica

  Vamos a colocar una regla adicional en la cual el player no pueda consumir alimentos mientras mastica.

• 28 Consumir alimentos: Consumir los alimentos en una posición

  Vamos a colocar una regla adicional en la cual el player solamente pueda consumir alimentos en el mismo ángulo del alimento.

• 29 Estadísticas: Propiedad adicional para el puntaje

  Vamos a crear una propiedad adicional para manejar el puntaje personalizado para cada dulce.

• 30 Estadísticas: Propiedades y lógica

  Vamos a implementar las propiedades para manejar las estadísticas y la lógica para actualizarlas.

• 31 Estadísticas: Overlay

  Creamos el overlay para las estadísticas.

• 32 Implementar bases para las formas de jugabilidad

  Vamos a implementar las bases (los métodos y sus parámetros) para los tipos de juegos.

• 33 Implementar bases para las formas de jugabilidad

  Vamos a implementar las bases (los métodos y sus parámetros) para los tipos de juegos.

• 34 Jugabilidad 1: Al perder un dulce

  Implementamos la primera jugabilidad, si el player pierde un dulce, pierde.

• 35 Jugabilidad 2: Conseguir un mínimo de puntos

  Implementamos la segunda jugabilidad, en la cual el player tiene que conseguir una cantidad determinada de puntos.

• 36 Jugabilidad 3: Solo consumir un tipo de dulce

  Implementamos la tercera jugabilidad, en la cual el player solo puede consumir un tipo de dulce.

• 37 Jugabilidad 4: No consumir un tipo de dulce

  Implementamos la cuarta jugabilidad, en la cual el player no puede consumir un tipo de dulce.

• 38 Jugabilidad: Dulce consumido o perdido

  Vamos a implementar un argumento adicional para verificar si el dulce fue consumido o perdido.

• 39 Probar implementaciones: Estructura base

  Vamos a crear la estructura para probar la implementación anterior.

• 40 Probar implementaciones: Jugabilidad 1

  Probaremos la 1 implementación.

• 41 Probar implementaciones: Jugabilidad 2

  Probaremos la 2 implementación.

• 42 Cambio en las estadísticas

  Aplicaremos algunos cambios en la estructura de la aplicación.

• 43 Probar implementaciones: Jugabilidad 3

  Probaremos la 3 implementación.

• 44 Probar implementaciones: Jugabilidad 4

  Probaremos la 4 implementación.

• 45 Definir múltiples niveles

  Vamos a crear una función para manejar todos los niveles del juego.

• 46 Función para hacer cargar niveles del juego

  Vamos a crear una función para cargar los niveles y hacer el reset.

• 47 Overlay: Fin de juego, implementar

  Vamos a crear el overlay para el fin de juego.

• 48 Overlay: Fin de juego, mostrar

  Vamos a mostrar el overlay anterior en base a algunas acciones.

• 49 Overlay: Acciones del juego

  Vamos a implementar las acciones del jueogo, pausar y reiniciar.

• 50 Overlay: Seleccionar niveles

  Crearemos el overlay para seleccionar niveles.

• 51 Overlay: Seleccionar la jugabilidad

  Crearemos el overlay para seleccionar la jugabilidad.

• 52 Mostrar información del tipo de juego y nivel en pantalla

  Vamos a mostrar el nivel y tipo de juego en el overlay de estadísticas.

• 53 Mostrar información del tipo de juego y nivel en pantalla

  Vamos a mostrar el nivel y tipo de juego en el overlay de estadísticas.

• 54 GameOver: Implementar tipos de juego

  Vamos a implementar desde la función de GameOver evaluar la lógica según el tipo de juego seleccionado.

• 55 Siguiente nivel

  Implementamos la lógica para ir al siguiente nivel.

• 56 Publicar en Github

Juego 5, Hud: Joystick y botón entre otros

• 1 Introducción

• 2 Hud: Presentación

  Hablaremos sobre los huds a desarrollar en esta sección y daremos una demostración.

• 3 Hud: joystick, definición

  Vamos a implementar el joystick.

• 4 Hud: joystick, movilidad

  Vamos a implementar la movilidad del player mediante el joystick.

• 5 Hud: Botón para rotar al player, definición

  Vamos a implementar un botón para ser usado en la pantalla táctil o mediante un ratón.

• 6 Hud: Botón para rotar al player, rotación

  Vamos a implementar la rotación mediante el botón virtual.

• 7 Shared Preferences, prevalecer estado del juego

  Vamos a guardar de manera persistente el nivel y tipo de juego y que se cargue el último estado al abrir la aplicación.

• 8 Eliminar las instancias de alimentos al reiniciar

  Vamos a eliminar las instancias de los alimentos al hacer el reset.

• 9 Adaptar a pantallas pequeñas

  Vamos a hablar sobre posibles cambios que puedes realizar para adaptar el juego a pantallas de pequeñas dimensiones.

• 10 Sobre el uso del GamePad

  Hablamos sobre el paquete que vamos a utilizar.

• 11 gamepads: Pruebas

  Vamos a realizar algunas pruebas con el paquete de gamepads.

• 12 Implementar el uso del GamePad

  Vamos a implementar las reglas para que podamos emplear el gamepad en el juego.

• 13 Publicar Github

Audio: Todos los proyectos

• 1 Audio experimental

• 2 FlameAudio, primeros pasos

  Presentaremos el uso del paquete con el cual, podemos manejar los audios en Flame.

• 3 Juego 2 - Dino Jump: Sonido de Fondo

  Definimos el sonido de fondo.

• 4 Juego 2 - Dino Jump: Sonido por acciones

  Definimos el sonido para las acciones.

• 5 Juego 2 - Dino Jump: Sonido en bucle demo 1

  Vamos a conocer cómo reproducir sonidos en bucle.

• 6 Juego 2 - Dino Jump: Sonido en bucle demo 2

  Vamos a conocer cómo reproducir sonidos en bucle.

• 7 Juego 2 - Dino Jump: Consumibles

  Juego 2 - Dino Jump: Consumibles

• 8 Juego 4 - Plantas vs Zombies: Configurar proyecto

  Vamos a colocar el plugin para manejar el audio y colocar los audios iniciales.

• 9 Juego 4 - Plantas vs Zombies: Zombies, sonido base

  Vamos a implementar un sonido para cada instancia del zombie.

• 10 Juego 4 - Plantas vs Zombies: Zombies, variar sonido por componente

  Vamos a colocar un sonido para cada zombie.

• 11 Sonidos, Reiniciar y/o Reload

  Vamos a hablar sobre un problema con los sonidos en ambiente de desarrollo.

• 12 Juego 4 - Plantas vs Zombies: Detectar fin del juego

  Vamos a detectar cuando acaba el juego, esta función es necesaria para la siguiente implementación que veremos en el siguiente video.

• 13 Juego 4 - Plantas vs Zombies: Reproducir un solo sonido

  Vamos a reproducir un sonido global cuando existan zombies en los canales.

• 14 Juego 5 - Parallax: Sonidos

  Colocaremos los audios para el juego.

24-01-2023 - Andrés Cruz

• Categoría
• /
• Flutter
• /
• Flame: Desarrollo de juegos en 2D con Flutter y Dart