Search the Community

Showing results for tags 'gui'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 96 results

  1. Yo @Deltakosh I see your samples now using this new BABYLON.GUI stuff. What is the main reasons for using this babylon gui vs using regular html markup for NON-3D guis, like huds etc. I can see when you need to attach some 2D gui to a 3D Object in the scene. But if is just SCREEN OVERLAY stuff like sliders and buttons and text... What advantage does BABYLON.Gui have over regular HTML markup ???
  2. As you can see above, my GUI's output is all wrong. What could possibly be the issue here?
  3. Hi guys. In this PG, a simple ADT with image control. Timer adds more paddingBottom every 2 seconds. Watch control/image size. It shrinks to nearly nothing, then starts up-sizing. This symptom is same for all 4 paddings. My PG is coded to easily test any of the 4 types. It also happens when both alignments are set to CENTER, or when no alignments are set. For fun, after RUN, put pointer on TOP edge of yellow image, and leave it there. After button starts growing again, notice pointer is on BOTTOM edge of image. Strange and interesting. Anyway, I'm not sure if this is a bug, but I thought I better report it, and ask if this is expected behavior. Party on!
  4. Hi, do you plan on adding button masks for gui buttons, so that we can have buttons that are only clickable on the desired areas? Here's an example: The button image is a circle, but the clickable area is actually a rectangle. Buttons can also have other different shapes, like cut off edges. I guess the best way would be to add some kind of button mask, maybe an optional second image that contains information about the clickable/hover area (like white color => clickable, alpha=0 => gets ignored) Thanks.
  5. Hi, is it possible to link a gui control, like the one in this example, to a TransformNode, instead of a mesh? Thanks
  6. GUI onXXXChangedObservable

    Hello, I'm (slowly!) building the GUI for my game, and I believe I have a use-case which the current API does not cover. I have a workaround, but I thought I would discuss it here. The game itself is a client/server model (websockets for transport), where various states of the GUI are loaded from the server once the user has jumped through the usual hoops (auth, chosen context, etc). For example, the current feature I am developing involves Slider controls. What I want to do with the sliders is three things: Once the hoop-jumping is done, Slider state is loaded from the server, and the Slider value is set. A player may be an initiator of a Slider value-change, whereby I use the onValueChangedObservable event to send the change to the server. Such changes are broadcast to all players sharing a similar context. A different player who shares context as #2 may be a receiver of a Slider value-change (e.g. as done by a player in #2), whereby I must update the Slider value without triggering onValueChangedObservable and just cause the slider appearance to be modified. In the case of #1, when I load the Slider value from the server and set Slider.value = newValue, this triggers a onValueChangedObservable, which pushes the change to the server, which would broadcast the value change to all clients in the same context, which would cause their Sliders to update, which would trigger onValueChangedObservable, and so on, until a rift in the spacetime continuum appears. In the case of #2, the same sort of thing may occur, except initiated by a player. What I have done to avoid the onValueChangedObservable trigger, is to call: Slider._value = newValue; Slider._markAsDirty(); This works perfectly, and does not trigger onValueChangedObservable. However, it feels ... dirty. Is there a better way to handle this? I suspect I'll get deep into this pattern once I get to the rest of the types of controls I have planned.
  7. 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: 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
  8. Hey, I would like to know where is stored advancedDynamicTexture in babylon environnment. For example, all the meshes are stored in the scene at the "meshes" property. I want to play with the Babylon gui ;).
  9. Hi, I am using the great babylon gui for my latest project - just some simple buttons for level select so far. I noticed that there is no event that functions exactly as a button "click" event should behave. There are up and down events, but they don't quite hit the mark for the event that should trigger when you "click" a button. Most GUI trigger a button on the "up" event, but only if the cursor is still over the element. (Try it with any button element for example in the post editor of this forum, or any windows button - if you press the mouse button down but only release after moving the mouse outside of the element, it won't trigger) So my fix so far is (pure js): button.onPointerUpObservable.add( function() { if (this.btn._enterCount === 0) { return; } //Do "click" stuff }.bind({btn: button}) ); But this accesses a private variable (_enterCount). So I think there should either be a getter function to access _enterCount or there should be a onPointerClickObservable. Any thoughts?
  10. GUI Image

    I was not able to reproduce this in the playground. Does anyone have any idea what could be causing this darkening effect on the GUI text? The GUI text is drawn on planes and the GUI image below it is about 5 units away. Also, the image is a svg, but I also tried with png and the same thing happens. The scene also has fog... and a clear color of that blue on the background. If I rotate the camera, the text will randomly lightup/darken on certain parts of the GUI image below it even though they are far apart on the Y plane. Could this be a bug?
  11. GUI Text Improvements

    Hello, I am making this post to discuss possible improvements to the GUI text system. Right now, when generating new text, it can be very slow if you have a lot of it in the screen. One clear improvement would be to pre-generate (or cache) each letter as an object and just generate instances of that object, which turns out to be very very very fast. However, that is not very easy to do as letter spacing can be a hard thing to manage when positioning each letter next to each other. Is there any easy way this could be improved in the babylonjs side to increase GUI text creation speed? Or is there any other solutions for this problem?
  12. Hello, I'm currently doing a shooter game for mobile devices with babyonjs. I use babylon GUI to display fixed buttons on my screen (for example a fire button). Everything worked before, but since few days GUI buttons are not working anymore with chrome on mobile device (it's working with safari and firefox). Do you have any idea about that ? thanks
  13. 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 ? -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
  14. Hy there! sorry with my ton of questions today! i've been trying to isolate the gui from the minimap but using layermask doesn't prove effective
  15. GUI Font Color White

    Hello, I believe I asked about this before on this forum, but I can't find the post anymore and I remember I remember people told me it wasn't a bug. But, I just want to make sure because this behavior is weird. When using the font color white for the TextBlock, I get a greyish color on small texts, is there a grey border around the text or something like that? Is there a way to remove it?
  16. Animations in GUI

    Hi, is it possible to use Babylon Animations for GUI Controls? For example, I would need to animate the alpha value of a textblock, or move a container out of the display, while fading out. And another question: Will you add more controls to the gui, like a progressbar (maybe with the ability to set an image as the bar, and a background image), or a container with tabs that you can switch? A grid container might also be useful. Thank you
  17. 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
  18. Hi, sorry if this is a stupid question, for now is it possible to update a GUI Button's image after its creation? I created a button with function GUI.Button.CreateImageWithCenterTextButton(name,text,imageUrl), and I notice the third parameter is an image url, I checked with the documentation but it does not mention any property name that I can use to set image url.
  19. I changed the scale of my rendering canvas but the pointer coordinate somehow gets messed up. how can i set the pointer coordinate for buttons, here's my code: var coord = new BABYLON.Vector2(scene.pointerX/4, scene.pointerY/4).normalize() button1._onPointerDown = function(button1, coord){ console.log(coord) } or is there a set function for this control.getLocalCoordinates(coordinates) something like control.setCoordinates(new coordinates)?
  20. GUI clears texture

    Hy there, i've been battling with these for hours and i thought i should share, the GUI clears the texture in my scene each time i linked it to more than one model not sure if this is a bug but here's my code: var createUI = function(obj){ // GUI this.obj = null||obj var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); var rect1 = new BABYLON.GUI.Rectangle(); rect1.width = 0.2; rect1.height = "20px"; rect1.cornerRadius = 20; rect1.color = "blue"; rect1.thickness = 4; rect1.background = "silver"; advancedTexture.addControl(rect1); var label = new BABYLON.GUI.Rectangle(); label.width = 0.8; label.height = "10px"; label.cornerRadius = 20; label.thickness = 2; label.background = "green"; rect1.addControl(label); rect1.linkWithMesh(this.obj); rect1.linkOffsetY = -50; rect1.alpha = 1 return rect1; }
  21. 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).
  22. GUI Performance

    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; } }
  23. I did a little exercise to update myself on the export in gltf and new Gui : The modeling is done in Blender, the mapping with substance painter and I export everything from Blender with the add-on of kronos: However, I have a question: For the reflection I used the file of Babylon because I can not generate mine. Is it possible to create one from an equilateral texture? I followed what is written in the tutorial: but when I export my map it generates 7 different textures? Someone would have an idea for me to finalize this project. Thank you.
  24. Hello, my friends. I have two doubts about gui. 1. Is there an option to add cursor pointer to gui, on some buttons, I mean, there will be nice a "cursor" attribute on each gui elements, something like buton.cursor ="pointer". But this is just a requirement. 2. It is related to the first problem. Can you drive me to where hover events happened in gui script. If I want to add my own hover events how can I do that? ps: maybe these already exist, but I couldn't find them. Thank you.
  25. update gui textblock

    I have a textblock on my gui that counts how many shots I have taken in my game. I increment the shot counter successfully but I don't know how to change the number currently displayed on the screen. Here is what I am trying (unsuccessfully). scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction({ trigger: BABYLON.ActionManager.OnEveryFrameTrigger}, function () { text13.text = shots.toString(); advancedTexture.update(); }));