扑动/火焰为什么我的代码不能正常工作，并得到bug

Question

我跟随了最近发布的关于扑动火焰游戏设计的youtube教程(火焰v1.2.0)，所以所有版本都应该是最新的。但是当我写代码的时候，它不像它应该工作。这是一个youtube视频链接，这样你就可以看到它应该如何工作:https://www.youtube.com/watch?v=kknJMhnKYNc

有人可以向我解释为什么我的代码是bug我的角色(它旋转如此之快)，而移动，它可以去外面的地图在底部和我的屏幕右侧。我不能走得更远，因为你是我唯一的希望。下面是我的代码:

void main() {
WidgetsFlutterBinding.ensureInitialized();
Flame.device.fullScreen();
Flame.device.setLandscape();
runApp(GameWidget(game: MyGame()));
}
class MyGame extends FlameGame with HasDraggables {
SpriteComponent background = SpriteComponent();
late SpriteAnimationComponent ghost;
late final JoystickComponent joystick;
bool ghostFlipped = false;
@override
Future<void> onLoad() async {
await super.onLoad();

var ghostImage = await images.load('ghost.png');
//Loading background
add(background
..sprite = await loadSprite('newyork.jpg')
..size = size);
//adding joystick for controlling to Ghost
final buttonPaint = BasicPalette.red.withAlpha(150).paint();
final backgroundPaint = BasicPalette.black.withAlpha(100).paint();
joystick = JoystickComponent(
knob: CircleComponent(radius: 30, paint: buttonPaint),
background: CircleComponent(radius: 100, paint: backgroundPaint),
margin: const EdgeInsets.only(left: 40, bottom: 40));
add(joystick);
//Loading ghost character
var ghostAnimation = SpriteAnimation.fromFrameData(
ghostImage,
SpriteAnimationData.sequenced(
amount: 4, stepTime: 0.17, textureSize: Vector2(32, 32)));
ghost = SpriteAnimationComponent()
..animation = ghostAnimation
..size = Vector2(120,120)
..position = Vector2(500, 250);
//ghost.flipHorizontallyAroundCenter();
add(ghost);
}
@override
void update(double dt) {
super.update(dt);
bool moveUp = joystick.relativeDelta[1] < 0;
bool moveDown = joystick.relativeDelta[1] > 0;
bool moveLeft = joystick.relativeDelta[0] < 0;
bool moveRight = joystick.relativeDelta[0] > 0;
double ghostVectorX = (joystick.relativeDelta * 300 * dt) [0];
double ghostVectorY = (joystick.relativeDelta * 300 * dt) [1];
//When ghost is moving on X direction
if((moveLeft && ghost.x > 0) || (moveRight && ghost.x < size[0])) {
ghost.position.add(Vector2(ghostVectorX,0));
}
//when ghost is moving on Y direction
if((moveUp && ghost.y > 0) || (moveDown && ghost.y < size[1])){
ghost.position.add(Vector2(0, ghostVectorY));
}
if(joystick.relativeDelta[0] < 0 && ghostFlipped) {
ghostFlipped = true;
ghost.flipHorizontallyAroundCenter();
}
if(joystick.relativeDelta[0] > 0 && !ghostFlipped) {
ghostFlipped = false;
ghost.flipHorizontallyAroundCenter();
}
}
}

Answer 1

我不知道你说的"旋转太快"是什么意思，但我猜动画播放得太快了?要解决这个问题，将stepTime设置为更高的值(这里是0.17):

SpriteAnimationData.sequenced(
amount: 4, stepTime: 0.17, textureSize: Vector2(32, 32)));

为了解决幽灵能够退出到右边和底部的问题，你必须在检查屏幕尺寸时考虑到幽灵的宽度和高度。默认的锚点位于左上角，所以这是检查位置的地方。

在下面的代码片段中，您可以看到我如何将ghost.width和ghost.height添加到针对游戏大小的检查中:

if((moveLeft && ghost.x > 0) || (moveRight && ghost.x + ghost.width < size.x)) {
ghost.position.add(Vector2(ghostVectorX,0));
}
//when ghost is moving on Y direction
if((moveUp && ghost.y > 0) || (moveDown && ghost.y + ghost.height < size.y)){
ghost.position.add(Vector2(0, ghostVectorY));
}