Make A Game Like Pokemon in Unity | #7 - Battle System Setup

hey everyone welcome to part 7 of the Pokemon game series in unity so in this video we will create the UI of a battle system and we load the pokemons that we created into the battle system so if you like the CD so far please consider subscribing to this channel that will really help me a lot so let's start ok so first I'm going to create a game object called battle system so our battle system will have its own camera so under the battle system I'll add a new camera Eileen this battle camera so to start a battle all we have to do is switch from the main camera to the battle camera so next I'll create a canvas under the battle system so this canvas will hold on the UI of the battle system and I'll name this battle canvas I'll change the render mode to screen space camera and for the render camera I will choose my battle camera and under this canvas scalar I will change the UI scale mode to scale but screen size so our UI we'll look same on different screen sizes now in the battle camera I'll change the projection to auto Rafik to now the size of the camera and the canvas will be same so let's just drag the battle system object outside the tile map to somewhere we can see so now I'll create a background image for the canvas so on with the canvas I'll add an image I'll rename this to background and we need to import the image that will set here so let me do that inside art I'll create a new folder called battle and I'll import all the assets so here we have lots of images that we can use for the background of our battle system so I'll just change the sprite mode to multiple and lick the pixel per unit at 100 I'll change the filter mode to point no filter and hit apply ok so now if we open it in the sprite editor when we need to split this image into multiple images just like we did with the other sprites try click on flight and for type I'll choose grid by cell count because I know there are three columns and four rows so for the column I'll choose three and for the row I'll choose four and click on slice okay so now this is sliced into multiple sprites so this is surprised that I want to use but I don't want this black outline that each of these flight has so in order to remove that click on this blue dot and and you can reduce the size of the sprite okay so just make sure that you don't include any bottle hit apply now for the image of our background I will set this right click on set native size this will make the image the original size of our background so now I'll drag this to one corner of the canvas and select the rect tool click on shift and resize the image to resize it without messing up the aspect ratio so next we create a dialog box over here so in the art you can see that we have a sprite for our dialog box and we have one for hot too so I'll select both of them change the pixel per unit to 30 to filter two point no filter compression to none and hit apply okay so next I'll create an image for the dialog box so let me just resize the image and for the image I will use our dialogue sprite so you can see that our dialogue box is really stretched and it looks really weird in order to fix this we can set the borders of the dialogues right so in the sprite editor you can see these green dots just drag them inside like this so what this will do is this little unity don't scale anything that is outside this box so all these powers and all outside this box right now so you don't even scale any of those only what's inside the box will be scaled I'll hit apply and we just have to set the image again and now you can see that our dialog box looks good now inside the dialogue box we need a text to display the dialogue so I'll create a text let me just resize this okay I'll leave some space for our actions editor for the font I'll choose this font that we imported I'll set the font size to 40 and let me just stain take the text so next under the dialog box I'll create a game object for our action selector that means three sizes and inside that I need to add text for two actions fight and run so I'll just copy this dialogue text and paste it under the action selector I'm just ringing it to fight text change the text to fight and I'll resize it okay you have to make sure that it is under the action selector just drag that into the action selector game objective okay again I'll just resize this and set the alignment to Center so I'll duplicate this and create another text for the one action and just reposition it alright that looks good look good to me so you can just disable the main camera and in the game window we can set the size to stand alone and you can see the UI of a battle system properly okay so now I'll create an image for the Pokemon so under the canvas I'll add a new image I'll name this players unit so this image will be for the pokemons of the player and I'll resize it to 200 by 200 and for the sprite let's just choose some Pokemon so let me get a reference so I can just drag this and place it here so in the hierarchy you have to make sure that the dialog box is below the player unit so that it appears in front of it so next field had a hut that will display the name level and HP of the player Pokemon so this is the sprite we are going to use for a heart I'll just set the borders so that we don't get any weird searching and under the battle canvas I'll add a new image called player Hut I'll set this right as image and I'll select the rec tool and resize this the case of this looks loke to me so under the hut I'll create a text to display the name of the Pokemon actually I'll just duplicate this five text so that so that I won't have to set the fonts and all that again I'll just duplicate it drag it into the player Hut and I'll rename this to name next I'll change the text name and just drag it on to a hut I'll set the alignment to left so that we have some space for a long name okay so that looks good but people have a problem here so as we create our UI we will have to resize this Hut okay so if I try resizing this you can see that that everything will get messed up right so to fix that we can set anchors to the elements inside the hotbox so setup the name text and change the anchor to left and middle to this one so now if we resize our heart the name will always say to look towards the left end of our hut okay so now I'll just duplicate the name text and create a text for the level I just seen the text and change its position so I'll set it anger to write middle so that it will stay on the right side when we scale hard so next we need to create an HP bar that will show the health of the Pokemon so on to the player hard I was create a new image called HP bar I set the bit to something like 220 and the height to something like 18 I just changed the color to something like black and I'll set the anchor to stretch horizontal so that if we change the size of the heart the size of the HP bar will also change so inside the HP bar I need to create a background for the health so I'll duplicate the HP bar and change its name to background I'll change the color to white and I'll just reduce its size a little and make this a child object of the HP bar and I'll duplicate the background to create an image that'll show the health so I'll rename this to health and I'll just change the color so if we change the scale of the health you can see that the size changes from both side so in order for it to look like an HP bar we only want the size to reduce from the right side so for that we can change the X give it to zero so now the pivot icon is at the right side and if we change the scale it will reduce from the right side just like an HP bar so all we have to do is normalize the current HP of the Pokemon and set that as the scale and finally I'll just duplicate this text I'll call this HB text change the text to HB make the font size 18 change the color and I'll place it yo and I'll make this child object of the HP bar and I'll set the anchor to left okay so we have the basic UI we need so let's start writing the scripts that we'll use in our battle system so inside the scripts folder I'll create another folder called battle and first I'll create a script for the HP bar open that in Visual Studio so in the HP bar first we need a reference to the image that is showing the health so let's test this by setting the health to 50 percentage in the start function so to set the health to 50 percentage I just have to change its scale to 0.5 okay so I changed the X scale to 0.5 so let's assign the script to the HP bar and let's assign the health image to the script okay so now if you run the game you can see that our health is at 50 percentage just like we said so in the script instead of setting this from start I will create a public function called set HP and this will take a float called HP normalized and we'll just set that as the scale so let's just remove the start function so next let's create a script for the HUD I call it battle heart so in the battle head script we need a reference to the name text level text and the HP bar so we don't have a class called text so when you're working with qi we need to import unity engine dot UI namespace so let's do that okay so now we have a class called text okay so we have interruptions for the name text next I'll create one for the level text and finally we need one for the HP bar so here I'll create a public function to set values to all these three so this function will take a Pokemon class so to the name text I will set Pokemon name the name is inside the base but we don't have access to the base so let's go inside the Pokemon class and we can see that the base and level are private variables so we can make this a property so that we have access to it outside this class change it to a property by adding getter and setter and do the same for level okay so now we can access these properties outside the class but remember I told you that it's a good practice to capitalize the first letter of the property name so here's a protip duranium available you can right-click on it and select rename type the name you want so you can see that this changes the name of the variable in all the places where we used it okay so let's change the name name of the level to and while we are here let's fix a mistake that I made in the Pokemon class so I set the HP to base start max HP but the kernel - P should be set to the actual maximum XP when creating a Pokemon so let's change that okay so now in our battle hot script we will have access to the base and we can access the name inside the base so make sure to choose the name with capital n because that is our property so next I'll set value for the level text so we can get the level from Pokemon dot level the property that it is changed right now and for the HP bar we can use the set HP function that meat is created now okay so we need to normalize the current HP of the Pokemon so we can do that by dividing the HP of the Pokemon by the max HP and make sure to convert it into float since both HP and Max which be integers and for the scale we need float so now we can assign the battle head script to the player HUD okay so let's assign the name level and HP bar the next we need a script for our play unit so I'll create a script called battle unit so in this script we need reference to the Pokemon base and the level so for testing the battle system we will set these values from the inspector but later on we will set these dynamically when we start a battle so next let's create a public function that will create a Pokemon from the base and level I'll call this function setup so here we need to create a Pokemon we can do this by calling the constructor of the Pokemon class for the first parameter will pass the base and 11 for the second so let's create a property to stow the Pokemon will create and finally we need to set the image of the player unit with the sprite of the Pokemon so for that first we need to know if this is a player's pokemon or enemy Pokemon so we create a boolean variable for that and if it's a play pokemon set the image to the backs right of the Pokemon okay so here we need to import Unity engine dot UI namespace and let's set this right to pokemon dot base dot backs right okay otherwise we will set the fronts right so let's assign the script to the player unit the Pokemon I'll choose Charmander and let's set the level as seven and this is a player unit so I will select this checkbox okay so next we'll create a script called battle system that will control the entire battle so in the battle system script being interference to both battle unit and battle heart script I'll call this player unit and I'll create a variable called player heart so in the start we will call a function to set up the battle so let's create that function so in this function first we need to set up the player unit and then set data for the player heart so I'll call playmate dot setup which will create the player Pokemon then I'll call player heart dot set data so we have to pass a Pokemon so I'll pass player unit dot Pokemon the one we created during the setup okay so this is a property but I forgot to capitalize the first letter so let's just rename that okay so you can see that in the battle system it will automatically change the name of the property so now let's assign the battle system script to our ballot system object and let's assign the player on it and play a heart variables so now if we play the game we should be able to load the data of the Pokemon okay so you can see that the data has been loaded successfully the sprite of the Pokemon changed the name and the level also changed the HP was also set but we don't see a difference because since at the start the HP is going to be full so next let's duplicate the player unit and create an enemy unit I'll change the Pokemon - Bulbasaur I'll clean the level to fire and deselect is player unit since this is an enemy unit for the sprite let's select Bulbasaur front sprite and let's place it here okay so let's duplicate the player hard to create enemy hard and I'll place it over here so now in our battle system we need a reference to the enemy unit and the enemy heart and we'll also set up those and we'll set data for the enemy hot okay so we need to assign those in the battle system script okay so now if we test the game you can see that the data of the player Pokemon and the enemy Pokemon was loaded successfully okay so I'll stop the video here and we'll continue working on our battle system in the next video so if you like the CDs please consider subscribing to my channel and leave a like on the video that'll really help me a lot so I'll see you in the next video

Channel: Game Dev Experiments

Views: 29,985

Keywords: make a game like pokemon in unity, how to make a game like pokemon in unity, make pokemon in unity, make pokemon game in unity, how to make pokemon game in unity, make a pokemon game in unity, unity pokemon game tutorial, unity turn based battle system, turn based battle system in unity, unity turn based combat tutorial

Id: zKRMkD28-xY

Length: 28min 28sec (1708 seconds)

Published: Thu Jun 11 2020