Hello,
I’m trying to build some piece of logic and for the life of me I cannot figure it out.
I have this 2D widget that represents a submarine seen from the side. This is made of a canvas pannel, which contains an overlay, which contains several widgets. What I want to do is this: when clicking on one of those widgets, the whole thing should zoom in to that widget.
I know how to zoom by changing scale, but what I don’t know how is how to make sure the clicked widget will be at the center of the screen.
What I’ve been trying is to find at which position the entire overlay should be moved via a Set Render Translate function, but I am unable to find some math that works for every widget.
It’s possible that my initial setup is wrong, I really don’t know.
(note: my question is mostly for the top “slot” and the left most one". The others are currently in a horizontal box, which I plan to change later)
If you can’t get the Set Render Translate working, maybe try keeping the translation constant and instead setting the Alignment from (0.5, 0.5) to (WidgetX/CanvasXSize, WidgetY/CanvasYSize). This should set the centre point of the overlay to the selected widget. I can try to implement both methods in a few hours when I get on my Development PC.
Alright, I was able to get it working with the Alignment method, I’ve attached a minimal Project where it works:
I commented most of it, let me know if there’s something you don’t understand or can’t implement into your project. You can adjust the float curve to change the look and duration of the animation. It is also able to support navigating from selection to selection, as well as smoothly interrupting animations before they finish. It looks kind of strange when going from low zoom to high zoom, you can fix this by creating a separate float curve for zoom and adjusting it if you want.
Oh wow, thanks a lot!
I’ll take a look tonight (it’s morning where I am) and try to make it work, but thank you for putting this together, I really appreciate it!
I downloaded and opened your project in unreal but I only see empty folders in there. When I opened the project it I got an error saying it can’t find “BlankLevel”.
I can see the uasset files in windows explorer but when I import them to a project they are not there.
Looks like there’s no way to convert from 5.0 to 4.27 besides manually copying the Blueprints over. I can start doing it in 4 hours, but you can get it now by opening it in 5.0 and moving it yourself. It’s not too much work, there’s only 1 blueprint that has any significant amount of logic. An added bonus would be that you would get a thorough look and understanding of the system
That worked, thanks again. I’ve started taking a look, I think I’ll try to reproduce it in my project instead of importing directly, this way I’ll understand the logic better.
I’ll come back to shut this thread down. But thanks again, I really appreciate your help and the fact that you went so far as to make a dummy project to demonstrate the logic. You’re a real MVP!
Coming back to close the thread and thank you again @Simple_Binomial !
I remade your logic in my project, and it works well. It didn’t work out of the box of course (nothing ever does, right?), so I had to mess around with it a little bit but the base functionality is there and that is great.
One strange thing is that I could not get the widget to zoom to as a Canvas slot. It can’t read it for some reason. I’m getting the transform instead and that works. Not sure why, but I don’t really mind.
