skip to Main Content

I’m adding a joystick and other hud buttons to the game with the highest priority but they are always hidden by the game scene once it is loaded.
I ensured them to be added after adding the scene, but it never works.

In game.dart file that extends FlameGame:

  late JoystickComponent joystick;
  late HudButtonComponent jumpButton;
  late HudButtonComponent attackButton;

  @override
  FutureOr<void> onLoad() async {
    health = maxHealth;
    if (!_isAlreadyLoaded) {
      await images.loadAllImages();

      _loadFloor();

      if (showControls) {
        addJoystick();
        addJumpButton();
        addAttackButton();
      }
      _isAlreadyLoaded = true;
    }

    return super.onLoad();
  }

adding joystick (other hud buttons also the same):

    void addJoystick() {
    joystick = JoystickComponent(
      priority: 10,
      knob: SpriteComponent(
        sprite: Sprite(
          images.fromCache('HUD/Knob.png'),
        ),
      ),
      knobRadius: 64,
      background: SpriteComponent(
        sprite: Sprite(
          images.fromCache('HUD/Joystick.png'),
        ),
      ),
      margin: const EdgeInsets.only(left: 128, bottom: 32),
    );

    add(joystick);
  }

loading floor (floor is loaded in game.dart):

    void _loadFloor() {
    Future.delayed(
      const Duration(milliseconds: 1000),
      () {
        Floor world = Floor(
          player: player,
          floorName: floorNames[currentFloorIndex],
        );

        cam = CameraComponent.withFixedResolution(
          world: world,
          width: 640,
          height: 340,
        );
        cam.viewfinder.anchor = Anchor.topLeft;

        addAll([cam, world]);
      },
    );
  }

2

Answers


  1. Follow this code instruction,

    void _loadFloor() {
      Future.delayed(
        const Duration(milliseconds: 1000),
        () {
          Floor world = Floor(
            player: player,
            floorName: floorNames[currentFloorIndex],
          );
    
          cam = CameraComponent.withFixedResolution(
            world: world,
            width: 640,
            height: 340,
          );
          cam.viewfinder.anchor = Anchor.topLeft;
    
          // Add the game scene first
          addAll([cam, world]);
    
          // Then add joystick and HUD buttons
          if (showControls) {
            addJoystick();
            addJumpButton();
            addAttackButton();
          }
        },
      );
    }
    
    Login or Signup to reply.
  2. You have two cameras in your game, I would suggest that you remove your newly created camera and use the built-in one instead. And you want to add your huds to the viewport, and not to the game.

        void _loadFloor() {
          world = Floor(
            player: player,
            floorName: floorNames[currentFloorIndex],
          );
    
          camera = CameraComponent.withFixedResolution(
            world: world,
            width: 640,
            height: 340,
          );
          camera.viewfinder.anchor = Anchor.topLeft;
      }
    
      void addJoystick() {
        joystick = JoystickComponent(
          knob: SpriteComponent(
            sprite: Sprite(
              images.fromCache('HUD/Knob.png'),
            ),
          ),
          knobRadius: 64,
          background: SpriteComponent(
            sprite: Sprite(
              images.fromCache('HUD/Joystick.png'),
            ),
          ),
          margin: const EdgeInsets.only(left: 128, bottom: 32),
        );
    
        camera.viewport.add(joystick);
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search