This tutorial is part of a series on how to construct an awesome-looking scroll gallery, with inertia, snap effect, zoom and other stuff. Now we will add a snap effect to it, or as I call it, a magnetic behaviour. When the scrolling gallery is left somewhere between two images, the behaviour will move the one closest to the center towards the middle by scrolling all the sliding gallery. Easier done than said, actually:
Let’s get on the snap effect parameters!
Let’s start with the parameters we’ll need to add to our script this time:
public bool doMagnetize = true;
public float magnetizationMaxForceFactor = 0.09f;
public float magnetizationRangeAlphaStepFraction = 0.5f;
protected float magneticForce;
The first one is just to be able to disable the whole behaviour in one click. The variable magneticForce, instead, will be used to pass the actual per-frame movement to perform, as caused by the snap behaviour, to our updateAlpha function (that will change accordingly).
As for magnetizationMaxForceFactor it will be a factor that defines the maximum movement that can be done in a single frame. And last but not least we have magnetizationRangeAlphaStepFraction, a variable that represents which range of the intermediate positions between two images should be a valid starting point for our snapping behaviour (0.5 being just everywhere and less will leave some resting areas in the middle of two images).
To the bat-functions!
We won’t need to change the start function, but our Update will need a fix:
First we check that there’s no input and that the magnetization flag is set to true, otherwise we’d only be wasting our CPU cycles. Then we get the difference between the current position and the nearest image thanks to the module operator and the alphaStep variable that gives us the distance between images.
Implementing the actual snap effect
Now we can distinguish two cases: either we need to snap to left, or we need to snap to right. But we also could be in the case that magnetizationRangeAlphaStepFraction is small enough to allow for a resting position between images and that shall be checked too. Once we decided this we’ll see if we’re so close that it’s better to just skip to the final destination (by using the whole rest value as our next magneticForce ) or if we should go move of a fraction of it (by multiplying for magnetizationMaxForceFactor ).
Well, now the slider looks way nicer but it still lacks an inertia option and the abilty to select stuff. You’ll have to wait a bit for that, until next part is ready. Join my newsletter, I’ll link it there! [edit: next part is here]
Here’s a copy-paste friendly recap of all the changes we made to the base script in last article
This tutorial series on how to build a cool scrollable selection area in unity is nearing its end, here we’ll mod the previous script to add a scroll inertia effect, so that the scroll doesn’t stop immediately when the user lifts the finger.
In last edit we added a snapping behaviour to our scroll area, and if you have not so many items to scroll that can be enough. But what if there are a lot of them? Let’s be clear, if you need to stash more than 30, I’d advice to use at least a scroll slider bar too, makes easier to navigate and keep track of what-is-where. But already with 15 or so elements it would be nice not to have to scroll through every single one of them with your finger. Let’s have one powerful slide do the job of a dozen weak ones!
Let’s set the parameters
To achieve this we’ll add an inertia “factor” to our movement, pretty much in the same way we added a magnetic force.
So, here’s how:
public bool useInertia;
protected float inertia;
public float inertialDampening = 0.9f;
public float inertiaPersistenceFactor = 10f;
useInertiawill be used as a control flag to switch the behaviour on and off
inertiais the variable where we store the movement due to inertia for the frame
inertialDampeningis our attrition factor, we’ll just mutiply this to last frame’s inertia to dampen it
inertiaPersistenceFactorinstead gives us control on how much the inertia effect should persist before being set to exactly 0
Changing the functions for scroll inertia
This time we’ll also have to change the Awake function because as of now magnetic behaviour and inertia are quite conflicting, they could produce a jerky or oscillating motion. It’s easy to merge them elegantly but that’s something I won’t do here, sorry 😛
public virtual void Awake()
doMagnetize = false;
As for our Update function, that very predictably becomes:
What happens here is: first we check our flag, then we evaluate if there is any input. If there is we update inertia to exactly that frame’s movement, so that we may use it later. If there is none, inertia gets its own value, dampened.
When it’s just too low to care about it, we set it to 0;
Lastly we need to insert the inertia we calculated into our updateAlpha function like this:
See where we just sum inertia and magnetic force? there is where you want to intervene if you want to use them both without strange behaviours
And that’s it!
Now you can add inertia to your scrolling behaviour. Isn’t it cool? Last part of this tutorial series will introduce selection, which can be key to using this thing in your UIs without having the player tap on the image/button too. Don’t miss it, join my newsletter and I’ll tell you when it’s out. [edit: next part is here]