Primeros pasos con Forge2D y Flame con Flutter

17-11-2023 - Andrés Cruz

Primeros pasos con Forge2D y Flame con Flutter

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
  • Clases exclusivas

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

Precio mínimo:

$20.0

Condiciones:

  • Todo el curso de por vida y descarga directa del curso
  • 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
  • Clases exclusivas

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


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!