Curso y Libro Primeros pasos con Forge2D y Flame con Flutter

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.

17-11-2023 - Andrés Cruz

• Categoría
• /
• Flutter
• /
• Curso y Libro Primeros pasos con Forge2D y Flame con Flutter

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