Infinite looping Scroll View / Scroll Rect (Unity Beginner Tutorial)

hello everyone I am the unity dude and in this tutorial I'm going to show you how to make an infinite scroll view in the unity game engine the final result will be as shown in the video before we begin make sure to click the Subscribe button below for more useful Unity tutorials so let's get started I have an empty scene with a UI canvas and a background image add a new scroll view to the canvas which we will be working on delete both the scroll bars inside the scroll View and disable vertical scrolling let's change the size and the background of the scroll View next add a horizontal layout drop to the content panel enable the width component of use child scale and set child alignment to Middle left after this add a Content size fitter and set its horizontal fit to Preferred size and now we can start adding items to the scroll View I will add three items with an image in the background and a label in the foreground for now let's label the items a b and c so that it is easier to understand what's happening let's adjust the spacing and padding of the horizontal layout group on the viewport I will add a rectangle mask to make the corners of the scroll view look smoother and our UI is now ready this is what the scroll view should look like when we play the scene next let's get started with the coding part add a new script to the scroll View which I will call infinite scroll inside the script the first thing we need is the UI Library after this add all the reference variables we will require for the script we will need a reference of the scroll rectangle references for the rectangle transforms of viewport and the content panel the horizontal layout group and finally we need a rectangle transform list for all the items in the scroll View now the logic which we are going to implement is we are going to duplicate the items in the scroll View at the start and at the end of the content panel and when the user Scrolls past a specific limit we are going to Loop the position of the content panel backwards to make it look like an infinite scroll View so let's first implement the logic for duplicating the required number of items to calculate the number of required items divide the length of the viewport by the total space required for a single item the total space required for one item is the sum of its width and the layout group spacing use the ceiling function to round this value to the next highest integer and now let's duplicate the specified number of items on the left and right of the scroll View for adding items on the right simply instantiate them from first to last and then set them as the last sibling do the opposite for adding items on the left add the items from last to First and then set them as the first sibling back to Unity assign all the variables to the script and run the scene perfect our items are being duplicated in the correct sequence the next thing we want to do is set the position of the content panel so that the original items are shown at the start of the scene to do this calculate the space taken up by the original items in the start of the content panel and then set the position of the content panel to this value Let's test the code and perfect the content panel is positioned in the center and now we will implement the logic for looping the scroll View if the X position of the content panel becomes larger than 0 calculate the space required for the original items and subtract this value from the position of the content panel to make it Loop in the opposite direction make sure that you call the force update canvas function for looping in the other direction add the same value add the same value when the contact panel reaches the last original item and let's test the code the content panel is now looping infinitely however sometimes there is a strange behavior in the velocity of the content panel the behavior occurs because when we change the position of the content panel it affects the velocity calculations to fix this we will need to ignore these calculations on the frame when we reset the position of the content panel create a vector 2 for storing the velocity of the content panel also create a Boolean for checking when we reset the position of the content panel set these variables to 0 at start and now when we reset the position of the content panel save the velocity of the content panel and set the Boolean to true and now if we reset the position of the content panel in the last frame we will ignore the velocity calculations by setting the velocity of the scroll view to the one we saved in the last frame and we are all done let's run the scene to check if everything is working just as we want it to perfect we now have an infinite scroll view in our unity game you can change the number of items in the scroll view or the size of the scroll view to any value and it will always run as intended that's it for adding an infinite scroll view in your unity game if you found this video helpful make sure to hit the like button

Channel: The Unity Dude

Views: 6,209

Keywords: unity, unity ui, unity scroll view, unity scrollview, infinite scroll view, game development, unity development, unity scroll rect, unity scrollrect, scroll rect, scrollrect, snap scroll, infinitely looping scroll unity, infinitely looping scroll veiw, infinite scroll unity, infinite scroll view unity, unity scrolling, scroll view, unity gui, dynamic scroll view, scrollview unity

Id: r8Z-gPcWlgg

Length: 7min 42sec (462 seconds)

Published: Thu Aug 31 2023