Is there a way to enable both horizontal and vertical scrolling for Scrollboxes?
I’m hoping to make a large skill tree similar to Path of Exile, but I’m not sure where to start.
I tried this, but it doesn’t seem to work! It only allows me to scroll with the topmost scroll box. Unless I’m doing something wrong, that is
you could create two scroll boxes and have one a child of the other.
It’s much easier to use nested canvases for this, the idea is similar to a handling a draggable window, more info here:
Otherwise you’ll spend half the time recalculating scrollbox offset position, which is no fun at all. If you want manual handles to shift stuff about, consider sliders - much easier implementation.
The only somewhat difficult concept here is zooming in on the current mouse position as it requires a transform. That’s providing you need that functionality to start with.
1 Like
That’s so funny, I found this right before you commented! I’m testing it out now, but I’m not sure if I full understand how to do it.
Do tell if you have issues getting it to work. To give you a headstart:
The hierarchy is
- [Border]
- [OuterCanvas]
- [InnerCanvas]
The border’s clipping is set to ClipToBounds and the Inner canvas is centred like so:
Shift + Control + Click the middle tile to get it all in one go (optional since you may have an anchoring idea of your own, of course). The rest of the script is as in the post. You may need to adjust the clamps if the skill tree is not full screen.
The inner canvas is much larger than the outer - the idea is to shift the position of the inner within the outer one.
The illusion is pretty convincing:
Adding sliders (if needed) should be fairly easy here, map range their 0-1 output to the inner canvas’ offset in its parent. Should work.
Even without map ranging anything, it seems to work OK, albeit a wee bit jerky.:
You may just need to get the numbers right. Or extract the exact values from widget elements.
2 Likes
Override onMouseMove in the widget. It’s hiding here:
This is awesome! Thank you so much for the thorough response, i really appreciate it!
So, I just recreated the blueprint for the function, but I’m not exactly sure how/when to call the function to get it to work.
Oh whoops, okay! Just did that and put the blueprint in there, but it doesn’t seem to be doing anything… I noticed in that other post it says “OnMouseDown captures the attention of the top canvas”… What exactly does that mean? Do i have to override that function with something as well?
It’s about giving the widget focus.
When you click the widget and there’s nothing explicit to interact with, you will click through to any widget elements underneath (sometimes referred to as tunnelling, I believe). If there are no elements to interact remaining, the input priority is given to the Player Controller.
You can grant widget focus (the above-mentioned attention) in many ways:
- select the root of the widget and set its isFocusable flag True
- and then:
Or, which may work better, switch to UI only mode when you open the widget (don’t forget to switch to another mode when you close the widget or non-widget elements will not receive input), since it’s unlikely you’ll need the Player Controller’s responses while the player is fiddling with the skills:
That did it!! It works! Though I noticed that sometimes (not every time) when I click and drag, it still lets me turn the player camera, even after setting the controller input mode to “UI only”. Other than that, it works great!!
Though I noticed that sometimes (not
every time) when I click and drag, it
still lets me turn the player camera,
even after setting the controller
input mode to “UI only”.
This should not be possible but here we are. Perhaps the way you switch between the modes is the cause of the inconsistent behaviour?
Sorry for the delayed response - you were right! There was a problem when switching the widget open/closed. Just had to walk through each step to find it! Thanks again for all of your help! It works fantastically(:
Hey everyone, i know this comment is few years too late…But im currently trying to implement the same thing and the link above to the forum doesn’t seem to be working anymore. Can anyone pls provide some more info
Hi! I’ve faced same problem and for two days have been searching for tutorials. Eventually I came to the conclusion that I needed to mix ‘2 canvas panels’ with event tick for function ‘on mouse button down’ that calculate final position by mouse position and start position of inner canvas and set new position.
Idk if this decision is optimized but it’s working for me. I’m newbie in it.
Btw if it matters this is 3D widget are in actor like PC, it doesn’t occur in viewport