Hi! I’m Luca, a graphic designer, I’m learning Unreal from June and I’m working on an interactive application based on a simple menu system with a lot of write and media content like images and videos.
Actually I’m trying to implement the Gallery with the swipe by using touch or left mouse button (for change images) and with the zoom by using the mouse wheel or by using two fingers move (for zoomin and out).
I’m newbie and unfortunately I don’t know the C++. This is my gallery blueprint:
Anyway I’m thinking to use for the swipe an Horizontal “scrollable box” but it can’t stop (I think) on a particular image when you swipe.
For the zooming I’m tried to use a lot of tutorial but no one of these works. I need of an image that will be zoomable by scrolling the mouse wheel or by using the traditional two fingers move.
Any Suggestions?
Thank you!
I believe the keyword you are looking for is carousel menu, these come in different shapes and sizes, including 3d ones.
You could use a scroll box with the scroll functionality disabled (oh, the irony) and control the position of the scroll manually. Here’s an example with the buttons.
The whole thing is done in the widget graph, the buttons set the desired position of the Scrollbox, and the Event Tick tries to reach this position. This is a very basic setup and can be improved in many way, like *Gating*the *Tick *so it does not unnecessarily eat the performance, and adding clamping to the scroll offset.
Hi Everynone,
I tried today your way, and it works very nice with the button.
I setup the scrollbox with the same size of the images contained in it (1920x1080), and when I use the button with the offset on 1920, the scrool stop exactly on my image.
But my problem is the touch control. I tried to use it without button and doesn’t work, because after swiping the scroll come back as if there was a magnet.
I tried to set up somenthing like this:
But doesn’t work also. What I will setup?
(I have in My Player Controller all my blueprint with the touch and mouse control)
I’ve never used any swipe functionality in UE4, not sure what kind of data it returns but when you say it snaps back like a magnet it’s most likely caused by the Tick event trying to set the position of the *Scrollbox *to the requested value. In this very case, your touch movement should be setting the ScrollOffset variable rather than the position of the *Scrollbox *and you should let the Tick event handle the actual movement. This way no matter how fast/hard one swipes, only one item can be swiped at a time. (althought the offset would most likely stack up which might end up looking convincingly responsive)
If you want the scrollable item to follow the finger independently as the user navigates within the boundaries of the Scrollbox, additional tweaks will be needed. You could disable (gate off) the Tick for the duration of the swipe and only reactivated it once the touch is finished, and only then let the Tick take over and slide the button to the final resting position.
To sum it up, for the most natural feel, I think you’d want to implement 2 separate behaviours when interacting with this widget:
Scrolling with the buttons: * (already working as intended)*
when a button is clicked the scrollbox offset is increased/decreased by a certain amount
Tick will handle the sliding trying to reach the desired position using a curve
Swiping:
disable Tick onTouchStarted so the user can control the Scrollbox position directly
touch location sets the Scrollbox offset directly
on TouchEnded, set the ScrollOffset variable to the desired final resting position (left or right of the current touch position, whatever is closer to the centre of the scrollbox)
enable Tick and let it handle the rest of the sliding
This is untested. If someone comes here and corrects me, listen to them.
Hi Everynone,
I’m finishing this week to works on the Galley in Umg.
I don’t know if is the right way but I think is a good start.
I use your example for build the scroll box interpolation every 1920 pixel.
Now the next step is build a touch interaction because the buttons works fine but when I try to drag and change the image (with the same offset 1920 pixel)
the scrollbox come back.
I will try tomorrow to disable the tick on touch started and I will come back to you soon!
Swiping:
disable Tick onTouchStarted so the user can control the Scrollbox position directly
touch location sets the Scrollbox offset directly
on TouchEnded, set the ScrollOffset variable to the desired final resting position (left or right of the current touch position, whatever is closer to the centre of the scrollbox)
enable Tick and let it handle the rest of the sliding***
but I don’t find the right way. Can you help me with a blueprint example?
Also I’m trying to set up all the button in the master menu for go directly to the corresponding image (size 1920x1080).
if I press the button number 1 I want to show the image number 1 - scroll box position 0.
if I press the button number 2 I want to show the image number 2 - scroll box position 1920.
if I press the button number 3 I want to show the image number 2 - scroll box position 3840.
This is what I want to do, but in the reality If I press the button number 1, it shows me the image number 1.
But If I change the image by left/right buttons for example on image number 2 and after I close the slideshow,
when I open again by pressing the button 1 the position is on image 2.
How I can reset the position on closing button? Or I can setup the reset position directly on the image button?
there’s a Spacer at the beginning and at the end (2x width of the image) - this allows for the first/last image to be centred
you have a set number of images and there aren’t that many of them (otherwise, I’d go a different route altogether)
you’re not going to do anything fancy with this (the scrollbox’s functionality is somewhat limited and for the fancy stuff you’d be better off writing your own scrolling widget)
The basic idea is to Enable Tick when using Buttons and Disable Tick when scrolling by dragging the scrollbox (this is native funcionality)
