Handle Scrolling UI Like a Commercial Game (Animations + AutoScrolling) | Unity Tutorial

In this Unity tutorial I'll show you how to setup a scrollView area, and we're going to polish ALL the features so that it feels REALLY good by the time we're done.
You'll learn about Unity's handy Selectable interfaces (like ISelectHandler, IPointerEnterHandler, etc) and how to utilize these to create custom UI animations.
You'll learn how to handle MULTIPLE control schemes (even mid-UI screen)
And we'll implement some autoScrolling, and how to avoid making this functionality fight with the mouse pointer.

Link to Download our free 2D Asset Pack:
---
---

Unity Selectable Documentation:

Unity Free Cards on the Asset Store

Extension Method to find row+column count for grid layoutr

Link to AutoScroll Script

Contents of This Video: ------------------------------------------

00:00 - Introduction
01:16 - Setting up the Scroll View UI
03:50 - Selecting buttons with the mouse
05:48 - Adding custom animations when selecting UI
07:23 - Navigating UI with keyboard or gamepad
09:17 - Tracking our last selected button so our keyboard and gamepad always work
14:29 - Autoscrolling to a button outside the viewport
15:54 - How to fix the autoscrolling with the mouse

Who We Are-------------------------------------

If you're new to our channel, we're Brandon & Nikki from Sasquatch B Studios. We sold our house to start our game studio, and work full time on building our business and making our game, Veil of Maia.

Don't forget to Subscribe for NEW game dev videos every Monday & Thursday!

Wishlist our Games:
Wishlist Samurado!

Follow us on Twitter for regular updates!

#unitytutorial #unity2d #unity3d

[IdealIdleIncremental]

It's truly impressive how you manage to create such in-depth and detailed tutorials while simultaneously working on your own game!

[LuizMoratelli]

These videos about "Like a commercial game" are some of the BEST content in the youtube about gamedev, please keep doing it :D

[mohamedmusthafa]

One Small Tip Some Time Clicking Out Side Mouse Will Unselect Object So In Ui EventSystem we Can Uncheck Click Background to Deselect, Nice Video really Helpful ❤

[gameclips]

this was great, i'll definitely be using tweening from now on. you can also avoid deselection when moving off the screen by unchecking that in the input system UI input module. It seems crazy that auto-scrolling isn't just built into the scroll rect component.

[NotJustUnity]

Thanks for the video, it always feel good when you see a smooth UI animation ! Keep up the good works !

[davitheking]

i think what you do in this platform is very important. there's really few youtubers that still produce unity tutorials since the incident, and you are one of the few that i follow that makes good feature that are useful and easy to implement/follow (i implemented that bridge platform in my platformer thanks to that tutorial you made some time ago). I can definitely see myself using this to visualize like a shop with items or the buff you gained or the skill you have learned etc. keep up the great content

[lmao]

I really like the approaches especially how you are showing the scrolling/scrollbar reacting to mouse and keyboard etc.
I would love to see a video about input system with this series. Most of the tutorials are showing basic usage of input system yet it never shows proper architecture how to handle more complex scenarios.
I.e. You have gameplay actions then ui pops up, you switch input actions?
What if then it should allow you to transfer stack with control, do you enable additional input action?
What if another popup on top of this pops up and you want to disable it with key? Now you would need to switch to another new input map, or keep some advanced state of which actions are enabled. Which becomes more and more of a mess.
What if map and inventory gets opened at the same time. There would be 2 maps enabled one after another. Yet when you close one of it i.e. inv you can't just switch back to gameplay since map action map is still open.
SImilarly also when you want to show popup, assign esc to close which should be consuming esc key for normally pause menu during gameplay. Where ui popup should not block gameplay keys.
I'm sure you would be able to figure something out right?

[falloutsearies]

thank you doing specifically this was a massive bane during coding with only one video from 2014 even remotely covering it now I don't have to worry about it anymore.

[sealsharp]

Good job!

So calling it "Like a Commercial Game " sets expectations, so using animations on ui elements or wasting performance on coroutines would not have gotten a pass today. It also handles the annoying things i painfully learned myself by using the same scripts i found to be useful.👍

[midniteoilsoftware]

I recently learned about PrimeTween as an alternative to DOTween. Supposedly DOTween creates garbage on the heap whereas PrimeTween does not and is supposed to be more performant. They also have an option to use the same API syntax (e.g. extension methods) as DOTWeen so switching over is effortless.

[DoubleBob]

Good concept for a series. Subscribed.

[HuediniGame]

Nice video! Instead of keeping track of the last selected card, why didn't you just remove the No need to deselect everything, when your mouse leaves the card.

[EdomGames]

Bro I was just working on an auto scroll script 2 days ago....I should have checked google lol! Nice!

[MarekNijaki]

Very good content. Thanks for sharing with community

[BlackJar]

I looked up what tweening a few months ago but was, what I found was vague and terse so I'm still a bit fuzy on what it is. Then, this doesn't look like something I'd expect to see in a game; it looks like something I'd expect to see in an ad for a mobile game about the actual cards -- but I've never seen this in a PC game kind of, neither indie nor AAA, or more to the point, in something that was just a UI element like an inventory in a bigger game.

[gsukias]

Hello, good video. I have some advice for you.
At first, don’t repeat yourself. When you see something that must be copied and pasted, don’t do it; there will be a simpler way. Alternatively, you can hide that dirty code in another class and come back to it later, and the code will be cleaner. When you’re creating something with many settings that will be the same for several scripts, make a controller where you can set the settings, and it will apply to other scripts so you won’t forget to set something. When you’re adding Y padding, add X padding too. That script is not connected to your task; it’s a general script. Don’t add the cursor lock in a script that isn’t made for your task; use abstraction or just add a bool, and then you can use this script for other reasons in your game.

[Anerisian]

Just started watching: Already like the idea to show how to do things properly, especially now that chatGPT can help with the more mundane stuff. Consider leaning more into this direction, and even incorporate AI assisted workflows. Hint: nobody does it yet, but it is going to be the way we make games very soon.

[benjamingerd]

If you want to perform an action when a card was left-clicked, or when pressing enter after a card was selected with the keyboard, the following seems to work for me:

```c#
public class OnButtonSelected : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, ISelectHandler, IDeselectHandler,
IPointerClickHandler, ISubmitHandler
{
// (...)

public void pointerEventData)
{
Debug.Log("Clicked");
}

public void OnSubmit(BaseEventData eventData)
{
Debug.Log("Pressed");
}
}
```