Curso y Libro para Forge2D y Flame con Flutter - Crea Juegos en 2D con física
Índice de contenido
- Sobre el curso y libro
- ¿Por qué usar Flame y Forge2D para crear juegos en Flutter?
- Prólogo
- Para quien es este curso y libro
- Temario del Curso y Libro
- Qué aprenderás en este curso de Forge2D con Flutter y Flame
- Introducción
- Crear proyecto
- Conceptos claves
- Primeros experimentos
- Primer juego: DinoJump
- Segundo juego: Angry Birds
- Tercer juego: Pinball
- (Exclusivo de Academia y Libro) Cuarto juego: Pong
Con Flame y Flutter, podemos realizar juegos en 2D enfocadas al ámbito móvil, escritorio o web; tal cual vimos en el curso/libro sobre "Primeros pasos con Flame con Flutter" podemos crear todo tipo de juegos en 2D usando sprite, colisiones, eventos de tap, teclado, Drag entre otros y un sistema de cámaras, por nombrar algunas características importantes; con Forge2D y Flame, podemos realizar todo lo anterior pero empleando un motor de física en 2D, para implementar saltos de una manera más sencillas, choques entre cuerpos, simulaciones, son algunos ejemplos de lo que podemos lograr.
Si alguna vez soñaste con crear tu propio juego al estilo Mario usando Flutter, este curso es para ti. Con Flame y Forge2D aprenderás a combinar la potencia de Flutter con un motor de física 2D que hace que tus personajes salten, choquen y se muevan de manera realista.
Con Forge2D tenemos cuerpos, que vienen siendo los componentes de Flame para crear componentes, pero a los cuales se les puede aplicar físicas como gravedad, colisiones, peso, fricción, rebote, entre otros, por lo tanto, con estas características, podemos crear fascinantes juegos al mejor estilo de Angry Birds o similares.
Este curso y libro es mayoritariamente práctico, iremos conociendo los fundamentos de Forge2D en base a pequeños ejemplos hasta lograr conocer lo suficiente de la librería para crear un juego en 2D con sistemas de físicas sencillas.
Sobre el curso y libro
¿Por qué usar Flame y Forge2D para crear juegos en Flutter?
Flame es un motor de juegos ligero para Flutter que te permite enfocarte en la creación de juegos 2D, sin preocuparte por la infraestructura compleja de un motor completo como Unity.
Forge2D complementa esto añadiendo físicas reales: gravedad, fricción, rebotes y colisiones que funcionan como esperarías en un juego clásico de plataformas.
En mi caso, al crear un juego tipo Mario, me di cuenta de que sin Forge2D tendría que programar cada salto y rebote manualmente. Con este motor, todo es más intuitivo: solo defines cuerpos, fuerzas y el motor hace el resto.
También tengo recursos gratuitos para el Curso en el Blog y el curso y libro comunitario/GRATIS en la web de Academia.
Es importante mencionar, que el curso también tiene el formato en libro con el 100% del contenido del mismo, es decir, el curso es equivalente al libro.
Prólogo
Con Flame y Flutter, podemos realizar juegos en 2D enfocadas al ámbito móvil, escritorio o web; tal cual vimos en el curso/libro sobre "Primeros pasos con Flame con Flutter" podemos crear todo tipo de juegos en 2D usando sprite, colisiones, eventos de tap, teclado, Drag entre otros y un sistema de cámaras, por nombrar algunas características importantes; con Forge2D y Flame, podemos realizar todo lo anterior pero empleando un motor de física en 2D, para implementar saltos de una manera más sencillas, choques entre cuerpos, simulaciones, son algunos ejemplos de lo que podemos lograr.
Con Forge2D tenemos cuerpos, que vienen siendo los componentes de Flame para crear componentes, pero a los cuales se les puede aplicar físicas como gravedad, colisiones, peso, fricción, rebote, entre otros, por lo tanto, con estas características, podemos crear fascinantes juegos al mejor estilo de Angry Birds o similares.
Este curso es mayoritariamente práctico, iremos conociendo los fundamentos de Forge2D en base a pequeños ejemplos hasta lograr conocer lo suficiente de la librería para crear un juego en 2D con sistemas de físicas sencillas.
Para quien es este curso y libro
Esta guía está dirigida a cualquier persona que quiera aprender a desarrollar en Flame con Forge 2D y conocer y aprender cómo trabajar con el motor de física para nuestros juegos.
- 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 con un motor de física.
- 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.
- Para todas las personas que ya saben desarrollar en Flame y con esto, en Flutter y quieran dar el siguiente paso y aprender a desarrollar juegos en 2D con el motor de física de Forge.
Temario del Curso y Libro
Este curso y libro tiene un total de 7 secciones, se recomienda que leas en el orden en el cual están dispuestos y a medida que vayamos explicando los fundamentos de Forge 2D con Flame en base a ejemplos; una vez domines la librería, puedes consultar las secciones en el orden que desees.
- Sección 1: Crearemos un proyecto en Flutter con las dependencias básicas necesarias para crear juegos con Forge 2D, Flame y Flutter.
- Sección 2: Explicaremos los conceptos básicos como qué es Forge 2D, los cuerpos, sus características y componentes, aplicar impulso, velocidad o fuerzas, formas de los cuerpos, manejar el contacto entre cuerpos y cómo interactuar con el mundo de Forge2D en general.
- Sección 3: Crearemos varios ejemplos pequeños para ir presentando uno a uno las características principales y funcionalidades de Forge2D, veremos de manera práctica los conceptos presentados en el anterior capítulo.
- Sección 4: Crearemos nuestro primer juego real en Forge que sería un juego de plataformas de saltos y desplazamiento horizontal, veremos cómo manejar el movimiento, saltos empleando la velocidad lineal además de emplear mapas de tipo tile.
- Sección 5: Crearemos un segundo juego en donde implementaremos funcionalidades similares al de Angry Birds como la de posicionar un ave, desplazar el ave en un radio específico mediante el evento drag y agregar impulsos en base a un vector resultante entre el origen y posición final.
- Sección 6: Crearemos un tercer juego en donde implementaremos funcionalidades similares a la de Pinball, agregar una bola, crear obstáculos, crear un brazo e implementar una meta movible.
- Capítulo 7: Crearemos un cuarto juego estilo Pong en el cual consiste en crear paredes, un par de barras e inclinar las barras y paredes según el ángulo de impacto de la pelota.
Qué aprenderás en este curso de Forge2D con Flutter y Flame
- Crear proyectos en Flutter listos para juegos 2D.
- Fundamentos de Forge2D: cuerpos, fixtures, fuerzas, colisiones y contactos.
- Aplicar físicas a personajes y objetos del mundo del juego.
- Construir juegos de plataformas con movimientos realistas.
- Implementar proyectos tipo Mario con tilemaps, enemigos y obstáculos.
- Ajustar animaciones, saltos y colisiones para que tu juego se sienta profesional.
Este curso es la segunda parte del curso/libro de Flutter y Flame
Puedes ver demos de las apps creadas en:
Acepto recibir anuncios de interes sobre este Blog.
Aprenderemos a trabajar con Forge2D, el motor de simulación de física que podemos emplear junto con Flame, crearemos múltiples proyectos o juegos para tener perspectivas distintas de como emplear esta tecnología.
Algunas recomendaciones:
Benjamin Huizar Barajas
Laravel Legacy - Ya había tomado este curso pero era cuando estaba la versión 7 u 8. Ahora con la ac...
Andrés Rolán Torres
Laravel Legacy - Cumple de sobras con su propósito. Se nota el grandísimo esfuerzo puesto en este cu...
Cristian Semeria Cortes
Laravel Legacy - El curso la verdad esta muy bueno, por error compre este cuando ya estaba la versi...
Bryan Montes
Laravel Legacy - Hasta el momento el profesor es muy claro en cuanto al proceso de enseñanza y se pu...
José Nephtali Frías Cortés
Fllask 3 - Hasta el momento, están muy claras las expectativas del curso
| 👤 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 Requisitos para tomar esta formación
-
3 Preguntas
-
4 Consideraciones
-
5 Recomendaciones
-
6 Actualizaciones
Crear proyecto
-
1 Crear un proyecto en Flutter y agregar Flame y Forge 2D
Crear un proyecto en Flutter y agregar Flame y Forge 2D.
Conceptos claves
-
1 Presentación
-
2 ¿Qué es Forge 2D?
Vamos a conocer sobre esta tecnología.
-
3 Clase principal y dependencias
Conoceremos cómo configurar la clase principal en Flame con Forge 2D.
-
4 Mundo y cámara
Vamos a conocer el uso del mundo y las cámaras.
-
5 Cuerpos/body, Configuración base
Vamos a conocer el concepto de cuerpo en el mundo de física.
-
6 Cuerpos/body, Características
Vamos a conocer las características de los cuerpos.
-
7 Cuerpos/body, Fuerzas, impulsos y velocidad
Vamos a conocer las formas que tenemos para aplicar movimientos a un cuerpo.
-
8 Cuerpos/body, Tipos
Vamos a hablar sobre los 3 tipos de cuerpos.
-
9 Cuerpos/body, ContactCallbacks: Colisiones o contacto entre cuerpos
Vamos a hablar sobre las colisiones sobre los cuerpos.
Primeros experimentos
-
1 Introducción
-
2 Sobre la estructura de la clase
Vamos a hablar sobre un cambio al momento de definir el mundo y la cámara.
-
3 Legacy: Estructura base del proyecto: versión ^0.14.1+1
Vamos a presentar un esquema para crear el mundo y la cámara.
-
4 Estructura base del proyecto: versión ^0.15.1+1
Vamos a presentar un esquema para crear el mundo y la cámara.
-
5 Crear un círculo
Vamos a crear un cuerpo de forma circular.
-
6 Zoom y gravedad
Explicaremos el uso del zoom y gravedad.
-
7 screenToWorld
Vamos a conocer como convertir coordenadas de pantalla al mundo y su propósito.
-
8 Crear el piso
Vamos a crear el piso para nuestro experimento.
-
9 Rebote/restitution
Crearemos un ejercicio para conocer cómo funciona la restitution.
-
10 Inclinar el piso
Vamos a inclinar el piso y evaluar el resultado.
-
11 Cuadrado en vez de un círculo
Vamos a dibujar un cuadrado o caja.
-
12 Fricción
Vamos a conocer el uso de la fricción.
-
13 Densidad, Fuerzas, impulsos y velocidad
Conoceremos cómo aplicar movimiento a un cuerpo mediante el evento tap.
-
14 Conclusiones
Hablaremos sobre lo creado hasta este punto.
-
15 Cuerpos kinematic
Presentamos el uso de los cuerpos kinematic aplicando una fuerza sobre el mismo.
-
16 Cuerpos kinematic: Desplazar horizontalmente
Creamos un cuerpo kinematic o estático y aplicamos desplazamiento horizontal.
-
17 Sprite: Dibujar una caja
Vamos a dibujar un sprite dentro de un body.
-
18 Reto: Sprite: Dibujar una pelota
Vas a dibujar un sprite de pelota dentro de un body.
-
19 SpriteAnimationComponent: Generar figuras
Crearemos un ejemplo en el cual usaremos un sprite animado.
-
20 Crear paredes
Vamos a crear unas paredes en base al espacio visible de la cámara.
-
21 Contacto/Colisión: Presentación
Vamos a presentar el uso de las colisiones/contactos entre cuerpos.
-
22 Agregar una caja o pelota de manera aleatoria
Agregar una caja o pelota de manera aleatoria
-
23 Contacto entre cuerpos
Vamos a manejar los contactos entre cuerpos.
-
24 Crear una clase base para los bodies
Vamos a crear una clase base para los cuerpos.
-
25 Agregar una animación al momento del contacto
Vamos a mostrar una animación de explosion al momento del contacto.
-
26 ContactFilter
Vamos a conocer como aplicar filtros en los contactos.
-
27 Publicar en github
Primer juego: DinoJump
-
1 Introducción
-
2 Estructura base
Vamos a crear la clase principal.
-
3 Ground
Crearemos el piso.
-
4 Player: Clase character
Creamos la clase a implementar que mantiene las propiedades para las animaciones entre otras.
-
5 Player: SpriteAnimation
Definimos el sprite animation para el player.
-
6 Player: Body
Vamos a crear el cuerpo del player.
-
7 Movilidad: Desplazamiento horizontal
Vamos a colocar los eventos para mover al player en el eje de las X.
-
8 Movilidad: Desplazamiento vertical o salto
Vamos a implementar la funcionalidad de salto para el player.
-
9 Estados del player
Vamos a implementar el estado de fall.
-
10 Moverse en el aire
Vamos a evitar que el player caiga lentamente cuando salta y nos desplazamos en el aire.
-
11 Moverse en el aire: Animación
Vamos a evitar colocar la animación de caminando en el aire.
-
12 Salto Doble
Implementamos el salto doble para el player.
-
13 Impulso
Vamos a implementar la función de impulso.
-
14 Tileset: Configuración inicial
Vamos a realizar la configuración inicial para usar los tiles set.
-
15 Tileset: Definir tamaño entre los tiles y GroundBody
Vamos a definir el tamaño de los tiles de manera correcta.
-
16 Evitar que el player rote: body.setTransform(body.position, 0);
Vamos a evitar que el player rote.
-
17 Follow para la cámara
Vamos a implementar el follow de la cámara.
-
18 Resolviendo problemas de visualización de los tiles/ground
Vamos a conocer como resolver el problema de renderización de los bodies de los tiles.
-
19 Definir un EdgeShape para el Ground
Vamos a migrar del cuerpo de una caja a una línea.
-
20 Implementar one-way collision (ContactFilter), presentación
Vamos a presentar los ContactFilter.
-
21 ContactFilter, implementación
Vamos a permitir el one way collision al momento de hacer el salto.
-
22 Manejar los contactos en los extremos de los tiles y el player
Vamos a variar algunas opciones de densidad, fricción y rebote.
-
23 Publicar en github
Segundo juego: Angry Birds
-
1 Introducción
-
2 Estructura base
Vamos a crear el cuerpo base del main y el player.
-
3 Evento Tap
Vamos a implementar la lógica para agregar al player mediante el evento tap.
-
4 Drag, presentación
Vamos a hablar sobre la implementación a realizar en las siguientes clases.
-
5 Drag update, implementar
Vamos a implementar el evento drag update y cambiar la posición del player.
-
6 Drag end, implementar
Vamos a implementar la función de onDragEnd y el cambio de cuerpo.
-
7 Generar el impulso
Vamos a colocar el impulso al ave.
-
8 Evitar que el círculo pueda ser arrastrado por toda la pantalla, presentación
Vamos a explicar cómo podemos evitar que el ave pueda moverse libremente por la pantalla calculando la magnitud.
-
9 Evitar que el círculo pueda ser arrastrado por toda la pantalla, implementación
Vamos a implementar el cálculo para limitar el movimiento del player.
-
10 Permitir que el ave pueda moverse en un rango limitado superada la distancia máxima
Vamos a permitir variar el ángulo de la posición del player al momento de salir de rango.
-
11 Usar length2 en vez de length al momento de definir los límites del movimiento del ave
Vamos a usar la función de length2 que evita el cálculo de la raíz cuadrada.
-
12 Remover al player una vez lanzado y pasado un tiempo
Vamos a remover al player del juego pasado un tiempo una vez lanzada.
-
13 Sprite animado para el ave
Vamos a asignar un sprite animado al cuerpo.
-
14 Preparar el mundo, definir paredes
Vamos a preparar las paredes o límites para el juego.
-
15 Objetivos colisionables: Cajas
Vamos a crear el cuerpo y sprite para la caja.
-
16 Definir niveles: Generar varias cajas
Vamos a crear la estructura para crear varias cajas por nivel.
-
17 Agregar cajas desde el main
Vamos a agregar las cajas por nivel desde el main.
-
18 Detectar cuando fueron agregadas las cajas desde el main
Vamos a detectar cuando todas las cajas fueron agregadas desde el main.
-
19 Detectar cuando fue posicionada la caja desde el componente en el mundo
Vamos a detectar cuando la caja fue posicionada en el mundo desde el componente.
-
20 Obtener listado de cajas desde el main
Vamos a obtener un listado de instancias de las cajas desde el main.
-
21 Verificar que todas las cajas fueron agregadas en el mundo y las cajas están en reposo
Vamos a detectar cuando todas las capas están posicionadas en el mundo, es decir, sin moverse o velocidad lineal aplicadas.
-
22 Bloquear ave al momento de generar las cajas
Vamos a bloquear el ave hasta que las cajas estén en reposo.
-
23 Contabilizar impactos, registrar el mayor impacto
Vamos a buscar el impacto más grande por cajas.
-
24 Destruir las cajas
Vamos a destruir las cajas cuando se alcance una cota máxima.
-
25 Publicar en github
Tercer juego: Pinball
-
1 Introducción
-
2 Estructura base
Vamos a crear la clase principal.
-
3 Pelota
Vamos a implementar el cuerpo de la pelota.
-
4 Barra
Vamos a implementar el cuerpo de la barra o brazo.
-
5 Movimiento para la barra, primeras pruebas
Vamos a realizar las primeras pruebas para mover el brazo 90 grados.
-
6 Retornar la barra al origen
Vamos a implementar el retorno de la barra.
-
7 Movimiento, velocidad angular para la barra
Vamos a cambiar las transformaciones geométricas a velocidad angular para poder aplicar velocidades a los cuerpos golpeados.
-
8 Habilitar el movimiento invertido de la barra
Vamos a permitir que la barra se pueda mover con un movimiento invertido.
-
9 Paredes
Vamos a agregar los límites en el mundo.
-
10 Paredes: Pared inferior
Vamos a inclinar la pared inferior.
-
11 Paredes: Desplazar barra
Vamos a poder personalizar la posición de la barra.
-
12 Obstáculos
Vamos a crear las clases para definir los obstáculos.
-
13 Meta
Vamos a crear la meta.
-
14 Meta: Desplazar
Vamos a mover la meta de lado a lado.
-
15 Niveles
Vamos a crear la estructura para crear niveles con sus obstáculos.
-
16 Niveles: Variar mapa
Vamos a crear otra distribución para el mapa.
-
17 Variar posición de la barra
Vamos a variar la posición de la barra para que quede en el medio.
-
18 Variar largo de la barra
Vamos a variar el tamaño de la barra.
-
19 Arreglar desplazamiento de la barra
-
20 Publicar en Github
-
21 Inclinar paredes y barra al contacto con la bola: Paredes verticales
Vamos a crear una propiedad para comprobar cuáles paredes son verticales y comprobar en el eje Y.
-
22 Inclinar paredes y barra al contacto con la bola: Invertir
Vamos a crear una propiedad para invertir la lógica de inclinar la barra.
-
23 Inclinar barra al contacto con la bola
Vamos a inclinar la barra al contacto con la pelota.
(Exclusivo de Academia y Libro) Cuarto juego: Pong
-
1 Introducción
-
2 Estructura base
Vamos a crear la clase principal.
-
3 Mover barra a los lados
Vamos a desplazar la barra horizontalmente mediante el teclado.
-
4 Evitar que la barra escape
Vamos a usar la función de clamp para evitar que la barra salga del espacio visible.
-
5 Impulso inicial para la bola
Vamos a dar el impulso o movimiento inicial a la barra.
-
6 Aumentar velocidad de la bola al contacto
Vamos a aumentar la velocidad de la pelota al momento del impacto.
-
7 Inclinar paredes y barra al contacto con la bola
Vamos a inclinar levemente las paredes al momento del impacto de la pelota.
-
8 Generar segunda barra
Vamos a genera la segunda barra para el segundo jugador.
-
9 Invertir dirección a la segunda barra
Vamos a invertir la lógica de la inclinación para la segunda barra.
-
10 Publicar en Github