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

Video thumbnail

▶

Tambien tengo recursos gratuitos para el Curso en el Blog
Es importante mencionar, que el curso tambien tiene el formato en libro con el 100% del contenido del mismo, es decir, el curso es equivalente al libro.

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 curso y 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.

Prólogo

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 curso 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.

Para quien es este curso

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 en 2D para Android, iOS, Linux, Windows, MacOS o web.
Para aquellas personas que conozcan cómo programar en Flutter y que buscan aplicar sus habilidades de programación en el desarrollo de videojuegos en 2D.
Para aquellas personas que quieran aprender a desarrollar sus primeros juegos en 2D.
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.

Acepto recibir anuncios de interes sobre este Blog.

Curso para dar los primeros pasos en la creación de juegos en 2D multiplataforma usando Flutter con Flame, aprender a animar sprite mediante saltos, caminar y mucho más.

24-01-2023 - Andrés Cruz

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.

Flame Juego Flutter

© 2025 Copyright | Contacto | Acerca de | Versión PC