Search the Community

Hey, for my project i need a scrolling text view. I've managed to get a clunky version working but it's not optimal since you have to play around with the values every time the text changes: http://playground.babylonjs.com/#DZ7134 Is there a better way (there must be, i just suck at js :D) to do this? Thanks in advance.

Hello everybody, Long time I haven't post anything here as my life with babylonjs is going smooth and well. But unfortunetly I am now stuck! I am looking for a way to adapt an advanced texture size depending on the mesh size so that the text on it will keep the same font and shape. I have made a playground to make my request more clear : https://playground.babylonjs.com/#RICIF8 Thanks a lot! Pichou

Hi, I'm trying to evaluate Babylon for use as a 2d charting engine. So far so good, but one of the things we'll need to be able to do is add and remove text labels on the fly. I have a tiny demo here: https://www.babylonjs-playground.com/#WRD1S9#6 Notice how the label flashes at the bottom right corner for a brief moment every time the label is added to the advanced texture and before it's linked to the mesh. First, is there a way around this? I've tried linking to the mesh before adding, but then the label doesn't actually link. Second, is there a better way to do this? I've tried setting the label.text = "" and it works, but the performance is not as good when we remove the labels entirely. Thanks for any help, James

Hi, I am using BABYLON.GUI in my project and sometimes the text is not really readable when displayed with no background. I want to add a text shadow or at least bold the text so that you can correctly read it. But I didn't find a way to do that with BABYLON.GUI. Do you have an idea? Thanks, Pichou

When the text isn't in center on transparent plane, we can't see the text. I would like the same opacity between the two texts. Have you some idea, please ? https://playground.babylonjs.com/#8WC0U7 -I tried to put a light on the side, it doesn't work -I tried to raise the altitude of the text, but the text will be very far from the plane

Hello, I am trying to use the GUI TextBlock and Image components to display an icon and a text underneath it (number count) on top of a hexagon. In the scene, there can be hundreds of hexagons at once. Without instantiating the GUI components, the scene runs with no much problem at all, 200~ hexagons at 60fps... With it, the fps drops considerably. Is there any GUI optimization advice you guys can give me? I would appreciate it. constructor(parentHex, text, sizeScale, icon) { if (global.Image) { const GUI = require('babylonjs-gui'); const materialType = MATERIAL_TYPES.DYNAMIC_LABEL; const name = `hex_label_plane_${sizeScale}`; let plane = Main.scene.getMeshByName(name); if (!plane) { plane = BABYLON.MeshBuilder.CreatePlane(name, { size: 1.1 * sizeScale }, Main.scene); Util.setMaterial(plane, materialType); Util.setScalingToZero(plane); } plane = plane.clone('clone'); plane.position = Util.getNewVector(parentHex.position); plane.position.y += (parentHex.extents.y * Config.HEX_Y_SCALE) + 0.01; plane.rotation.x = Math.PI / 2; Util.setScalingToOne(plane); plane.setParent(parentHex); plane.originalScaling = Util.getNewVector(plane.scaling); plane.setVisibility = (visible) => { visible ? Util.setScalingToZero(plane) : Util.resetScaling(plane); }; const panel = new GUI.StackPanel(); panel.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER; this._panel = panel; if (icon) { const image = new GUI.Image('hexLabelIcon', icon); image.height = `${Config.HEX_LABEL_ICON_HEIGHT / sizeScale}px`; image.paddingBottom = `${Config.HEX_LABEL_ICON_PADDING_BOTTOM / sizeScale}px`; image.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_BOTTOM; image.stretch = GUI.Image.STRETCH_UNIFORM; panel.addControl(image); } const textBlock = new GUI.TextBlock(`hex_label_${text}`, text); textBlock.height = `${Config.HEX_LABEL_FONT_SIZE / sizeScale}px`; textBlock.color = 'black'; textBlock.fontSize = `${Config.HEX_LABEL_FONT_SIZE / sizeScale}px`; textBlock.textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP; panel.addControl(textBlock); this.advancedTexture = GUI.AdvancedDynamicTexture.CreateForMesh(plane); this.advancedTexture.addControl(panel); return plane; } }

Hi, I am using Babylon GUI because of labels of meshes. But if mesh is very small and cannot be seen, label disappear. Is there any way to make TextBlock in BABYLON GUI always visible (There must be label.linkWithMesh(sphere).)? There is playground (for reproduce zoom out camera).

Hi @Deltakosh and @royibernthal ! Are you any plan support Bitmap font for TextBlock?

Hello everyone, I'm migrating a script from canvas2d to the new gui. So far so good but I still get some questions. For the first question, I made a basic PG. I would like to know if it's possible to have a rectangle that will adjust width and height based on a textblock text size and margins. https://www.babylonjs-playground.com/#XCPP9Y#227 For the second question, I had a button to disable Canvas2D like this : canvasUI.levelVisible = 0; I understand that's not possible with the AdvancedDynamicTexture but is there something I can use to hide everything with one command ? Thanks !

Hello, I'm discovering GUI part, in Babylon JS. And for now, I'm trying to create a textblock, with simple text. But, my problem is that my text is pixelated, even I change fontFamily, fontSize. I've also tried to use "renderAtIdealSize" and "idealWidth". But, nothing changes. I've noticed that the pixelation is reduced when I change the zoom of the browser. I specify that I use, in this case, Mozilla and also Chrome, for my tests. Does it exist a solution ? Here is a link towards a playground, in which I put a part of my code and specially the part about the GUI. The fact is, in the playground, the text is not pixelated. https://www.babylonjs-playground.com/#66ZD6S#1 I put also a screenshot of the result, in the browser Mozilla (Zoom is at 100%). If anybody could give some advice, I thank you in advance.