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

问题描述 投票:0回答:2

该应用程序有一个使用

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();
  }
}
flutter flame
2个回答
3
投票

你的箱子会在背景后面,因为它加载速度更快,因此会更快地添加到组件树中,为了解决这个问题,你必须设置箱子的优先级:

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 的背景之前。

还有一个旁注:你不必在

render
中手动调用
Background
方法,它是自动完成的。


0
投票

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

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

    add(spriteCompo);

CGame
类,但是有一个问题,为什么在调用类Background时不起作用?

工作片段:

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();
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.