如何在 Flame Flutter 中的另一个精灵之上添加一个精灵？

Question

该应用程序有一个使用SpriteComponent 的背景图像，我尝试在背景图像之上添加另一个平铺图像。为什么crate.png 图像不出现在背景图像之上。为什么？

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

void main() async {
  runApp(GameWidget(
    game: CGame(),
  ));
}

class CGame extends FlameGame {
  @override
  Future<void>? onLoad() async {
    SpriteComponent crate = SpriteComponent()
      ..sprite = await loadSprite('crate.png')
      ..size = Vector2(100, 100)
      ..position = Vector2(250, 300);

    add(crate);
    add(Background());   //<== comment this line to see the loaded crate.png
    add(Crate());

    return super.onLoad();
  }
}

class Background extends SpriteComponent with HasGameRef {
  @override
  Future<void>? onLoad() async {
    sprite = await Sprite.load('background.png');
    size = gameRef.size;

    return super.onLoad();
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
  }
}

class Crate extends SpriteComponent with HasGameRef {
  @override
  Future<void>? onLoad() async {
    sprite = await Sprite.load('crate.png');
    size = Vector2(100, 100);
    position = Vector2(200, 200);

    return super.onLoad();
  }
}

Answer 1

您的 crate 将位于后台，因为它加载速度更快，因此添加到组件树的速度更快，要解决此问题，您必须设置 crate 的优先级：

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

void main() async {
  runApp(GameWidget(
    game: CGame(),
  ));
}

class CGame extends FlameGame {
  @override
  Future<void>? onLoad() async {
    add(Background());
    add(Crate());

    return super.onLoad();
  }
}

class Background extends SpriteComponent with HasGameRef {
  @override
  Future<void>? onLoad() async {
    sprite = await Sprite.load('background.png');
    size = gameRef.size;

    return super.onLoad();
  }
}

class Crate extends SpriteComponent with HasGameRef {
  Crate() : super(priority: 1); // <-- This is what changed

  @override
  Future<void>? onLoad() async {
    sprite = await Sprite.load('crate.png');
    size = Vector2(100, 100);
    position = Vector2(200, 200);

    return super.onLoad();
  }
}

组件的默认优先级为 0，优先级越高，组件就越“接近”您，例如更高的 z-index。所以在这里，当我们将 crate 的优先级设置为 1 时，它将始终出现在仍然具有默认优先级 0 的背景前面。

附带说明：您不必在Background 中手动调用render 方法，它是自动完成的。

Answer 2

我可以通过添加来解决问题

 SpriteComponent spriteCompo = SpriteComponent()
      ..sprite = await loadSprite('background.png')
      ..size = size;

    add(spriteCompo);

到CGame 类，但是有一个问题，为什么调用背景类时它不起作用？

工作 sn-p：

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

void main() async {
  runApp(GameWidget(
    game: CGame(),
  ));
}

class CGame extends FlameGame {
  @override
  Future<void>? onLoad() async {

    SpriteComponent spriteCompo = SpriteComponent()
      ..sprite = await loadSprite('background.png')
      ..size = size;

    add(spriteCompo);

    // add(Background());
    add(Crate());

    return super.onLoad();
  }
}

class Background extends SpriteComponent with HasGameRef {
  @override
  Future<void>? onLoad() async {
    sprite = await Sprite.load('background.png');
    size = gameRef.size;

    return super.onLoad();
  }
}

class Crate extends SpriteComponent with HasGameRef {
  @override
  Future<void>? onLoad() async {
    sprite = await Sprite.load('crate.png');
    size = Vector2(100, 100);
    position = Vector2(200, 200);

    return super.onLoad();
  }
}