Make A Game Like Pokemon in Unity | #15 - Party Selection Screen

hey everyone welcome to part 15 of the pokemon game series in unity so in this video and the next one we will implement a party screen and let the players switch pokemons in battle so first let me show you how it's going to look like so you can see that we have more actions to choose from now and if i select pokemon it'll take me to the party screen which will show all the pokemons in my party and if i select a different pokemon i'll call back my current one and send out the pokemon that i selected okay so this is what we are going to implement a special thanks to all my patreons for supporting me in this journey so by becoming a patreon you can support me in the making of the series and you'll get some cool rewards so until now i wasn't able to share the complete project files of this tutorial series because it contains contents with copyright but i've created a different project in which i replace all the copyrighted content with free ones and i've posted the complete project files of it in patreon so i'll put a link down in the description in case you want to check that out all right with that let's start the video okay so first we need to add more actions to our action selector so if i enable my parallel system and focus on the action selector let me also enable that so you can see that we only have two actions fight and run right now so we need to add two more so under the action selector i'll duplicate the fight text two times and i'll name the first to back text and change the text to back and second i'll change to [Music] pokemon text all right so let me just drag the run text to the bottom and now since we have four actions we need to make this a grid layout just like we did for the move selector so first let me make the action selector a little big i'll also adjust the size of my dialog text all right and now we'll add a good layout group to our action selector all right that'll arrange it as a grid but we need to play with the cell size to make it look good so i'll change the x of the cell size to 120 and the y to something like 50. and i'll just give some spacing between between the elements all right and finally i'll just select all the text and change the horizontal alignment to left okay so that looks much better let me just reposition this a little alright that looks good so now to the battle dialog box script we need to add the newly created actions so i'll change the size to four i'll drag the back text to the element at index one and the pokemon text for the next one all right we are done with the ui for the action selector now so next let's change the code so that the user will be able to select all four actions so let me just uh disable the action selector and battle system just like how it was before and we'll open up our battle system script in the battle system script handle action selection is responsible for selecting the actions but now since we have four actions we should be able to select each one of them by using all the arrow keys just like we select the moves right now okay so i'll just remove this code and if the right arrow is pressed then we'll just increment the current action and we'll decrement it if the left arrow is pressed and if the down arrow is pressed we will increment the current action by two and finally if the up arrow is pressed we will decrement it by 2. so just like we did for the move selection so the only difference is for the move selection we also had a second if statement inside it to make sure that the current move variable doesn't go beyond the size of the list but here we'll just do that in a different way which is more simple so here i'll use a clamp function which is available inside the math f class and i'll just clamp the value of current action between zero and three so since there are four modes in the list the index will be between zero and three so this makes the code much more simpler compared to how we did for the move selection i don't know why i didn't think about the clam function while i was implementing the move selection so let's also use this approach in the move selection so that the code will be much more short and readable so i'll just remove all this and paste the action selection logic here and we just have to change the current action to current move so i'll just use ctrl alt and click to add multiple cursors so i can just edit all of this at the same time okay so that's so that's a pretty cool feature in visual studio and finally we just have to clamp the current move so i'll use math.clamp and clamp it between 0 and the number of moves of the player pokemon minus one okay so the code is much more readable right now so now since we have four actions we also have to change this code so let me just make copies of the self statement and change the values of the current action so if current action equal to one the action is back and if it's equal to 2 the action is pokemon so this is the action we'll use to open the party screen and switch the pokemon so i'll just call function called open party screen here i'll just create that function below our player action function and for now i'll just print party screen since we haven't created that yet okay so we are done with the handle action selection function but one more thing i want to add is once the player goes to the move selection state he should be able to come back to the action selection state by pressing x so in the handle move selection i'll just write another condition to check if the x key is pressed and in this case we need to disable the move selector enable the dialog box and go back to the player action state instead all right so now let's go back to unity and test if all these are working correctly okay so if i start a battle so you can see that we can navigate through all the actions and if i select the fight action it will go to the most selection state but now if we press the x button it will take us back to the action selection state all right just like this but i don't want this choose action to be animated since it's going to keep animating every time i come back to the action state so for that let's just go to the player action function and instead of using the type dialog core routine we can just use the set dialog function so i'll just change this to set dialog so now it will not be animated so in case you prefer this to be animated then just make sure to change the player action to a co routine and make sure that the state is set to the player action only after the animation of the dialogue is complete or this will cause some weird issues in the future but in my case i don't want to animate this anymore since we'll be returning back to the action state a lot and we don't want to waste time taken to animate this text okay so now let's create the ui for our party screen so let me just enable my battle system once again and under the battle canvas i'll add a new image called party screen so i want this to cover the entire screen so i'll hold alt and select stretch on both sides to set the position and the pivot at the same time okay i should rename this to party screen and under the party screen i'll create an empty object called party list which will show the list of pokemons so let me just make that a little big and now inside the party list we need a ui kind of like the player and enemy hud to show the details of the pokemon so i'll just copy the player hud into my party list let me just make that a child object of the party list so yeah we need a ui like this to show the details of our party member so i'll rename this to party member and we don't need the background image for this so i'll just i'll just remove it and i'll just make the party member a prefab since we'll have to make six duplicates of it so so i'll go to my games game folder and here i'll create a new folder called ui and let me just drag and drop my party member here in order to create a prefab so i like to keep all my scriptable objects and prefab inside the game folder so that it's easy for the game designer to find these and and tune their values to balance the gameplay so next we need to create five more duplicates of the party member so total we can have six party members in our party and i'll just add a grid layout group to our party list game object and i'll change the cell size to something like 300 by 150 okay that looks good let me just reposition it and finally under the party screen i'll also create a text called message text so let me just hold alt and change its position and angle to the bottom of the screen and now we can also make it a little big i'll just change the text so do something like test message for now i'll change the font to orange kit and change the font size to 40 just like all our text and finally i'll change the alignment to center so right now on our party member game object the battlehead script is attached but we don't want that we want to add a new script to it so let's go inside our script folder and inside the battle i'll create a new c sharp script called party member ui which will attach the to the party member game object and next i'll create a script called party screen which will attach to our party screen so let me open the party member ui script and it's going to be similar to the battlefield script but we have few differences so let me copy paste all the variables and the set data function since we need that in the party member ui script also so we'll have to import unity engine dot ui namespace okay so that's all we need for now and next i'll go to my party screen script so in my party screen script i need a list of party member ui i'll just name it member slots we can just make it a serialized field and assign the slots one by one but i'll show you a better way of doing that so next we need a reference to our message text so i'll say text and we need to import unt engine dot ui and i'll name the variable as message text on this one we'll just make the serialize field and assign from the inspector and for member slots we will assign them inside a public function called init which stands for initialize and to get all the party member ui we can just say get components in children make sure to use get components not component since we want to return multiple components and party member ui is the component that we want so this function will return all the party member ui components that are attached to the child objects of the party screen so we don't have to manually assign each one of them from the inspector and we don't have to worry in case we want to change the number of members that we allow in our party but you can see that i'm getting an error here so this is because this function returns an array of party member ui but we have created a list here so let me just change that to an array so now we have our member slots assigned so next we need a public function called set party data and it will take a list of pokemons so inside this function i'll loop through all the member slots so since this is an array i have to use the length property in order to loop through it so this is actually the list of pokemons in our players party so we can have any number of pokemons in our party any number that is less than six so we might have two pokemons in our party or three pokemons but we'll always have six member slots right so we only have to set the data of the pokemon into the member slot if i is less than pokemon start count so in this case we can set the data of the pokemon to the member slot by calling the set data function and passing the pokemon at that index and otherwise we'll just disable that member slot so now if we have only three pokemons in our party we will only show three member slots in the ui the rest of them will be disabled okay so now in our battle system first let's grab a reference to our to our party screen and in the setup battle we'll just call party screen dot init to initialize it and in the open party screen function instead of printing party screen we'll call party screen dot set party data and pass all the pokemons in our player party okay so right now we don't have a way to reference the list of pokemons in the party so let's go to the pokemon party class and i'll just create a property to expose this list and in the getter we'll just have to return our pokemons list so now we can pass player party dot pokemons to the set party data function and we'll just enable our party screen game object all right so let's let's head back to unity and for the party member object we need to assign the party member ui script instead of the battlehead script but always remember when you are editing a prefab make sure to go inside the prefab and it is edited so that the change will be reflected for all the other instances of that prefab in the scene so we'll go inside the party member and remove the battlehead script and add the party member ui script and i'll assign the name text the level text and finally the hp bar also okay so now if we go back you can see that all the instances of party member has the party member ui script attached so yeah that's really important and now you are editing a prefab you have to go inside it and edit and do not edit it directly from here okay so let's let's add the party screen script to our party screen game object and i'll just assign my message text and finally to the battle system we need to assign the party screen game object all right so all right so let me also do one more thing from the party screen script so instead party data i also want to set the message text dot text to something like choose a pokemon okay so now let's go back to unity and we want to disable our party screen since we don't want to show that at the start of a battle and i'll just save and see if it works oh we have to disable our battle system also in the beginning so now if we test hopefully it should work so let me try to start a battle all right and if i select the pokemon action you can see that it opens the party screen and the details of the pokemons in my party is shown here this looks okay i i think i just need to make my hp bar a little more big let me just enable the battle screen and the battle system and party screen and go inside the party member prefab and i'll just make my hp bar a little more bigger okay so that looks better and finally let me just add some space between the elements in the grid layout group so i just had little space like 10 and that looks much better so since this is just a prototype for the tutorial i won't spend much time on polishing the ui but if you're making an actual game then make sure to spend more time and create a ui that looks really good okay so we are done with the basic setup of the party screen so i'll stop the video here and in the next video we let the players select a pokemon from the party screen and we'll switch it with the current pokemon of the player so before you leave make sure to leave a like on the video and hit that subscribe button and i'll see you in the next video

Channel: Game Dev Experiments

Views: 5,494

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

Id: RIr1zePqZ2g

Length: 23min 51sec (1431 seconds)

Published: Sat Jul 25 2020

Reddit Comments

[u/GameDevExperiments]

If you're new to this series, this a series where we'll create a Turn-Based RPG like Pokemon in unity using Design Patterns and Good Game Development Practices. I'd love hear what you think about it :)

Here is the entire playlist.