バックグラウンドビルダー

BackgroundBuilder

GameWidgetのbackgroundBuilderプロパティに Widget を指定することで、 背景に表示される内容を指定することができます。

ここで指定した内容は Game.backgroundColor より前面に、ゲーム内の要素よりは後ろに表示されます。

表示する

GameWidgetのbackgroundBuilderプロパティでTextを返します。

  @override
  Widget build(BuildContext context) {
    return GameWidget<BackgroundGame>(
      game: game,
      backgroundBuilder: (context) => const Center(
        child: Text(
          'background',
          style: const TextStyle(
            color: Colors.red,
            decoration: TextDecoration.none,
          ),
        ),
      ),
    );
  }

ゲームでは背景色をグレーにし、中央に四角形を表示します。

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

    await add(
      RectangleComponent(
        size: Vector2.all(100),
        position: size * 0.5,
        anchor: Anchor.center,
        paint: Paint()..color = Colors.white.withAlpha(150),
      ),
    );
  }

  @override
  Color backgroundColor() {
    return Colors.grey.shade700;
  }

グレー背景 → Text → 四角形の順で表示されているのがわかると思います。

この方法で背景画面を変更できます。