game_interface.md

Game Interface

This is a GameComponent

The way you can draw components like a life bar or settings buttons. In other words, anything that you may add to the game interface.

How to use

First, you need to create an interface component. In order to create interface components, use InterfaceComponent:

    InterfaceComponent(
      // Sprite to be rendered.
      sprite: Sprite.load('blue_button1.png'), 
      // Sprite to be rendered while its being pressed
      spriteSelected: Sprite.load('blue_button2.png'), 
      size: Vector2(40,40),
      id: 5,
      // Position on screen where it will be rendered
      position: Vector2(150, 20), 
      onTapComponent: () {
        print('Test button');
      },
    )

Then, add your component to the game interface:

class MyInterface extends GameInterface {
  @override
  Future<void> onLoad() {
    add(InterfaceComponent(
      sprite: Sprite.load('blue_button1.png'),
      spriteSelected: Sprite.load('blue_button2.png'),
      size: Vector2(40,40),
      id: 5,
      position: Vector2(150, 20),
      onTapComponent: () {
        print('Test button');
      },
    ));
    super.onLoad();
  }
}

Note: It is recommended to add it to the onLoad method because there you will have access to the size property of the game, which is helpful to calculate the position that the component will be rendered on the screen, if needed.

Finally, add your Interface to the game by passing it to the interface property in BonfiredTiledWidget:

@override
  Widget build(BuildContext context) {
    return BonfireWidget(
     ...
      interface: MyInterface(),
     ...
    );
  }

If you want to create a more complex and customizable interface component, check this example.

Using Widgets

You can use Flutter widgets to create your game interface through overlayBuilderMap in BonfireWidget:

@override
  Widget build(BuildContext context) {
    return BonfireWidget(
      ...
      overlayBuilderMap: {
        'buttons': (BonfireGame game, BuildContext context) {
          return MyWidget();
        }
      }
      initialActiveOverlays: [
        'buttons'
      ],
    );
  }

To show or hide overlays programmatically, use the following:

  /// Show overlay
  gameRef.overlayManager.add('overlayName');

  /// Hide overlay
  gameRef.overlayManager.remove('overlayName');