Weapon Wheel - Unity Beginner Tutorial

welcome back to another unity tutorial in today's tutorial i'll be showing you how to create the weapon wheel on the screen right now as well as all the animations and extra little bits so let's begin so open up your unity project and to clarify i'll be working in 2d but you can 100 work in 3d and the first thing you need to do is create the sprites for this project so i've gone ahead and created this simple little sprite for my weapon wheel and if you would like to get access to all the sprites and the source code used in this project you can become a patreon down below but essentially just create yourself a button for your weapon oil i've just gone for something very simple and minimalistic like such i've also created some icons and i imported them into unity along with the weapon wheel image so to start we're going to right click on our hierarchy press ui canvas and set this to be scale with screen size within the canvas we're going to right click press create empty object and call this weapon wheel on this weapon wheel press ui and bottom and this will be our weapon wheel button we can go ahead and remove the text because that's not going to be necessary and rename this weapon wheel button then on a source image i'm going to select the uh sprite that we created and set native size i'm going to set my y to be 120 but yours can be higher or lower that's completely up to you okay so on this button we're gonna right click press ui and image and we're gonna call this icon and on here we can select our image for the icon i'm gonna just select the pistol one and set native size if your icon is too big you can use the scale to scale up or down now before we continue making the rest of the wheel it's better to just work on one button at a time because then we can just duplicate it without having to repeat the same process so starting off i'm going to scroll down to the button and i'm going to make the normal graphic just be this white but just slightly opaque and for the highlighted color i'm going to select whatever color you want when it's highlighted so i'm just going to go for like a yellow and i'm going to do the same for the pressed and the same for the selected now for the disabled i'm going to select the black and just kind of turn it down so it's a little bit opaque this is what it would look like if it's disabled and this is what it would look like it was normal now before we do any coding it's nice to have some animations for this because it'll just make it look nicer so on your weaponry button select the add component and type in animator and then go to window animation and select animation and animator i've got mine docked right here select your weapon button and press create new animation now i'm going to make this in a separate folder and this will just be our idol now on the idle animation i'm going to select add property and then just scale we're going to click this little button here and press create new clip and this will be idle hovered now for idle hovered i want my item to be slightly larger so i'm going to select record and then increase its size to like 1.15 for our next clip we're going to call this mouse over and in this case we're going to select record we want it to be the normal size and then go to like 10 and set this to be 1.15 again or whatever size you set the actual hovered one to be and finally we're going to have mouse exit on mouse exit we're going to set the size to be the same as before so 1.15 and then about 10 seconds i'm going to set this to be one like such now all we need to do is configure our animations so go to the animator at the top which can be accessed via window animation animator as mentioned before for our entry we'll have the idle then all we want to do is make a transition to the over make a transition from the exit to the idle and then make a transition from the over to the idle hovered and the idol hovered to the mouse exit the final thing we need to do is create a new boolean called hover and very simply on this transition i'm going to set my transition duration to be zero and i'm going to have no exit time but i'm going to add a condition called hover true then i'm going to click this transition and also make it just be zero and on this transition we're going to do something similar we're going to set the duration to be zero no exit time and we're also going to set the condition hover but this one's going to be false finally on this transition i'm also going to just set this to be 0. so with that configured we can actually start creating our script in the scene so select your button press add component and i'm going to call this weapon wheel button controller press new script create an ad so actually before opening up the script we're going to do one more thing i'm going to have a bit of text in the middle that displays what item i've got selected so i'm going to be using text mesh pro which can be installed via the package manager and then just go to window text pro and import all the essential resources but i'm going to right click this weapon wheel select ui text mesh pro and then import tmp examples and extras you don't really need this but it's nice to have them once you have that all selected i'm going to call this item selected and then pretty much you can just play around with the settings i'm just going to make mine be in the middle slightly smaller and then just change the font to whatever i want so back in the script that we created we're going to need to include some new things first of all we're not going to need these two things at the top we're going to have to include using unity engine dot ui and also using tm pro now tm pro is text mesh pro which is the text that we just created now let's start by making some variables at the top starting off i'm going to make a public int called id i'm also going to create a private animator called anim i'm then going to make a public string called item name now we're going to make reference to the text so public text mesh pro ugy and we're going to call this item text three more things to do we're going to do a public image called selected item then a private boolean called selected and i'm going to set this to false and then the final thing is a public sprite called icon so first of all in our start reference we need to make reference to the animator so just open adam make it equal get component and then just the animator like such then in the update function we're going to check if our button is selected and here we are going to do a couple things first of all we're going to grab our selected item dot sprite and we're going to make that equal our icon also with that we're going to grab our item text dot text and we're going to make this equal our item name next up we're going to create the functions for when a button is selected and deselected make a public void call it selected and then here all we have to do is make sure that's selected equals true we're also going to duplicate this and make one called deselected and just make it equal false next up we just need to make some functions for when a button is hovered over and not and that is very simple create a public void call it hover enter and inside of here we're going to do a couple things first of all we're going to make reference to our animator and we're going to set the ball which we created earlier which was called hover in case you called it something else make sure you just double check and we're going to set this to true and finally below it we're going to set item text dot text to equal our item name then i'm just going to duplicate this and i'm going to call this hover exit i'm going to set hover to be false and set the text to just be empty like such and that is basically all we have to do for this script right now let's go ahead and configure it in unity inside of unity select your weapon wheel button and we've got some setting up to do first of all because this is a pistol i'm going to set the id to be one this is just a way for us to be able to tell what item is being selected for the item name this is a pistol so i'm going to select pistol the text is going to be the item text we created now we don't have a selected image just yet and i'll show you how to do that in just a second and for the icon i'm going to select my pistol icon or whatever icon i want to be displayed if this item is selected now for the actual selected item right click your canvas press ui image and i'm just going to call the selected item i'm going to position this near the bottom of the screen just like so and then on the weapon wheel i'm going to drag this into here now before anything works we have to actually configure the functions and that is super simple on your button press add component type an event trigger and we're going to add a couple event types first of all pointer enter pointer exit and then selected and deselected press these plus buttons under here and where it says no object dragging your weapon with script from the same object and that is super important now for the answer select the function bit weapon button controller and enter and on here we're going to do the same hover exit on selected we are going to select our selected script and on the deselected we are going to select our deselected script now if we go into unity you'll notice if i hover over it the text will change and also an animation is played and if i select it the item at the bottom gets changed to that awesome now there's a couple more things we need to do of course we need to add more buttons but we'll go on to that in just a second but on the actual weapon wheel press add component and type in weapon will controller okay so within this script we've got to set a couple things up first of all delete these two using functions at the top and add a new one which will be using unity engine and then dot ui now let's set up our parameters first of all let's make a public animator called anim next up let's create a private boolean called weapon wheel selected and set this to false by default also create a public image called selected item then a public sprite called no image and finally a public static int called weapon id now i'm making this static just for the purpose of the tutorial but you can 100 just make it public and just reference it via the script now we can delete our start function because we're not going to be using that and instead we're going to be using our update function so basically first of all we want a way to be able to toggle the weapon wheel and that is super simple let's make an if statement and check for input in my case i'm going to get key down key code and then the key that you want to press in my case i'm going to do tab now on here we're going to select this boolean that we created at the top and we're going to make it equal not what it is this means that if this boolean is false or equal true and if it's true or equal false then we need to check for this volume so if it's true and then if it's not so just an else statement first of all let's grab our animator and let's do set boolean open weapon wheel now make sure you remember this name because we haven't created the animation just yet but we were in a second set this to true and then just copy this over and set it to false in this function the final thing we have to do is determine what button is being selected and then do whatever we want when it is selected so i'm going to create a switch statement in which i'm going to type in weapon id and in here we're going to do a case zero and then a break the final thing left to do is create a system for what happens when a button is selected so type in switch and then weapon id our case 0 is going to mean if nothing is selected and inside here we're going to write selected item dot sprite equals no image then depending on how many items you have in your wheel you want to copy it that many times so i'm just going to do that real quick okay so i've gone ahead and pasted mine but make sure the case number is not always zero make sure it does increase like one two three and four and so on now in my case all i do is call a debug.log and that is for tutorial purposes but in your game this is where you want all your different functions to happen so for example if you want an animation to play of you bringing out a pistol or a sound playing this is where you want to call it the final thing we need to do is go back into the weapon wheel button controller and go on to the selected and deselected in the selected we're going to make the reference to the weapon wheel controller and then weapon id is going to equal id we're going to copy this over to deselected but instead of making it equal id we're going to make it equal zero let's go back into unity and that is everything we have to do for the script it's now time to just set it up so first of all click on your weapon wheel and press add component and type an animator i'm going to create some animations once again so i'm going to press create and i'm going to call this idle press save and on here i'm going to add the reg transform scale property then i'm going to make a new animation which is enter now on enter i'm going to set the size to be zero at about five seconds i'm going to set the size to be 1.2 maybe and then at 15 seconds i'm gonna set it to be one then create another animation for our exit and it's going to be very similar we're going to set this to be just default about 10 seconds i'm going to do 1.2 and then 15 seconds i'm going to set this to be 0. and the final animation we have to do is just hidden this is where the weapon rule is going to just be hidden so on here i'm going to press record and set the scale to be 0. then go into our animator and let's set it up we're going to make the default state be hidden which is like so then we're going to have a transition to the enter from enter to idle from idle to exit and then from exit to the actual exit like so now you may remember we had that parameter created earlier so go back to your weapon wheel controller and copy over this text that we made go back into unity select the ball and just paste that in on here we're going to select this make sure it's true and then on this transition we're going to set this to false okay so this is basically set up i've gone ahead and altered the animations like so so you can just have a look how i made them but feel free to play around with them however much you like back onto our scene click on your weapon wheel and we need to actually add this stuff in so drag in your animator drag in the selected item now for the no image i've gone ahead and just created this blank image called none it literally just has nothing on it on the selected item itself make sure the source image is this non-item at the beginning that just makes it not appear at the start now the final thing we need to do is just build the weapon wheel itself so because this button is already created i'm going to duplicate it and i'm going to set the size to be minus 120 or whatever value you had for the y and i'm going to rotate it 180 degrees i'm then going to duplicate it once again this time i'm going to set the y to be 0 and the value to be 120 and rotate it minus 90 degrees duplicate this again and this time it's just going to be 90 degrees and minus 120 to be on the other side so for the corners duplicate it once again just like we have been every single time and for the corners i'm going to set the x to be minus 85 the y to be 85 and then the z rotation to be 45 like such then the other side is very similar just duplicate it up select the x to be 85 instead and select the rotation to be minus 45. the final ones that we're missing is just the bottom ones so duplicate it up like such select the x position to be minus 85 again and the y position to be minus 85 because we're down below and i'm going to set the rotation to be 135 and then the final time we just duplicate it set the rotation to be minus 135 and the x position to 85 and that is our weapon wheel the final thing we have to do is on the actual icon you need to put the icon of the image that you want and on the id make sure to change it to the next one so like two three four and five and the name i'm gonna do that and i'll be back in a second okay guys so i've gone ahead and basically just added the new icons changed the ids and the images i've also created one which is disabled by unticking the interactable boolean and removing the triggers the final thing to do is just quickly change some settings for our animations click on your animations and on mouse exits make sure it doesn't loop on mouse over make sure it doesn't leave either and then for your weapon animations make sure enter doesn't loop and neither does exit now let's press play and have a look what it looks like as you can see we are on the screen right now and none is being displayed to the console because nothing is selected if i press tab our weapon will open up i can hover over items which will change the text in the middle make them light up slightly and if i select it it makes the item on the side light up and also put a notice into the debug.log thank you guys for watching if you did enjoy make sure to leave a like and subscribe down below is my patreon if you want to access any source codes that i have created and any of my other tutorial projects i also want to thank my patreons atomic punk tardis it guy and smoke and vita and i'll see you guys later bye

Channel: Zyger

Views: 29,213

Keywords: unity tutorial, unity, zyger, unity weapon wheel, weapon wheel tutorial, untiy weapon system, unity weapon switching, unity weapon switching animation, weapon switching unity 2d, unity weapon, unity weapon pickup, unity weapon system, unity fps, unity fps tutorial, unity weapon selection menu, unity ring menu, weapon wheel, c#, unity beggin, unity beginner tutorial, unity beginner tutorial 2020, unity beginner tutorial 2021, unity circle menu, unity menu, unity ui menu

Id: MRdQyrpflB4

Length: 16min 10sec (970 seconds)

Published: Wed Apr 28 2021