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

So i got the stuttering under control.  I believe it was happening because i tried to use 0.01 pixels which doesnt work... 

New Test:  

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

Not exactly what i want yet but almost there.

 

Here is another test:

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

Share this post


Link to post
Share on other sites

Hi DD.  I can't imagine a situation where a power/health meter or status bar... would want/use a moving container.  That causes the entire health meter "control".... to move-around upon/within the advancedDynamicTexture (adt) (or upon/within other types of containers such as a grid cells). 

Few people would animate-move a control... after it is placed upon/within the adt container.  But if YOU are happy, DD, then I am happy WITH you.  :)

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

Pretend white-border "outer" container... is where you want the health meter on the screen... in your game/project.  You need it to stay there, yes?

Try to get your health meter... operating within that white box.  Kenya?  (can you?) 

One more wrapping container (outer) shouldn't affect your new control at all, right?  Does it?

I put a thin red line around original container... so we could watch it moving.

SideNote:  Hey @Deltakosh/others... line 17 - outer.left = "50px";  ...  not working?      outer.top seems to work, but not outer.left.  Likely Wingnut mistake.

 

Share this post


Link to post
Share on other sites

hahaha... damn, I am SO blind.  :)  (hug)

Hey DylanD.. are you on the new forum, yet?   Perhaps start a new Q&A thread over there... "Testing GUI Health Meters" (anything you choose)... and we'll keep doing experiments and talks.

Meantime, I'm marking this thread as solved.  Message me if you want it re-opened for some reason.  See ya soon at the new forum.

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.