タップ

2023-05-03

TapCallbacks

TapCallbacksミックスインを使うとタップを検出できます。

例えばonTapDownにはタップしたときの処理を書くことができます。

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

なお、よりジェスチャー検出機能の一部として TapDetector というミックスインもありますが、以下の記述があるので、基本的には TapCallbacks を使う方が良いようです。

This document describes the new tap events API. The old (legacy) approach, which is still supported, is described in Gesture Input.

TapCallbacksはcontainsLocalPointメソッドを実装しているコンポーネントでしか使えないので、それが満たせない場合などにTapDetectorを使うことになるでしょう。

TapDetetorについては以下を参照してください。

event.localPositionをinfo.eventPosition.gameに変更すればTapCallbacksと同じように使えます。

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

動かす

Game クラスにwith TapCallbacksを追加し、onTapDownメソッドでタップ時の処理を書きます。
今回はタップした場所に円を表示しています。

tap/game.dart

import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame/game.dart';

class TapGame extends FlameGame with TapCallbacks {
  @override
  Future<void> onLoad() async {
    super.onLoad();
  }

  @override
  void onTapDown(TapDownEvent event) {
    super.onTapDown(event);

    add(
      CircleComponent(
        position: event.localPosition,
        radius: 10,
        anchor: Anchor.center,
      ),
    );
  }
}

このようにしてタップに反応するゲームを作ることができます。