2D CHARACTER CUSTOMIZATION in Unity Tutorial

Toodee character customization so what are we talking about what does this mean the most obvious example would be to have a character creation menu we can modify how your player looks from the start with hair clothing etc but this can apply to other systems as well for example say you're making an RPG and you want to change hair carrier looks every time you put on a new piece of equipment or maybe you want to add variation to your game and randomly generate characters to maximise use of your art assets we're gonna be talking about the underlying concept here of how you would implement a system like this and it's gonna be mostly geared towards 2d games but if you're making a 3d game I think these principles will still apply it's just how you go about implementing it's gonna be different stay with us so let's talk about how we want to handle animation in our game specifically for 2d the standard way is to implement something called a sprite sheet let's quickly go over what that is say you have a character and we want to make our game look interesting so we want to animate our character so we may gave our character an idle animation and for the record I never claimed to be an artist here so let's say this was our idle animation it's 3 frames long and like one of those flip books who would play each one of these images in a sequence and it would animate your character to do whatever action you're performing at the time so this is our idle animation it's pretty bad let's say we added a walking and an attack animation so now we have our spreadsheet here and each one of these is only three frames which is not normal usually they would be much longer so where does the customization actually come into play well let's say we wanted to add a hat to our character that sounds like something that should be pretty straightforward you're just adding a hat but it's actually quite deceiving because in order to add this hat you now need to go in and update every single one of these images with a hat but ok fine we can do that it's not terrible but let's take it one step further now let's say you found a right boot for your character and you want to display that well now it becomes a problem because not only do you have to update a spreadsheet of wearing the boot you also need to update an entire spreadsheet of wearing the boot and a hat and if this isn't becoming clear as to why this can be a problem this is only for one animation for one character in one direction if you were doing a top-down 2d game you would have to do this four or eight times depending on if you're doing diagonal directions that's not an arbitrary amount of work that means eventually if you ever want to add a new piece of gear or change an existing look you need to modify hundreds of sprites it's not sustainable and it's at this point you should start realizing there has to be a better way of doing this introducing the way we'll be using in this video is by using skeletal animation to explain this let's go back to our original character and unfortunately for him we're gonna have to do a little bit of mutilation we actually want to break each body part off into its own separate piece and by peace and unity terms this would be a game object and instead of drawing out your animations we're gonna move these game objects typically in code or just using the Unity animator to do the animations for us we'll show off more when we actually get to unity in a bit but understand what's happening here we will essentially be setting a placeholder game objects for each body part and for these game objects it doesn't even matter what sprite is being displayed they're all gonna animate exactly the same what this gives us is the flexibility to swap in and out any sprite we want per body part the caveat for this is that we need to make sure that our art assets are relatively the same style and size with that said I think it makes more sense to actually see it live so let's swap over to unity and we can start our tutorial here I setup a empty 2d unity project it just has a floor and I changed the main camera background color we need a character and some outfits to cycle between so I'm just gonna use this mighty heroes rogue pack that I've used in a couple of my videos and import this free package into unity I'll have a link in the description below so you can just import and I'll take everything it has to offer this package is great because it comes with six fully animated rogues and they all have different outfits and faces and like we just talked about the body parts on these rogues are broken down into individual game objects so if we expand this rogue prefab we'll see all the different body parts that this has and so our rogue torso as a game object child to it that has a sprite renderer and this is what is actually displaying the image so we could change this torso to one of the other variants and you'll notice that it just swaps so when we run the game it's still animating just fine even with the different sprite because the game objects are what's animating not the sprite itself so that's the benefit and like I mentioned before with one of the drawbacks let's say I put the shoulder as the torso sprite and hit play it will still animate like the torso but it looks weird because the sprite isn't correct so that's what I meant before where you need to make sure your art style and size is relatively the same so that it looks good when you swap them out I'm one of the prefabs if you dub click on the animator controller you'll see all these animations they have up and so we can go to window animation animation and double click on one of these animations in the controller and you'll see that all these different game objects are moving and are dynamically animating the scope of this tutorial isn't to showcase how to do skeletal animation it's more to inform you of ways you can go about getting character customization going in your game and this is through one method if you're completely lost about how this is working I really encourage you to download this package and to spend some time learning it looking through what they provide you because you'll get an idea of how you might want to implement this yourself it could be that this is over detailed for what you're trying to do and you could simplify it in that case I definitely encourage you to look through and see how they set up their animations okay with that said we're gonna move on to making our own character creation menu so we'll clear out these rogues for now you know we'll Center our guy here we'll drag this rogue one down into the assets folder to make a new prefab and we'll call this prefab player and I'm gonna scale to like 0.5 in the exit point 5 and why I think these come pretty large so the first thing I'm gonna do is just set up a little bit of UI work or our menu this is gonna be really bare-bones so I'm gonna right click go to UI and select panel so I'm gonna select the rec tool and I'm D and I'll hold shift and just shrink it down it doesn't have to be perfect I'm just trying to set up an area for us to work with on our canvas scalable screen size 1920 by 1080 so on our panel we'll right click go to UI and add a text exbest Pro it'll add you to import so we'll import essentials so we'll change this text to hood and I'm also gonna add a button text mist Pro and I'll duplicate that for another button and we'll have a previous button and a next button and we'll update the text on these buttons to replicate that so we'll save previous and next I'm just gonna roughly spread them out okay and so I've got our right-click on our panel one more time and create empty and call this hood selector and I'm gonna drag our text and the two buttons and drag it on to that right now you can press the buttons but they don't do anything so let's change that in order for us to do that we need to make a new script so I'm gonna right click on assets create c-sharp script and I'm just going to call this something like outfit changer so let's open it up in Visual Studio this group's actually going to be very straightforward the first thing we need to know is what body part or what part of our outfit we're changing so question I'll pose to you is what do you think actually facilitates that you may think it's the game object that we're animating but that's incorrect like I said before the sprite renderer is what handles the actual image swapping so we need a reference to the sprite renderer so we can say public sprite renderer body part and I'll just have this header for clarity so we know what body part we're gonna be changing but we also now need to have a list of options to change between so what does a sprite renderer use it well it uses a bunch of sprites so we need a public list of sprite and we can call this options we'll just declare a new list here same thing I'll just add a header for clarity so on our hood selector object here in the UI let's drag our outfit changer script on to this object and you'll see we have our two new fields so the first thing we need to do is get our body part since we're doing the hood we'll start there so we can expand our player you'll find it under the head game object justly something along the lines of rogue hood and it has a sprite renderer attached so on our hood selector we just want to drag it and rogue hood into sprite renderer and it'll pull it off so now we need to populate our options in this mighty heroes package to be imported there's a rogue folder which has all the sprites and we could find that there's rogue codes 1 through 6 so an easy trick for this is we can click on our hood selector and lock the inspector up here and then click on wrote code 1 shift-click to rogue head 6 and then drag and drop it on options so we have our sprite renderer we have our options now we need to actually cycle between them so let's get rid of start and update and we'll say public Boyd's next option and we want to keep track of what our index through our list is so we'll make a private variable we'll say private and current option and we'll default this to 0 so the first thing what I do is since we're progressing through our list we want to increase our current option we'll increment it by 1 we need to check if we've exceeded our list size and if so we need to reset it back to 1 so we could just cycle all the way through so we can say if current option is greater than or equal to options that count then the current option is equal to 0 otherwise we simply just want to say body part dot Spray equals 2 option open square brackets our current option so we pass in the index into our list and then it'll pull the sprite really quickly we can make the inverse just so we could say public void previous option and say current option - - so we'll decrement this time we just need to the opposite chick so if current option is less than or equal to zero then current option is equal to options that count - 1 same thing budding part that sprite equals options of the index we can unlock our inspector and on our previous and next buttons we can add on click events so for our previous button we could drag in the hood selector to our object and go to outfit changer previous option we can do the same thing for next button we can add an event drag in the hood selector and hit next option and now we can actually test it out so if we run the game we can now cycle through all our different hoods going forward and back one more thing you could do is you could increase the size of this from 5 to say 6 and leave one of them as an empty sprite and now when you get all the way down to 6 it leaves an empty option so now we just have a bald rogue sometimes this will make sense and sometimes it does it depends on what part of the outfit you're changing so let's step through this one more time with a different body part I'll click on our hood selector and ctrl D duplicate it and we'll call this torso selector we'll drag it down a little bit and change the label name to your torso well 0 at our options list on torso selector and we'll drag in our torso sprite renderer to the body part we'll look back in our package that we imported and look for the torsos so there's 1 through 6 again we'll lock the UI select 1 shift-click to 6 drag onto options and hit play and now we can cycle through our different torsos it's much faster once you have the scripts set up and so I'm gonna take a minute and just fill out the rest of the body parts ok I've added most of the different party parts from this rogue package and if we hit play we can now cycle through all the different types of components and body parts we have so one more cool thing we could do is randomize our options so back in our script we can make a new method called public void randomize where we set the current option equal to random that range between zero and the options that count minus one and then same as before we can set the sprite to this random index in the list and I'm actually gonna create a new C sharp script and I'll call this character creation menu and this will be like a master script we'll drag that onto our character creation menu object and open up will remove certain update and the one thing I want to do is public void randomized character for this we need a public list of outfit changer we want to tell every outfit changer in our list to randomize so we'll say for each outfit changer in outfit changers changer that randomize and so similar to before we have our list here in character creation menu we can lock this we could select hood selector all the way down to all of our different outfit selectors and just drag it into the list I'm character creation menu I'll right-click and add a new button that will put towards the bottom well unlock the UI and we'll call this one randomize button and change the text and for the onclick event for this randomize button well drag in our character creation menu go to the character creation manuscript randomize character and with this simple change we should now be able to randomize a character every time we click the button which leads to some pretty cool combinations and finally really quickly I set up this other level this level one it literally just has my player prefab that we've been using this whole time and in my build settings I've added level 1 to the scenes and build in our character creation menu script we can add another method public void submit and we could say scene manager you may have to import the scene manager so you can add this using unity engine dot scene management line at the top scene manager that load scene and just for simplicity I'm just gonna put one which is the build index of level 1 there are better ways of Davis I'm just doing this simple way but before we load the scene we want to save our changes and I will preface this with saying you should probably be using your own serialization system saving it out as JSON or XML it's probably a better approach than what I'm going to show but if you just want to save and overwrite this prefab something can do is use prefabbed utility you might need to import unity editor to use this so we can say prefab utility dot save as prefab asset we have this public game object character that I added and so on character creation menu we just want to drag in our player into the character option say PES prefab asset we'll put in our character path this is like directory path and your folder structure and so I don't recommend doing it this way but just to prove you can save something out I will say assets slash player prefab which references this player prefab that's in my assets folder so it will overwrite this I'm gonna duplicate our randomize button and just drag it to the right we'll call this submit button type in play maybe make it bold and instead of randomized character we just want to hit submit and so now when we play we should be able to randomize all these different combinations and when we're done we can hit play and it will load our saved configuration into this next level which pretty much completes our character customization menu hopefully this points you in the right direction and gives you an idea of what kind of system you would need to set up to handle character customization in your game I think you're gonna have a tough time finding of one size fits all character customization solution for any game you make it's usually pretty custom to whatever your game needs what that's it I hope this helps you out and yeah thanks bye [Music]

Channel: BMo

Views: 64,021

Keywords: unity, character, customization, creation, tutorial, unity tutorial, character customization, how to, 2d, 3d, outfits, equipment, animation, spritesheet, skeletal, character creation menu, UI, Prefab, learn, unity3d, unity2d, beginner, intermediate, bmo

Id: kAPIWJJ6NQI

Length: 14min 49sec (889 seconds)

Published: Sun Apr 05 2020