CODEWITHSUNDEEP
flutter2dflame
astheras
astheras

Reputation: 23

how can i put sprite into PolygonComponent within the borders?

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

Upvotes: 0

Views: 300

Answers (1)

spydon
spydon

Reputation: 11562

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.

Upvotes: 1

Related Questions