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
    • Facebook Instant Games
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 130 results

  1. yagmur

    GUI Button and CSS

    Hello, i have got a question. I am created a gui simple button and also i want to take the button properties from CSS file. I tried so many things, but i couldn't reach my aim. I need helps from masters.
  2. Refer to the playground url below, if we press Up arrow to move the camera ahead and we'll see that the GUI.Multiline is still visible. Is there any way to hide the GUI.Multiline when all the connected meshes are behind the camera?
  3. Hi Devs, I am trying to rotate PlanePanel using TransformNode, but one strange thing that I observed is it's causing overlap between the meshes/buttons. Am I missing something here ? PG-
  4. Refer to the demo below, a GUI line can connect a mesh & a control at the same time by using: line.linkWithMesh(sphere); line.connectedControl = rect1; However, what I want to achieve is that let GUI line link with 2 meshes, each at the end of the line. (eg. line.linkWithMesh(sphere1, sphere2); Is there any way to achieve this?
  5. I am trying to use the GUI MultiLine in combination with a GUI Rectangle, which works fine: The problem I'm having is the position of the line that is attached to the rectangle. Is there a way to not have the line centered in the middle of the rectangle, but define an offset that allows me to position the end of the line in one of the corners? In the screenshot, I marked what I'm trying to do with a red line:
  6. Hi everyone, I've been trying to put together a small interactive scene where the user can click a babylon.gui button to activate an animation. The main issue I'm having is the connection between GUI elements and the per-object event/action system. My idea was to run a javascript function on the button, that then fires the action event, however after looking at documentation and lots of google, it doesn't appear like this can be done, at least not from the given triggers (excluding checking every frame). Is there a better method of doing this? Thanks in advance
  7. mkadirtan

    Slider Improvements

    I use BabylonJS.GUI as my GUI tool. In my project, I need to have many thumbs over a slider. 😟 I've found this image online, however I need more than 2 thumbs and number of thumbs over a slider is dynamically changed. Is there any way I can achieve this with current GUI controls? Should I code my own slider? Is there a work-around for this kind of applications? Thanks in advance!
  8. I was trying to use the GUI inputText control to enter an url. Perhaps my expectations are wrong but I would expect to be able to Key in a colon : [Solved in latest version] Have new text replace old following a press of "Enter" key [Solved in latest version] Focus after "Enter" key [Solved in latest Version] Paste text I could not get any of these results in the example Are these known limitations?
  9. Hi all, We have an application being build using babylonjs in which we are using an advanceddynamictexture to show a text block. We use the following line of code to create the texture: let textElementTexture: BABYLON.GUI.AdvancedDynamicTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(baseMeshforTextBlock); We also have a refresh key which updates the current scene and redraws the meshes again. We observed that refresh takes a long time due to the text blocks. On profiling further we found out that the above line of code takes around 35ms during the initial scene creation but when we do the refresh, the same line of code takes around 1900ms. We are not sure why there's this huge increase in time. Can someone help us understand this or provide any further guidance to figure out what's causing this? Thanks in advance.
  10. I searched the babylon.d.ts and cannot find keyword AdvancedDynamicTexture or GUI. Does any one know how to create AdvancedDynamicTexture using TypeScript? Or where is the correct place to get the latest definition file for babylon.js? release/babylon.d.ts Solution: release/gui/babylon.gui.d.ts
  11. Refer to the link below, it looks like that the fatness of the font will be impacted by the width & height of the plain mesh. This is not what I expected. Actually I want the font be rendered normally no matter what the mesh size is. Is there way to fix this issue? How to calculate an appropriate size to make the font look better? Solution:
  12. I'm using InDesign to create a page layout for a presentation and then exporting to HTML and embedding a canvas for Babylon in an iFrame. This is awesome, because I get a live 3D window in my otherwise static presentation. The problem is, the html exporter sets things up so the pages auto-scale to "Best Fit" the current device aspect ratio. This is just what I want, but this scaling breaks the BabylonJS GUI because mouse/touch events no longer line up properly with the buttons. For some reason, this problem only happens on my desktop screens (one landscape 2k and one portrait 1200x1920), but touch works with no problem on my Note 8 and recent iPad. I found this answer on Stack Overflow which involves intercepting and transforming mouse/touch events, but I'm not sure how to apply this concept to the prebuilt GUI framework. Is there a generalized solution to getting Babylon GUI touch to work when the canvas is scaled dynamically?
  13. I made a helper function to create GUI elements easier, could maybe even be used to import GUI's stored in JSON files quite easily Comments in PG should explain, but here's the basics: Create( elementType, parent, propertiesObject ) elementType = TextBlock, Image, etc.. E.g. new BABYLON.GUI.TextBlock(); ..turns into.. Create( "TextBlock", ...); parent = Parent Element.. E.g. parentElement.addControl( newElement ); ..turns into.. Create("TextBlock", parentElement, ...); propertiesObject = Width, Height, Text.. E.g. element.width = "200px"; element.height = "50px"; element.text = "Just a textBlock"; ..turns into.. Create("TextBlock", parentElement, { width: "200px", height: "50px", text: "Just a textBlock" }); More advanced useage using "designs" & Object.assign() to re-use code can be found in PG. Maybe some people will find it useful. Cheers, Have a nice weekend!
  14. bakir.omarov

    Any advice about UI ?

    Hi devs, This is my first post in this forum, because i am new on HTML5, but have a huge experience on mobile gamedev industry. So i need you advice, is that UI good for Web game? or i need to change something? I will appreciate any advice! Thanks!
  15. Hi, i am working on a babylon project, but i am facing a problem in resizing the text according to its width The above playground have the features, but the problem is its need time to resize to the ideal font size, just wanted to ask is there any way to resize the font to the ideal fontsize to fit into its max width? Thanks
  16. Hi, I wanted to try the latest preview release, but my IDE says that "Image" does not exist on type "typeof GUI". By looking at the available types from the GUI, the IDE suggests GUIImage, so I replaced everything with GUIImage. Now I get a console error in my browser, saying "TypeError: BABYLON.GUI.GUIImage is not a constructor". I get the same error on the playground, which btw also suggests GUIImage. By looking at the source code, I think this was intentional, but it isn't mentioned in the what's new file for the preview release. You can see the error on the playground Is this a bug, or do I need to change something else to get it working? Thanks.
  17. Hey, just started to use Babylon.js, and I am wondering if there is a way to disable or modify the animation on the GUI Button when it is pressed down. Thanks.
  18. Hey, just thought i'd drop this here! If you move GUI control with moveToVector3 and later try to place another GUI in the same spot using top and left values from the first one; it's not gonna go as hoped due to now different alignments. Example to be seen here: Not a bug technically i suppose, but certainly sent me hunting for one. 🧐 I did not expect the alignment to change. No mention of this happening in the docs either (that my eyes could see). linkWithMesh appears to set alignments as well. Anyhoo, that's all.
  19. Erm, again not sure what this is, I tried to create some gui elements and then immediately after use executeOnAllControls to dispose: You can see in the console that the textblocks created and those disposed are different. Is this due to registerBeforeRender ? Should I be using some other command ?
  20. phaselock

    GUI controls limits

    Hi again ! So with the recent fix on executeOnAllControls, I wanted to push the boundaries but hit a wall almost immediately. Not entirely sure which is the culprit here but I repro'ed in PG: On my screen, the perf is still fairly smooth with 100 textblocks. If I set it to 1000 in the for loop, the pg slows down incredibly. Is this the case for html5 ? I'm just curious where the bottleneck might be and how can I still obtain smooth redraw past 1000 gui elements ?
  21. 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.
  22. Hi ! I read in the babylon gui documentation that its possible to access gui containers as controls. So I tried it in the PG: But it seems to fail. May I know what is the correct syntax to use as the container in the callback for executeOnAllControls() ?
  23. Helloo. Is this behaviour intended? If the child alpha is 1 --> it animates with the parent. if the child alpha is less than 1 --> it doesn't animate with parent. I was expecting the transparent middle button also become invisible as it's parents alpha reaches 0. Took me a while to figure out why some buttons weren't fading out along with their mama.
  24. I need to display a list of cards, and used a stackpanel for that. The cards should have some space between them, and i saw there's the padding property so i tried it. Problem 1: If i set the padding to the stackpanel, the cards get clipped because the padding is removed from the stackpanel available width for its children. Problem 2: The padding set on the second card gets removed from the card width, thus i need to increase its width by the same amount of the padding i need. Doesn't seem right. Maybe we need also a margin property if this behavior is by design? Playground to reproduce the bugs:
  25. I have made a form for inputting parameters for webm audio/video recordings. I have broken out the top level StackPanel apart from the full screen AdvancedDynamicTexture. When either the "Rehearse" or "Record" buttons are pressed, you cannot still have the form visible or this happens: Clearly not acceptable to be in the video itself, & a little annoying for rehearsing. The only way I found to temporarily get rid of it was to dispose the texture. After the scene is done, I took the StackPanel and put it in a new AdvancedDynamicTexture, just 2 lines. The buttons are connected to NOTHING now though. Using a Mesh for the texture will allow it to be hidden, but then I need a second camera in ortho mode & setup layer masks. Is there any way to avoid going that route?