Why my sequenced animation works incorrectly?

[spkingr]

I use AnimationComponent.sequenced to make the animation sprite in my code, but it renders the whole images again and again(just flash in my screen), that is not what I wanted, the animation should be played with one frame and then another, here is the code:

this._createSwan().then((swan) => this.add(
        this.swan = swan
          ..x = this.viewport.size.width / 2
          ..y = this.viewport.size.height / 3
    ));

Future<AnimationComponent> _createSwan() async{
    await Flame.images.load("SwanSheet.png");
    final size = 64.0;
    return AnimationComponent.sequenced(size, size, "SwanSheet.png", 8, textureWidth: 2000.0, textureHeight: 250.0,);
  }

The image is 2000 pixels width and 250 height, with 8 swan-sprite made. How to use the animation components? Help and thanks very much!

[spkingr]

Another question:

• How to destroy or remove the component from the game world? I use component.world.destroyBody(component.body); , but it not works.
• Can ContactListener work with KINEMATIC boy type? And how to test the collision between DYNAMIC body with KINEMATIC body?

Thanks!

[luanpotter]

Hi, @spkingr ! Maybe it's not so clear in the docs, but textureWidth should be the width of each frame of the animation, in your case, 250.0 px. That's because the width of the whole image is know by the Animation Component, but you need to specify how to slice the image to select your frames. Maybe it's a huge spritesheet and your assets are just a small section.

Regarding the box2d related questions, maybe @feroult can help you out better than me :)

[feroult]

@spkingr Inside a Box2DComponent we have the world and components attribute. The first controls the mechanics and the later the rendering. You can check the top of the file:

  World world;
  List<BodyComponent> components = [];

I think the problem is that the world.destroyBody is not removing the component from the components list.

It is probably a better design to have an API to make the process of creating and destroying bodies atomically change this two variables.

[feroult]

Just created an API: 443f304

Box2DComponent.remove(BodyComponent)

[spkingr]

@luanpotter Thanks very much! I have tried and it works fine now. Is there any API like flip or scaleX to flip the animation sprites? The swan sprite is always backward with face forward.

[spkingr]

@feroult
I got it, thank you!
I edit the source code in my project, and I found some problems:

1. I cannot add any common component like ParallaxComponent and AnimationComponent anymore
2. I removed the body, however, it still situated in the world, and responses the physics
3. I found that userData defined in BodyDef or Body is useless. After reading the source code, I change the code in fixture.dart, this line:

void create(Body body, FixtureDef def) {
    userData = def.userData;
    //...

to

void create(Body body, FixtureDef def) {
    //userData = def.userData;
    userData = body.userData;
    //...

It works for me now in collision detection.

I try to change the code in Box2DComponent class:

void remove(BodyComponent component){
    components.remove(component);

    component.body.setActive(false); //added
    component.body.userData = null; //added
    world.destroyBody(component.body);
}

@override
  void render(canvas) {
    if (viewport.size == new Size(0.0, 0.0)) {
      return;
    }
    components.forEach((c) {
      if(c.body.isActive()){ //added
        c.render(canvas);
      }
    });
  }

But the problem 1 and 2 still there, help, thanks!

[feroult]

I made this change to the API so the Box2D Component would only accept BodyComponents and no regular components anymore.

You can still mix then in the higher-level Game render method.

I think this way we have a better design, what do you think?

[spkingr]

That's okay, separate the physic components with regular ones will be much more efficiency. And I think sometimes the simple game won't need physic at all, supply some util methods for math is enough.
By the way, can we use libgdx in Flutter?

[luanpotter]

@spkingr, AFAIK it's not possible to use libgdx with flutter; libgdx is a different framework that works with Java and also provide the ability to make multi-platform games, but their are not compatible. In flame we use Flutter low levels API to render, witch are similar to OpenGL bindings, but not exactly the same.

[spkingr]

@luanpotter I got it. I have cloned flame library just now, I will try to make clear how the code works, try to have a look insight into it. I think make games in Flutter is great and challengeable. By the way, where should I get started to dive into? Thanks. :)

[luanpotter]

I'd suggest reading the README.md tutorial, it's the very basic needed for a very simple game (probably you've already done so and are more advanced). Then, you can read the complete guide for more in-depth explanations, the source code & docs have pretty good details too. Finally, take a look at our 'sample' games;

• flame-example: is VERY simple, comes with a tutorial, a bit outdated
• bgug: a complete game, a bit outdated as well, but finished with most stuff a game could have (no box2d though)
• haunt: an incomplete game featuring box2d and the most recent version of the APIs, has a few features but is not finished yet

You can also open issues with questions, help with PRs and please send us your work to eventually be showcased here (we are planning on something along those lines).

Thanks for your interest!

[luanpotter]

@spkingr I will close this issue for now, if you have more questions or would like to submit issues, prs, et cetera, please feel free to open new issues!