该应用程序有一个使用
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();
}
}
你的箱子会在背景后面,因为它加载速度更快,因此会更快地添加到组件树中,为了解决这个问题,你必须设置箱子的优先级:
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
方法,它是自动完成的。
我可以通过添加来解决问题
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();
}
}