Flutter下使用Flame游戏引擎渲染视差背景图片不显示问题求解

核心问题原因 #

• 重复初始化视差组件：将ParallaxComponent的实例化逻辑放在了render方法中，render方法每帧执行一次，会不断重置视差组件，图片资源永远无法完成加载
• 未等待异步资源加载：ParallaxImage加载本地图片是异步操作，资源未加载完成就调用渲染方法会显示空白
• 缺少组件更新逻辑：ParallaxComponent依赖update方法计算视差滚动偏移，只调用render方法无法正常工作
• 主游戏初始化逻辑时序错误：异步初始化方法未完成时就触发渲染，可能出现空引用异常

修正后代码 #

自定义BackGround类 #

class BackGround extends Component {
  late ParallaxComponent _parallaxComponent;

  // 异步初始化视差组件
  Future<void> init() async {
    _parallaxComponent = await ParallaxComponent.load(
      [
        'Layer_0010_1.png',
        'Layer_0009_2.png',
        'Layer_0008_3.png',
        'Layer_0006_4.png',
        'Layer_0005_5.png',
        'Layer_0003_6.png',
        'Layer_0002_7.png',
        'Layer_0001_8.png',
        'Layer_0000_9.png',
      ],
      baseSpeed: Offset(100, 0),
      layerDelta: Offset(20, 0),
      // 若需要全屏背景可取消下方注释，自动适配屏幕尺寸
      // size: size,
    );
    // 初始化完成后完成组件挂载
    _parallaxComponent.onMount();
  }

  @override
  void update(double dt) {
    super.update(dt);
    // 每帧更新视差组件滚动状态
    _parallaxComponent.update(dt);
  }

  @override
  void render(Canvas c) {
    super.render(c);
    // 组件初始化完成后再执行渲染
    if(_parallaxComponent.isMounted) {
      _parallaxComponent.render(c);
    }
  }
}

主游戏类 #

class MainGame extends BaseGame with TapDetector, HasWidgetsOverlay {
  BackGround backback = BackGround();
  final storage;
  Size? screenSize;

  MainGame(this.storage) {
    _init();
  }

  Future<void> _init() async {
    // 先获取屏幕尺寸完成适配
    screenSize = await Flame.util.initialDimensions();
    resize(screenSize!);
    // 等待背景资源加载完成
    await backback.init();
    // 将背景组件添加到游戏组件树，后续系统会自动调用update、render逻辑，无需手动处理
    add(backback);
  }
}

额外注意事项 #

• 确认所有图片资源已经在pubspec.yaml的assets字段中正确声明，路径和文件名与代码中完全匹配
• 不要在render方法中执行任何初始化或者耗时逻辑，render方法仅负责渲染操作

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