DylanD Posted December 6, 2018 Share Posted December 6, 2018 Hey everyone, I was wondering is there a way to fill a gui image? What i mean by fill is if i set fill horizontal and 50% half of the image would be gone. something like this playground however gui and not textures/shaders: https://playground.babylonjs.com/#411D8A#8 edit: it does not need to have the fade effect like this shaders. Quote Link to comment Share on other sites More sharing options...
Guest Posted December 6, 2018 Share Posted December 6, 2018 Hello Is any of this stretch value working for you: https://doc.babylonjs.com/how_to/gui#image ? Quote Link to comment Share on other sites More sharing options...
Wingnut Posted December 6, 2018 Share Posted December 6, 2018 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. Quote Link to comment Share on other sites More sharing options...
DylanD Posted December 7, 2018 Author Share Posted December 7, 2018 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) Quote Link to comment Share on other sites More sharing options...
Guest Posted December 7, 2018 Share Posted December 7, 2018 If I say that differently, you would need a StretchX or StretchY mode? Quote Link to comment Share on other sites More sharing options...
Wingnut Posted December 7, 2018 Share Posted December 7, 2018 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? Quote Link to comment Share on other sites More sharing options...
DylanD Posted December 11, 2018 Author Share Posted December 11, 2018 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. Quote Link to comment Share on other sites More sharing options...
DylanD Posted December 11, 2018 Author Share Posted December 11, 2018 Here we go: https://www.babylonjs-playground.com/#7EPK2H#5 This is a very basic fill test! Edit: Any ideas how to get the image to stop stuttering/shaking? Quote Link to comment Share on other sites More sharing options...
DylanD Posted December 11, 2018 Author Share Posted December 11, 2018 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 GameMonetize and Wingnut 2 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted December 12, 2018 Share Posted December 12, 2018 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. DylanD 1 Quote Link to comment Share on other sites More sharing options...
Guest Posted December 12, 2018 Share Posted December 12, 2018 It does not work because of line #19 Wingnut and DylanD 2 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted December 12, 2018 Share Posted December 12, 2018 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. DylanD 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.