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.

 

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

 

 

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

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.
   

 

 

Este curso es la segunda parte del curso/libro de Flutter y Flame

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

17-11-2023 - Andrés Cruz

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