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

  1. 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
  2. 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.
  3. 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.
  4. 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.
  5. 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 ?
  6. 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 ?
  7. 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.
  8. 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() ?
  9. 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.
  10. 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:
  11. 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?
  12. 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?
  13. 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.
  14. 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
  15. 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)
  16. 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!!!
  17. 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.
  18. 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,
  19. 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)?
  20. 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 : Thanks a lot! Pichou
  21. Per-Erik

    Black outline

    Hi, I'm new here and fairly new to Babylon. I am drawing a circle on a billboard but I can't get rid of the black outline, any suggestions? thanks
  22. As you can see above, my GUI's output is all wrong. What could possibly be the issue here?
  23. 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 ???
  24. 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.
  25. 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!