Spine animation in flutter missing parts

gradientone

Hi, I have an animation that is missing parts when playing in flutter. Playing the animation in Unity works fine, which makes me suspect there could be a bug with the flutter runtime..

How to reproduce using the spine flutter example project:

Download spine-runtimes-4.1 EsotericSoftware/spine-runtimes
Add anim files to assets in flutter example project
Change in the filenames and animation state in the SimpleAnimation class:

final controller = SpineWidgetController(onInitialized: (controller) {
  // Set the walk animation on track 0, let it loop
  controller.animationState.setAnimationByName(0, "Idle", true);
});

return Scaffold(
  appBar: AppBar(title: const Text('Simple Animation')),
  body: SpineWidget.fromAsset("assets/cat_banana.atlas", "assets/cat_banana.skel", controller)
);

When playing simple animation the face and the left arm with a banana is not shown.

Animation files:

cat-banana.zip

4MB

Mario

That's not good. I can reproduce the issue with the 4.1 branch. Weirdly enough, it renders fine with the spine-sfml runtime, which also uses spine-cpp under the hood for rendering.

Thanks for reporting, I've opened an issue here:
EsotericSoftware/spine-runtimes2431

Mario

This was a bug related to clipping. It affected a few of the spine-cpp runtimes, like SDL or SFML. This is now fixed in the 4.1 and 4.2-beta branches. I have also released new packages for Dart/Flutter.

gradientone

Great, thanks for the quick solution! 👍️

Btw, I think I could have found another issue.

On spine-flutter the setListener(AnimationStateListener? listener) on TrackEntry is not working for me. For example when running the example-project and AnimationStateEvents class I don't get any output from the setListeners. I.e.:

controller.animationState.setAnimationByName(0, "walk", true).setListener((type, trackEntry, event) {
  print("Walk animation event $type");
});
controller.animationState.addAnimationByName(0, "jump", false, 2);
controller.animationState.addAnimationByName(0, "run", true, 0).setListener((type, trackEntry, event) {
  print("Run animation event $type");
});

I.e. it never logs "Walk animation event $type" or "Run animation event $type", but the listener on AnimationState in the same method gets called. I.e.:

  controller.animationState.setListener((type, trackEntry, event) {
    if (type == EventType.event) {
      print(
          "User event: { name: ${event?.getData().getName()}, intValue: ${event?.getIntValue()}, floatValue: intValue: ${event?.getFloatValue()}, stringValue: ${event?.getStringValue()} }");
    }
  });

(I'm running to Chrome).