I'm new to Flutter and Flame Game, so I don't understand some of the terminology, so maybe this is simple and just needs a clarification on terminology.

I'm trying to create a 5 by 5 grid of images to create a game board. I've been adjusting a solitaire tutorial to try to create what I need (https://docs.flame-engine.org/1.1.1/tutorials/klondike/klondike.html), but I've gotten a little confused when adding in the images because what I need is very different then what they're doing. I've managed to create a 5 by 5 grid of Position components, but I'm not sure how to add an image (ideally I'd like to create pre-determined level-based paths on this grid using 2 different images). I tried changing it to a Sprite component, but that won't even run. Here is the relevant code: mygame.dart:

class myGame extends FlameGame {
  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);

  @override
  Future<void> onl oad() async {
    await Flame.images.loadAll(<String>[
      'mygrasslarge.jpg',
      'mypavementlarge.jpg'
    ]);

    final blocks = List.generate(
      5,
          (i) => Blocks()
        ..size = squareSize
        ..position =
        Vector2((i   2) * (squareWidth   squareGap)   squareGap, squareGap),
    );
    final blocks2 = List.generate(
      5,
          (i) => Blocks()
        ..size = squareSize
        ..position = Vector2(
              squareGap   (i 2) * (squareWidth   squareGap),
              squareHeight   2 * squareGap,),
    );
    final blocks3 = List.generate( //TODO
      5,
          (i) => Blocks()
        ..size = squareSize
        ..position = Vector2(
          squareGap   (i 2) * (squareWidth   squareGap),
          (squareHeight*2)   3 * squareGap,),
    );
    final blocks4 = List.generate( //TODO
      5,
          (i) => Blocks()
        ..size = squareSize
        ..position = Vector2(
          squareGap   (i 2) * (squareWidth   squareGap),
          (squareHeight*3)   4 * squareGap,),
    );
    final blocks5 = List.generate( //TODO
      5,
          (i) => Blocks()
        ..size = squareSize
        ..position = Vector2(
          squareGap   (i 2) * (squareWidth   squareGap),
          (squareHeight*4)   5 * squareGap,),
    );

    final world = World()
      ..addAll(blocks)
      ..addAll(blocks2)
      ..addAll(blocks3)
      ..addAll(blocks4)
      ..addAll(blocks5);
    add(world);

blocks.dart:

/*class Blocks extends PositionComponent {
  @override
  bool get debugMode => true;
}*/

class Blocks extends SpriteComponent{
  Sprite(Flame.images.fromCache('mygrasslarge.jpg'));
}

The line Sprite(Flame.images.fromCache('mygrasslarge.jpg')); is underlined with red, but I can't seem to find out why it won't even run because of that.

If you could either help provide tutorials that might be able to help me with my problem or know of a solution, I would highly appreciate it.

Note: I have already loaded in an animated sprite character and used the basics of that code to try to add the sprite in for the blocks.

CodePudding user response：

You were correct that you should be using SpriteComponent for this. SpriteComponent inherits from PositionComponent, but supports an image too.

If you don't want to do anything special in Blocks you don't have to create a new component for it, then you can just use the fromImage constructor of SpriteComponent:

final blocks = SpriteComponent.fromImage(
  Flame.image.fromCache('mygrasslarge.jpg'),
  position: Vector2(100, 100), // Set your position here
  size: Vector2(100, 100), // Set your size here (by default it is 0),
);

Or if you want to create the Blocks class you have to pass the image/sprite to super:

class Blocks extends SpriteComponent{
  Blocks() : super(
    sprite: Sprite(Flame.images.fromCache('mygrasslarge.jpg'),
    position: Vector2(100, 100),
    size: Vector2(100, 100),
  );
}

Don't forget to set the size, because with size (0,0) it won't show up.