Weird Joystick drawing issue

[klloggss]

Description

So my Joystick is only drawn normally if I start my program two times or more often in debug. Otherwise it's drawn on the top. For example if I set the top and bottom margin to 0, you can see that the y-coord of the Joystick is the screenheight. In profile and release mode it's the same.

Development environment

flame: 1.0.0-rc4 flame_forge2d: ^0.5.0-rc1

Flutter doctor:

 [√] Flutter (Channel stable, 1.20.4, on Microsoft Windows [Version 10.0.18363.1256], locale de-DE)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[!] Android Studio (version 4.0)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] IntelliJ IDEA Ultimate Edition (version 2019.3)
[√] Connected device (1 available)

Runtime

This issue is related to running on which platform? (Select all that apply)

• [yes] Android :android:
• [didn't try] iOS :apple:
• [didn't try] Web :browser:

Minimal reproducible code (Required for bugs)

MyGame Class:

joystick = GameJoystick(margin: EdgeInsets.only(left: tileSize*5*viewport.scale);

GameJoystick Class:

final EdgeInsets margin;

  GameJoystick({this.margin}) : super(
    priority: 0,
    directional: JoystickDirectional(
      margin: margin,
      size: 80, // optional
      color: Colors.white60,
    ),
  );

[erickzanardo]

Please, can you post the full minimal reproducible code? It seems that you didn't informed all of the code, we need to have some snippets that we would be able to just copy it from here, paste it in a project, and see to problem happening.

[klloggss]

main.dart

import 'package:flame/flame.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'my_game.dart';

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Flame.util.fullScreen();
  await Flame.util.setOrientation(DeviceOrientation.portraitUp);
  MyGame myGame = MyGame();

  runApp(
      MaterialApp(
        title: 'Forge2D-Test',
        home: Scaffold(body: GameWidget(game: myGame)),
        debugShowCheckedModeBanner: false,
      )
  );
}

my_game.dart

import 'package:flame/gestures.dart';
import 'package:flame_forge2d/flame_forge2d.dart';
import 'package:flame_forge2d/forge2d_game.dart';
import 'package:flutter/cupertino.dart' hide Image;
import 'package:flutter/material.dart' hide Image;
import 'package:forge2d/forge2d.dart';

import 'game_joystick.dart';

class MyGame extends Forge2DGame with MultiTouchDragDetector{

  MyGame() : super(
      scale: 1,
      gravity: Vector2(0.0, 0.0)
  ){
    GameJoystick joystick = GameJoystick(margin: EdgeInsets.only(left: 0));

    add(joystick);

  }
}

game_joystick.dart

import 'package:flame/components/joystick/joystick_component.dart';
import 'package:flame/components/joystick/joystick_directional.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class GameJoystick extends JoystickComponent{

  final EdgeInsets margin;

  GameJoystick({this.margin}) : super(
    priority: 0,
    directional: JoystickDirectional(
      margin: margin,
    ),
  );

}

[klloggss]

and I changed the forge2d version to : flame_forge2d: ^0.6.0-rc1

[klloggss]

This issue doesn't occur on flame version: flame: 1.0.0-rc1

[klloggss]

Update: It's still appearing in

flame: 1.0.0-rc5 flame_forge2d: ^0.6.0-rc2

Could you please help me?

[spydon]

@klloggss is the behaviour the same if you run the GameWidget directly in runApp? Like this:

  runApp(
    GameWidget(
      game: myGame,
    ),
  );

[klloggss]

No it is the same, if you run it in Release Mode for example.

[erickzanardo]

@klloggss after some thought, we noted that you are adding the joystick component on the game contructor. The size of the game is not ready there yet, you need to add your components using the onLoad of the game.

I am going to close this issue, but if you still find problems with that approach let us know and we can reopen this.