Unity UI Unity UI Scroll Snaps new Version 1!

Unity UI Scroll Snaps Version 1

Unity UI Scroll Snaps is an open source project focused on creating robust components for all of your scrolling and snapping needs.

Haven't Heard of This Before?

If you haven't seen this project before, it had an old Version 0 which is still (for now) the most fully-featured version. You can find more information about it here.

Why is it Moving to a New Version?

The reason that the project is moving to a new version, is that the old code was getting hard to maintain. Plus when I looked at it I kept thinking "I could do this so much better now smh" so I decided to go ahead and do that! The new version is rewritten from scratch with:

• Better Object Oriented practices.
• Better structure.
• And unit tests! Lots and lots of unit tests!

The new version is also more robust, whereas before the items' RectTransforms had certain properties you couldn't modify, this is no longer the case! The project now uses the latest in... math... to allow you to setup your items (as well as the content and scroll snap) however you like! See the Initialization Demo for some examples.

Want to Check it Out?

If you want to give the new version a shot, here's the latest download. You can also check out the source code here.

List of All the Things

Examples of "all the things" in action are part of the asset package. Check out this for the Version 0 List of All the Things.

Spoiler: Components

Directional Scroll Snap

The Directional Scroll Snap is based on the idea of the scrollable item menu. Items are "snapped to" (aligned with the pivot of the Directional Scroll Snap) along one axis so that it either scrolls vertically or horizontally. The Directional Scroll Snap also snaps to items pivots not their centers (although you can set it to their center) to give you more options in how you animate & organize your items.

Options Include:

• Moving Horizontally or Vertically.
• Making your items appear to loop! Works with any configuration you can think of (yes this includes different margins steve).
• Programmatic Population. Add an remove items at runtime. Includes bonus efficiency if you modify it before the scroll snap is enabled, for no extra charge!
• Supports configuring items in anyway you want! Weird pivots? Scroll snap doesn't care. Want to scale things? Scroll snap thinks that's cool. Want every item to have a different anchor point? Scroll snap throws you a pool party.
• Also supports layout groups like: Horiztonal Layout Group, Vertical Layout Group, and Grid Layout Group, because we all have those days.

Spoiler: Helper Classes

Scroller

The Scroller is based on the Android Open Source Project's Scroller. It makes it easy to move something from point A to point B in way that's cleaner and more robust than simple lerping.

Options Include:

• Animations based on velocity (Flings).
• Functions for calculating where a Fling will land before it has been flung.

Item

The item class is used to store data about the Items controlled by the Scroll Snap. This allows data to be moved out of the Scroll Snap into somewhere that makes more sense. This class is also very important when it comes to arranging the items of the Scroll Snap because it handles margins.

Options Include:

• rectTransform property.
• snapPosition property.
• Functions for setting the margins. It can do this programmatically based on where the item is in relation to its neighbors, or it can be be set artisanally by passing a float.
• Functions for getting the margins. Margins work similarly to CSS, meaning that margins overlap and whichever margin is the larger margin is the one you will see.

ScrollSnapUtilities

Holds those persnickety functions that don't really belong on an object.

Options Include:

• WorldPointToLocalPointInRectangle function.
• WorldPointToRelativeToAnchorPoint function.
• CalculateMinimumMargin function. (Used by the item!)
• And others (ooo so mysterious)
• Also lots of documentation comments (which goes for all of the other scripts as well!)

Want to Have Input on What Gets Added?

I have created a super-short 5-question survey about how you used the previous Version 0. Your answers to those questions will help inform what gets added to Version 1 and especially what gets added first!

You can also reply below if you have comments, questions, or suggestions for the new version.

DISCLAIMER: Neither survey answers nor replies are in any way binding and just because you ask for something does not mean it will happen.

But I do really appreciate the input! And I will be looking at the survey to see the results!

Thanks!

Thank you for taking the time to check out the new version. If you find any bugs please post an issue on le bitbucket, or reply below. Please try to keep questions/comments about Version 0 on the other thread, and questions/comments about Version 1 here.

Thank you again!
BeksOmega

 

Added a new List of All the Things to the OP. Now you can try before you buy*! Or read the info before you download anyway... hehe.

--BeksOmega

*No buying is actually included in this project

 

Does the directional snap work in a nested fashion? As in I want the horizontal scroll to snap but the vertical one not to?

 

Currently it only does this in a limited way.



The above is a gif of two vertical scroll snaps nested inside a horizontal scroll snap. As you can see if you drag on the yellow areas the vertical scroll snaps will move (the yellow areas are the content objects of the vertical scroll snaps), and if you drag on the blue area the horizontal scroll snap will move (the blue area is the content of the horizontal scroll snap).

