@jamessimo I just used your extension this week in a new BabylonJS based web application and it greatly reduced the amount of code we had to write. This is extremely impressive for an early version!
I’m starting to run into more advanced cases the extension isn’t ready to handle yet.
Having built some controls and improvements on GUI controls in the Babylon project, I have some ideas and feature requests I’d love to run by you.
How can I get in touch with you? Does this extension project have a public repo anywhere?
I still want to get this project available for more people to contribute, but I am making a large change which is breaking some things but this will make working on this much better in the future.
The biggest issue I am working on is that I essentially handwrote all of the UI types by copying the BabylonJS code like this;
This is obviously not the best and does not lend itself well to growing with BabylonJS as a project. So what I’m doing now is I’m going to try to import parts of BabylonJS directly via NPM and replace all the handwritten mapping with actual BJS code so that if BJS makes a change, the code should be able to “just work” and allow for targeting older versions of BJS if needed.
This is also to hopefully springboard this to be able to target multiple codebases, however that is yet to be seen.
Well first the good news, the good news is, the next version will have;
Focusable Buttons
Toggle Buttons
Grids
Radio buttons
Much better text controls
100% accurate output
slightly smaller file sizes (hopefully)
The bad news
Development is blocked by a engine feature that I need to be implemented before I can complete this Ability to "skip" using Canvas when serializing Textblocks and other CSS dependent GUI Controls. · Issue #14949 · BabylonJS/Babylon.js · GitHub. As mentioned earlier, i am now importing babylonJS GUI into the Figma Plugin and using core babylon code to do a lot of the work. But when the plugin was fully ported over, I found that I can no longer serialize controls that had there CSS elements change s( Gradients, text sizes etc…) and i don’t want to publish any new versions that don’t use the BabylonJS code as it will just create more work for myself.
Ill keep you all posted, the plugin still works fine as is and it will have a huge improvement to it once I can continue working on it.
The engine level blocker was removed thanks to @Deltakosh and I can continue.
This is becoming a total rewrite which is good but I am now having to re-impliment some things due MathJS no longer working due to some unknown issue with Webpack &/ BabylonJS.
Im also going to use this post as a way to track my wish list for this new version;
Support; Focusable Buttons, Toggle Buttons, Grids, Radio buttons Automated testing Full Text Block translation Blend fills/shadows/etc (right now I only take the first fill or effect and discard the others) Investigate Blending options Issue report tell the user areas that cannot be replicated by BabylonJS (Components/frames having border radius, borders etc…) Button for more aggressive parity Allow the plugin to add additional controls to force the output to look like the figma design, aka if you gave a component a border radius, then the pluginin will make a new rect and give that the border radius.
If anyone has any other features they want, ask now whiles I have the code all out on the cutting room floor.
Thanks for the offer, I just removed MathJS since I was only using some relatively simple matrix multiplication functions.
I got gradients back up and running and soon this new version will be 1:1 parity with the existing version. Which isn’t impressive but then I can move on to adding loads of new features not before possible.
hi @jamessimo,
I have a resize issue with the converted UI, as you can see, when I scale the window, the UI is not resize, the content is clipped. May you help me with this issue?
Does it resize normally in Figma when you resize the artboard? I recommend using autolayouts with “Fill container” options filled in Figma.
What you can also do is, use the built in GUI editor BabylonJS has. Find the elements that need to resize to convert all the sizes to ‘%’ instead of ‘px’. Start with the outer most parent or “root” and work your way in.
