Ajustes iniciales

Viewport

Antes de comenzar a codificar, debemos aprender algunos conceptos relacionados con la representación del juego en Flame.

Supongamos que tenemos un dispositivo cuyo tamaño de pantalla abarca toda el área roja de la siguiente imagen:

Canvas: El área roja es el lienzo (canvas) y es el espacio disponible en el que podemos dibujar formas, imágenes, etc. La mayoría de las veces, el tamaño del canvas será igual al tamaño de la pantalla del dispositivo. Podemos utilizar el tamaño del canvas para conocer el tamaño del dispositivo en píxeles.

Viewport: El área negra es el viewport. Dado que tenemos que lidiar con diferentes pantallas, a menudo es necesario decidir cómo se manejarán diferentes tamaños de pantalla y resoluciones. El viewport intenta unificar múltiples tamaños de pantalla en una configuración única para tu juego mediante la traducción y redimensionamiento del lienzo.

En estos tutoriales, para facilitar la comprensión de todos los ejemplos, utilizaremos el FixedResolutionViewport. Este viewport permite trabajar con un tamaño de pantalla virtual. Esto significa que podemos asumir que la pantalla siempre tiene el mismo tamaño: virtualWidth x virtualHeight.

Para mantener siempre la misma resolución, se agregarán barras rojas, como se muestra en la siguiente animación:

Para mantener siempre la misma resolución, se agregarán barras rojas

En la imagen anterior, observa cómo al redimensionar la ventana se muestra el canvas rojo debajo; es decir, "agrega barras rojas" para mantener la relación de aspecto.

Al trabajar con Forge2D, recuerda que 1 unidad es igual a 1 metro. Esto significa que si tenemos un FixedResolutionViewport con valores de 1280 de ancho x 720 de altura y decidimos agregar un árbol que tenga la mitad de la altura, entonces para Forge2D tendremos un árbol de 360 metros, lo cual no tiene sentido. Para solucionar esto, agregamos un valor de zoom de 100 para que el tamaño del mundo se convierta en 12.8 de ancho x 7.2 de altura. Ahora, agregar un árbol de 3.6 metros tiene más sentido.

Hora de escribir código

En estos tutoriales, asumimos que ya tienes conocimientos sobre cómo crear proyectos de Flutter en tu IDE favorito, por lo que no repasaremos los pasos de configuración y creación de un proyecto de Flutter.

El primer paso consiste en crear un nuevo proyecto de Flutter y agregar Flame. Solo debes agregar los paquetes necesarios al archivo pubspec.yaml:

flame: ^1.8.0
flame_forge2d: ^0.14.0

Luego, crearemos una clase MyGame.

// Tamaño fijo del viewport
final screenSize = Vector2(1280, 720);

// Tamaño del viewport con zoom de 100
final worldSize = Vector2(12.8, 7.2);

class MyGame extends Forge2DGame {

  // Muestra el número de cuerpos en el mundo.
  final totalBodies = TextComponent(position: Vector2(5, 690))
    ..positionType = PositionType.viewport;

  // Muestra los cuadros por segundo (FPS)
  final fps = FpsTextComponent(position: Vector2(5, 665));

  // Escala el tamaño de la pantalla establece la gravedad en 15
  MyGame() : super(zoom: 100, gravity: Vector2(0, 15));

  @override
  Future<void> onLoad() async {

    // Establece el FixedResolutionViewport
    camera.viewport = FixedResolutionViewport(screenSize);

    // Agrega un fondo negro al viewport
    add(_Background(size: screenSize)..positionType = PositionType.viewport);

    add(fps);
    add(totalBodies);
  }

  @override
  void update(double dt) {
    super.update(dt);

    // Actualiza el número de cuerpos en el mundo
    totalBodies.text = 'Cuerpos: ${world.bodies.length}';
  }

  @override
  Color backgroundColor() {

    // Pinta el fondo del canvas en color rojo
    return Colors.red;
  }
}

// Componente auxiliar que pinta un fondo negro
class _Background extends PositionComponent {
  _Background({required Size size}) : super(size: size);

  @override
  void render(Canvas canvas) {
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), blackPaint);
  }
}

Los componentes totalBodies y fps pertenecen a la clase TextComponent y se utilizan para mostrar en pantalla el número de cuerpos en el mundo y los cuadros por segundo, respectivamente. Puedes ver un ejemplo de cómo se muestran en la siguiente imagen:

Cuadros por segundo y número de cuerpos en el mundo

En el siguiente artículo, aprenderemos que son los cuerpos (body). Por ahora, podemos decir que los cuerpos son todos los componentes que forman parte de Forge2D y participan en simulaciones, colisiones, y demás. Normalmente, estos cuerpos son del tipo PositionType.game.

Por otro lado, existen componentes que no forman parte de Forge2D, como los componentes de la interfaz de usuario, el fondo, etc. Estos suelen ser del tipo PositionType.viewport.

Conclusión

En este artículo, hemos aprendido sobre dos conceptos clave en la representación de juegos en Flame: el lienzo (canvas) y el viewport.

Se ha introducido el FixedResolutionViewport, que nos permite trabajar con un tamaño de pantalla virtual y mantener una resolución constante en diferentes dispositivos.

En cuanto al código, hemos creado una clase llamada MyGame que extiende Forge2DGame. Esta clase la utilizaremos en cada uno de los ejemplos que creemos a lo largo de este curso.

info

Prueba el demo en tu navegador y descarga el código fuente de todos los tutoriales en GitHub.