I'll definitely look into some sort of input-passing system for the scroll snaps, so hopefully this can have better behavior in the future.

I hope that helps! If you have any more questions please reply!
BeksOmega

 

It's really impossible to get 1 canvas to become bigger, like when doing a slideshow.
Can't even get canvas elements to work
sigh..

 

Hello,

Could you send me some more information about the problem you're experiencing? A picture would be super helpful!

I might have a recommendation, and if not the information will help me file a bug report

Thank you!
BeksOmega

 

Well i can't really post a picture. But just imagine having a timeline or a slideshow where you want to pop out / lerp the size of middle element to highlight it!

 

Ah ok! There will be a "closestItem" attribute in the next update that should help you find the middle element. And events (such as ones that will tell you when the scroll snap moves) are planned.

For now you can hack it by modifying the Directional Scroll Snap component. First add code like this (using an IEnumberable will future-proof it):

public IEnumerable<Item> items {  get { return m_Items; } }

Then you can create a component that works something like this:

Code (csharp):

1.  
2. using UnityEngine;
3. using ScrollSnaps;
4. public class ScrollBasedOnDistance : MonoBehaviour
5. {
6.     public DirectionalScrollSnap scrollSnap;
7.     public RectTransform scrollSnapRectTransform;
8.     public AnimationCurve scaleCurve;
9.     // Change this to 1 if you have a vertical scroll snap (it allows you to access the x/y
10.     // components of a vector).
11.     public int axis = 0;
12.     public void Update()
13.     {
14.         Item closestItem = null;
15.         var minDistance = float.MaxValue;
16.         foreach (var item in scrollSnap.items)
17.         {
18.             var itemPosRelativeToScrollSnapPivot = ScrollSnapUtilities
19.                 .WorldPointToLocalPointInRectangle(scrollSnapRectTransform, item.rectTransform.position);
20.             // This works because the position of an object is the same as the distance from the
21.             // origin, and the last function made the origin of this vector the scroll snap's pivot.
22.             var distanceFromPivot = Mathf.Abs(itemPosRelativeToScrollSnapPivot[axis]);
23.             if (distanceFromPivot < minDistance)
24.             {
25.                 closestItem = item;
26.                 minDistance = distanceFromPivot;
27.             }
28.         }
29.         var scale = scaleCurve.Evaluate(minDistance);
30.         closestItem.rectTransform.localScale = new Vector3(scale, scale);
31.     }
32. }
33.  

Which looks like this when it's running:



Note: The animation curve should start at 0 on the x-axis and the end should be less than or equal to the distance between the items' /pivots/. If you make it bigger your item's won't get scaled back to 1 by the time the other item is closer. (In this example the items' pivots are 100 units apart and the animation curve goes from 0-50)

I hope that helps! If you have another questions please reply!
BeksOmega

 

Could you perhaps share the project, i can't seem to get it right

 

Sure thing! The download below has the modified DirectionalScrollSnap, ScaleBasedOnDistance script, and is stripped of tests & demos. To view it:

1. Create a new project.
2. Go to Assets > Import Package > Custom Package
3. Select the ScaledBasedOnDistanceExample.unitypackage you downloaded.
4. Open the ExampleScene.
5. Hit Play and scroll the Scroll Snap.

I also created an issue to add a Scale Based on Distance Demo to the official download, please add a comment if you have thoughts! And if anyone is interested in creating that I do accept pull requests

 

Still not as good as i had hoped it would be. What i'm looking for is for the item to enlarge when it hits the purple rectangle, right now it's popping out too fast.

 

Well luckily that's not too tricky All you need to do is access the ScaleBasedOnDistance component, attached to the Directional Scroll Snap Object. Open the animation curve, and modify it so it gives you the result you desire.

Or you could create a different function for modifying the item size that doesn't rely on an animation curve. Really anything goes hehe.

I hope that helps! If you have any further questions please reply.
BeksOmega

 

Still doesn't feel right. If i add more elements it goes past the box, and even if modify the animation curve, it starts to curve too late, and only one element curves.I think i'll be using unity's scroll view due to other functions and robustness it offers.
Here's kinda how i wanted it to work:
https://imgur.com/a/Sm5C2pF

Since that's some chinese plugin with lua,
i think i'll have to write it on my own :/

 

how about some getting started guide, please? =) can't understand how to use it(

 

I need to add my buttons to my scroll at runtime. From what I have read in the documentation, I should use “insertChild”. Can you provide a quick scripted example of how to access and use that method?

Actually I figured it out. It's working now.

Code (CSharp):

