テキストボタン

2023-05-03

ButtonComponent

テキストボタンを表示するにはButtonComponentを使います。

button（普通の表示）とbuttonDown（クリック中の表示）に任意のPositionComponentを指定できますが、ここではテキストを指定することで、テキストボタンにします。

クリック時の処理はonPressedに指定します。

公式ドキュメント https://docs.flame-engine.org/latest/flame/inputs/other_inputs.html#buttoncomponent
APIリファレンス https://pub.dev/documentation/flame/latest/input/ButtonComponent-class.html

動かす

メンバーを用意します。ボタンが押された数を表示するために _textと_countを使います。

button/game.dart

  late final TextComponent _text;
  var _count = 0;

_textを初期化してaddします。

button/game.dart

    _text = TextComponent(
      text: '0',
      position: Vector2(size.x * 0.5, size.y * 0.6),
      anchor: Anchor.center,
    );
    await add(_text);

updateで_countを_textに反映します。

button/game.dart

  @override
  void update(double dt) {
    super.update(dt);

    _text.text = _count.toString();
  }

主役のボタンです。クリック中は色を変えて、クリック時の処理ではカウントアップしています。

button/game.dart

    await add(
      ButtonComponent(
        position: Vector2(size.x * 0.5, size.y * 0.5),
        onPressed: () => _count++,
        button: TextComponent(
          text: 'Button',
          textRenderer: TextPaint(
            style: const TextStyle(
              fontSize: 32,
              color: Colors.white,
            ),
          ),
        ),
        buttonDown: TextComponent(
          text: 'Button',
          textRenderer: TextPaint(
            style: const TextStyle(
              fontSize: 32,
              color: Colors.grey,
            ),
          ),
        ),
        anchor: Anchor.center,
      ),
    );

これでボタンが動くようになりました。