Character Customization Screen (Complete) - Godot Tutorial

so before we get started there are a couple topics that i covered in previous videos these topics are going to be in the description and in the i code when i come to the topic the art used in this tutorial is by vimlek link to where to download it in the description the finished project for this tutorial is in github link also in the description i have a completely empty scene here i'm going to go ahead and just create a new scene i like to call this top node master just makes it easier to call it from anywhere first thing i'm going to do is add a camera 2d i just add this because it's a lot simpler it gives me more control over the camera than the default one so i'm going to zoom way in because this is going to be pixelate and go ahead and just click right there current that'll make so it shows from this camera instead of the default one so this is the city asset pack this is a pack that is going to be in the link in the comments the one we're going to be using here is this one a combination of all the characters this is going to make it more simple to change animations there are ways to use all of these ones but i prefer just sticking to this main one for the character select so just go ahead and drag that in click on it and as always change the import filter off reimport that's going to give it a lot smoother of a look now i'm going to have this down here just as a reference outside of the main camera i'm also going to make sure and link this to the scene we're creating right now right now it's going to be nothing but this is going to be the main scene so i'm going to create a new scene go ahead and right click new scene this is going to be the player and in this instance it isn't actually going to be a player but it's going to be the character that's going to change how it looks now in my main one i built i have a adult and child and it changes between those depending on if the switch is flipped in this one i'm just going to start off with the adult and later do the child so the way we're going to do this is a spray that's going to be the head we're going to do a new spray this one is going to be the body and a new sprite not animated spray and this is going to be the legs now all three of these are actually going to have the same texture i'm going to use the animation property to split it up into the head body and legs so on all of these you're going to want to do 12 vertical and 31 horizontal now if we change the heads coordinates this is going to change the frame and the y coordinates we want to skip the first one because that is just the labels so for the head it's going to be the y coordinates of one and the x coordinates of zero so for the head it's going to be y coordinates one x coordinates is going to be one two three four five six and that's just the starting one and then for the legs it's going to be 7 8 9 10 11 12. so y coordinates 1 x coordinates 12. and now we have a simple piecing now the way we're going to animate this is it's going to go between this one this one this one this one that's going to give us the idle animation and the round animation is going to go between these ones and then the body is going to go between this one this one and these ones legs this one this one these ones so we're going to go ahead and do an animator animation player and this is going to have a track for the head body's leg so we're going to do idle this is going to be the default one add track gravity track head okay and then it's gonna be the frame coils and a little something here we're gonna add x the reason being we don't want to change the y the y we want it to change dependent on um which head you want so for example if i change this to 2 it's going to change to a different head this is 3. we want to be able to do that so the animation is going to only change the x so i'm going to go ahead and insert a key that key is going to be a value of 0. i'm going to insert a key that key is going to be a value of 1. now if i play this his head is going to go up and down repeat play and you notice it's not doing anything this is actually a problem with it being pixlr and changing between frames instead of doing linear we want to do nearest now let's go ahead and add one through the body and this one yet again we want it to only change x into key this one's going to be 6 which is going to be this position and then 7. and now it's not changing go ahead and change that to newest it looks like the legs don't change between these so you don't really have to animate the idle legs because there's no difference but i'm gonna do it anyways yet again you just do colon x you only want it to change the x axis not the y axis this is covered in my animating only one axis video so this is going to be 12 and 15. okay and we have our animation so now you should be able to go to the head change this to two three four five and it just lets you change let's go ahead and put the head in front so on x index if you have a higher number it's going to be more informative if you have a lower number it's going to be more in back because this guy has a beard we want the head in front so that was simply enough i'm going to go ahead and create a new one this one's going to be called a run so i'm going to go ahead and add a frame coordinates for the head body legs i'm going to go ahead and set them all to x so that it doesn't change the y-axis and then this is going to be newest on all of these and i am actually going to decrease this in size quite a bit because the run animation is actually quite quick so i should only need about a half a second gonna do it into key first key is gonna be zero actually no it's gonna be two so the first key is gonna be two second key i'm gonna put that in about a tenth a second now it's gonna be one increase from two which is three so we're gonna go two three four five so i'm gonna go ahead and add a loop to that it has a bit of a weight at the end so i'm gonna decrease it by a second so i'm gonna do the same thing but this one's gonna be 8 9 10 11. so for the legs it's going to be this is 11 so it's going to be those 12 days 18 is going to be 14 15 16 17. okay so i realized i had these two messed up i had this 11 and add this 6 for some reason so now it's better so 8 9 10 11 make sure that these are getting the right frames we care about the this axis we don't care much about this axis so that is basically the player that's all i had created um well the adult version the other version i had was a adult and a child so this is just the adult player now before i show you how to make the child do something i need clarified face and this is only actually if you're using this exact tile set if not you could skip time stamp right there so if you're using this tile set this is mine this is one you'll download you'll notice there's something slightly different on this orange google right here this one's up this one's down this one's down this one's up the reason i changed it is because the rest are up right here the rest are down right here this is going to cause her to not match the legs if you animate the way with the adult and on the green child she's down right here just like the rest up right here just like this on here she's up them like i love your but you did mess this up just a little bit if they were using this as the animation the way i went ahead and fixed it just take this one swap it locations with this one and then this one go ahead and take three and four put it as one and two take one and two put it as three and four this one's my first one this one's my second one this one's my third one this one's my fourth one now before i make the child i'm going to create a node call this one adult put all this inside of it that way i could easily make the door invisible and make the child visible or vice versa and if you look at the finished product you'll notice that this is actually its own scene i'm going to leave it here just for simplicity though so go ahead and add another node this one's going to be the child this one's going to be the head let's make the adult of his adult invisible we're going to add another spray this one is going to be the legs if you look at it the child doesn't really have any body it's just head and legs go ahead and just add in another animated player and this one's going to be for the child so this exact same texture now if you notice the children are actually quite a bit smaller so those are gonna be different sizes now it's actually quite hard to count this out because the they don't go all the way down there's quite a bit less children but if you look at this you could eyeball it it's actually exactly half the height so instead of 12 it's going to be 24 and then this one is going to be 31. now looking at this because it's half the height it's going to be 1 2 3 before the first one so the head is gonna be four and actually the body two then the body's face y is gonna be so this is nineteen this is gonna be 20 21 22 23 24 25 26 is gonna be the legs and this one's gonna be 24. nope do we miss count that 25 and i think this is going to be 23. okay so 23 three threes head 25 3 so that's this one and this one so in the animation player we're going to create a new one idle just like the other one add this make sure it loops and add a new one for the head coordinates only the x-axis yet again and so key into key newest so this one's 23 this one's 24 and i'm not sure if the legs really change on this first one oh it does it goes down and up okay so if we play this he's going to go down and up so go ahead and add a new one for the legs for including it's yet again x key and two key so it's 20 25 and 26 and something's gone oh i was doing these two make sure you do these two so that's going to be 19 20. there you go that looks better and now we're going to work on the ground animation so it's going to work quite similarly to the other one we're going to do 0.4 so that it's the same log gotta make this a little bigger so we could see more of it add a track for the head frame chords add a track through the legs frame chords only animate x only animate x yes yes it's a key and we have four we're going to split it about 0.1 frames each so the first one is going to be 21 this is the 20 position if you count them out it just increases by one from there so that's 22 23 and 24 let's make that loop now it just goes up and down quite a lot like idle the real magic comes in when you add the legs the first legs running is 27 this one's gonna be 27 28 29 and 30. go ahead and run that so now we could change the head three four five six now we're going to go ahead and toss the player in position zero zero if we run this he should idle automatically but we can't really change that we can't change whether he's individual whether it's doing different animations that all depends on what we do in here so we're going to want to go ahead and create a player script and i'm actually going to have this access a global script that way it's easier for me to change these variables with ui elements so i'm going to go by creating a new script and i'm just going to call this global now this is going to have a variable head 0 variable body 0 variable legs zero variable run whether he's doing the run animation or not these ones are just going to be booleans and a variable for the child and i'm also going to have a constant safe path this is going to be the path that it saves everything to i'm going to user save dot dat i'm now going to be creating some functions these functions are going to be handling the changes change head change body change legs and i'm going to pass the direction this direction is going to be a one or a negative one this is gonna just make it simple when passing the variables so plus equals direction so if we look this over we want to limit it between 0 1 2 3 4 5 6 seven eight nine ten so zero and ten swim that script if it's not a child and the head is greater than ten then we want head equals zero else if or even just if head less than zero we want head equal 10. this is going to make it loop around if you try to subtract from the very last one it goes from the very first one it goes to the last one if you try add to very last one it goes to freeze one and then if it's a child the child is gonna have zero one two three four child's gonna have four so if head is greater than four head equals zero if head is less than zero head equals four so i'm gonna go ahead and create a new function change body direction this is going to do body plus equals actually wait before we do anything we want to check if it's a child because the child doesn't have any bodies if child we tune and that's just not gonna do anything if we call it so body plus equals direction if body is greater than we have seven bodies yeah seven bodies so if it's greater than seven getting in body equals zero if body less than zero body equals seven so just looping basically now with the legs it's a little bit different because there's three of each so function change legs direction legs plus equals direction if legs greater than three two we have three but if it's greater than two legs equals zero the flags less than zero legs equals two okay now we should be able to just call these from the gui and it'll change these variables we also need a player script that'll change these to match the given variables so next up we're going to go ahead and create a playlist script this script is going to mainly just make the player look like the global script variables in order to set up a global variable you set up the script project project settings auto load path global and you're going to add the node name global add and now you have the global variable script and i used to do onrediver basically this and then i'll do root global but then someone pointed out you could actually just call global and that's going to be project project settings that's going to be this name so if you change that name you need call somehow so i'm global. head and that's going to give us the head number inside global so i don't really need any of this i'm just going to take the process and i'm going to do ver character if global dot child then we're gonna basically make the adult invisible make the child visible and then also on the else we're gonna do the opposite adult dot visible equals false child.visible equals true so you're gonna do adult visible thoughts child visible true the character is gonna be the child we're gonna be doing a lot of stuff to the character so i'm gonna do character get node head so this is gonna be the child's head frame quotes dot y equals global dot head plus three now the reason i'm doing plus three here is if you look into the master i wanna go one two three so this is the new zero now i'm gonna do a similar thing with the legs if it's not a child adult visible is gonna be true child visible is gonna be false character equals adult now i'm gonna do basically the exact same thing as here with slightly different variables instead of plus and three i'm just going to have the plus one there's gonna be another one for body so i'm gonna do a variable animation player i just do ap for some reason character dot get node animation player so if global dot run and ap dot current animation is not equal to n then we're going to want to do animation player dot stop current animation animation player dot play run not global dot run and ap dot current animation is not equal to idle ap dot stop ap dot play idle automation player get node i added a t okay so if this is all working i would be able to in the global change these variables and it'll change what's happening invalid index body lowercase b and it's frozen let's see so for some reason moving around these into the adult node changed all these which kind of messed something up so i'm gonna go ahead and reset up the animation real quick so a bit of a quickly fix i found is if you get this err go ahead and just click on the name go all the way over get rid of adult that way it matches the path you want to go body frame chords x so i went ahead and got this wicking if i go into global let's see if the other thing's working too so let's change one to true oh look at that he's running let's change child to true also yeah it's working head one there's no body for the child let's get rid of child false and then body let's do seven there we go legs through the there is another pair of legs so it's just not showing up there we go so it looks like all these are actually working pretty good we're gonna set up a graphical user interface that'll allow us to change those from just here so we're gonna go ahead and just create a new scene right click new scene let's call this canvas something and other node here i really like this canvas layer it saves a lot of time so i'm going to do a cane container and let's go ahead and do a merging container right here on layouts just do full rectangle this will make it automatically take the full size the canvas layer will match the full size to the screen size so you're going to do a horizontal box or hbox go ahead and add some padding which is going to be a merging container let's go ahead and actually rename this left peg and on this left padding i'm going to do size flag horizontal expand this is going to make it take as much space as it can i'm going to add in another padding which is merging container on the hbox that is going to be the right padding and instead of doing a grill we're going to direct min size so i have them inside set to 100 for this one her stuff is going to be right in between the two so we're going to do a v box this is going to make it change the height and that is right in between the two this is gonna be the buttons button container and then i'm gonna go ahead and want to center that so i'm gonna do a merging container duplicate that size flag vertical expand size flag expand so that's going to be centering it i'm going to rename this top padding bottom padding and then right in between that is going to be where actual buttons are now i'm going to add a hbox this is going to be what's containing the buttons so button label button so this face button is going to be a minus second button is going to be a plus label is going to be whatever it is head plus minus head and i'm actually going to have this repeating for the head body legs and in order to do that i'm just going to right click here save branch as seen and i'm gonna call this buttons now if i go in there it's gonna be buttons and i'm actually gonna add a script that's gonna grab all the button presses and pass it to the master along with the name i'm basically gonna have this pass the signal to buttons this pass signal the buttons the way i'm going to do that node press connect buttons press connect buttons button's going to have a on press that's not going to work so i'm actually going to rename this left right better names anyways so i'm going to disconnect all press connect there you go that's more distinguishable of a function name so i'm going to connect this to that and now it's going to have a left with gripe pressed let's get rid of that unpressed and then we're gonna want to send a signal out so export doing this isn't gonna be the signal this is gonna be the name for button aim and signal this one's going to be the signal change so it's going to send out a change direction on left press change direction it's actually going to be emit signal change and because it's left it's going to be minus one and this one's gonna be plus one emit signal change plus one so this is basically going to buttons is gonna have a change now i can link that to other things i'm gonna link that above to the canvas layer and that's gonna pass a negative one or a positive one depending on which one of these two gets clipped i'm also going to add a ready that changes the label to the name so label equals no label.text equals button name and let's get rid of all this extra that's the buttons in the canvas layer we're going to have a buttons in here let's get rid of head so buttons in between here head and it's basically the same this is going to connect to the canvas layer but we're not going to do that now we're going to do that later for now we're good just going to change this to head so we have a head a body make sure you name this one is actually more important than this one this one's just so we remember this one changes the text legs legs so we have head body legs let's just run this one head body legs and then now i also had a button for run and child and then save we'll add that save for now but we'll focus on making it work later so i'm gonna add another horizontal box right there right below the legs this one's gonna be the toggle gun so toggle gun we're gonna add a child no and we're going to do button checkbox and then we're going to add a label so this is going to be done so i'm going to duplicate this and this is going to be toggle child checkbox label this label is going to be child so you're going to have head body legs run child let's go ahead and add the save button in i think i just did a button so right there above the padding below there oh right there boom this is going to be save because i didn't have a margin it's in this margin it's going to take the set width with a minimum width if i increase more then it goes more but if it's less it just takes the set width so now i'm going to go ahead and set up a canvas layer gd now this all is actually just gonna be mainly handling button clicks so i'm gonna take head node connect connect on head change direction body change connect connect legs change connect connect this one checkbox this is going to be toggled so this is going to be a true or false this one simply it's going to be toggle that way it passes back a true or false and then this button press connect connect so on button pressed actually i'm going to disconnect this rename it saved just so the functions more understandable so on save press on button press um let's get rid of that we have two on checkbox toggled so i'm actually going to name this one check run and this one check child i'm then going to disconnect them then reconnect them for better names you could also just change the name right here but this way just makes it simple on checkline toggle check child toggled let's go to that one on save on legs change on body change on head change now we just need call global this one's change body and this one's change legs okay so i'm going to worry about the rest later so if we go back into master go ahead and drag in the canvas layer we could actually change the head the bodies the legs now let's add the running child so this is going to be a little bit different because it's not calling a function but basically the same so button press is going to be a true or false a true if it's checked or false if it's not so we're going to do global dot run equals button pressed global dot child equals i'm pressed we go ahead and run that so that all seems to be working but if you go too far on the head and then change it to child it actually just decapitates him because it doesn't have a head that fur now to fix that it's actually quite simple we're just going to go into here and we're going to say if child and head is greater than this there's four head equals zero so basically if we have one of these higher heads we change the child it just goes to zero so saving and loading the data is actually quite simple so you're just going to do a save data function and a load data function for now just save data so we're going to do a variable called data it's going to be equal to all the data we want to save and it's going to be an object so in this case we're going to do a string head is equal to head a string body is equal to body so this is going to create an object that's just has all our data we're going to do a file new equals file we're going to go ahead and call error equals file.open save path file dot great and this is if you're going to be writing to it and it's a save data so we are going to be writing to it if error equals okay in that it successfully opened it we're going to do file.stover data file.close and make sure you have the right save path this is going to be this safe path okay so that's going to be the saving data we're going to go ahead and set up a loading data really quick this is going to be quite similar basically the exact same but a little bit harder so you're going to do very file equals file.new let's check if the file exists if file. file exists save path so basically if there is a file there if not just do nothing so very error equals file.open save path file dot read so this is going to pull data instead of right to it if error equals ok and that it opened the file correctly very data equals file dot get ready make sure you're getting the same as you're storing file.close now right here we're gonna have the data we're gonna want to assign all these variables to the data and to do that you're going to do something like data of head that's going to give you the head data so we're just going to do head equals data of head body equals data of body lags equals data of legs run equals data of run child equals data of child we're gonna have to on the ready call load data now this should work except i actually didn't assign save data yet so we're just gonna do global dot save data now they should work save x you get back in it's the same but there are some issues you notice how it was running but the run wasn't checked so we save it as not run get back in it's not it we check the run save it get out get back in it's ready so we need to set these upon loading in the canvas layer let's go ahead and do on ready so on ready it's going to find the node check that that's just going to be this one and it's going to do crest equals global dot gun find node check child dot crest equals global dot child now if we run this and you might have noticed this already there is a body which does nothing as child it does stuff as the adult nothing has a child so we might as well just get rid of it this process is going to find the node body so it's going to find this and just dot visible equals not global.child so its visibility is gonna be dependent on the non-child there you go so we uncheck it it comes back we check it leaves so i know this was a bit of a longer tutorial than i usually make hopefully i was able to cover all the topics of how to make a character select screen if you have any questions just reach out to me let me know i i'll try to answer everything i can so as some of you might have noticed i have a new channel banner and icon this was thanks to first otifix i think i pronounced that name right i'm going to link his instagram down below if you want to follow him that would be great go ahead and check out he makes pretty great art actually and also if you do want to join my discord link is down in the description you

Channel: Arith metic

Views: 4,616

Keywords:

Id: 9O-JLwO924Q

Length: 38min 12sec (2292 seconds)

Published: Thu Nov 26 2020

Reddit Comments

[u/objChaz]

I might be wrong, but isn’t the girl in the thumbnail vimlark’s? I can’t watch the actual video where I am but I recognised the character

[u/NinjaseeNinjado]

This is awesome thank you so much!

[u/krakonner]

I've always wanted to use godot, but i got used to game maker. I'll take a look :)