Flame: 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 spritede 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.
Por último, recuerda que puedes encontrar el código fuente de todos los tutoriales en Github, y también puedes probar todos los ejemplos en tu navegador.
