ジョイスティック

2023-05-02

JoystickComponent

JoystickComponentを使うと画面上にバーチャルスティックを簡単に表示することができます。

knobでスティック部分、backgroundで背景を指定します。位置はmarginかpositionで調整します。

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

四角形を操作する

それではやってみます。

まずはメンバーを用意します。

joystick/game.dart

  late final RectangleComponent _rect;
  late final JoystickComponent _joystick;
  final _speed = 10.0;

次に四角形を初期化します。

joystick/game.dart

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

ジョイスティックの初期化をすれば準備は終わりです。

joystick/game.dart

    _joystick = JoystickComponent(
      knob: CircleComponent(
        radius: 16,
        paint: BasicPalette.white.withAlpha(200).paint(),
      ),
      background: CircleComponent(
        radius: 40,
        paint: BasicPalette.white.withAlpha(100).paint(),
      ),
      margin: const EdgeInsets.only(
        left: 16,
        bottom: 32,
      ),
    );
    await add(_joystick);

後はupdateで値を読み取り、Rect の位置に反映させます。

ここではdeltaで得られる Vector2 をそのまま利用しています。
deltaは傾きに応じた値（0〜± ジョイスティックのサイズ）が返ってくるので、これを速度として使うと傾きによって動く速さが変わります。
それを避けたい場合はdeltaの値を見て処理するか、代わりにdirectionで取れる向きを使うなどの対応が必要になります。

joystick/game.dart

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

    _rect.position += _joystick.delta * _speed * dt;
  }

これでコンポーネントを動かせるようになりました。