solved GUI overlay

[swansong]

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?

[dbawel]

@swansong-

I would consider using a separate canvas on top of my render canvas, as this will make your life much easier. Otherwise, you can run into all sorts of problems trying to manage your GUI elements on a render canvas. As I often comment, I highly advise avoiding GUI extensions and take advantage of the standard HTML canvas and CSS styling to avoid sharing your render canvas with GUI elements that often cause artifacts and many other problems. Some people might recommend GUI extensions for beginners, however HTML canvas and CSS is so very simple to master that it's never worth going down the road of limiting your UI to whatever the developer of the extension had time to implement. There are few limitations to styling yourself from scratch, and far more advantages and immense power with few limitations once you begin building yourself. And this then allows you to animate whatever you like and/or use widgets in coordination with your HTML canvas elements as well as JavaScript to create rich GUIs and animated canvas elements for any user experience you can imagine. 

I learned the hard way that I spent far more time trying to code a less rich UE using GUI extensions, where in less time I can create a rich User Experience as it's so very simple, flexible, and efficient building my UIs from scratch through HTML and CSS.

DB

[adam]

Please provide a PG example of the issue you are having.  Thanks

[Sebavan]

You can play with both verticalAlignment and zindex to respectively address your issues but as @adam said, it would be easier with a playground:

https://www.babylonjs-playground.com/#XCPP9Y#332

Let me know if that solves your issues.

 

[aWeirdo]

BABYLON.GUI.Button.CreateImageWithCenterTextButton();

was created just for that  

https://www.babylonjs-playground.com/#XCPP9Y#333

i just notised it isn't on the doc's page anymore, must have been overwritten..
but you can generally find anything GUI related at http://doc.babylonjs.com/how_to/gui