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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 104 results

  1. 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
  2. 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)
  3. 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!!!
  4. 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.
  5. 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,
  6. 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)?
  7. 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
  8. 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
  9. As you can see above, my GUI's output is all wrong. What could possibly be the issue here?
  10. 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 ???
  11. 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.
  12. 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!
  13. Hi, is it possible to link a gui control, like the one in this example, to a TransformNode, instead of a mesh? Thanks
  14. 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
  15. 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?
  16. stormwarestudios

    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.
  17. 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 ;).
  18. Ericky14

    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?
  19. Ericky14

    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?
  20. 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
  21. 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
  22. Vorion

    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
  23. 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
  24. 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
  25. Ericky14

    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?