solved GUI HUD - Background Image

[maecky]

Hi,

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?

Thx,

[Wingnut]

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.

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

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.    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.

WAY TOO MUCH INFO, eh? 

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. 

[maecky]

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...

[Gijs]

You could overwrite the function that draws the background color:

http://www.babylonjs-playground.com/#VEHQTQ#2

[maecky]

@Gijs thanks a lot for showing me this.

Works like a charm!

I did create a new class that inherits from StackPanel and did overwrite the draw function as you suggested. The thing is flying

Thanks a lot again!

[Wingnut]

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.