how can i put sprite into PolygonComponent within the borders?

user3478472 0
Viewed 15

pls help to put sprite inside the borders. The desired result on screen 2. What i have now on scr 1. Versions Flutter 3.3.1 Flame 1.3.0

      Future<void> onLoad() async {
        super.onLoad();
        size.setValues(cellSize, cellSize);
        //  anchor = Anchor.center;
        PolygonComponent cell = PolygonComponent.relative(
          [
            Vector2(0.0, -1.0),
            Vector2(-1.0, -0.5),
            Vector2(-1.0, 0.5),
            Vector2(0.0, 1.0),
            Vector2(1.0, 0.5),
            Vector2(1.0, -0.5),
          ],
          parentSize: size,
          //angle: 45,
    
          paint: Paint()
            ..color = Colors.white
            ..style = PaintingStyle.stroke
            ..strokeWidth = 1,
        );
        add(cell);
    
        SpriteComponent sprite = SpriteComponent()
          ..sprite = await Sprite.load('grass_1.png')
          ..size = Vector2(cellSize, cellSize);
    
        cell.add(sprite);
      }

screen

flame 2d flutter
1 Answers

To do this you need to clip the part that is rendered in the SpriteComponent, this is done by extending the SpriteComponent and overriding its render method.

class MyClippedComponent extends SpriteComponent {
  ...
  
  @override
  void render(Canvas canvas) {
    canvas.clipPath(Your polygon as a path);
    super.render(canvas);
  }
}

In the next version of Flame there will be a component that does this for you by adding it as a parent to the component that you want to clip, it's called the ClipComponent.

The ClipComponent can be used today too if you add Flame as a git dependency and depend on the main branch.

spydon0
Related