Flame游戏中碰撞触发Flutter弹窗且保留游戏状态的实现方案

核心问题分析 #

• Star类中通过final gameObject = PlayerWithBG();创建了全新的游戏实例，这个实例和GameWidget中绑定的游戏实例完全独立，它的overlays没有注册"Question"构建器，调用showQuestion自然会抛出未知Overlay的断言错误。
• Flame组件无法直接获取Flutter的context，因此Navigator.push不可行，继续使用Flame的Overlay方案是正确选择。

具体修复步骤 #

1. 修正Star类的游戏实例获取方式 #

删除Star类中多余的PlayerWithBG实例，通过gameRef获取当前运行的游戏实例（指定泛型避免类型转换）：

import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flame/sprite.dart';
import 'package:flutter/material.dart';
import 'package:khalooq/Game/PlayerWithBG.dart';
import '../Questions/firstLevelQuestions.dart';
import 'helpers/directions.dart';

class Star extends SpriteAnimationComponent
    with HasGameRef<PlayerWithBG>, CollisionCallbacks { // 指定泛型为PlayerWithBG
  Star(Vector2 position)
      : super(size: Vector2.all(50), position: position, anchor: Anchor.center);

  // 移除这行：final gameObject = PlayerWithBG();

  late final SpriteAnimation _rotateAnimation;
  final double _animationSpeed = .3;
  Direction direction = Direction.right;

  @override
  Future<void> onLoad() async {
    super.onLoad();
    await _loadAnimations().then((_) => {animation = _rotateAnimation});
    add(CircleHitbox());
  }

  Future<void> _loadAnimations() async {
    final spriteSheet = SpriteSheet.fromColumnsAndRows(
        image: await gameRef.images.load('stars1.png'), columns: 10, rows: 1);

    _rotateAnimation = spriteSheet.createAnimation(
        row: 0, stepTime: _animationSpeed, from: 0, to: 4);
  }

  @override
  void onCollision(Set<Vector2> intersectionPoints, PositionComponent other) {
    super.onCollision(intersectionPoints, other);
    // 通过gameRef调用当前游戏实例的方法
    gameRef.showQuestion(); 
    removeFromParent();
  }
}

2. 增强PlayerWithBG的showQuestion健壮性（可选） #

添加Overlay存在性检查，避免意外错误：

void showQuestion() {
  // 先确认Overlay构建器已注册
  if (!overlays.containsKey('Question')) {
    return;
  }
  if (overlays.isActive('Question')) {
    overlays.remove('Question');
    resumeEngine();
  } else {
    overlays.add('Question');
    pauseEngine();
  }
}

3. 保留GameWidget的Overlay配置 #

当前GameWidget的overlayBuilderMap配置正确，无需修改：

GameWidget(
  game: game..paused = false,
  overlayBuilderMap: {
    'Question': (BuildContext context, PlayerWithBG game) {
      return Center(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.orange,
          child: Center(child: Text('This is a question')),
        ),
      );
    },
  },
)

额外拓展：使用Navigator跳转页面（可选） #

如果需要跳转到独立Flutter页面而非Overlay，可以通过回调传递context：

1. 在PlayerWithBG中添加回调：

late VoidCallback onShowQuestionPage;

2. 在Star的碰撞方法中调用：

@override
void onCollision(Set<Vector2> intersectionPoints, PositionComponent other) {
  super.onCollision(intersectionPoints, other);
  gameRef.onShowQuestionPage();
  removeFromParent();
}

3. 在GameWidget所在的State中绑定回调：

final game = PlayerWithBG();

@override
void initState() {
  super.initState();
  game.onShowQuestionPage = () {
    Navigator.push(context, MaterialPageRoute(builder: (context) => firstLevelQuestion()));
  };
}

内容的提问来源于stack exchange，提问作者Sarah