Handle UI Like a Commercial Game (Custom Animations + Different Control Schemes) | Unity Tutorial

one of my frustrations that I've had in my journey of learning game development is that there are very few actual resources and tutorials that teach you every single case and tell you how to handle things the way that they would be done for a commercial game a lot of things kind of get left in this very unfinished unpolished game Jam style and that's especially true on YouTube so I wanted to put this video together after I solved a very specific problem I was having in samurato which is the commercial game that my wife and I are working on right now so I always try to design things with the keyboard and mouse and the GamePad in mind so I have these cards that I want to be able to swap between and right now you can you can use your mouse and you can click on them and that all works great but I wasn't able to use my keyboard or Gamepad to be able to swap between them and I did eventually get that working but I made it in such a way that if you changed control schemes while this UI screen was open then everything just kind of broke so I opened up Hades to just play around in their menu and see how they handled everything and really it just works like how you would expect you can hover over things with your mouse and select them but if I picked up my Gamepad or used my keyboard to start scrolling it worked right from the last selected button and it was just smooth and worked really nicely so in this video you will learn how to navigate in your UI even if you swap control schemes halfway through ready let's go so I just downloaded these cards off the asset store because I thought they were really pretty I'll put a link to them down below they're free but all I have here is this UI canvas which is set to scale with screen size at a resolution of 1920x1080 and I attached those cards as child objects of this empty parent object called cards and they're a bit large so I scaled them down to 40 as well so first things first how do we make it so the whole card is selectable and that's actually really nice and easy we'll just add a button component to them and they've got a few options here for transitions which is how you'll add different effects and animations and whatnot for when the card is actually selected I almost always use color tint Sprite swap can be quite nice if you look at Hades it looks like that's what they're doing here they have a highlighted Sprite and an unhighlighted Sprite and they do a swap after a tiny animation is played so animation for tiny projects is fine but if you're building a commercial game I wouldn't really recommend using that if you can avoid it animators carry a lot more overhead than a simple animation you can do through code and actually I'll show you how to do that really shortly but I like the color tense so we'll combine that with our own custom animation so for all three cards actually let's darken the cards a bit for the normal color and bump the highlighted and selected colors to full White and if we play that already looks quite nice okay but let's add our own animation for the cards create a script called card selection Handler and attach it to all three cards and what we'll do is lurp the position up a bit and scale it up a bit when the card is selected so we'll need a vertical move amount and a move time as well as a scale amount which will limit to being between 0 and 2 so it can't be outrageously big and when you lurp things you'll almost always need a starting position so you know what to learn back to so let's create a start POS and a start scale and set those in the start function now for the actual lurping we'll create a co-routine co-routines are your friend and we'll use a bull parameter so we can call this same function whether we're selecting or deselecting the cards so set up an end position and end scale vector 3. and then we'll need a timer so we'll call this elapsed time and in a while loop we'll handle the lerp in here as long as the elapsed time is less than our move time so first we'll iterate our timer and if this is the start of the animation then our end Position will be our starting position plus our movement amount and our end scale will be our start scale times our scale multiplier and if it's not the start of the animation then well our ending is technically just going back to the beginning and now we'll actually calculate the lurped amounts for the position and the scale going from our current position or scale to the end position or scale and for the T component we want these lerps to be in sync with our move time so we'll turn them into percents by taking elapsed time divided by the move time so they'll start at zero and work their way towards one which is when the lerp will finish and then finally we'll actually apply those new amounts to our position and scale and then yield return nulls so we wait for the end of the frame and do it again the next frame so our next problem to solve is where do we call this we have an on click event in the inspector but there's no on highlight or on select event but we have something just as good which are all the interfaces we have access to from the selectable Behavior the four we are going to use is I pointer enter Handler pointer being the mouse cursor eye pointer exit Handler I select Handler and I deselect Handler which are exactly what they sound like so to access those we need to add the unity engine.event systems namespace at the top So currently what's happening is when our Mouse pointer enters the card it highlights the card if we change the color to a full red and hover over the card you can see we're highlighting the card not actually selecting it we want to bypass that highlight entirely and actually select the card because if we select the card we can use the I select Handler interface to tell it to run that lovely Co routine we just made so in order to bypass it we'll add the I pointer enter Handler and I pointer exit Handler interfaces interfaces always have to implement their members so this will give us an error until we right click and select quick actions and refactoring and select Implement interface so that's going to add two functions into our script and so when our Mouse enters the card we want to select the card so we'll say event data.selected object equals this game object and when our Mouse exits the card we want to deselect it so we'll null that out in this function here so now let's add our I select Handler and ID select Handler interfaces which will automatically be run whenever these cards are selected and deselected and let's implement the interfaces and when we select let's run the code routine with a true since this is the starting animation and in the deselect let's run the co routine with a false since it will be the end animation okay so let's give that a quick test so that's looking pretty nice now and that is how you can add custom animations to your UI that's just a simple example but now let's handle controlling it with other control schemes because right now using the keyboard or Gamepad does nothing so let's create a card selection manager script and attach that to our cards object here so I almost always turn my managers into Singletons and I don't usually do the whole don't destroy on load thing because I have a separate persistence object that usually holds all of my managers in my projects but in case you don't know making things into a Singleton like this means you can access all public functions and variables from this class from anywhere without needing a reference to this script but you can only ever have one copy of this script in your entire game that's why it's called a Singleton I assume so in order to make this controllable with a keyboard and Gamepad we need to tell Unity Which object is the first selected object and you'll see what I mean in just a sec so let's add the unityengine.event systems namespace and create a public array for our cards and we'll set the selected game object in on enable because normally within the context of a whole game you'd have these cards worked into some sort of UI system that gets deactivated and reactivated at certain times so we'll call this every time the UI is activated and we'll do it by calling eventsystem.current.setsselected game object and we'll just use the first index of our array so the first card now annoyingly I've found that I sometimes get glitches and things like this if I don't wait one frame first and I'm not really sure what that's about it almost seems like unity's UI system needs the starting frame to properly set direct transform positions and whatnot I don't actually know if that's true I just know to avoid any weird issues I set up a co-routine wait one frame and then call that so we'll call the co-routine in on enable instead so let's go back to the inspector and assign the cards if you right click and hit properties we don't need to worry about locking the inspector or anything like that we can just drag them right in and let's test so now you'll see our card is selected and if we use our keyboard or Gamepad it'll just work and that's because of the event system here it has a default UI controls built right in but there's a problem if we highlight over one of these with our Mouse and then move the mouse off it deselects it and now we're back to where we started so to fix that we're going to have to keep track of a few things so in our card selection manager let's add a last selected game object in a last select index integer the last selected will hold a reference to whatever game object we select so in our card selection Handler let's set that in our on select method and as for finding the index we'll need to iterate through all of our cards and if the current iteration of the card is equal to this game object then we'll pass in the index and return which just cancels out of the function now what we'll say is in our card selection manager in update if we hit right we'll select the next card in the array and if we hit left then we'll select the previous card in the array as soon as we have an active selection in unity the keyboard and Gamepad it'll just work because of these little arrows that you can see those are handled by the navigation options that you see here which are controlled from the event system so really we just need to handle selecting an object again and to do this we're going to have to set up controls really quick so that we can implement this properly but this is not an input system tutorial so we're going to go through this really fast after you've installed the input system in your actions asset in the event system go ahead and copy the UI action map from that default input actions because we want to use our own and I'll create a new input action asset and paste the UI map in there and let's save the asset and assign it in our event system now I'm going to create an empty input manager object and attach a player input component to it and plug in our controls asset there next we're going to create an input manager script and attach it to our input manager game object what I've done is I've turned this into a Singleton created a public Vector 2 which is set up in update through the navigation action which we pulled from the player input component with all that done now now we can go back to the card selection manager and add checks for if we're pressing left or if we're pressing right now what we actually want to do is if we press right we want to select the object after the last selected object and if we press left we want to select the object before the last selected object so assuming that there's nothing currently selected and last selected doesn't equal null we'll create a new index which is the sum of the last selection index and whatever argument we pass in it could be positive could be negative next to ensure this index always stays within the confines of the length of our cards array we'll clamp it between 0 and the length of the array -1 and then we'll actually set the selected game object using the new index so finally we can plug that function into the update passing in a 1 if we pressed right and a negative one if we pressed left and there you go it starts with a selection you can use your keyboard your Gamepad or whatever or your mouse to select new ones and even if you use your mouse and move it off the cards selecting nothing we can then again use our keyboard or Gamepad or Mouse and it'll select the appropriate card that's all I got guys I hope you enjoyed like the video if you liked and if you have any suggestions for improvements let me know down below so everyone can benefit from this tutorial I want to give a very special thank you to all of our Hall of Fame patrons Jacob yondak zonder Kessler Darren Perrine throbbing wind Fontaine Wade couch and Christopher Nichols as well as our Early Access patrons xioma can wait Mason Crow Mr D and audoo games if you choose to support us on patreon you can get early access to all of our YouTube videos monthly Alpha builds and more

Channel: Sasquatch B Studios

Views: 35,725

Keywords: unity, unity2d, unity tutorial, sasquatch b, unity beginner tutorial, ui design, card hover effects, custom ui animations, ui design in games, unity UI animations, unity UI custom animations, UI selection and interaction, Game UI best practices, UI selection handling, unity animate ui with code, animate ui with code, unity animate ui on highlight, unity animation ui on hover, unity ui swap control schemes, UI control scheme swapping, UI control UI with keyboard

Id: u3YdlUW1nx0

Length: 12min 27sec (747 seconds)

Published: Thu Jun 01 2023