ルーター

RouterComponent

RouterComponentを使うと、複数の画面を切り替えることができます。

MaterialAppのinitialRouteとroutesと同じような使い方です。

ちなみに、日本ではルーターと発音されがちなrouterですが、ラウターの方が正しい発音に近いようですね。

動かす

まずは遷移する先を 2 つ作ります。 これはComponentを継承して作れば OK です。

画面遷移は gameRef.router.pushNamed、戻るのはgameRef.router.popを使います。

class FirstRoute extends Component with HasGameRef<RouterGame> {
  @override
  Future<void> onLoad() async {
    super.onLoad();

    await add(
      ButtonComponent(
        position: Vector2(game.size.x * 0.5, game.size.y * 0.5),
        onPressed: () => gameRef.router.pushNamed('second'),
        button: TextComponent(
          text: 'Go to Second',
        ),
        anchor: Anchor.center,
      ),
    );
  }
}

class SecondRoute extends Component with HasGameRef<RouterGame> {
  @override
  Future<void> onLoad() async {
    super.onLoad();

    await add(
      ButtonComponent(
        position: Vector2(game.size.x * 0.5, game.size.y * 0.5),
        onPressed: () => gameRef.router.pop(),
        button: TextComponent(
          text: 'Back',
        ),
        anchor: Anchor.center,
      ),
    );
  }
}

そしてその 2 つをRouterComponentに登録します。

class RouterGame extends FlameGame {
  late final RouterComponent router;

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

    router = RouterComponent(
      routes: {
        'first': Route(FirstRoute.new),
        'second': Route(SecondRoute.new),
      },
      initialRoute: 'first',
    );
    await add(router);
  }
}

これでFirstRouteとSecondRouteを行き来できるようになりました。