skalibran Posted October 26, 2015 Share Posted October 26, 2015 Hey there,after digging out several topics about GUIs in Babylon.js it seems like adding another framework for that task is the best solution. However, I want to use pure Babylon.js. I made a panel that does something when I click on it and attached it as a child to the camera. Unfortunetaly, when I resize the window, the panel that should be in the bottom left corner is not where it belongs, because the camera proportion has changed and the panel is (partly) out of view. http://spielwiese.vllg.at/bgame/ I could ask for the current width and height of the window onchange, but resetting the panel for every width / height pixel seems a bit weird.What is the best solution to always have the panel on the bottom left corner, on mobile, on PC and on TV as well?Thanks for your ideas! Quote Link to comment Share on other sites More sharing options...
adam Posted October 26, 2015 Share Posted October 26, 2015 You should try bGUI. https://github.com/Temechon/bGUI I've heard good things about it on this forum and the source looks really clean and simple. Quote Link to comment Share on other sites More sharing options...
Temechon Posted October 26, 2015 Share Posted October 26, 2015 Hey, did you test bGUI ? https://github.com/Temechon/bGUI Quote Link to comment Share on other sites More sharing options...
Dad72 Posted October 26, 2015 Share Posted October 26, 2015 When I resize the panel, it is always in the same place. Quote Link to comment Share on other sites More sharing options...
iiceman Posted October 26, 2015 Share Posted October 26, 2015 I don't have a good solution for that, I just made a playground to show the problem and people can start changing things. Maybe somebody has a good idea and can show it right here: http://www.babylonjs-playground.com/#ZZY18 Quote Link to comment Share on other sites More sharing options...
skalibran Posted October 26, 2015 Author Share Posted October 26, 2015 I don't have a good solution for that, I just made a playground to show the problem and people can start changing things. Maybe somebody has a good idea and can show it right here: http://www.babylonjs-playground.com/#ZZY18 Damn, I could have already done that. Sorry for making extra work :-/ You should try bGUI. https://github.com/Temechon/bGUI I've heard good things about it on this forum and the source looks really clean and simple. Hey, did you test bGUI ? https://github.com/Temechon/bGUI I'll have a look at it when I'm home, thanks for the link! However, is there a way to set the position of meshes relative to the camera and width/height? Quote Link to comment Share on other sites More sharing options...
iiceman Posted October 26, 2015 Share Posted October 26, 2015 @Temechon: can we use bGUI on the playground? Do you have something like a CDN to link to? I want to create a GUI, too (maybe tonight) and haven't decided what to use yet. Can I use normal Babylon meshs in the GUI layer? lets say I want a box as a button and I want to rotate it so that the user can see that it is a box and not just a square. Is that possible and does it work the usual way? Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted October 26, 2015 Share Posted October 26, 2015 The only way to do this is to use multiple cameras. The 2nd camera is orthographic. Use layermasks to ensure that ortho camera only sees the box, and the scene camera cannot see the box.http://doc.babylonjs.com/tutorials/Layermasks_and_Multi-cam_Textures adam and pichou 2 Quote Link to comment Share on other sites More sharing options...
iiceman Posted October 26, 2015 Share Posted October 26, 2015 I think bGUI does use the 2nd cam: bGUI adds automatically to your game an orthographic camera correctly configured (according to the canvas size and the device pixel ratio), and gives you several classes to create your game GUI.source: https://github.com/Temechon/bGUI My question is just if I have to watch out for anything special or if I can jsut use it like I would if I created the orthographic cam myself Well, I could just try it out I guess. I'll try to find a way to use it in the playground when I have time tonight. Quote Link to comment Share on other sites More sharing options...
Temechon Posted October 26, 2015 Share Posted October 26, 2015 " is there a way to set the position of meshes relative to the camera and width/height?" -> Yes ! I created bGUI for that actually "can we use bGUI on the playground?"-> I don't have any CDN, but if you copy/paste the bgui.min.js in the playground, you should be able to use it (never tested it) "Can I use normal Babylon meshs in the GUI layer? lets say I want a box as a button and I want to rotate it so that the user can see that it is a box and not just a square. Is that possible and does it work the usual way?"-> Yes, yo ucan create a GUIObject from any BABYLON mesh, and use any animation you want afterwards. iiceman 1 Quote Link to comment Share on other sites More sharing options...
iiceman Posted October 27, 2015 Share Posted October 27, 2015 Just copying the code to the playground basically seems to work... http://www.babylonjs-playground.com/#1GJBXI#1 (took me a while to figure out that I have to sue the loader for the textures...maybe that sohuld be mentioned in the documentation ) Got a question though: If i try to scale the panel (line 65) it disappears... how would I make that panel smaller? Quote Link to comment Share on other sites More sharing options...
Temechon Posted October 28, 2015 Share Posted October 28, 2015 bGUI update automatically the scaling of the mesh in order to be visible by the second camera. Try to use this : http://www.babylonjs-playground.com/#1GJBXI#2panel.scaling.scaleInPlace(0.5); // Divide the panel size by 2 iiceman 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.