Editor
Editor copied to clipboard
Published
20 hours ago •
BabylonJS
BabylonJS
Gui Editor not Writing Font Properties to .gui file
Issue: after saving (ctrl + s) or (file > save) .gui file does not contain the following properties :
After more debugging I noticed that the properties are actually being deleted when I click run in the editor.
-
"fontFamily" -
"fontSize" -
"fontWeight" -
"fontStyle"
The last property in the textBlock object is className
From Editor => GUI Editor
{
"root": {
"tags": null,
"renderToIntermediateTexture": false,
"maxLayoutCycle": 3,
"adaptHeightToChildren": false,
"adaptWidthToChildren": false,
"background": "",
"isHitTestVisible": true,
"isPointerBlocker": false,
"isFocusInvisible": false,
"clipChildren": true,
"clipContent": true,
"useBitmapCache": false,
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "black",
"hoverCursor": "",
"alpha": 1,
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"transformCenterY": 0.5,
"transformCenterX": 0.5,
"horizontalAlignment": 2,
"verticalAlignment": 2,
"fixedRatio": 0,
"width": "100%",
"height": "100%",
"color": "",
"zIndex": 0,
"notRenderable": false,
"isVisible": true,
"descendantsOnlyPadding": false,
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"paddingBottom": "0px",
"left": "0px",
"top": "0px",
"linkOffsetX": "0px",
"linkOffsetY": "0px",
"isEnabled": true,
"disabledColor": "#9a9a9a",
"disabledColorItem": "#6a6a6a",
"name": "root",
"className": "Container",
"children": [
{
"tags": null,
"thickness": 1,
"cornerRadius": 0,
"renderToIntermediateTexture": false,
"maxLayoutCycle": 3,
"adaptHeightToChildren": false,
"adaptWidthToChildren": false,
"background": "#424242FF",
"isHitTestVisible": true,
"isPointerBlocker": true,
"isFocusInvisible": false,
"clipChildren": false,
"clipContent": false,
"useBitmapCache": false,
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "black",
"hoverCursor": "",
"fontOffset": {
"ascent": 16,
"height": 21,
"descent": 5
},
"alpha": 1,
"scaleX": 1,
"scaleY": 1,
"rotation": 0.0016197038003364916,
"transformCenterY": 0.5,
"transformCenterX": 0.5,
"horizontalAlignment": 2,
"verticalAlignment": 2,
"fixedRatio": 0,
"width": "100.64%",
"height": "102.53000000000002%",
"color": "#00000014",
"zIndex": 0,
"notRenderable": false,
"isVisible": true,
"descendantsOnlyPadding": false,
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"paddingBottom": "0px",
"left": "0px",
"top": "0px",
"linkOffsetX": "0px",
"linkOffsetY": "0px",
"isEnabled": true,
"disabledColor": "#9a9a9a",
"disabledColorItem": "#6a6a6a",
"name": "Root",
"className": "Rectangle",
"children": [
{
"tags": null,
"thickness": 1,
"cornerRadius": 0,
"renderToIntermediateTexture": false,
"maxLayoutCycle": 3,
"adaptHeightToChildren": false,
"adaptWidthToChildren": false,
"background": "#333333",
"isHitTestVisible": true,
"isPointerBlocker": true,
"isFocusInvisible": false,
"clipChildren": true,
"clipContent": true,
"useBitmapCache": false,
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "black",
"hoverCursor": "",
"alpha": 0.8,
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"transformCenterY": 0.5,
"transformCenterX": 0.5,
"horizontalAlignment": 2,
"verticalAlignment": 2,
"fixedRatio": 0,
"width": "239.61px",
"height": "79.87px",
"color": "#ffffff",
"zIndex": 0,
"notRenderable": false,
"isVisible": true,
"descendantsOnlyPadding": false,
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"paddingBottom": "0px",
"left": "-0.39508368847588915px",
"top": "29.460000000000004%",
"linkOffsetX": "0px",
"linkOffsetY": "0px",
"isEnabled": true,
"disabledColor": "#9a9a9a",
"disabledColorItem": "#6a6a6a",
"name": "PlayButton",
"className": "Button",
"children": [
{
"tags": null,
"resizeToFit": false,
"textWrapping": 1,
"text": "Play",
"textHorizontalAlignment": 2,
"textVerticalAlignment": 2,
"lineSpacing": "0px",
"outlineWidth": 0,
"underline": false,
"lineThrough": false,
"outlineColor": "white",
"wordDivider": " ",
"forceResizeWidth": false,
"isHitTestVisible": true,
"isPointerBlocker": false,
"isFocusInvisible": false,
"clipChildren": true,
"clipContent": true,
"useBitmapCache": false,
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "#FF0000",
"hoverCursor": "",
"fontOffset": {
"ascent": 56,
"height": 70,
"descent": 14
},
"alpha": 1,
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"transformCenterY": 0.5,
"transformCenterX": 0.5,
"horizontalAlignment": 2,
"verticalAlignment": 2,
"fixedRatio": 0,
"width": "100%",
"height": "139px",
"color": "",
"zIndex": 0,
"notRenderable": false,
"isVisible": true,
"descendantsOnlyPadding": false,
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"paddingBottom": "0px",
"left": "0px",
"top": "0px",
"linkOffsetX": "0px",
"linkOffsetY": "0px",
"isEnabled": true,
"disabledColor": "#9a9a9a",
"disabledColorItem": "#6a6a6a",
"name": "Button_button",
"className": "TextBlock"
}
],
"textBlockName": "Button_button"
},
{
"tags": null,
"resizeToFit": true,
"textWrapping": 0,
"text": "Pandas",
"textHorizontalAlignment": 2,
"textVerticalAlignment": 2,
"lineSpacing": "0px",
"outlineWidth": 0,
"underline": false,
"lineThrough": false,
"outlineColor": "white",
"wordDivider": " ",
"forceResizeWidth": false,
"isHitTestVisible": true,
"isPointerBlocker": true,
"isFocusInvisible": false,
"clipChildren": true,
"clipContent": true,
"useBitmapCache": false,
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "black",
"hoverCursor": "",
"fontOffset": {
"ascent": 116,
"height": 145,
"descent": 29
},
"alpha": 1,
"scaleX": 2,
"scaleY": 2,
"rotation": 0,
"transformCenterY": 0.5,
"transformCenterX": 0.5,
"horizontalAlignment": 2,
"verticalAlignment": 2,
"fixedRatio": 0,
"width": "440px",
"height": "145px",
"color": "#FF0000FF",
"zIndex": 0,
"notRenderable": false,
"isVisible": true,
"descendantsOnlyPadding": false,
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"paddingBottom": "0px",
"left": "0.7175809593296187px",
"top": "-33.86%",
"linkOffsetX": "0px",
"linkOffsetY": "0px",
"isEnabled": true,
"disabledColor": "#9a9a9a",
"disabledColorItem": "#6a6a6a",
"name": "Title",
"className": "TextBlock"
}
]
}
]
},
"width": 1920,
"height": 1080
}
Test Example Created from (https://gui.babylonjs.com/)
{
"root": {
"tags": null,
"renderToIntermediateTexture": false,
"maxLayoutCycle": 3,
"adaptHeightToChildren": false,
"adaptWidthToChildren": false,
"background": "",
"metadata": {
"_previousCenter": {
"x": 1,
"y": 1
}
},
"isHitTestVisible": true,
"isPointerBlocker": false,
"isFocusInvisible": false,
"clipChildren": true,
"clipContent": true,
"useBitmapCache": false,
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "black",
"hoverCursor": "",
"alpha": 1,
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"transformCenterY": 0.5,
"transformCenterX": 0.5,
"horizontalAlignment": 2,
"verticalAlignment": 2,
"fixedRatio": 0,
"fixedRatioMasterIsWidth": true,
"width": "100%",
"height": "100%",
"color": "",
"zIndex": 0,
"notRenderable": false,
"isVisible": true,
"descendantsOnlyPadding": false,
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"paddingBottom": "0px",
"left": "0px",
"top": "0px",
"linkOffsetX": "0px",
"linkOffsetY": "0px",
"isEnabled": true,
"disabledColor": "#9a9a9a",
"disabledColorItem": "#6a6a6a",
"name": "root",
"className": "Container",
"children": [
{
"tags": null,
"thickness": 1,
"cornerRadius": 0,
"cornerRadiusX": 0,
"cornerRadiusY": 0,
"cornerRadiusZ": 0,
"cornerRadiusW": 0,
"renderToIntermediateTexture": false,
"maxLayoutCycle": 3,
"adaptHeightToChildren": false,
"adaptWidthToChildren": false,
"background": "#cccccc",
"metadata": {
"_previousCenter": {
"x": 1,
"y": 1
}
},
"isHitTestVisible": true,
"isPointerBlocker": true,
"isFocusInvisible": false,
"clipChildren": true,
"clipContent": true,
"useBitmapCache": false,
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "black",
"hoverCursor": "",
"alpha": 1,
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"transformCenterY": 0.5,
"transformCenterX": 0.5,
"horizontalAlignment": 2,
"verticalAlignment": 2,
"fixedRatio": 0,
"fixedRatioMasterIsWidth": true,
"width": "100%",
"height": "100%",
"color": "#000000",
"zIndex": 0,
"notRenderable": false,
"isVisible": true,
"descendantsOnlyPadding": false,
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"paddingBottom": "0px",
"left": "0px",
"top": "0px",
"linkOffsetX": "0px",
"linkOffsetY": "0px",
"isEnabled": true,
"disabledColor": "#9a9a9a",
"disabledColorItem": "#6a6a6a",
"name": "root",
"className": "Rectangle",
"children": [
{
"tags": null,
"resizeToFit": true,
"textWrapping": 0,
"text": "Test",
"textHorizontalAlignment": 2,
"textVerticalAlignment": 2,
"lineSpacing": "0px",
"outlineWidth": 0,
"underline": false,
"lineThrough": false,
"applyOutlineToUnderline": false,
"outlineColor": "white",
"wordDivider": " ",
"forceResizeWidth": false,
"metadata": {
"_previousCenter": {
"x": 1,
"y": 1
}
},
"isHitTestVisible": true,
"isPointerBlocker": true,
"isFocusInvisible": false,
"clipChildren": true,
"clipContent": true,
"useBitmapCache": false,
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "black",
"hoverCursor": "",
"fontOffset": {
"ascent": 64,
"height": 80,
"descent": 16
},
"alpha": 1,
"scaleX": 1,
"scaleY": 1,
"rotation": 0,
"transformCenterY": 0.5,
"transformCenterX": 0.5,
"horizontalAlignment": 2,
"verticalAlignment": 2,
"fixedRatio": 0,
"fixedRatioMasterIsWidth": true,
"width": "132px",
"height": "80px",
"color": "#000000",
"zIndex": 0,
"notRenderable": false,
"isVisible": true,
"descendantsOnlyPadding": false,
"paddingLeft": "0px",
"paddingRight": "0px",
"paddingTop": "0px",
"paddingBottom": "0px",
"left": "0px",
"top": "0px",
"linkOffsetX": "0px",
"linkOffsetY": "0px",
"isEnabled": true,
"disabledColor": "#9a9a9a",
"disabledColorItem": "#6a6a6a",
"name": "Textblock",
"className": "TextBlock",
"fontFamily": "Arial",
"fontSize": "71px",
"fontWeight": "",
"fontStyle": ""
}
]
}
]
},
"width": 1024,
"height": 1024
}
Yes I'm facing similar problem with the GUI Editor, here is what happened:
- added a font familly in the css
- in GUI editor tried to add custom font
- when I typed the font family the textbox remains red and I cannot save it
- I've tested with any other fonts, the save button works
- but no changed font whether the accepted custom font or default fonts are not saved to the GUI file
I am also having this issue. Editor v4.7.0
I'm trying to change the font size of a textblock in the GUI editor.
- add text block (default font size is 18)
- change text block font size to 50px
- File > Save
- Close GUI editor dialog
- Open the GUI file changed previously, font size is reset back to default 18
- Inspect JSON file, no properties exist for font family, size, etc.
