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

24-01-2023 - Andrés Cruz

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

Precio mínimo:

$8.0

Condiciones:

  • Todo el curso de por vida y descarga individual
  • Un único pago para todo el curso
  • Actualizaciones más frecuentes que en Udemy para agregar más y más clases al curso.
  • Contacto por mensajes

Precio mínimo:

$9.9

Hasta el --/--

Condiciones:

  • Todo el curso de por vida
  • Un único pago para todo el curso
  • Actualizaciones frecuentes para agregar más y más clases al curso.
  • Contacto por mensajes

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.

  • Crear un proyecto en Flutter y agregar Flame

    Capítulo 1: Crearemos un proyecto en Flutter con las dependencias básicas necesarias para crear juegos con Flame en Flutter.

  • Fundamentos de Flame

    Capítulo 2: Este capítulo es mayoritariamente teórico y conoceremos la estructura de Flame, la cual, está basada principalmente en las clases tipo Flame, componentes y métodos del ciclo de vida.

  • Aspectos imprescindibles de Flame

    Capítulo 3: En este capítulo veremos un enfoque práctico a las características de Flame, como las clases tipo Game, componentes principales de Flame, entrada de teclado, tap y colisiones.

  • Juego 1, Lluvia de meteoros - Inicios

    Capítulo 4: En este capítulo empezaremos creando la estructura de un sencillo juego en 2D de colisiones utilizando como base parte del código visto en el capítulo anterior.

  • Background en color e imagen

    Capítulo 5: En este capítulo presentamos el uso de los background para definir el mismo mediante un color sólido o una imagen.

  • Background de tipo tile

    Capítulo 6: En este capítulo presenta el uso de los background tipo tile, usando un software para editar los mapas y utilizándolos en el proyecto en Flutter con Flame.

  • Juego 2, Saltar entre tiles

    Capítulo 7: En este capítulo empezaremos creando la estructura de un sencillo juego en 2D de saltos utilizando el sistema de tile presentado anteriormente.

  • Juego 2, Experimentos varios

    Capítulo 8: En este capítulo realizaremos algunos cambios adicionales sobre el juego anterior como variar el salto, limitar los movimientos del player y definir un fondo.

  • Juego 3, Desplazar XY

    Capítulo 9: En este capítulo crearemos un nuevo juego cambiando la perspectiva de visualización del mismo y con esto, la jugabilidad.

  • Juego 3, Enemigos

    Capítulo 10: En este capítulo incorporaremos un sprite de tipo enemigo para el juego anterior, crearemos distintos tipos de enemigos variando el movimiento entre un patrón bien definido y movimientos aleatorios.

  • Juego 4, Plantas vs Zombies

    Capítulo 11: En este capítulo crearemos un nuevo proyecto al estilo de Plantas vs Zombies.

  • Juego 4, Experimentos varios

    Capítulo 12: En este capítulo, implementamos algunos desarrollos adicionales al proyecto fuera del desarrollo base que hicimos anteriormente y con esto, mejorar la jugabilidad.

  • Juego 5, Fondos parallax

    Capítulo 13: Crearemos un nuevo juego en donde el fondo será de tipo parallax y el player podrá moverse libremente en el eje X y Y.

  • Audios

    Capítulo 14: Aprenderemos a introducir sonidos o audios para los juegos, los cuales pueden ser de dos tipos, por acciones o de fondo.

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.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!