How to add an image to PositionComponent class in Flutter/Flame Game?

user_19619037 0
Viewed 73

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> onLoad() 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.

flame sprite flutter
1 Answers

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.

user_7895450
Related