I’m trying to create a talent tree like Path of Exile. However, i’m needing a two ways scroll to navitage through the talent BP.
The only way i imagined it was a two way scroll(vertical and horizontal), but the scroll box only accepts one of those.
Is there a way to create a 2 way scroll box or do it in another way?
In case you don’t know how the PoE talent skill tree looks like, its like this :
Ideas would be:
1st:
Pack a second Scrollbox into an existing one. The first one vertical, the second one horizontal.
2nd:
Create a Panel and two Sliders.
One slider uses the vertical space and one the horizontal.
position stuff inside the Panel on sliderH value * content width and sliderV value * content height.
the top one is the size of the interactable area, the inner one is much larger than the screen - you’d be shifting this one about, it will house all the icons and whatnot
*OnMouseDown *captures the attention of the top canvas
OnMouseMove shifts the inner canvas by CursorDelta
For scrolling bars:
from my experience, h/v scrollboxes will most likely give you a headache after a while - kind of depends of what you want to achieve, though
use two slider widgets (placed on the top canvas) for this and map-range them to translate into the size of the inner canvas, overriding their *OnValueChanged *and setting the inner canvas’ slot’s position
you’d want to synchronise the mouse drag and the the sliders so the sliders follow it
Let me know if you have any issues setting it up, I can try to dig it up from one of the old projects. I had the whole thing working without any snags.
For zooming in and out:
wrap the inner canvas with a ScaleBox and adjust the UserSpecified stretch - this should work in theory, untested.
I did what you said and it’s working 90% percent fine, however, how could i add a “limit” to the scrolling of the canvas, to not let a “blank” area appear on the viewport?
I have attempted this for the mouse dragging but couldn’t make it work properly. I am not even sure how to debug this further.
I created 2 debugs to track if “is mouse button down” and the “get position”.
My first issue is that the mouse button is only registered as down if i double click, not single click. I need to double click, hold and wait a second before it registers as true instead of “on left click and hold”. The second issue is that on second click, it checks for the position but nothing else happens and I cannot drag it around. Had to wait for input to register, this part works!
I have attached both the blueprint and the UI hierarchy.
Edit: I corrected the -1 to 0.5; the issue is no longer the dragging about but the mouse clicking registration.
Well I tried something else for the heck of it and it seems to have worked!
I created 2 overrides for On Mouse Button Down and On Mouse Button Up and set up my own boolean. This seems to register on single clicking.
Is there a way to make this account for the zoom in? Is this supposed to do that already? The limits should extend according to the zoom amount surely?
I used this method and it worked fine so good stuff. But accounting for the zoom with the clamp is the issue. When I zoom I adjust the user specified stretch but then as the size changes the clamped moving limits stay the same so you cant move very far around the zoomed map. If that makes sense.
I think it makes sense. Perhaps it’s a matter of translating the stretch value into clamp size - a clamped MapRange node should help here. I cannot tell from the top of my head what values would work but that’s how I’d approach it.
I was able to make this (or a slightly edited version) work. Thanks! Now, what’s the appropriate way to handle scale for lots of objects in that lower canvas? I have a grid of hex tiles used as slots for placing hex tiles. I’ve tried to match scale for the canvas and the tiles, but they always get bigger or smaller when I zoom in and out and on drag. For now, I chose a scale I like and removed the zoom feature, but think I may want that back later. Any tips or links how to handle that?
Not sure I understand but have a look at how this canvas is scaled, the post goes into details regarding zooming in / out and handling scale both ways.