Flameの法則 v1.14.0 対応
Hello World ライフサイクル 四角形 直線 デバッグ表示 円 移動 ジョイスティック テキスト テキストボタン オーバーレイ スプライト アニメーション パララックス タップ パーティクル 物理演算 衝突判定 ポリゴン サウンド エフェクト テキストボックス カスタムペインター スクリーンヒットボックス ルーター プライオリティ キーボードイベント キーボードリスナー カメラ スプライトシート 発光 反転 バリュールート 円弧 スプライトウィジェット スケールモード ポーズ タイムスケール 波紋 アニメーションティッカー ローディングビルダー エラービルダー バックグラウンドビルダー パスファインディング タイマー HSVカラー

PR 第8章にFlameが載ってる模様

マルチプラットフォーム対応 最新フレームワーク Flutter 3入門

ローディングビルダー

2023-07-21

LoadingBuilder

GameWidgetのloadingBuilderプロパティに Widget を指定することで、 ゲームがローディングされるまでの表示を変更することができます。

公式ドキュメント https://docs.flame-engine.org/latest/flame/game_widget.html#GameWidget-loadingBuilder
APIリファレンス https://pub.dev/documentation/flame/latest/game/GameWidget/loadingBuilder.html

表示する

GameWidgetのloadingBuilderプロパティでCircularProgressIndicatorを返します。

loading/page.dart 
  @override
  Widget build(BuildContext context) {
    return GameWidget<LoadingGame>(
      game: game,
      loadingBuilder: (context) => const Center(
        child: CircularProgressIndicator(),
      ),
    );
  }

ローディング中であることがわかりやすいようにGameのonLoadで 10 秒待った後、Loadedを表示します。

loading/game.dart 
  @override
  Future<void> onLoad() async {
    super.onLoad();

    await Future<void>.delayed(
      const Duration(seconds: 10),
    );

    await add(
      TextComponent(
        text: 'Loaded',
        position: Vector2(size.x * 0.5, size.y * 0.5),
        anchor: Anchor.center,
      ),
    );
  }

これでローディング画面が表示できます。

© 2023 tnantoka