プライオリティ

priority

Componentのpriorityを設定することで、描画順を制御できます。

デフォルトは 0 で、値が大きいほど前面になります。CSS のz-indexと同じような使い方です。

描画する

まずは描画するコンポーネントを作ります。

TapCallbacksを指定して、onTapDownでpriorityを変更しています。

またHasGameRefによってgameを参照できています。 「全てのRectが持つpriorityの最大値」+1 を指定することで、最前面に描画されるようになります。

class Rect extends RectangleComponent with HasGameRef, TapCallbacks {
  Rect({super.position, super.paint})
      : super(
          size: Vector2.all(100),
        );

  @override
  void onTapDown(TapDownEvent event) {
    priority =
        game.children.whereType<Rect>().map((e) => e.priority).reduce(max) + 1;
  }
}

そして、このRectを色と位置を変えて追加します。

1.7 以前で使われていたTappable、HasTappablesは非推奨になったので、TapCallbacksを使っています。

class PriorityGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();

    await addAll([
      Rect(position: Vector2(100, 100), paint: BasicPalette.red.paint()),
      Rect(position: Vector2(120, 120), paint: BasicPalette.green.paint()),
      Rect(position: Vector2(140, 140), paint: BasicPalette.blue.paint()),
    ]);
  }
}

これで描画順が変わることが確認できます。