Esoteric Software

[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.

[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]

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

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]

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.

[sign]

Hope you will continue to develop this library.

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]

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.

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]

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.

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.

---

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]

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.

[Nate]

I think canvas.drawVertices can fix this problem.

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]

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 . 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.