Cuerpos y Sprites

En este artículo, aprenderemos como dibujar imágenes en objetos utilizando Forge2D.

Como en los artículos anteriores, vamos a aprender con un ejemplo. Creemos una escena en Forge2D donde se mostrará una caja o una pelota en la parte superior de la pantalla cada vez que hagamos clic en ella.

Comenzaremos creando una clase llamada Box que representa la caja:

class Box extends BodyComponent {

  @override
  Body createBody() {
    final bodyDef = BodyDef(
      position: Vector2(worldSize.x / 2, 0),
      type: BodyType.dynamic,
    );

    final shape = PolygonShape()..setAsBoxXY(.25, .25);
    final fixtureDef = FixtureDef(shape)
      ..density = 5
      ..friction = .5
      ..restitution = .5;
    return world.createBody(bodyDef)
      ..createFixture(fixtureDef)
      ..angularVelocity = radians(180);
  }
}

Hemos agregado una velocidad angular, angularVelocity, para que la caja rote sobre su eje. Todo lo demás es lo que hemos estado haciendo en tutoriales anteriores.

Ahora vamos a crear la clase Ball que representa la pelota:

class Ball extends BodyComponent {

  @override
  Body createBody() {
    final bodyDef = BodyDef(
      position: Vector2(worldSize.x / 2, 0),
      type: BodyType.dynamic,
    );

    final shape = CircleShape()..radius = .25;
    final fixtureDef = FixtureDef(shape)
      ..density = 5
      ..friction = .5
      ..restitution = .5;
    return world.createBody(bodyDef)
      ..createFixture(fixtureDef)
      ..angularVelocity = radians(180);
  }
}

Una vez más, no hay nada especial en esta clase. Esta pelota también girará sobre su eje.

Cada vez que hagamos clic en la pantalla, queremos agregar una pelota o una caja al azar. Agreguemos este código:

class GameLesson05 extends MyGame with TapDetector {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    add(Floor());
  }

  @override
  void onTapDown(TapDownInfo info) {
    super.onTapDown(info);
    if (Random().nextBool()) {
      add(Ball());
    } else {
      add(Box());
    }
  }
}

Si ejecutamos el código anterior, el resultado es el siguiente:

Agregando sprites

Es hora de mejorar la escena de cajas y pelotas blancas agregando sprites de una caja y una pelota. Primero, agregaremos estas dos imágenes a la carpeta de assets:

Sprites: caja y pelota

Luego, actualizamos el archivo pubspec.yaml para agregar la ruta de los assets.

  assets:
    - assets/images/

Cargaremos los sprites y los almacenaremos en la memoria caché. En la clase GameLesson05, agregamos este código a la función onLoad():

  Future<void> onLoad() async {
    super.onLoad();
    await loadSprite('ball.png');
    await loadSprite('box.png');

    add(Floor());
  }

Ahora debemos recuperar los sprites cargados de la memoria caché y agregarlos a los cuerpos de la caja y la pelota.

Vamos a sobrescribir la función onLoad() de la clase Ball:

  @override
  Future<void> onLoad() async {
    await super.onLoad();
    final sprite = Sprite(gameRef.images.fromCache('ball.png'));
    add(
      SpriteComponent(
        sprite: sprite,
        size: Vector2(.5, .5),
        anchor: Anchor.center,
      ),
    );
  }

El código anterior recupera la imagen de la memoria caché y crea un nuevo Sprite, luego crea un nuevo SpriteComponent que se encargará de dibujar la imagen sobre la pelota.

El código para dibujar el sprite de la caja es muy similar al código de la pelota:

  @override
  Future<void> onLoad() async {
    await super.onLoad();
    final sprite = Sprite(gameRef.images.fromCache('box.png'));
    add(
      SpriteComponent(
        sprite: sprite,
        size: Vector2(.5, .5),
        anchor: Anchor.center,
      ),
    );
  }

Al ejecutar el código actualizado, obtendremos el siguiente resultado:

¿Se ve mejor, verdad? Podemos ver cómo Flame dibuja los sprites sobre los cuerpos, incluyendo la actualización de la posición, rotación, etc.

Conclusión

Este es un pequeño artículo en el que aprendimos cómo usar sprites para dibujar imágenes en nuestra escena de Forge2D.

info

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