Search the Community

Showing results for tags 'gui'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 52 results

  1. Hello everyone, I'm migrating a script from canvas2d to the new gui. So far so good but I still get some questions. For the first question, I made a basic PG. I would like to know if it's possible to have a rectangle that will adjust width and height based on a textblock text size and margins. https://www.babylonjs-playground.com/#XCPP9Y#227 For the second question, I had a button to disable Canvas2D like this : canvasUI.levelVisible = 0; I understand that's not possible with the AdvancedDynamicTexture but is there something I can use to hide everything with one command ? Thanks !
  2. Hello, Second post about the new GUI :). Strangely the text displayed is blurry. I have no idea why. I made a PG with the code but the result is good : https://www.babylonjs-playground.com/#XCPP9Y#249 You can check the result I have in app : Any idea why it would become blurry ?
  3. @Deltakosh GUI.InputText remove focus when clicking outside not working with BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane); PG
  4. So, I am having an issue with GUI controls / click through events when attaching to mesh. I'm not sure if this is technically a bug, or if there is a built in way to accomplish what I am trying to do which I am missing, so figured I'd ask here first before going to GH. Use case is: I have a card plane. When you hover the card plane, I have an actions plane (with advancedDynamicTexture) which appears above the card plane slightly, which contains multiple action buttons (which do not fill the plane, parts of the card are still visible) - Basically trying to make it so when the actions buttons are visible, you can click the button, without triggering the card planes action manager click actions, but if you click inbetween the actions, you are able to trigger the cards action manager. Example is here: https://www.babylonjs-playground.com/#6KVU7X Basically, if I set the actions plane to isPickable, can't click the plane behind it. If I set it to false, can't click the buttons. Is there an easy way to achieve this and or is this a bug? I am thinking maybe it would make sense to have a property on the dynamic texture itself which would default to the parent mesh, but then could be overwritten, to allow us to have: mesh.isPickable = false texture.isPickable = true and that distinction could allow click through on areas which are empty, while still allowing the buttons to be clicked? (unless there is some easy property setting I am missing or whatever).
  5. Hi. I'm back in bussines , and I have a little question for you. Can I take a scene screenshot without the new GUI? Can I disable it before print and enable it again or something like this? Here is a playground: https://www.babylonjs-playground.com/#3GPEIL Make width and height 0, or scale each elements it's not a solution. Thank you
  6. Hi, anyone can help me please! I'm using GUI inputText in my project. I can type in letters on PC and everything seems ok. But when I operate it on my ios mobile, nothing happens when I touch on the text area. Neither can I type directly in the textarea, nor there is a prop window for me to type. But I use the playground demo :https://www.babylonjs-playground.com/#UWS0TS on my mobile, it works. so strange. So anyone can tell me why ,and how I can solve this problem? Many thanks!
  7. Babylon GUI

    Hello, any examples availabe which shows how to use GUI in Babylon? From reading through the forum, it seems that Canvas2D is deprecated.
  8. So I have noticed quite a large drop in FPS when I enable a GUI element to animate for a visual of the step/tick percentage of the block drop. Im assuming it is because it is updating the 2d context of an entire canvas and not just a small section that is needed for this bar. https://playground.babylonjs.com/#FQE3AA#17 <- with animation holds 49 fps; https://playground.babylonjs.com/#FQE3AA#18 <- without holds 60 fps; Im sure there is a simple fix for this performance issue, any ideas?
  9. Bug in GUI causes crash

    Hi, I run into trouble when trying to clear a scene. The scene contains objects which have Babylon.GUI labels linked on them. Something is not getting updated properly? I can make it work using a timer delay between consecutive mesh.dispose() commands, but running them in a loop crashes the program. Here is the same problem in a PG. You can dispose one or the other mesh, but not both -- without a delay. http://www.babylonjs-playground.com/#5ZHBR8
  10. Hi There is bug when BABYLON.GUI buttons that has been created with custom viewport on camera: buttons can be clicked even if mouse is out of button playground: https://www.babylonjs-playground.com/#08PH4F#1
  11. Hello, I'm discovering GUI part, in Babylon JS. And for now, I'm trying to create a textblock, with simple text. But, my problem is that my text is pixelated, even I change fontFamily, fontSize. I've also tried to use "renderAtIdealSize" and "idealWidth". But, nothing changes. I've noticed that the pixelation is reduced when I change the zoom of the browser. I specify that I use, in this case, Mozilla and also Chrome, for my tests. Does it exist a solution ? Here is a link towards a playground, in which I put a part of my code and specially the part about the GUI. The fact is, in the playground, the text is not pixelated. https://www.babylonjs-playground.com/#66ZD6S#1 I put also a screenshot of the result, in the browser Mozilla (Zoom is at 100%). If anybody could give some advice, I thank you in advance.
  12. Hello all, I apologize in advance if this question has been asked and answered N times already, but I have searched through the forums, and slogged through the vastness that is Google, and haven't quite come up with an opinionated-enough answer that influences my desires. My (simple) question is this: What is my best option for implementing UI elements in a Babylon.js-based web game? My (more complex) question is: Given that I want to provide (1) performant (2) support for responsiveness (handheld, tablet, computer) in a user interface which (3) allows for things like multiply-layered (e.g. controls over render-texture over background) UI widgets, (4) text rendering similar to DOM capabilities, that (5) integrates well with Babylon.js, and (6) is currently supported/actively developed, what are my actual options? (1) my options are DOM (slow), canvas (better) and WebGL (best) (2) can be influenced by media query-alikes in order to support different devices (3) not sure, this sounds like custom witchcraft (4) why not just use DOM?? (5) bGUI :-) (6) Not bGUI :-( I've built a UI library in the past, so the concepts are not foreign to me. But since I'm in the research phase for my own project, I figured I would reach out to the BJS community, and perhaps spark an A vs. B flame war. (Kidding!) Any thoughts are welcome, so please fire at will
  13. I'm sorry for my noob question, but I can't find neither a way to get a specific GUI control or a list of controls added to AdvancedDynamicTexture (like, for example, the GetMeshById method for meshes), nor any documentation on Babylon.GUI save for the lamentably short tutorial. Is there a way to find a control without storing a reference to it whenever I create one? Or maybe I'm just missing something?
  14. I am trying to make my scene (card game) as performant as possible. I've made it quite a bit faster by using mesh instances and sharing them with cards and what not, but it seems like I am unable to use instances with a mesh which has a AdvancedDynamicTexture material/texture on it. Primary use case is each card has it's own separate attribute set, however the attributes appear all in the same location on the mesh. (i.e., card name, type, attack, health, cost, etc) I think it's actually just one draw call for the plane and an additional one for the texture, but still would be nice if it were possible. Am I missing something or is this currently not supported?
  15. Good evening all, My name is Christopher, and I have decided to use the Babylonjs npm repo. Question Once you include the babylonjs npm library through npm install how do you activate the extensions which are included? the attached file-structure.png shows the file-tree which is created in node_modules after using npm install. I am trying to use the included gui extension specifically. Environment Angular, Node, and Express, compiled using webpack Library npm babylon js To install the npm library into my project's node_modules: npm install --save babylonjs then my component has the import statement below: import * as BABYLON from 'babylonjs'; The above statement will utilize the babylon.module.d.ts file in the attached image and babylon.max.js This lets me use the BABYLON class with types perfectly as expected. However, none of the files in the gui folder in the attached image are hooked up. How would I go about activating this extension?? Solutions I've attempted thus far 0) just a normal import of the main babylonjs module: import * as BABYLON from 'babylonjs'; All core BABYLON methods and properties are accessible. However, BABYLON.GUI gives the following typescript error: "Property 'GUI' does not exist on 'typeof BABYLON'." Which is to be expected, since none of the gui files are hooked up. 1) using CDN for everything in index.html. <head> <!-- base href="/" is used for angular2 routing --> <base href="/"> <title>some website</title> <link id="favicon" rel="icon" href="public/assets/favicon.png"> <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script> <script src="https://preview.babylonjs.com/cannon.js"></script> <script src="https://preview.babylonjs.com/oimo.js"></script> <script src="https://preview.babylonjs.com/babylon.js"></script> <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> </head> This works, however, is not ideal, and defeats the purpose of the npm library. Also, the typescript definition files have to be maintained separate, either through the tsconfig.json, or in the component with a ///ref tag, and is very finecky. 2) using npm for babylon, and CDN for gui. Does not work, this method throws errors, because the CDN script tag in the head of index.html is compiled before the npm module, meaning the babylon class this extension extends does not exist at that time. 3) Using a second import to try to include the BABYLON.GUI class extension. import * as BABYLON from 'babylonjs'; import 'babylonjs/preview release/gui'; there is no .module file in the gui filepath so npm doesn't find anything there, so the second import fails. I've looked everywhere, including the docs and haven't found a clear solution. So how do we activate these extensions? They are included in the npm repo so naturally the devs want us to use them, and I'd love to take advantage of them
  16. GUI Functionality

    I've just removed the prefix "solved". As a matter of fact, I've made a mistake by stuffing 5 issues in one post. The first issue has been responded to, the others not. Next time, I'll start more focused topics. Two issues have to do with my lack of experience (and shortcomings in the documentation) see #1 and #4. Points #2 and #5 are questions/suggestions regarding the functionality. I believe those are of interest to other forum users. For me, there is a simple workaround: will use a fixed-size font. Point #3 is something I've incidentally discovered while testing, but of no further interest to me. .............................................. I have used the GUI extension and basically it does what I need. See https://www.babylonjs-playground.com/index.html#RBP60B#8 Yet I have several questions and suggestions. 1. The background color of a container, in my case an instance of BABYLON.GUI.Rectangle is assigned by a string value ("black", "white"...). Which colors are possible? I would prefer to use BABYLON.Color3(...) 2. What I need is a 'sticky' label. For that, I create a rectangle and used it as a container for a TextBlock and that works fine. However, what I would like to have is that my label would be transparent or semi-transparent and the text not. In the present implementation, if I change alpha of the rectangle, it seems topropagate to child controls (my TextBlock), so the text becomes also semi-transparent. I believe this is a small bug: if I want the text to be semi-transparent, I can change the alpha of the TextBlock 3. I can link a TextBlock directly to a mesh. However, in that case I cannot change link offsets (linkOffsetX, linkOffsetY ...). Apparently, linkOffsetY has some value (100?) and the others are 0. Wouldn't it be a welcome feature? 4. Vertical text alignment of a TextBlock can be controlled by setting textVerticalAlignment to 0, 1 or 2, but I could not find it in the documentation. 5. Apparently, the object TextBlock has been designed to work in conjunction with some container object. Otherwise, it has no boundaries so it cannot decide on text wrapping. Is it possible to let the container (a Rectangle, for example) to be resized to match the text size (this would need to be somehow reconciled with wrapping - maybe like in MS PowerPoint). The simplest possibility would be to enable the programmer to do it. For example, to introduce a method that would return the "bounding box" of a text with the preset width and word wrap (Y/N). If I would have something like that, I could decide dynamically what container size I would need and whether to truncate my text.
  17. Hi, Any doubt how to align GUI.Button horizontally inside GUI.StackPanel. I was playing around but no luck. Playground: https://www.babylonjs-playground.com/#4P8PJY#1
  18. GUI - isHitTestVisible

    Hi, Does it work as it should do ? https://www.babylonjs-playground.com/#XCPP9Y#152 One button, property isHitTestVisible set to false, the button is still clickable ? Is that normal ? I was expecting the opposite.
  19. Yesterday i add simple GUI buttons to my game. I have problem with pointer event, when i click to button pointer event send data with selected mesh (I think about ground instead button) and now i logic of my game, if i select ground player move to this point. Is possible to block pointer event when i click to my button? Tom
  20. Hiding and showing controls by using isVisible (like a Rectangle in this case) works if the control is not linked to a mesh by linkWithMesh. Once it is attached, the control stays visible. The inner controls (in my case the text inside the rectangle) can be hidden. See the playground https://www.babylonjs-playground.com/index.html#RBP60B#6 lines 35-42.
  21. Hello,I begin in the use of babylon.js. I meet the following problem: I load from the playground the zip of the demo http://www.babylonjs-playground.com/* XCPP9Y#1.When I throw the file the console send back the following error: babylon.max.js:5410 BJS - [13:19:37]: Babylon.js engine (v2.5) launched test1.html:64 Uncaught TypeError: Cannot read property 'AdvancedDynamicTexture' of undefined at createScene (test1.html:64) at test1.html:82 createScene @ test1.html:64 (anonymous) @ test1.html:82 Thanks for your answer test1.html.back
  22. Hi, I had already some meshes with text that I had made into buttons and am trying to convert them to use GUI. I have a PG with 3 things that I would like to add: 1. I have the AdvancedTexture on 2 sides of a mesh. Notice that if you rotate the scene 180 degrees that the "back" button is being displayed in front of the front (So, text appears mirrored). 2. I would like to see the original mesh. 3. Optionally, would be nice to have mouse-over with a hand icon cursor. I think this is easy with pointerEnterAnimation. https://www.babylonjs-playground.com/#CL8C6T The box on the left uses GUI - the box on the right has all 3 things. Thanks.
  23. I am trying to develop a custom made scroll-bar(or should I call it number-picker) with graphical elements and input functions. I think there is an example where a certain Phaser game object can be constrained in coordinates. For example it can be set to only move along X axis in certain range, but Y stays always unchanged. I should be able to drag it only in X axis, so left and right. Can you suggest some example for this bit? Here is a picture of what I try to do: As you move the handle to right, the number on the left decreases down to zero. As you move the handle to the left, the number increases up to 100. Simple. Note: No need for Physics.
  24. If you've been looking for a UI manager for Phaser before, you'll know there aren't really a whole lot of good ones out there. That's why I started working on a component for building user interfaces in Phaser, called SlickUI. It's still in early development, but already capable of buiding user interfaces with panels, buttons, text and generic display objects (like sprites). On the todo list is adding text fields, checkboxes and radio buttons. Website Github page Would be cool to see your opinions!