Hello everyone, I recently found Fuse and I’m really excited to create my apps with it.
I have lots of custom 2D drawings (And some 3D) in my app and I found that Fuse is using OpenGL ES internally.
I’ve experience with GLES but I couldn’t find any code samples or documentation to get started beside few API docs.
My question: How can I draw real-time 2D (3D would be nice too) on my controls? Is there any code samples or snippets that I’m not aware of?
I would greatly appreciate it if anyone could point me to right direction.
Thanks!
Hi,
In order to draw custom 2D/3D graphics in Fuse, you have to write Uno code. The low level graphics capabilities are not exposed in the UX or JS layers.
Unfortunately, low-level graphics Uno isn’t meant to be extensively used by third parties yet, it is mostly used internally by the Fuse team to create Fuse. So the documentation is spotty, APIs are subject to change and we don’t prioritize providing support on this level at this time. Instead, we are focusing on building progressively better high level UX/JS APIs that will gradually remove the need for writing custom low level graphics code.
If you can tell us a bit more about what specific types of visuals you want to render, we can explore the best options for each of them.
Best regards,
Anders
Its good to hear that you’re working on improving support for high level UX/JS APIs but it would be great and more flexible if at some point there are some APIs available for 2D drawing like in C# GDI+. And 3D drawings would be really nice even with high level APIs.
Anyway, among 2D visuals I try to create are pie charts with some starting animations and tap animation to make a part pop for example, lines with gradient color (random directions), changing image color space (create black and white version of an image for example and make an animated transition between them), animated gradients on shapes, etc…
By the way I have no problem writing Uno code if that’s necessary.
Hope its not a lot to ask, Thanks!
For pie charts, you can use <Circle> with StartAngle and EndAngle
https://www.fusetools.com/docs/fuse/controls/circle
For lines, you can use a Rectangle and simply rotate it into the right direction.
All colors and gradients can be animated in Fuse already in UX/JS.
Thanks for the help Andres.