Adding components to the world from a different file in Flutter/Flame Game

Question

I have several components to my game that involve layering. I also plan to have multiple levels, which change where these components are positioned. I coded the first level into the main game file (not main.dart, but the equivalent of myGame.dart), but now I want to move it into it's own class to change the levels easier. I have a 5 by 5 grid with a character at the bottom and an apple in the middle. When I had the level one block code in the myGame.dart file, the apple wouldn't show, but the blocks and character would. Now that I've moved the block code into a levelOne.dart file, the blocks don't show, but there's the apple and character. Here is the code after I've moved it into the new file.

myGame.dart:

    final character = Character()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (0+4) * (squareWidth + squareGap),
        (squareHeight*4) + 5 * squareGap,);
      //..position = Vector2(squareGap, squareGap);

    final apple = Apple()
      ..size = squareSize
      ..position = Vector2( squareGap + (0+4) * (squareWidth + squareGap),
        (squareHeight*2) + 3 * squareGap,);

    //originally all of the lists of blocks in the levelOne.dart file were here, but it got moved to the file and replaced with the following line
    final blocks = LevelOne();

    final world = World()
      ..add(character)
      ..add(apple)
      //originally all of the lists of blocks were in here separately, replaced with the following line
      ..add(blocks);


    add(world);

levelOne.dart:

class LevelOne extends PositionComponent {
  static const double squareWidth = 1000.0;
  static const double squareHeight = 1000.0;
  static const double squareGap = 175.0;
  static const double squareRadius = 100.0;
  static final Vector2 squareSize = Vector2(squareWidth, squareHeight);

  final blocks5 = List.generate(
    5,
        (i) => GrassBlocks()
      ..size = squareSize
      ..position =
      Vector2((i + 2) * (squareWidth + squareGap) + squareGap, squareGap),
  );
  final blocks4 = List.generate(
    5,
        (i) => GrassBlocks()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (i+2) * (squareWidth + squareGap),
        squareHeight + 2 * squareGap,),
  );
  final blocks3P1 = List.generate(
    2,
        (i) => GrassBlocks()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (i+2) * (squareWidth + squareGap),
        (squareHeight*2) + 3 * squareGap,),
  );
  final blocks3P2 = List.generate(
    1,
        (i) => PavementBlocks()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (i+4) * (squareWidth + squareGap),
        (squareHeight*2) + 3 * squareGap,),
  );
  final blocks3P3 = List.generate(
    2,
        (i) => GrassBlocks()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (i+5) * (squareWidth + squareGap),
        (squareHeight*2) + 3 * squareGap,),
  );
  final blocks2P1 = List.generate(
    2,
        (i) => GrassBlocks()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (i+2) * (squareWidth + squareGap),
        (squareHeight*3) + 4 * squareGap,),
  );
  final blocks2P2 = List.generate(
    1,
        (i) => PavementBlocks()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (i+4) * (squareWidth + squareGap),
        (squareHeight*3) + 4 * squareGap,),
  );
  final blocks2P3 = List.generate(
    2,
        (i) => GrassBlocks()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (i+5) * (squareWidth + squareGap),
        (squareHeight*3) + 4 * squareGap,),
  );
  final blocks1P1 = List.generate(
    2,
        (i) => GrassBlocks()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (i+2) * (squareWidth + squareGap),
        (squareHeight*4) + 5 * squareGap,),
  );
  final blocks1P2 = List.generate(
    1,
        (i) => PavementBlocks()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (i+4) * (squareWidth + squareGap),
        (squareHeight*4) + 5 * squareGap,),
  );
  final blocks1P3 = List.generate(
    2,
        (i) => GrassBlocks()
      ..size = squareSize
      ..position = Vector2(
        squareGap + (i+5) * (squareWidth + squareGap),
        (squareHeight*4) + 5 * squareGap,),
  );
}

I've tried changing the PositionComponent to a SpriteComponent, but as this code doesn't directly contain a Sprite (calls SpriteComponent classes), that didn't work. How would I get the moved code to show all of the blocks in levelOne.dart, as well as have the apple on top?

Answer 1

When you add components to the world they will be rendered in the order that they are added if the priority isn't set. You can think of priority as the Z-index in Flame.

So in your case when you do this:

    final world = World()
      ..add(character)
      ..add(apple)
      //originally all of the lists of blocks were in here separately, replaced with the following line
      ..add(blocks);

The blocks will be rendered on top of the character and apple, making them not visible. To solve this you can either add the blocks first, or you can set the priority of character and apple to something higher than 0 (the default).

The priority can be set either directory in the call to the super constructor:

class Test extends PositionCompontent {
  Test() : super(priority: 1);
}

or it can be changed during runtime with:

final test = Test();
add(test);
test.priority = 1;