How to Add transparency to image

user_4861207 0
Viewed 909

I'm using sprite from the flame package to show an image. I'm trying to add transparency, or opacity, to the image.

Here's my code:

void render(Canvas c) {
    Sprite spriteImg = Sprite('someImg.png');
    rect = Rect.fromLTWH(10, 10, 20, 20);
    spriteImg.renderRect(c, rect);
}

I can't seem to figure out how to add opacity.

flame sprite dart flutter
2 Answers

You have to override the paint that is used when rendering, like this:

void render(Canvas c) {
    Sprite spriteImg = Sprite('someImg.png');
    rect = Rect.fromLTWH(10, 10, 20, 20);
    Paint opacityPaint = Paint()..color = Colors.white.withOpacity(0.5);
    spriteImg.renderRect(c, rect, overridePaint: opacityPaint);
}

This will render your sprite with 50% opacity.

user_7895450 
class NewComponent extends PositionComponent{
  static final Color _color = Color(0xFFFFFFFF);
  static final Paint _paint = Paint()
    ..color = _color
    ..style = PaintingStyle.fill;

  Sprite? sprite;

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

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    final double colorOpacity = opacity.clamp(0, 1.0);
    _paint.color = _color.withOpacity(colorOpacity);
    sprite?.render(
      canvas,
      size: size,
      overridePaint: _paint,
    );
  }
}

Important details when updating transparency dynamically _paint.color = ? and opacity.clamp(0, 1.0)

user_15138000
Related