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 122 results

  1. 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.
  2. 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
  3. 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:
  4. 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?
  5. 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!
  6. 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!
  7. 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
  8. 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.
  9. 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.
  10. 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.
  11. 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 ?
  12. 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 ?
  13. 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.
  14. 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() ?
  15. 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.
  16. 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:
  17. 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?
  18. I now use HTML + CSS to scroll through pages. I want to implement it through the GUI. Is the GUI planning to add this functionality?
  19. It errors when you are building a radio button, & possibly other controls, and want to pre-assign whether it is checked, before showing it or connecting / adding it to a container (_host). You get a 'executeOnAllControls' of undefined, here. I am getting around this by directly assigning _isChecked. Since this is being written in typescript & that is private it must be: radio["_isChecked"] = true; Thinking, checking if _host is not null might be a good idea. True, you could screw it up by checking multiples of the same group in initialization, but it should be obvious that this is developer error.
  20. Hi Guys, I created a texture for a mesh containing a vertical GUI.StackPanel with a few GUI.TextBlocks in it. These GUI.TextBlocks can be horizontally aligned as expected. Additionally, I added a horizontal GUI.StackPanel to the last row of the vertical GUI.StackPanel. The goal is to add two elements with a width of 35% for each element to this horizontal stack panel. Now I would like to split the horizontal stack panel in a ratio of 50% : 50% and center each element in one of the 50% slots. How can I do that? I created a minimal example in the playground where I tried to center one element (in this case a GUI.Rectangle) in horizontal stack panel which is inside a vertical stack panel. This doesn't work. Does anyone have a clue why this doesn't work and how I can achieve my goal? Thanks
  21. Hi all, Is there a flag in a BJS GUI system to automatically disable rendering of the GUI labels when the mesh they are attached to is not visible? Simple use case: you use labels to show user's names, and you shouldn't see the labels of the enemies which are not visible at the moment. Well.. because you shouldn't know where they are (behind the wall)
  22. Hi, I have three button on the GUI interface, I mainly want to implement a game handle, a button says "fire", the other two buttons said "direction", now the problem is, when I press the two buttons at the same time, "onPointerDownObservable" event is executed correctly, but "onPointerUpObservable" event only carried out the last of the button, how to set up a web page or other parameters? thinks!!!
  23. Alenvei

    GUI issue with raycast

    Hello all Sorry for my bad english in advance . I have a littel issue with GUI and I want to understand why it works like taht . What is the issue ? I made this function : function vecToLocal (vector, mesh){ var m = mesh.getWorldMatrix(); var v = BABYLON.Vector3.TransformCoordinates(vector, m); return v; } class Raycast { constructor() { } doorOpener(letHit, myGUI, scene){ this.scene = scene; var origin = player.position; var forward = new BABYLON.Vector3( 0, 0, 1,); forward = vecToLocal(forward, player); var direction = forward.subtract(origin); direction = BABYLON.Vector3.Normalize(direction); var length = 1.5; var ray = new BABYLON.Ray(origin, direction, length); var hit = this.scene.pickWithRay(ray); if (hit.pickedMesh == letHit){ if (control.keys.ePress == 1){ scene.beginAnimation(letHit, 0, 40, false); } return myGUI.isVisible = 1 }else { return myGUI.label.isVisible = 0; } } } This function is responsible to opening doors. When player reach a door then GUI shows up which key(E) on keyboard must be pressed for open the door but the GUI only works whith one door . Here is how I call Raycast function : const view = require('./ray.js'); const panelG= require('./gui.js'); class Leves { constructor(scene,camera,followCam,canvas) { this.scene = scene; GuiP = new panelG.GuiP (scene); doo = new view.Ray (); BABYLON.SceneLoader.ImportMesh("", "textury/mapy/", "lvl01.babylon", this.scene,function (newMeshes) { var level_001 = newMeshes[0]; level_001.checkCollisions = true; var door = newMeshes[1]; door.checkCollisions = true; var door2 = newMeshes[2] door2.checkCollisions = true; var openDoor = new BABYLON.Animation("t", "position.z", 25, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keys = []; keys.push({ frame: 0, value: 0.45 }); keys.push({ frame:5, value: -1.5 }); keys.push({ frame: 10, value: -3 }); keys.push({ frame: 30, value: -3 }); keys.push({ frame: 35, value: -1.5 }); keys.push({ frame: 40, value: 0.45 }); openDoor.setKeys(keys); door.animations.push(openDoor); door2.animations.push(openDoor); scene.registerBeforeRender(function () { doo.doorOpener (door, GuiP.panel, scene ); /*only animation works*/ doo.doorOpener( door2, GuiP.panel, scene); /* GUI and animation works very good */ }) }) } } I am newbie in babylonjs and javascript too and I want to understand every aspect of babylon js and javascript.
  24. Hi, I am trying to create a GUI which has a background image. The GUI I built will look something like this: Is it possible to attach a background image to the stackPanel I created? I am aware that I can use a background color but what I really want is to place an image there... Is this possible or is there a better solution for what I am trying to achieve? Thx,
  25. Hello, maybe there is a simple solution for this, but I didn't found any yet... I played around with this example and wanted to ask how to check the first radio button by default and don't allow to disable all radio buttons (one must be always checked)?