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.
Will Spine Runtime support for Flutter?
- Editado
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.
Mario escreveuWe 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
above github project not supported null-safety and required sdk is too old,this can't use in any modern flutter
- Editado
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.
sign escreveuAs 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:
hieuswp escreveuHope 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.
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?
Mario escreveuWhat 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 escreveuDid you do any benchmarking?
There are no benchmarks. There are working examples with stable FPS: https://github.com/signmotion/spine_flutter/tree/enhanced_example
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?
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
Nate escreveuVery 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 escreveuThere 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 escreveuI have converted spine 3.8 to dart and run. But when use
triangleRendering=true
in canvas, it has somewhite lines
atthe edge
of eachtriangle
. 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.
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.
sign escreveuI 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
conganhphamnd escreveuI think canvas.drawVertices can fix this problem. :grinfake
It's likely. Rendering via Canvas drawVertices
is also MUCH more efficient.
Since Putler attacked my country, I think the opportunity to return to optimize the runtime I will not appear soon.
I'm so sorry to hear. Hope you and your loved ones can stay safe somehow.
sign escreveuSince 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: