En este tutorial os voy a explicar cómo podéis añadir colores a los elementos tipo BodyComponent de Flame Engine (https://examples.flame-engine.org)

En este ejemplo voy a añadir un BodyComponent que representa una barra azul.
class BarraAzul extends BodyComponent { //parametros pasados final double posicionX; final double posicionY; final double velocidadAngular; //Constructor BarraAzul(this.posicionX, this.posicionY, this.velocidadAngular) { } @override Body createBody() { final bodyDef = BodyDef( position: Vector2(posicionX, posicionY), type: BodyType.kinematic, ); //shape whit color final shape = PolygonShape()..setAsBoxXY(.15, 1.25); final fixtureDef = FixtureDef(shape); return world.createBody(bodyDef) ..createFixture(fixtureDef) ..angularVelocity = radians(velocidadAngular); } }
Esto nos crea la siguiente figura en la pantalla:

Para aplicarle un color, utilizaremos la librería de colores de flame engine package:flame/palette.dart
import 'package:flame/palette.dart';
Una vez añadida, solo tenemos que crear el color que queramos:
final Paint azul = BasicPalette.blue.paint();
En este caso color azul.
Si queremos asignarlo al elemento, solo tendremos que cambiar la variable color en su constructor (la variable color ya viene por defecto en los componentes BodyComponent/ Component.
BarraAzul(this.posicionX, this.posicionY, this.velocidadAngular) { paint = azul; }
Este es el código resultado:
class BarraAzul extends BodyComponent { //parametros pasados final double posicionX; final double posicionY; final double velocidadAngular; final Paint azul = BasicPalette.blue.paint(); //Constructor BarraAzul(this.posicionX, this.posicionY, this.velocidadAngular) { paint = azul; } @override Body createBody() { final bodyDef = BodyDef( position: Vector2(posicionX, posicionY), type: BodyType.kinematic, ); //shape whit color final shape = PolygonShape()..setAsBoxXY(.15, 1.25); Paint randomPaint() => PaintExtension.random(withAlpha: 0.9, base: 100); //final fixtureDef = FixtureDef(shape); final fixtureDef = FixtureDef( shape, restitution: 0.8, density: 1.0, friction: 0.4, ); return world.createBody(bodyDef) ..createFixture(fixtureDef) ..angularVelocity = radians(velocidadAngular); } }
Y así aparece en la pantalla:


Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.