キーボードイベント

2023-05-22

KeyboardEvents

KeyboardEventsミックスインを使うとキーボード入力を処理できます。

公式ドキュメント https://docs.flame-engine.org/latest/flame/inputs/keyboard_input.html
APIリファレンス https://pub.dev/documentation/flame/latest/input/KeyboardEvents-mixin.html

動かす

まずはキーボードで動かす四角形を準備します。 updatevx/vyを加算することで、毎フレーム移動します。

  late RectangleComponent _rect;

  var _vx = 0.0;
  var _vy = 0.0;
  final _speed = 100.0;

  @override
  Future<void> onLoad() async {
    super.onLoad();

    _rect = RectangleComponent(
      position: Vector2(size.x * 0.5, size.y * 0.5),
      size: Vector2.all(100),
      anchor: Anchor.center,
    );
    await add(_rect);
  }

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

    _rect.position += Vector2(_vx, _vy) * dt;
  }

次にKeyboardEventsミックスインを使ってキーボード入力を処理します。

onKeyEventの中で、キーが離されたらvx/vyを 0 に、矢印キーが入力されていたらvx/vyを ±1 にしています。

  @override
  KeyEventResult onKeyEvent(
      RawKeyEvent event, Set<LogicalKeyboardKey> keysPressed) {
    if (event is RawKeyUpEvent) {
      _vx = 0;
      _vy = 0;
      return KeyEventResult.handled;
    }

    if (keysPressed.contains(LogicalKeyboardKey.arrowLeft)) {
      _vx = -_speed;
      return KeyEventResult.handled;
    } else if (keysPressed.contains(LogicalKeyboardKey.arrowRight)) {
      _vx = _speed;
      return KeyEventResult.handled;
    }
    if (keysPressed.contains(LogicalKeyboardKey.arrowUp)) {
      _vy = -_speed;
      return KeyEventResult.handled;
    } else if (keysPressed.contains(LogicalKeyboardKey.arrowDown)) {
      _vy = _speed;
      return KeyEventResult.handled;
    }

    return KeyEventResult.ignored;
  }

これでキーボード入力を処理できるようになりました。

© 2023 tnantoka