Unity Vehicle Selection Menu Tutorial: Complete UI Design & Coding Guide (Part 1 of 2)

hello everyone in this tutorial we will learn  how to create a professional looking vehicle selection or a character selection menu for our  unity game this will be an in-depth guide on how to select different Vehicles unlock them using  gems and also how to display their stats on the screen which we can upgrade using gold this is  the first part of the tutorial in which we will build the complete user interface of our vehicle  selection menu in this tutorial I will be using the Casual game GUI

by layer lab and the monster  truck pack by dog machine both of these assets are available on the unity asset store and I  have added the links of these Assets in the description of the video let's get started with  the tutorial I have an empty scene in which the first thing I'm going to do is import the monster  truck models the monster truck back comes with a garage background I will be using this as the  background of My Level selection menu you can use use any nice looking environment from y

our game  as the background of your vehicles in the level selection menu and let's just copy all the truck  models and the garage to the level selection. scene next let's adjust the position of  the camera and create a pivot in the center around which we can rotate the camera  this way the user will be able to see a 3D model of the currently selected  vehicle behind the vehicle selection menu and here you want to make sure that the  camera is slightly to the right of the pivot so that the vehicl

e is on the left side  of the screen and we have some space on the right side where we can display the  stats without hiding the vehicle behind it and once we have our 3D background ready  let's start creating our menu in front of it create a new canvas which we will call vehicle  select menu set the scaling mode of your canvas so that it auto resizes based on your screen  size and now in our canvas let's create three images one for the Bottom bar where we will  display the buttons for selecting

vehicles and starting the game one for the top bar  where we will display the current coins and gems available to the user and the third  one for the panel on the right where we will display the stats of the current vehicle and  now we can adjust the anchors and the positions of these three images the Bottom bar will be  stretched across the bottom of the screen the top bar will be slightly smaller than the  Bottom bar and it will be anchored to the top and the right panel will be adjusted over

  here we want to make it slightly transparent so that the vehicle is visible behind it now let's  start working on our Bottom bar let's just disable the other two bars while we are working on this  change the source image of the Bottom bar and then add a new button to it this will be our start  button change the background of the button and the font style to something nice we are going  to adjust it on the right of the Bottom bar and now on the left side of the start button  let's add a new scr

oll view inside the scroll view we will have the buttons for selecting our  vehicles you want to delete both the horizontal and the vertical scroll bars anchor the scroll  view to the bottom and then adjust the size so that it is touching the left corner of the screen  and on the right it is almost touching the start button adjust the height to cover the whole Bottom  bar and then change its color as required make sure that you have unchecked vertical scrolling  as this will only be a horizontal

scroll bar next on the content panel of the scroll view add  a horizontal layout group and a Content size fitter and now we can add the buttons inside the content panel for selecting  the vehicles create a new button change its background and adjust the size as required set  the padding of the button from the top and the left and now duplicate this button so that we  can adjust the spacing between the buttons in the content panel set the horizontal fit of  the content size fitter to minimum siz

e and change the spacing as required once we have  adjusted the spacing delete the duplicate button and now we can create an image inside  this button for the icon of the vehicle change the image and adjust the size as required on  top of this we will add another image which is the same as the button image this will  be used to creay out the other images on the button when the vehicle is locked and  inside this we can add an image of a lock icon adjust the position and  the size of the lock icon

as required we can later disable these locked images  from our code when the vehicle is unlocked once we have this button ready we can just duplicate  it in the scroll view for all the other vehicles change the vehicle icons on  all the buttons and adjust your sizes as required and the Bottom Bar for our menu is now  ready we have a nice scraw view with all the buttons for selecting the vehicles you can add as  many more buttons as you need for your game on top of these buttons we have the lock

icons which we  can disable from our code to show that the vehicle is unlocked on the right we have a start button  we also want to add an unlock button here for when the user selects an unlocked vehicle simply  duplicate the start button change the background Sprite and also change the text to unlock we can now enable one of these buttons from our code depending on whether  the selected vehicle is locked or unlocked now that we are done with the Bottom  bar let's start working on the right pan

el where we will display and upgrade the stats of the  vehicle enable the right panel image we created earlier change the background and the transparency  of the image inside this right panel create two empty objects one for displaying all the stats  when an unlocked vehicle is selected and one for displaying that the vehicle selected is locked  also we want to add a text label here for the vehicle name which will be displayed at the top of  the panel change the position and the font of the titl

e next we will start at adding the stats of the vehicle on the left add a  text label for the name of the stat and on the right side of this label we will  add a new UI slider for the current value of this chat make sure that the slider  is not intractable and also disable the handle slide area object of the slider next change the background  and the fail images of the slider and then adjust the  width and the height of the slider we can now change the value of the slider  from our code to show

the current value of the chat on the right side of the slider  add a button for upgrading the stat change the image and the position of the button as required and in front of this  button we will add an image of gold and also we will add a label for  displaying the cost of upgrading the stat adjust the position of all  the elements in the stat bar as required and once we have this  ready we can just duplicate all the elements to create as many stat  bars as we require I will create four differen

t stat bars one for Speed one  for grip one for stability and one for durability next for the locked panel of the startat  bar inside this all we need is a locked image a label to display that the vehicle is locked a label to display the unlock cost of the vehicle and in front of the cost we want an  image of gems which will be used to make this purchase we can later change the unlock cost  from our code depending on which vehicle is selected and the right panel of our menu is also done when a l

ock vehicle is selected  we will display this locked screen and when an unlocked vehicle is selected  we will display this screen with all the chats next let's get started with the top bar  of our menu change the background of the top bar on the left side of the top bar  we can add a button for going back if we have a main menu in our game  change the background image of the button adjust its position and add  an image for the icon of the back button next on the right side we will display the  c

urrent gems and the coins the user has available we can add a background image  on top of which we will display these chats one background for the coins and one background for the gems and now we can add the  icons for the gems and the coins in front of these icons we will add labels  for the currently available coins and gems and finally in front of these labels  we will add buttons for purchasing more coins or more gems these buttons  will take the user to the store menu next we need to create

three popups  one to confirm that the user wants to to unlock the vehicle one for when the user  does not have enough gems to unlock the vehicle and one for when the user does  not have enough coins to upgrade a stat start by creating a transparent image inside your vehicle menu for the background of the  popup stretch this image across the whole screen inside this background we  will create another image on top of which we will display all the items of the  popup change the image to match your

user interface add all the labels and the  images for displaying the details for showing the details to the user  we need the unlock vehicle label a text label for the price of the  vehicle and an image for the Jam icon and now we can add two buttons  at the bottom of the popup one to confirm the purchase and one to cancel the purchase the first popup is ready we can  just duplicate this popup and make changes to create a popup for when the user does  not have enough gems and also to create a p

opup for when the user does not have enough  cold on these popups if the user clicks yes it will take the user to the shop menu where  the user can purchase more gems or more gold the vehicle selection menu is now ready  at the bottom we have a scroll bar with the buttons for selecting the vehicles in the top  bar we have a back button and also the current coins and the gems available to the user  and on the right we have all the stats let's quickly create an animation on the background  camera

to make it rotate around the vehicle model select the camera pivot open up  the animation Tab and here create a new animation in the animation all we need to do is  make the camera rotate 360° in a duration of 20 seconds we want to set the animation to linear  so that does not slow down at the starting and at the ending of the rotation and the user  interface for our vehicle selection menu is now ready that's it for this video in  the next tutorial we will go through the coding part where we wil

l add the script  to select different Vehicles unlock new vehicles and upgrade their stats if you found this  tutorial helpful make sure to like And subscribe