1. // DirectionalScrollSnap scrollPanel,
2. scrollPanel.InsertChild(rt, index, 0f, 50f, 50f, DirectionalScrollSnap.LockMode.After, true);

Two questions:
1. Can you help me understand what the LockMode is?

2. When I add my buttons to my scroll at runtime, the "Start Item" no longer gets obeyed. Even if I toggle the enable-ness of the ScrollSnap with a script after my buttons have been added.. (Note: When I manually toggle the enable on the ScrollSnap during PLAY, the ScrollSnap successfully snaps to the start item.

 

New Update 1.1.0 Additions Include:

* Loopability! Your items can now appear to be in a loop.
* Programmatic Population. You can now add and remove items at runtime.
* Gizmos that help you configure your scroll snap.
* Squished a whole bunch of bugs.

You can see the complete change log here.

[EDIT] Also worth noting that unit tests are no longer included in the unitypackage because most people don't need them. You can still download them off the bitbucket though

If you have any questions/comments please reply!
--BeksOmega

P.S: @unnanego and @scandell I will be replying to you as soon as possible! Sorry I didn't see your questions sooner!

 

I started an issue to track this request. Are there any specific things that you have questions about?

@scandell I replied to you in a forum conversation so that this thread doesn't get filled with Version 0 stuff.

If there are any other comments or questions I'm happy to help

 

Hello, im sorry about the noob question(im just starting out with unity) but im using scroll snap in my project and i want to show a different image per scroll page index, i though about something like "if Currentpage = 1, img1.setactive (true) and if Currentpage = 2, img2.setactive (true)..." but i have no idea how to implement that.
so far i only edited Horizontal Scroll Snap so that it logs the current page number

 

Hello,

So just to clarify, are you using Version 0, or Version 1 of the project? There may be different ways to achieve this depending on which you're using. If you're not sure it should say the version on the folder inside unity.

Second question, are img1 and img2 items inside the scroll snap? or are they objects outside of it?

And last question, would you mind posting the code you created to do the logging? I think it's super cool that you modified it! And seeing your changes will help be give better suggestions of how to hook into it.

Thanks for trying out the project! Once I have a better idea of the situtation hopefully I'll be able to give a better suggestion hehe.
BeksOmega

 

Should I Use those Scripts my project??

 

If you want to create a scroll snap I personally (*wink wink*) think this is a great project for doing that. It's licensed under the MIT license, so you can include it in your project for free as well as include it in projects for sale (such as on the asset store).

 

Hello! I've had success importing UI Scroll Snaps 0.8.2 into my projects, but for some reason 1.1.0 turns up a whole bunch of compiler errors in DirectionalScrollSnap.cs, such as:

Assets/Unity UI Scroll Snaps 1.1.0/Scripts/Components/DirectionalScrollSnap.cs(27,19): error CS0234: The type or namespace name 'EventSystems' does not exist in the namespace 'UnityEngine' (are you missing an assembly reference?)

Assets/Unity UI Scroll Snaps 1.1.0/Scripts/Components/DirectionalScrollSnap.cs(28,19): error CS0234: The type or namespace name 'UI' does not exist in the namespace 'UnityEngine' (are you missing an assembly reference?)​

Any idea what might be wrong? (I'm using Unity v 2019.2.0b1, by the way!)

 

Thank you for sending this in! But I was not able to reproduce it on the latest stable version of unity :/

I think you may be experiencing the issue described here? But if you could send in a minimal example of this happening in v 2019.1.6 I would be delighted to take another look!

I'm sorry I can't be more help at the moment, but if you have any further questions I'm happy to reply. Thank you again!
Beks_Omega

 

Hi Beks_Omega,
Thanks for creating this plugin, I think it is super-useful and I will probably use it for several new projects in the future

I have one problem, though.
In the documentation of the last version ( bitbucket.org/beksomega/unityuiscrollsnaps/wiki/Components/DirectionalScrollSnap#markdown-header-properties ), I can see that you describe a lot of properties that I can not see in the component when I create it.

Basically instead of seeing this:



I see only this:


(it's from a demo scene in the project, but it happens also when I create my own):

Which is a pity because I would like to use features like the back/forward buttons or being able to set up the start item.

I imported the version 1.1.0 (indeed I have everything inside a folder called "Unity UI Scroll Snaps 1.1.0").

Do you know what could it be wrong?

Thank you again!

 

Hello @Tiollo,

That would be because I was a bad developer and never updated my documentation

This Version 1 project doesn't have all of the same properties as the old Version 0 (and probably never will because it seems like Unity is moving away from the nGUI system). If you need access to all the extra bits and bobs you can download the old Version 0.

I hope that helps! If there's anything else I can do to help please reply
Beka

 

Oh ok, I thought that I was missing something somehow

I managed to add to this last version some of the features that I needed (scaling the centered object and setup the start cursor position) so I think that I will keep this version 1.1.0

Thanks again!

 

Hi, very good component, thanks for open sourcing it.

Any advice on how to programatically scroll? For instance, by clicking a button?

I can access the Scroller instance but I'm not sure what methods should I call in order to make it scroll.

 

Sorry I for the late reply! Somehow I missed your post :/

Sadly the Version 1 scroll snap does not currently have support for programatic scrolling.

Luckly Version 0 does! If all you're looking to do is button scrolling you can simply add a button to the Back Button or Forward Button variable slots (docs):


By default the buttons only move by a single item, but that can be changed under the Animation Settings dropdown : )

I hope that helps! If you have any further questions I'm happy to help
Beka

 

hi @Beks_Omega

Does this work with a gamepad?

I've been looking everywhere, trying to find a solution where the DPAD can scroll through a menu. Like you'd find in an NES Final Fantasy armor shop.

Unity's current solution doesn't focus on the button as you scroll with the DPAD, so your button selection could be behind a mask, since Unity doesn't know how to auto scroll.

Thanks!

 

Hmmm... I really can't say :/

I don't know how Unity interacts with DPAD's and I don't have one available to test :/ I can tell you that the Scroll Snap uses Unity's built-in event handler interfaces. But whether they're susceptible to the problem you're seeing, I don't know.

You might be able to listen for DPAD events (you'd have to look into that one b/c I have no idea) and then manually call ScrollToSnapPosition(), or one of the other public functions. But that will just depend on how hard it is to grab those DPAD events.

Sorry I don't have more info! If there's anything else please feel free to ask!
--Beka

 

Sorry when I mean DPAD .. its like keyboard input more or less. The gamepad and keyboard input is the same.

I'll give it a try and let you know! Thanks for the interesting script! I can't believe Unity does not have this built in .. maybe your script should be implemented into their code. Your hard work and generosity should be noticed !

I did some tests it doesn't seem to work with keyboard\ gamepad interactions. I guess its mean for strictly mobile or mouse input right?

 

Hello and thank you for this asset.
Is there an event or boolean to check in snapping has occurred or scrolling has ended?

 

There is no event for that in Version 1. But the Version 0 project does have those events. You can look at the events documentation for more information. My guess is that you will probably want the "SnappedToItem" event.

I hope that helps! If you have any other questions please ask
--Beka

 

Hey @Beks_Omega . I'm trying to use your asset Version 1.

Why with the following set up, "PuzzleSquare" is used as a scrollable element and not "PuzzlePiece" ? You can see in scene view small green square (PuzzleSquare) is highlighted. They both have rect transform. I want whole PuzzlePiece to be a single element that is dragged.


Here is a screenshot when running:

 

@lipisis Thank for the detailed question and the pictures! That made it really easy to figure out what was happening

This should be a pretty easy fix. You just need to make sure that all of your "PuzzlePiece" GOs are the child of a "Content" GO. The Content object just needs to have a rect transform. The Content object is what actually gets moved by the directional scroll snap. Currently your PuzzlePiece object is getting treated as the content.

Your new hierarchy should look like this:
> Item Scroll
---> Content
------> PuzzlePiece
---------> PuzzleSquare
---------> PuzzleSquare
---------> PuzzleSquare
------> Puzzle Piece
---------> PuzzleSquare
------> etc...

There are also some demos you can download if you want to see some pre-set-up scroll snaps.

If that doesn't work or you have any other questions please reply!
--Beka

 

Thanks @Beks_Omega , that is exactly what I was looking for. Awesome

 

Hello @Beks_Omega ! Great asset! I am currently trying to implement this into my project. As of now, It is working great except for one minor thing. I have it set to Horizontal snapping, and it does that well. However, it seems to move the content transform down on the Y axis a little bit rather than keeping it in the same position as it starts at. Any ideas? Thanks!

 

Hello everyone.

So, I see that this is kind of an old thread but I'm going to post anyway .

I have this project that I am working on and I came across something that can only be solved with a custom "Scroll Snap" kind of thing and I would appreciate your opinion on the subject.

It is thoroughly explained in the post linked below.

https://forum.unity.com/threads/cre...ng-off-the-device-screen.949986/#post-6195952

Thanks!

 

Hello there,

Is it possible to set a specific item on the item list to appeared first ? I have a list of all months and I want the "March" item appeared in center first.

Thanks !

 

Hello everyone,

Great job, I'm starting to use it and I'm already a fan of it. I'm French so forgive my broken English ... I have a question, is it possible to have items added and deleted dynamically in Unity play with the content resize in loop mode?