Sign in to follow this  
DylanD

GUI Fill

Recommended Posts

Hi guys.  Here is ONE method... https://www.babylonjs-playground.com/#7EPK2H#1

It moves an image up/down within a container... using the image .top property.

The orange fill isn't "covering" half of the image, as DylanD prefers.  In the above PG,  orange fill is pushing image up/down.  (a simulation there-of).

*shrug*  Are substitutions allowed?  :)  What if TWO images were put into the container, but the "fill" image (a solid color)... had its .top set large... so that is was hiding behind the container's bottom.  Now start raising it... reducing its .top.  Then, if it had a lower z-order then the first image... it would start covering it... from bottom->up.  That would be fancy, eh?

I wonder if two image controls... crammed into the same container... are allowed to overlap.  hmm.  I guess the bottom "fill control" could be a thickenss=0 rectangle with a background color set.  Just reduce ITS large .top until it rises, and smothers the image.  It still must be rendered in-front-of the image/texture... depth-wise.  hmm.

Side note:  The GUI Rectangle has a little issue with its borders... when content is overflowed, eh?  https://www.babylonjs-playground.com/#7EPK2H#2

Maybe normal.

Ok, just Wingnut yammering aimlessly... party on.

Share this post


Link to post
Share on other sites
19 hours ago, Deltakosh said:

Hello

Is any of this stretch value working for you: https://doc.babylonjs.com/how_to/gui#image ?

 

No they do not seem to get me what i want.

19 hours ago, Wingnut said:

Hi guys.  Here is ONE method... https://www.babylonjs-playground.com/#7EPK2H#1

It moves an image up/down within a container... using the image .top property.

The orange fill isn't "covering" half of the image, as DylanD prefers.  In the above PG,  orange fill is pushing image up/down.  (a simulation there-of).

*shrug*  Are substitutions allowed?  :)  What if TWO images were put into the container, but the "fill" image (a solid color)... had its .top set large... so that is was hiding behind the container's bottom.  Now start raising it... reducing its .top.  Then, if it had a lower z-order then the first image... it would start covering it... from bottom->up.  That would be fancy, eh?

I wonder if two image controls... crammed into the same container... are allowed to overlap.  hmm.  I guess the bottom "fill control" could be a thickenss=0 rectangle with a background color set.  Just reduce ITS large .top until it rises, and smothers the image.  It still must be rendered in-front-of the image/texture... depth-wise.  hmm.

Side note:  The GUI Rectangle has a little issue with its borders... when content is overflowed, eh?  https://www.babylonjs-playground.com/#7EPK2H#2

Maybe normal.

Ok, just Wingnut yammering aimlessly... party on.

Nice stuff, however

im looking for something  that is one image (preferably) where one attribute (or two, defines how much of it is rendered om the screen)

so as the attribute becomes smaller so does the image.

Like in unity gui.image.fillamount (something like this)

Share this post


Link to post
Share on other sites

https://www.babylonjs-playground.com/#7EPK2H#4

One more.  No images, all rectangles.  outerrect.myvalue 0-175 sets the amount of green fill added from the left.  I have a random value setter... turned on.

Probably off topic, and certainly not a single control.  2 controls, as a matter of fact. 

StretchX (which is also compressX?) is likely wiser, if the image can be stretched/compressed on one side only.  I dunno.  Do we need GUI healthBarControl v1.0?  Maybe, eh?  :)

Share this post


Link to post
Share on other sites

Actually maybe i could accomplish this with moving a container and having the image slowly move the opposite way.  Then it would be above the containers rendering area.  I think this would be what i want.  

Im going to try and make a playground now.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.