Will Spine Runtime support for Flutter?

hieuswp

Flutter SDK is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter is the most popular cross-platform mobile framework used by global developers. I used Spine two years for Unity. I currently use Flutter to build app. I really want to use Spine animation in Flutter. I hope Spine Runtime will support for Flutter.

hieuswp

Mario

We have Flutter on the radar, but not short or medium term plans to support it. The biggest issue with Flutter support is that we'd either have to bind C++ or write a new Spine Runtime in Dart. The way C++ bindings work in Dart is not great, so we could likely not expose the full API surface. Performance of C++ bindings is also a big question mark. On the other hand, a Dart port of the Spine Runtimes is a huge task and we've so far not received enough inquiries to justify the amount of resources needed to implement this.

hieuswp

Mario wrote
We have Flutter on the radar, but not short or medium term plans to support it. The biggest issue with Flutter support is that we'd either have to bind C++ or write a new Spine Runtime in Dart. The way C++ bindings work in Dart is not great, so we could likely not expose the full API surface. Performance of C++ bindings is also a big question mark. On the other hand, a Dart port of the Spine Runtimes is a huge task and we've so far not received enough inquiries to justify the amount of resources needed to implement this.

Great ,
Thanks for your infomation. Spine runtime support for Flutter will be breakthrough, bring more users.
We await good news from Spine :heart: :love:

Currently, I know this library but it doesn't work on spine 4.x: https://github.com/Yesterday17/flutter_spine

dionli

above github project not supported null-safety and required sdk is too old，this can't use in any modern flutter

sign

As of today, this library https://github.com/jtakakura/spine_core supports Dart nullsafety and has the latest versions of the SDKs.

A few examples:

In light of recent news from the Flutter team - https://youtu.be/tpBNiRw0Jrs - I think it's strategically important for your product to get on this platform. Right now Spine has only one competitor here: Rive. And their IDE is second to Spine.

hieuswp

sign wrote
As of today, this library
https://github.com/jtakakura/spine_core
supports Dart nullsafety and has the latest versions of the SDKs.

A few examples:

In light of recent news from the Flutter team - https://youtu.be/tpBNiRw0Jrs - I think it's strategically important for your product to get on this platform. Right now Spine has only one competitor here: Rive. And their IDE is second to Spine.

Great,
Thank you veery much!

Hope you will continue to develop this library. :heart:

sign

hieuswp wrote
Hope you will continue to develop this library. :heart:

I would prefer to make a Game rather than develop a tool 🙂

I hope the Esoteric team will pay attention to Dart and support Flutter developers.

Mario

Wow, that's very cool. What Spine Runtime version does this support? It looks like this is based on the spine-ts 3.8 runtimes, correct? Did you do any benchmarking?

sign

Mario wrote
What Spine Runtime version does this support?

The exported animation from Spine to 3.8 works correctly. The WEBP image format is supported also. A limitation was noticed: only rotations in atlases 0 and 270 are supported.

Mario wrote
Did you do any benchmarking?

There are no benchmarks. There are working examples with stable FPS: https://github.com/signmotion/spine_flutter/tree/enhanced_example

Nate

Very interesting, thanks! I've added it to the runtimes page. There are a number of forks, is the original project (jtakakura/spine_flutter) the best for people to check out?

conganhphamnd

I have converted spine 3.8 to dart and run. But when use triangleRendering=true in canvas, it has some white lines at the edge of each triangle. When running on the flutter web it doesn't happen

sign

Nate wrote
Very interesting, thanks! I've added it to the runtimes page.

Nice, Nate! But I don't think we can split Dart & Flutter for animation: they work together.

Nate wrote
There are a number of forks, is the original project (jtakakura/spine_flutter) the best for people to check out?

Yes, the original fork is the best for people to check out.

conganhphamnd wrote
I have converted spine 3.8 to dart and run. But when use triangleRendering=true in canvas, it has some white lines at the edge of each triangle. When running on the flutter web it doesn't happen

I fixed that problem here: https://github.com/jtakakura/spine_core/issues/3
On Android this fix works. Sorry, I can't check for other platforms at this moment.

Mario

Cool! The rendering could be improved a lot by using Canvas.drawVertices():
https://api.flutter.dev/flutter/dart-ui/Canvas/drawVertices.html

Instead of submitting triangles individually, you can submit multiple triangles at once. You could also batch the triangles of consecutive attachments into a single Vertices instance if neither the texture nor the blend mode change, further decreasing the number of draw calls, increasing performance significantly.

conganhphamnd

sign wrote
I fixed that problem here: https://github.com/jtakakura/spine_core/issues/3
On Android this fix works. Sorry, I can't check for other platforms at this moment.

I tried that before. I think the problem is 0.5 pixels (between 0-1 pixel). I tested on 3 devices: samsung tab (1), nokia full hd (2), samsung full hd (3).
(1) & (2) no problem, But on (3) it has some transparent lines at the bottom (at the edge of each triangle). It occurs when the spine uses triangles and vertices.

https://ibb.co/wWcSGw6

I don't know why, but I found this.

When the spine is on top of the Scaffold, it's no problem
https://ibb.co/8KphYGT
When the spine is on bottom of the Scaffold, it has some white lines at the edge of each triangle.
https://ibb.co/tLzSY6V

When using Draggable. When I drag from top to bottom, it has some white lines on the edge of each triangle

https://ibb.co/KDbrNyv
https://ibb.co/4MV8KkW

I think canvas.drawVertices can fix this problem. :grinfake

Nate

conganhphamnd wrote
I think canvas.drawVertices can fix this problem. :grinfake

It's likely. Rendering via Canvas drawVertices is also MUCH more efficient.

sign

Since Putler attacked my country, I think the opportunity to return to optimize the runtime I will not appear soon.

Mario

I'm so sorry to hear. Hope you and your loved ones can stay safe somehow.

hieuswp

sign wrote
Since Putler attacked my country, I think the opportunity to return to optimize the runtime I will not appear soon.

I am really sad to hear this news :tear: . I hope good things come to you and your loved ones. I hope in the future you can continue to develop this library for the community. :yes: