2D Character Customization - Full Skin Changing - Unity Tutorial

2D character customization of course the first thing that comes to mind when we mention that is the character creation system or when you want to change the skin of your main character or any other characters in your game but let's talk about my experience when I created avocado game and what difficulties I faced and how to avoid wasting a lot of times avocado was my first video game so I have no idea how to start the animation so I chose the frame by frame animation method and I created the character using the uh Adobe Illustrator then I animated it frame by frame using Adobe after effect that was nice and I created my first animation and it was awesome but then during the development of my game I needed to add emotions to my character so I wanted him to walk sad or sometimes happy or sometimes angry so to do that I forced to redo all the animations using all different expressions so you have to walk smiling jump smiling Ryan's smiling Isle smiling then you redo everything while sad then redo everything while angry then to make things more complicated I needed to add some weapons to my hero so then I recreated all the animations without hands because the hands were really replaced by the weapons and so imagine what mess and how dozens of hours or days has been wasted just to do this in inefficient way but things changed radically since 2019 till today and the new technologies has been developed one of those Technologies is this skeletal animation which is provided by unity in this technology you can draw your character and place each one on a layer then link each layer to specific bones and by this method you move the bones regardless the Sprite is linked to it we will not go deep in the skeletal animation and rigging because our today's video will talk about changing the skin and I already covered full lessons regarding drawing rigging and skeleton animation I'll provide you a link for such videos or the previous videos down in the description so in today's video we'll show you how to fully change your character's skin in unity 2022 using the Sprite Library assets and in the next video you will learn how to change each body part of your character from binary neuner and let's get started [Music] so let's start by creating a new Unity 2D core project I'm using currently Unity 2021.3.5 feel free to use this version or any newer versions so as I mentioned before this tutorial is focusing on changing your character's skin so I'm assuming that you already have two versions of your character which is creating in Adobe Photoshop I already covered video full videos how to draw your character and prepare it to be rigged in unity in additional to the ik and animation I'll provide you a link for those detailed videos down in the description but for now I'm not waste time I will Fast Forward the rigging uh and doing a quick prototyping animation just to go straight forward to our point of changing our character skin before we start it's worth to mention that both version of your character should have the same exact structure and above that all each body limb should have the same name exactly because it's even case sensitive so for example version one of our character which is white skin have the body and I did intentionally mistake here and I made body with capital for the demon skin while I made small letter body for the white skin to show you later how it might cause problem when we're changing skins so let's start rigging our character I'll fast forward here because it's already covered in the previous video I as I mentioned [Music] thank you foreign [Music] [Music] [Music] foreign [Music] [Music] [Applause] so now our character is fully rigged and also I applied ik to facilitate the animation and created this simple quick prototype animation to show you that changing the skin will not affecting the animation so let's start by adding the Sprite Library script and of course to use that we will be needing to create Sprite Library asset so right click in any empty space in the project files create 2D Sprite Library asset let's name it white skin Library then let's start adding a list of categories and body limbs but in our case we will only have one body limb inside each category so for example let's start with the body category then the body limb which also called body then we drag the Sprite for the body from our PSD file to the Sprite location on the category see it by adding new category left arm and we do the same with the body limb called left arm and we drag the Sprite to that place and we proceed with all body limbs after that we go back to our character and we set the white skin library inside the Sprite Library script then we repeat the process for the demon skin so we create a new Sprite library and we keep adding the demon Skin Body limbs as we did for the white skin [Music] thank you after that we select all the body parts Sprites from the hierarchy and we add a Sprite resolver to them it will automatically detect the body Limbs and their categories so if you for example select the left arm it will automatically select the left arm category and the label because we already set them in the library and their names matches the body link as a game object now if we change this price Library between the demo and the white skin we successfully changing the scheme but we lost the interaction with the animation and that's because we forgot to set the skeletal animation for the demon skin to be the same as the white skin in addition to that it's true we selected the white skin rig but it's not attached to the Sprite of the demon skin so we again redo the rigging by selecting autoshima3 and repeating the steps of rigging to the character which is explained in our previous videos now if we go back to our scene and try to change the Sprite Library we successfully changing every part in the skin except the body limp and that's because as I told you before I intentionally didn't change the body name from Capital to small letter this will pose the resolver not to find the appropriate body limp so to solve that we go back to photoshop and change body from capital B to small B to match the other uh set or scan of our character so make sure to change all the body parts to match the first character also make sure that on the Sprite resolver it's also the same name so it should be the same name inside the Photoshop file inside this bright library and inside the Sprite resolver on the game object of the body limp if you did everything successfully when we press play and changing the Sprite Library it will keep animating without any problems and that's what we achieved right now so the core concept has been applied but it's not nice to change the Sprite library from the inspector because you want the player to change it so let's apply this apply some codes that will change the Sprite libraries and we add some UI to called some functions to change the skin so let's create full skin change your script delete the start and update functions because we will not be using them and we will create our custom functions in addition to adding Unity engine dot U to D to have access to the Sprite Library assets so let's create a public variable a Sprite Library asset but since I forgot to add dot animation to have access to that we need an array of sprite Library assets because we will create multiple skins but in our case it's only two let's name it libraries then let's create a custom function oblique void change skin and we'll pass through it a Sprite Library asset which is our skin so to change the skin we simply gain access to the Sprite Library by getting that component from our game object then accessing the Sprite Library asset and then assigning the skin to that now we need two function one to set the white skin and another one to set the demon skin and simply those two functions will call the changed skin function and pass to it the appropriate Sprite library in our case for the set white skin it will be the skins item number zero which is the first item in the list or the array the same will be for the set demon scheme we just changed the item number in our case the second item will be skins number one item save and go back to the scene now let's create a quick UI which consists of two buttons to call those two functions that we just created so create new UI image it's a simple square and inside it add another image to place an icon of the body or the skin color and on the main image we add the button we duplicate that to create another instance of the button for the demon skin now let's go to the first button the white skin button drag to it our character which called now the white skin and go to the full skin change and set white skin do the same for the demon skin and this time choose set demon skin script or function sorry now the Moment of Truth hit play and click on the buttons and nothing will happen that's because we forgot to add the Sprite libraries to our code to the array so let's go back to our script and add in the inspector the two skins that we created first one should be the white skin the second one should be the demand skin now hit play and everything should be working as expected the player now can change the skin of his player so that's it for today's video you learned how to change the skin of your character in the next video you will learn how to change each body part for your character and that's it for today's video If you enjoyed and found this video useful don't forget to hit like subscribe and the notification Bell so you don't miss the next videos and of course we are deeply thankful to all our supporters on patreon for their generous support and keeping encouraging us to do more quality content till next video see you soon [Music]

Channel: Binary Lunar

Views: 15,257

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, full skin change, easy unity tutorial, skeletal animation, rigging, sprite library, character skin change

Id: ZgCB4tifQ_c

Length: 14min 50sec (890 seconds)

Published: Sat Jul 09 2022