Jump to content

GUI HUD - Background Image


Recommended Posts


I am trying to create a GUI which has a background image. The GUI I built will look something like this: http://www.babylonjs-playground.com/#VEHQTQ

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?


Link to comment
Share on other sites

Hiya Maecky

I have done a bit of work... trying to put images into ADT.backgrounds (not your subject, but related), but I have failed, so far. 

All the controls in Babylon GUI are painted-onto the GUI AdvancedDynamicTexture "layer", so... a priority system would be needed... to make sure the background image() buffer paints FIRST, and then the GUI controls atop.  (At least that's my theory).  I still think it can be done... but I haven't figged it, yet.  Possibly, with careful usage of a GUI Image control.

Meantime... I know a "cheating" way to do it.


A separate plane, with a separate for-mesh ADT,  sized carefully, parented to camera, and then positioned carefully.  That 'backADT' has only one control... and Image() control.  This might all fall-apart... when screen is resized or resolutions changed.  :o  In fact... I just tested fullscreen scene render, and yep, the image grows a bit too large, then.

We can talk about it more, if you like.  AND... let's keep looking for a better solution.

I once made this thing... https://www.babylonjs-playground.com/#11JINV#58

It is a two-ADT thing... one for frame and one for text.  Look-over the paintIt() func.  It pokes some random numbers into the text panel, but it ONLY sets a random color in pixels that have alpha > 0.  IN OTHER WORDS, it only sets a pixel color where there was already a color set.

YOUR thing... would sort-of do the same, but it would transfer a pixel from an Image() buffer... to the ADT canvas... ONLY where there is nothing already painted (this is to prevent you from overwriting previously-painted buttons, text, other GUI controls.)  You ONLY want your background picture... to paint in areas that are empty.  And, this is for filling the entire ADT with background image.  You want the background of a stackpanel... so... there's still issues/logjams.


Let's try to find a work-around/solution that is wiser.  I think your question is a darned good one.  Let's fig a way to do this... without all the context2d imagebuffer crap, somehow.  I know there's a sneaky way to do it... I can smell it.  Maybe the GUI Image() control is worth looking-at... much closer.  Might need another container control... around your stack panel... and then put the Image() control into THAT... and then add the stackPanel to the rectangle TOO, and then... maybe some overlap-forcing via stackPanel.top or something.  hmm.

Issue remains unsolved, so far.  Comments from others... surely welcomed.  :)

Note:  Is anyone else seeing arrow-keys and returns failing... after some editing in forum editor?  I am.  Save and re-edit... all is fine... for a few minutes.  Likely a local issue, Wingnut only.  Maybe too many video games open in other windows.  :)

Link to comment
Share on other sites

Hi @Wingnut,

thanks for your answer and your insights.

I already was messing around with a plane parented to the camera but I was running in the same issues - resize doesn't work and different screen resolutions do neither :(


I was thinking of a mix of inheriting from stackPanel and the ImageControl. Or put in other words, adding the image "thingies" to a new control that is inherited from stackPanel. Do you think that could work? I was only playing around with the Image control and it seems that the image isn't as crisp as when it's attached as texture to a plane - did you notice similar behavior?

I was hoping that there is an easier way to put a background image to the GUI ;)


BTW.: Arrow keys and enter stops working for me, too after typing a few lines...

Link to comment
Share on other sites

So, what the heck does this discovery MEAN?  Can we do the whole ADT background... with an image?  Bet so.

How about a renderTargetTexture (a view from another camera)??  How about video?

I'm wondering HOW MANY WAYS... we can abuse, severely bog, and/or completely ruin... this little hack-a-doodle.  hmm.

I gotz some mad scientist juices flowin'  (Thanks a friggin lot, maecky!  Way to go!)  (j/k)  :)

We should go experimentin'... see if we can attain some fireworks (mad scientist bench-top explosions) by dusk.  :)

I think maybe POT is important, all the time, when working with GUI images.

Power-of-two image-sizes.  ;)   I'm pondering image crispness... which Maecky mentioned.  I suppose, the less to-fit scaling needed (squish/stretch), the more clarity. 

We need more comments from smarter people than I... about GUI image clarity/crisp-ness.  Fuzzy images suck.   Have you discovered any info about clarity, M?  Teach us.  :)

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...