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
    • 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 81 results

  1. 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
  2. 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
  3. 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.
  4. 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)?
  5. 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; }
  6. 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).
  7. 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; } }
  8. 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.
  9. 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.
  10. 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(); }));
  11. erm, I'm not sure what to classify this problem as or what its title should be. So, I tried to combine the PG (from the GUI announcement) I made a few mths back ( with the default rendering post processing tutorial and erm...I honestly don't quite understand the problem I'm seeing on my screen. The recreated PG is All I did was port some codes from FBKE1P to the post processing part. I was hoping to get the same mouse-over text on the skull while being able to play with the sliders. It seems like the entire skull is offset virtually ? or the GUI elements are in the wrong place ? or or... loss of words, sorry Any help, guys?
  12. Hey everyone, I see various games using the DOM for certain elements, I was wondering about peoples experience on this, I have a pretty complex HUD designed and feel it would be much easier to maintain and manage in the DOM and use events from the game to update the HUD. Would you suggest using the DOM or MelonJS? Advantages/downsides would be appreciated.
  13. GUI overlay

    I am planning on making a game with a doom style HUD, this requires me to put a GUI image component at the bottom of the screen. I have this part working correctly, but now I would like to put GUI text components ON TOP of the image. When I try to put these elements at the bottom of the screen they do not move from the middle of the screen. Is there a way I would be able to make an overlay that goes ontop of a GUI element?
  14. I was just searching PGs for examples of AdvancedDynamicTexture.CreateForMesh and came across a really well done menu ( which I converted to TypeScript and am using): There's no menu in GUI... I've seen other nice controls like @Pryme8's spinner, dropdown and progress bar. I'm porting my interface from DOM to GUI, so interested to see what's out there before I start creating my own custom controls. One I'll be building for sure is a switcher ( My question is - does anybody have GUI controls they'd like to share?
  15. Hello ! I'm working on a game and I need to the GUI extension. So, as needed, I added this line after including the babylon.js file, I made run my script but I get this error It's been yesterday I was looking for the answer but I did'nt find any Please help me, Thanks !
  16. Phaser Combobox

    Hi all: I'm trying to integrate a register form into my phaser game. I have no problem with text input, radio or checkbox, but i have no idea of how implementing a combobox. Someone has implemented this succesfully? I need to show a country combobox. Thanks all!
  17. Dynamic HUD

    Hello guys, So I keep progressing with my game. I freezed the new features development until this week to consolidate networking ( which is the hardest part ), now that I feel I am in a good point I am continuing. I am about to implement the inventory system which is this weeks plan, however I believe I will have some difficulties with the GUI elements positioning. For the health bar and mana bar I have done a temporary positioning using margin and padding but definitely it doesn't feel as the correct solution. How would I approach adding and removing skills for example from the skill bar. It must be responsive, also I am using babylon gui library. Any thoughts would be highly appreciated, thanks! Best Regards, RelativeNull.
  18. ArcRotareVRCamera

    Hi.I have a little problem with the VRDeviceOrientationArcRotateCamera and GUI. Here is the situation: Please click the check button to change camera. Now comes the problems 1. Gui seems to respond only on left camera, and I don't know why, but here seems to be the checkbox button. Please let me know why this is happening. Thank you.
  19. Hi @Deltakosh and @royibernthal ! Are you any plan support Bitmap font for TextBlock?
  20. Hi, Is it normal that declaring a second AdvancedDynamicTexture disable the isPointerBlocker on the controls of the first one ? Playground here Thanks
  21. GUI "Viewport"

    I want to show a "viewport" of a target camera in a corner of the canvas that will work in VR. Surely there is a better way, but this PG shows my visual goal: Basically I have a TargetCamera and I take screenshots and set to source of GUI image. I'm just making sure there is not a well known better way before I get more creative. My goal is for this to work well in VR. I already had it working quite well with this code - but I am trying to move away from a second viewport as I'm assuming that won't work in VR: var viewport = new BABYLON.Viewport(0.79, 0.79, 0.2, 0.2); this.secondCamera.viewport = viewport; scene.activeCameras.push(secondCamera);
  22. Best way to create tooltip

    Hi, yesterday i was start develop gui tooltips. Tooltips are show using events onPointerEnterObservable and onPointerOutObservable. Now I try to set container above base control (for example button). Creating tooltips as parent of button I can't make my tooltip bigger than parent -> I think good way is creating tooltips as parent of main stack panel, but i have problem with absolute position of tooltip. It is shown below button, I can create tooltip before button and then it show above button, but then position of button has been changed. Tom
  23. Hello, I have a mesh that is clickable and i would like to prevent it being clicked if there is a GUI element in front of it. Playground: In this example i made the GUI clickable as well, but i would like the GUI to stop mesh from being clicked even if there wasn't click function assigned to it. Is this possible? I can almost do this with my own input handler, but it only works like 90% of the time. And it's a bit funky involving global cooldown on clicks. It also requires me assigning an empty click function to the GUI.
  24. A leading Blockchain exchange headed up by one of the founders of Crypto is looking for a HTML5 Games Designer to provide a game ( roulette preferred) and tweak the GUI for crazy idea we would like to test. You would be joining a tight community of crypto nerds, building out your network & you would be paid in a Crypto this Founder invented. If this sounds appealing, you like bleeding edge stuff, please get in touch. Thanks.
  25. Ever wanted to be on the bleeding edge of iGaming ? Interested in Blockchain & Crypto. A leading exchange in the blockchain space, led by one of the top names in Crypto, is looking for a HTML5 Games Designer, willing to adapt one of his games, to test a crazy idea. We are ideally looking for a roulette game. But we are open to ideas. Part of this side project will be tweaking your GUI for the test. Rewards paid out in a Cryto currency trading very well. You would be joining a open source community full of nerds, geeks, crypto weirdos. If this sound like your bag, please get in touch.