Flutter/Flame Why my code is not working normally and getting buggy

Question

I followed a youtube tutorial about flutter flame game design which was published recently (Flame v1.2.0) so all the versions should be up to date. But when i write the code its not working like it should. Here is a youtube link of video so you can see how it should work: https://www.youtube.com/watch?v=kknJMhnKYNc

Can someone please explain to me why my code is bugging my character (it spins so fast) while moving and it can go outside of map at bottom and right side of my screen. I cant go further because of this and you are my only hope. Here is my code:

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

score 0 · Answer 1 · answered Jun 24 '22 at 09:35

I'm not sure what you mean with "spins so fast", but I'm guessing that the animation is playing too fast? To resolve that, set the stepTime to something higher (where you have 0.17 here):

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

To solve the problem you're having with the ghost being able to exit to the right and in the bottom you have to add a check with the ghosts width and height taken into account when you check against the screen size. The default anchor is top left, so that is where the position will be checked from.

In the following code snippet you can see how I've added ghost.width and ghost.height to the check against the game size:

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

Flutter/Flame Why my code is not working normally and getting buggy

1 Answers1