flame-engine/flame

Regarding the issue of JoystickComponent

Closed this issue · 2 comments

Moyout commented

What happened?

I want to use JoystickComponent to control player movement, cooperate with the camera to follow the player. Here is my code:

class DefaultWorld extends World with HasGameReference<MyGame> {
  static const String routeName = "DefaultWorld";
  late JoystickComponent joystick = JoystickComponent(
    priority: 2,
    size: 100,
    position: Vector2(120, 100),
    knob: CircleComponent(
      radius: 25,
      paint:
          Paint()
            ..color = Colors.white.withAlpha(100)
            ..style = PaintingStyle.fill,
    ),
    background: CircleComponent(paint: Paint()..color = Colors.white.withAlpha(50), radius: 50),
  );

  late var player = Character(joystick: joystick, priority: 0)..position = Vector2(200, 50)  ;

  @override
  Future<void> onLoad() async {
    add(player);
    game.camera
      ..viewfinder.visibleGameSize = Vector2(game.size.x, game.size.y)
      ..follow(player, horizontalOnly: false)
      ..setBounds(Rectangle.fromLTRB(game.size.x / 2, -50, game.size.x, 50));
    // add(PositionComponent(size: game.size, children: [player, joystick]));
    add(joystick);

  }
}

When I tried to add JoystickComponent to World, an error occurred:

[ERROR:flutter/runtime/dart_vm_initializer.cc(40)] Unhandled Exception: 'package:flame/src/components/mixins/component_viewport_margin.dart': Failed assertion: line 36 pos 12: 'parent is ReadOnlySizeProvider': The parent must provide a size.

If I use “add (PositionComponent (size: game. size, children: [player, joystick]));”， In this way, when Joystick controls the camera to follow the player, Joystick will not be visible beyond the screen.

I want to fix the position of Joystick, it should not follow the camera's perspective.

If I add "joystick" to the MyFlameGame class, its position will not move with the camera's perspective, which is the result I want. However, there is a problem with "priority": "player" is always above the "joystick" level. That is to say, when I control the player to the "joystick" position, it will be strange, as if the player covers the "joystick" level, which should be above the "player" level. I tried to set the "priority" of both, but it had no effect.

What do you expect?

As mentioned above

How can we reproduce this?

No response

What steps should take to fix this?

No response

Do have an example of where the bug occurs?

No response

Relevant log output



Execute in a terminal and put output into the code block below


Output of: flutter doctor -v


Affected platforms


All


Other information


No response


Are you interested in working on a PR for this?


    

  •  I want to work on this
    • 

spydon commented 
The joystick should be added to the viewport, since it shouldn't be affected by camera movement.


camera.viewport.add(joystick);


I can also recommend our examples page, there should be multiple joystick examples in there.
Moyout commented 
Okay, my problem has been resolved. Thank you 😊
  • 🎉1