0

Background

Assume a game using fog-of-war drawn using Flutter Web Canvas.

Each vessel has a range-of-sight. This range-of-sight is "removed" from the fog-of-war and appears as white background.

The range-of-sight as well as the fog-of-war are Paths. These Paths get subtracted.

Problem

The sight-of-range is only removed / cut out of the fog-of-war when it intersects with the border of the canvas.

Sometimes, the range-of-sight gets cut out of the fog-of-war for a moment.

The render code is always called, but the result is not always rendered.

Everything else, all the vessels are moving and are rendered correctly.

The problem seems to affect the Paths only.

Illustrations

Range-of-sight NOT subtracted from FOG. (Ignore the red circle.)

Range-of-sight NOT subtracted from FOG

Range-of-sight subtracted from FOG. But only when intersecting with canvas border. (Ignore the red circle.)

Range-of-sight subtracted from FOG

Code

FogPainter():

class FogPainter extends CustomPainter {
  final TopViewController cTopView;
  FogPainter(this.cTopView);

  @override
  void paint(Canvas canvas, Size size) {

    final fog = Paint()..color = Colors.grey.shade300;

    var pathsRemove = Path();

    cTopView.getVesselsPlayer().forEach((vessel) {

    // IS PRINTED ALWAYS.
    // WHETHER INTERSECTING WITH BORDER OR NOT.
    print('INSIDE LOOP');

    pathsRemove.addOval(Rect.fromCircle(
      center: Offset(vessel.x, vessel.y) + cTopView.offset,
      radius: vessel.sensorSight.topViewRadius));
    });

    // pathsRemove.close();

    var pathAll = Path.combine(
    PathOperation.difference,
    Path()..addRect(Rect.fromLTWH(0, 0, size.width, size.height)),
    pathsRemove)
    ..close();

    canvas.drawPath(pathAll, fog);
    
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Invocation of FogPainter():

CustomPaint(
  isComplex: true,
  willChange: true,
  painter: FogPainter(cTopView),
  foregroundPainter: TopViewPainter(cTopView),
))
Dabbel
  • 2,468
  • 1
  • 8
  • 25

0 Answers0