Help needed with GUI image animation sheet (gui/gui#image)

Good Day Guys,
Hope yours are well and ready for the challenge?:wink:
I have yet another ‘faen’ topic/issue of mine to submit to your unlimited knowledge;) or, in other words, another desperate call for help :pleading_face: with something I’ve been struggling with for 2 days and now makes me think of growing potatoes in my backyard to make a living, rather than do anything more than gaming with the digital;)

My issue is showcased in the 3 playground links below (choose your poison;)
They are all based on: https://playground.babylonjs.com/#K60448#10 from gui/gui#image

The first one
https://playground.babylonjs.com/#K60448#173
shows the simple replacement of the ‘image’ with an ‘image only button’ and calls the button.image instead of the image. So far, so good.

The second one
https://playground.babylonjs.com/#K60448#172
shows my desperate attempts;) to try understand why my control (button and image) scales up in a linear manner, no matter the input in source or image (or button) width or height. Watch as each time you click (call the pointerUp observable, although it is doing nothing) the control and image both scale up.

The final one
https://playground.babylonjs.com/#K60448#179
This is a simplified version, going back as close as possible to the original, but still features the same behavior.

I have fiddled with this part just too much. This is beyond my level of expertise/understanding. I will really need yours to give me a light on this one…
Thanks in advance and have a great day,

It grows cause you override the start anim which shrinks so no more shrink but not the up anim which grows so it always grows. You should override both if you do not want this behavior:

https://playground.babylonjs.com/#K60448#201

2 Likes

Thanks a lot,
I’m gonna need some time to get a clear understanding of this but I can see it works and is similar to the behavior I wanted/was expecting.
I’ll try to implement shortly. Thanks again,

Thanks again,
Finally managed to eventually get this understanding I was talking about. Starting with the understanding that by doing this I’m actually running an anim (lol;) Anyways, I guess I also got the part with the ‘overriding’ and ‘need to clear’ (each time). I didn’t give you the complete behavior/original idea in the playground so I struggled a little with the missing parts. In this aspect @com_team, the playground is really a great tool for investigating. I should use this invaluable asset more often:)

So, in the end, I got it right I suppose and it looks something like this
https://playground.babylonjs.com/#K60448#205
(Don’t look at the values/cellIDs, they are wrong and also the button is not just a toggle but a 3-steps toggle (making sun, snow or heavy snow).

Anyways, after all that and before I’d eventually implement (and make all the design/anims), I guess my question is: Is this approach/method anything you would recommend? lt seems that if I was to do that for all of my buttons, it would may be add some faen load to the GUI. I’d like to keep with good reactivity and possibly avoid unwanted results.
Thanks again for your invaluable support and great advice.

It sounds a bit complex but should work I would recommend to try it as it works and reevaluate in case of issues only.

Oops! That’s precisely what I was hopping to escape.
Got you. The ‘Trial, fail and try again’ process is underway;) :test_tube:
I will attempt larger implementation (on 5-7 buttons, code side only) and see how it goes…
I’ll let you know about the outcome/eval.

Hello,
It’s just me again with a second thought after the WE;)
To be honest, I don’t find the approach and result (with animated cells) very ‘sexy’ and I was just wondering. Since the release of 4.2, I had this idea of using (and may be combining with other effects) the post-process (and node material) to make some faen post-processing effects on my Bab 2D GUI controls/buttons. I initially wanted to implement post-process for my scene (and isolate the GUI with a multicam approach and a layerMask) and I tried it and this works, no-worries.
Now, I was just wondering, can I (and if yes, would you recommend) use post-processing on my GUI buttons/controls. And then, may be with also a post-processing (a different one, of course) on the scene (or meshes) when the GUI panel (i.e. a settings panel) is open/active. Is this possible and would it possibly have an impact on performance.
Thanks again for your input,

…and if you have time for a funny output, check this one out:
https://playground.babylonjs.com/#3K69VT#4
I call it ‘The Warp’ or you can also call it the ‘Phantom Cannons’. Zoom in after pushing the ‘post-process’ button to find an alternate reality where the cannons do not exist… but can shoot or they are visible but cannot shoot…or may be it’s the other way round… I’m not sure anymore;) :ghost:
A good laugh and also food for thoughts, I suppose.
Thanks,