Primeros pasos con Forge2D y Flame con Flutter

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.

Esta guía tiene la finalidad de dar los primeros pasos con Forge 2D empleando Flame con Flutter; con esto, vamos a plantear dos cosas:

1. No es un curso que tenga por objetivo conocer al 100% Forge con Flame, o de cero a experto, ya que, sería un objetivo demasiado grande para el alcance de esta guía, si no, conocer que nos ofrece, sus principales características y cómo aplicarlas al desarrollo de juegos con físicas en 2D.
2. Se da por hecho de que el lector tiene conocimientos al menos básicos en el desarrollo de Flame, Flutter y sus tecnologías básicas como Dart.

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.

Para seguir este libro necesitas tener una computadora con Windows, Linux o MacOS.

 

Este libro tiene un total de 6 capítulos, 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.

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

Capítulo 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.

Capítulo 3: Crearemos vários 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.

Capítulo 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.

Capítulo 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.

Capítulo 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.

Para quién es este guía

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.

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
• /
• Primeros pasos con Forge2D y Flame con Flutter