Añadir color a un elemento BodyComponent usando Flame en Flutter

Tiempo de lectura: 2 minutos

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: