Figma To BabylonJS Runtime Issues

Yo @jamessimo … Found another property that is not coming across on Frame… ClipChildren is not getting set in the json. Can you please check out when you get a chance

haha amazing. I was just about to update this thread telling you I fixed the disappearing content issues, it was due to not setting fixedRatioMasterIsWidth on the root it seems, and Ifixed some things related to Cliped Content

I have fixed this, I will also add the ability to respect the ClipContent on Figma, right now its default to false in all cases but you are correct this shouldn’t be the case.

I will update the plugin in the coming hours. I also want to thank you for using plug-in and giving me all this feedback. It’s really helped me make the plug-in much stronger because I’ve had to go back and correctly replicate the type relations that Babylon GUI has (like Rects inherit from Containers which inherit from Controls).

The next version of the plugin will be version 7. I will update this thread when its out and will make a post in the plugins thread later.

OK NEW VERSION IS OUT!

Full change log;

  • Now respects Clip Content from Figma (note: clipping in BabylonJS is different than Figma.)

  • Fixed bug where parts of UI disappear on button hits.

  • Fixed bug where gradients don’t show on frames.

  • Fixed gradients on components

  • Outputted JSON is now on average 15% smaller due to removing redundant json

  • added support for fixedRatioMasterIsWidth

  • No longer add empty children in JSON

  • Buttons now link to there textblock

1 Like

SWEET… Thanks a bunch, for all your hard work

Yo @jamessimo … You might wanna add this feature on the main exporter under Button Code (-bjs).

What i am MacGuyver to the parsedJson to add support for ScrollViewer… so just like the -bjs suffix, when you add -scroll (or what ever you override on the export dialog) … If if the name ends with that suffix, set className to ScrollViewer with the default bar properties … Like so:

if (this.parseScrollViewers === true) {
 try {
  if (object.name != null && object.name.toLowerCase().endsWith("-scroll")) {
    if (object.className != null && object.className !== "ScrollViewer") {
        object.className = "ScrollViewer";
        object.wheelPrecision = 0.05
        object.scrollBackground = "";
        object.barColor = "grey";
        object.barSize = 15;
        object.barBackground = "transparent";
     }
  }
 } catch (error) {
   console.warn(error.message);                            
 }
}

But it would be sweet to set the -scroll prefix on the rectangle, like -bjs and get Scrollable content views that we can fine tune in the Gui Editor :slight_smile:

Yo @jamessimo … Version 8 is making cornerRadius back to Zero… There must. be some regressions on your latest version 8 update.

Snippet from version 8 button json:

                        "cornerRadius": 0,
                        "cornerRadiusX": 0,
                        "cornerRadiusY": 0,
                        "cornerRadiusZ": 0,
                        "cornerRadiusW": 0,
                        "textBlockName": "PLAY NOW!",
                        "backgroundGradient": {
                            "colorStops": [
                                {
                                    "offset": 0,
                                    "color": "#ffc45dff"
                                },
                                {
                                    "offset": 1,
                                    "color": "#c75610ff"
                                }
                            ],
                            "className": "LinearGradient",
                            "x0": 1090.999966621399,
                            "y0": 922,
                            "x1": 1090.999966621399,
                            "y1": 1026
                        }

what kind of control is this?

Yo @jamessimo … Its a frame with a -BTN (renamed from -bjs)

Renders in BabylonJS without cornerRadius for Buttons

Here is the Button Json section from the Figma To BabylonJS output

                    {
                        "tags": null,
                        "isHitTestVisible": true,
                        "isPointerBlocker": true,
                        "isFocusInvisible": false,
                        "clipChildren": false,
                        "clipContent": false,
                        "useBitmapCache": false,
                        "shadowOffsetX": 0,
                        "shadowOffsetY": 12,
                        "shadowBlur": 60,
                        "shadowColor": "#0000009a",
                        "hoverCursor": "pointer",
                        "alpha": 1,
                        "scaleX": 1,
                        "scaleY": 1,
                        "rotation": 0,
                        "transformCenterY": 0.5,
                        "transformCenterX": 0.5,
                        "horizontalAlignment": 0,
                        "verticalAlignment": 0,
                        "fixedRatio": 0,
                        "fixedRatioMasterIsWidth": false,
                        "width": "560px",
                        "height": "104px",
                        "color": "#000000",
                        "zIndex": 0,
                        "notRenderable": false,
                        "isVisible": true,
                        "descendantsOnlyPadding": false,
                        "paddingLeft": "0px",
                        "paddingRight": "0px",
                        "paddingTop": "0px",
                        "paddingBottom": "0px",
                        "left": "40px",
                        "top": "922px",
                        "linkOffsetX": "0px",
                        "linkOffsetY": "0px",
                        "isEnabled": true,
                        "disabledColor": "#9a9a9a",
                        "disabledColorItem": "#6a6a6a",
                        "name": "PlayNow2-BTN",
                        "className": "Button",
                        "renderToIntermediateTexture": false,
                        "maxLayoutCycle": 3,
                        "adaptHeightToChildren": false,
                        "adaptWidthToChildren": false,
                        "background": "",
                        "thickness": 0,
                        "children": [
                            {
                                "tags": null,
                                "isHitTestVisible": true,
                                "isPointerBlocker": true,
                                "isFocusInvisible": false,
                                "clipChildren": false,
                                "clipContent": false,
                                "useBitmapCache": false,
                                "shadowOffsetX": 0,
                                "shadowOffsetY": 4,
                                "shadowBlur": 8,
                                "shadowColor": "#760e0f67",
                                "hoverCursor": "",
                                "alpha": 1,
                                "scaleX": 1,
                                "scaleY": 1,
                                "rotation": 0,
                                "transformCenterY": 0.5,
                                "transformCenterX": 0.5,
                                "horizontalAlignment": 0,
                                "verticalAlignment": 0,
                                "fixedRatio": 0,
                                "fixedRatioMasterIsWidth": false,
                                "width": "227px",
                                "height": "44px",
                                "color": "#ffffffff",
                                "zIndex": 0,
                                "notRenderable": false,
                                "isVisible": true,
                                "descendantsOnlyPadding": false,
                                "paddingLeft": "0px",
                                "paddingRight": "0px",
                                "paddingTop": "0px",
                                "paddingBottom": "0px",
                                "left": "164.5px",
                                "top": "28px",
                                "linkOffsetX": "0px",
                                "linkOffsetY": "0px",
                                "isEnabled": true,
                                "disabledColor": "#9a9a9a",
                                "disabledColorItem": "#6a6a6a",
                                "name": "PLAY NOW!",
                                "className": "TextBlock",
                                "resizeToFit": false,
                                "textWrapping": 0,
                                "text": "PLAY NOW!",
                                "textHorizontalAlignment": 2,
                                "textVerticalAlignment": 0,
                                "lineSpacing": "0px",
                                "outlineWidth": 0,
                                "underline": false,
                                "lineThrough": false,
                                "outlineColor": "#ffffffff",
                                "wordDivider": "",
                                "forceResizeWidth": false,
                                "fontOffset": {
                                    "ascent": 17.64,
                                    "height": 23.52,
                                    "descent": 5.88
                                },
                                "fontFamily": "Montserrat",
                                "fontSize": "36px",
                                "fontWeight": "900",
                                "fontStyle": "normal"
                            }
                        ],
                        "cornerRadius": 0,
                        "cornerRadiusX": 0,
                        "cornerRadiusY": 0,
                        "cornerRadiusZ": 0,
                        "cornerRadiusW": 0,
                        "textBlockName": "PLAY NOW!",
                        "backgroundGradient": {
                            "colorStops": [
                                {
                                    "offset": 0,
                                    "color": "#ffc45dff"
                                },
                                {
                                    "offset": 1,
                                    "color": "#c75610ff"
                                }
                            ],
                            "className": "LinearGradient",
                            "x0": 1090.999966621399,
                            "y0": 922,
                            "x1": 1090.999966621399,
                            "y1": 1026
                        }
                    }

Note: The cornerRadius is all zeros

found the issue, trying to fix, have a feeling this has always been an issue but only now caught it.

Ok the latest version 9 has the fix.

1 Like

I will investigate this, it would be really hands off tho as the connecting the scroll viewer and styling would be done in the editor.

I would almost prefer to maybe offer a “template” scroll bar which has all the correct buttons and styles in it that you can edit in Figma then I export it to BJS and style the BJS control for the user.

That sounds good to me

Yo yo @jamessimo … I found another few small bugs in the Figma To BabylonJS exporter

Here is a screenshot of a figma board. The is an Game_Background1 frame that has a Background1 image in it. Both the Game_Background1 frame and the Background1 image have the TOP LEFT set to 0 x 0 but when thex exported output json show a LEFT of 8px for Game_Background1 frame and the inner Background1 image has a TOP LEFT of -2px … They all should be ZERO… Where are these phantom TOP LEFT values coming from

Snippets showing wrong output json

Game_background1 frame

Screenshot 2023-07-05 at 11.39.02 PM

AND Background1 Image

Screenshot 2023-07-05 at 11.39.23 PM

Please take a look… the runtime exports are slightly off because of these wrong exported values. Thanks :slight_smile:

1 Like

Humm I may have seen this before quite recently. Will get to the bottom of it later in the week.

1 Like

back from vacation, found the issue, and will be in the next release.

1 Like

Boom, the issue was fixed and a lot of new features got launched with it.

Yo @jamessimo

Love the new plugin look and feel, with the tabs, with the images and the CHK options… But there are still issues with funny vales for LEFT and TOP.

Here is the figma, the Game_background4 parent container for the image should be 0 top left:

But the exported json put some weird value in left:

Screenshot 2023-08-14 at 9.30.27 AM

Yo @jamessimo … with the new ./images support… does that mean there is no more: ./imagecontroldefault.jpg support ?

Huh… thats a floating point error. Will fix asap.

For the images.

If you don’t select “Include Images” I think it will use the old system. If you use the Include images it works like

CORRECTION:

Yes we no longer use ./imagecontroldefault.jpg All images now go to folder you specify.

{FolderYouSpecify} + {LayerName} + “.png” (JPEG support is coming later).

I did find a bug where the folder name isn’t getting updated if you dont select “Include Images” will fix that as well.

1 Like

I updated the plugin. I made some changes but had issues duplicating your issue with floating point numbers. Let me know you still have the issue and if you want, send me the .fig file and ill have a look into it.

1 Like