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

Question

该应用有一个使用 SpriteComponent 的背景图片，我尝试在背景图片之上添加另一个 Tile 图片。为什么 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

我可以通过添加

来解决问题

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

    add(spriteCompo);

到CGameclass，但有一个问题，为什么在调用class后台时它不起作用？

工作片段：

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();
  }
}

Answer 2

您的 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 方法，它会自动完成。

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

How to add a sprite on top of another sprite in Flame Flutter?

flutter

flame