Does Componenet can have multiple buttons?

[doowonee]

Hello I'm making class HeaderContainer extends PositionComponent which has 3 SpriteButtonComponent as fields. But When I click the button inside MyComponenet onPressed does not work. I add a log inside the anonymous function and it showed me nothing.

When I add three buttons directly in FlameGame and It works. I don't understand Why child component HeaderContainer can not propagate click event to child components

Here is FlamgeGame.onLoad()

   add(HeaderContainer()
      ..positionType = PositionType.viewport
      ..size = Vector2(size.x, 60));

And HeaderContainer.onLoad()

class HeaderContainer extends PositionComponent
    with HasGameRef<MyGame>, Tappable {
  late final SpriteButtonComponent _buttonPause;
...
...
...

_buttonPause = ButtonComponent(
        onPressed: () {
          log('_buttonPause clicked!');
          gameRef.pause();
        },
        button: SpriteComponent()
          ..sprite = await gameRef.loadSprite(
            'pause.png',
            srcPosition: Vector2(0, 0),
            srcSize: Vector2(48, 48),
          )
          ..debugMode = true
          ..decorator.replaceLast(
              PaintDecorator.tint(const Color.fromARGB(255, 255, 255, 255))));
    add(_buttonPause
      ..anchor = Anchor.topLeft
      ..size = Vector2(32, 32)
      ..position = Vector2(20 + 30, size.y / 2 + 30));

[spydon]

You shouldn't have Tappable on the header container and make sure that the size of the header container covers all the buttons.

[doowonee]

And I add button to flamegame without HeaderContainer and It works event position type is viewport. I think there is something about child component which has button with position type is viewport

FlamgeGame.onLoad()

var _buttonPause = SpriteButtonComponent(
        onPressed: () {
          log('_buttonPause clicked 클릭');
          pause();
        },
        button: await loadSprite(
          'pause.png',
          srcPosition: Vector2(0, 0),
          srcSize: Vector2(48, 48),
        ))
      ..decorator.replaceLast(
          PaintDecorator.tint(const Color.fromARGB(255, 255, 255, 255)));
    add(_buttonPause
      ..positionType = PositionType.viewport
      ..anchor = Anchor.topLeft
      ..size = Vector2(32, 32)
      ..position = Vector2(40, 70));

[doowonee]

I found something! If I remove below code from FlamgeGame.onLoad() then buttons work. But I have to use camera follow function...

// camera.speed = 1;
// camera.followComponent(player, worldBounds: Map.bounds);

[doowonee]

I found the reason! I throughout flame game engine didn't propagate click event to child component HeaderContainer but it wasn't. The button was not even clicked! see screenshot.

HeaderContainer is on top of screen. I enalbed debug mode and the position of button is showing absolute position from the screen but actual position is not (maybe -200, -800). So I understand what is going on but I don't have idea to handle this.

[spydon]

Try setting the HeaderContainer to positionType = PositionType.viewport and the buttons as positionType = PositionType.game.

What you also could do is using the CameraComponent (the next generation camera) instead of the camera built into Flame game.

[doowonee]

Thank for your answer. Actually I did I change the code to use CameraComponent referncing racing game of flame example.

But now I'm struggling about word bounds. I use setBounds same as world bound size but the behavior is different with prevous version of camera camera.followComponent(player, woldbound). Could you give me some advice?

How can I make camera following on center of screen and when player approaches edge of screen then focus the player on edge not on center.