So I have a fullscreen widget that is a draggable map, with buttons on certain locations. When a user clicks a location button, I want the widget to move so that the button is in the centre of the viewport. I can’t find the answer to this anywhere as googling ‘widget to centre’ brings up stuff about anchors.
I’m still a Ue4 beginner so explicit help would be appreciated! Many thanks
There’s a node called [SetPositionInViewport]. You’ll need to make some calculations depending on the widget size, but it does the job.
calculations are ratios dependent on output size
Meaning if you are in 1080p 100% is 1080px height.
For your widget to be centered you want 50% of that - 540px.
So to get your map widget to pan around smooth you just have to set up a couple of variables that update any time resolution changes (otherwise scaling the game at runtime will result in wrong calculations).
To do this, you should probably consider an interface call. “Scale UI” or similar.
And any time you update resolution you call the interface so that the variables for the wisget get updated.
Thats really the only overly complex part about it.
Panning the map around should be simple enough however you decide to do it.
I think a simple timeline with a curve that drives the movement though time by returning a value from 0 to 1 is probably good enough in most cases.
Youll have a start point and an end point, so you can lerp using the result of the timeline between the 2…
Thanks for your responses guys.
@Tuerer Unfortunately SetPositionInViewport makes the map unusable - it stops the mouse from being able to drag.
@MostHost_LA I already have the map panning fine when you drag it using the mouse (blueprint screenshots attached). I’m just not sure how to move it properly to centre a button without messing up the dragging function.
I’ve also attached how the design is set up - there’s a border, and inside is the map canvas. What I need to happen when a button is pressed is the entire map canvas to move (as if moved by the mouse) to a central position within the border. I’m not sure how to get the correct co-ordinates to translate it properly.
I’m happy to upload the project if that would be more useful to have a look at. Sorry if I am not explaining myself very clearly!
Make a new function that looks like the one where you use set render translation.
Instead of having the mouse data use a location.
Then you can either update and make the function recursive - which is a nice idea really. But because unreal is unreal it may crash due to repeated loops which the engine “thinks” are infinite.
Or you can add a timeline into the function perhaps - ehich i think you arent able to do, seriously cant recall.
OR you can create a timeline and repeatedly call the function via the timeline to get it to pan to the final location.
I would work the function so that given an end location it calculates the line between Origin and End Point and transitions toward the end point based on points along the line.
In general.
Given an End and a Start point you have a lenght.
With that length you can divide it by time to find how many total steps are required to reach the final point.
You can easily calculate what increments each step must use to achieve the final poistion at the chosen time - and use the function to automatically pan to the next point, and then the one after, etc.
Should be fairly simple to do what you need this way.
I suggest a custom event to be called when the click on the icon happens, and for the custom event to call a timeline. Then the timeline result outputs a value from 0 to 1 where 1 is finished.
As the float increases and its fed to the panning function the map will move about as it would if you were to mouse click it.
‘widget to centre’ brings up stuff about anchors.
It was pointing you in the right direction; with no proper anchoring you’ll need to constantly translate Absolute to Local and account for viewport size / resolution and so on.
This can be done in a much simpler way.
That’s how usually map dragging / panning is done (at least around here)
Ctrl + Shift click the middle bit so you do not need to punch in values manually.
You can now move those elements around in relation to the centre of the Inner Canvas. If you’ve already positioned the POIs, you will need to redo it as adjusting anchors would shift them out of place.
we only need the POI’s offset from the centre of its canvas - called Pixel Shift Request here
When it comes to actual animating the movement, you have options. You could interpolate as above, you could use a timeline in the underlaying blueprint, or you could use a widget animation which is already a timeline.
When the user attempts to drag the canvas manually, close the gate / stop the update.
The best part is that you do not need to worry about resolution, aspect ratio and all that jazz:
Widgets have repeaters:
It can be used to perform a data driven animation. This way you do not need to depend on Tick + Interp + Gate control and make it time based instead.
