Dibujar un sprite/imagen en Flutter con Flame

¿Qué es un Sprite?

Antes de comenzar a desarrollar en Flame, vamos a introduccir el contecto de sprite, que es fundamental en el desarrollo de cualquier juego en 2D; los juegos en 2D tiene la caracteristica de que muchos de ellos son basados en imágenes, a diferencia de los juegos en 3D, en los cuales vemos modelos completos creados con programas como Blender, en el desarrollo 2D esto no necesariamente es así; los juegos tipo Plantas vs Zombies es un buen ejemplo de juego en 2D basado en imágenes:

Y es aquí en donde entra el concepto de Sprite; un sprite se refiere a una imagen o conjunto de imágenes que se utilizan para crear personajes y todo tipo de objetos o elementos en nuestro juego; es decir, cada elemento visual de nuestro juego en Flame es un sprite; en Flame, tenemos un conjunto enorme de funciones listas para usar para variar los sprite, crear sprites animados, ocultarlos, realizar operaciones geométricas entre otras características.

Los sprites se usan para establecer la forma, tamaño y posición de los elementos en la pantalla, es la representación visual que tiene un usuario al momento de interactuar con cualquier elemento, por ejemplo, el player con un consumible, con los tiles, una casa, puerta y un largo etc.

Como mencionamos antes, los sptites tambien se usan para las animaciones. Los desarrolladores de juegos 2D a menudo crean hojas de sprites que contienen múltiples imágenes de sprites, aunque a veces las generan por separado y las podemos combinar; en Flame, lo ideal es mantener todos los estados en una sola imagen y a partir de la misma, se cargan y definen las animaciones, pero, esto es otro tema.ñ

Antes de comenzar a usar sprites más completos, vamos a crear un sencillo, dibujar una image.

En definitiva, un Sprite no es más que una imagen que puede tener una organización para -por ejemplo- poder crear una animación a partir de la misma.

En el siguiente código, puedes ver la estructura básica de una aplicación en Flame, en la cual, tenemos la entidad global FlameGame y la definición y posterior agregado de un componente dentro de la clase FlameGame:

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

class MySprite extends SpriteComponent {
  MySprite() : super(size: Vector2.all(16));

  @override
  Future<void> onLoad() async {
    sprite = await Sprite.load('image.png');
  }
}

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    await add(MySprite());
  }
}

main() {
  runApp(GameWidget(game: MyGame()));
}

Para la implementación anterior, estamos cargando una imagen:

sprite = await Sprite.load('image.png');

Que debe de existir en el siguiente path:

assets/images/image.png

Y registrar la imagen en la app:

pubspec.yaml

  assets:
    - assets/images/image.png

Y el sprite tendrá un tamaño de 16 píxeles según lo especificado en el constructor de la clase:

size: Vector2.all(16)

Luego, la agregamos desde la instancia global:

add(MySprite());

Una vez registrada una imagen en tu proyecto, verás un resultado como el siguiente:

Conclusiones

Con esto, logramos pintar una imagen o sprite en Flame, este es el primer paso que debemos de realizar para hacer cualquier cosa, como mencionamos antes, las imágenes o sprite son el corazón en este tipo de juegos y por ende debemos de saber como cargar las mismas, y no solamente cargarlas, si no, definir otras características como el tamaño y posición son fundamentales; ya con esto, vimos otro ejemplo de como usar componentes en Flame, aunque, en esta oportunidad no es un PositionComponent en Flame, si no, un SpriteComponent.

Recuerda que este artículo es una pequeña parte de mi curso y libro completo sobre Flutter y Flame.