Godot 3 Character Customization #1: Making the animations

i decided to make my first tutorial after seeing your appreciation for my first devlog video where i showed you the titles feature in this video you will see how to make a character customization system for your good old game hello world bites of here first a disclaimer i made the system by myself based on what worked for me this might not be the best way to implement this so keep that in mind just wanted to point that out because you know imposter syndrome also if you have any improvements or adapt do not be afraid to ask them on the comment section below we're going to start with creating a new project and setting it up if you already have an existing project i would suggest you to skip this part remember that there are timestamps on the description let's make a new scene and i will call it main scene i used a snake case when naming any folder or file to avoid any issues we add a node 2d as the root save the scene and set it as the main scene now we open the project settings window with the project menu on the top left corner heading to the windows section under display change some properties i will set the resolution to 320 by 180 with a test resolution of 1280x720 here inside the stretch section set the mode to 2d and the aspect ratio to keep to avoid any weird resizing and prioritizing the original resolution you can set this to any other resolution if you want it i would just recommend to try out what looks best with the size of your art and i would also suggest you to make it to be a resolution with a 16 by 9 aspect ratio as that is the standard for the most popular resolutions here comes the interesting part making the sprites i will use a sprite as it is the software that i use for drawing sprites as you can see i have already two animations i did not make these ones i got them from the open game art site but i will modify them i chose this art because it contained a character with no clothing and that is perfect for what we are going to do let me explain you how this system works we have a default layer it contains the character without any clothing and i will name this one body as it is just that the body now we create a layer for each part of the clothing or body part that we want to be customizable in my case i want to be able to have different types and color of my trousers and shirts and when it comes to body parts i want to be able to change the style and color of the eyes and hair of my character so i make a layer for each one of these parts now it is time to animate the clothing layer by layer and frame by frame this will take some good time and more depending on how many frames layers and parts you want but at the end trust me it will be worth it as this system is reusable and you could make a lot of different combinations of characters in a short period of time instead of doing this process for each variation once we are finished it will look like this we will turn this to a grayscale sprite so we can change the color of the parts by code or in the engine this is not necessary but most times you will want to do this unless you have a part like a chest light that has different colors as changing the color in godot would ruin this because it paints all this pride to do this we reduce the saturation of all parts in this part you can do it layer by layer select the frames of one layer go to the edit mode at the top left corner then over to adjustments and click on the hue saturation option when this new window comes up you move the slider of the saturation to the minimum if you think that it is too dark or bright you could took the lightness value press ok and this will be applied to your layer what is left to do is to do this with the remaining layers [Music] great we have all our sprites in grayscale to finish with this part we need to export the sprite sheet and different files for each part so first i will go to the file menu at the top left corner and then i select export in sprite sheet in this new option we go to the sprite tab and select the body layer because that is the one that we want to export now in the output tab we check the output file option and click on the name to choose a name and location for our body sprite sheet i recommend to name every file according to the part that it contains we press ok and do the same for the other part in godot we make a new folder i call that character and inside of it we will copy the sprite sheets of the parts that we previously made then make a new scene called character the root of this scene is going to be a kinematic body 2d to be able to move this character and apply physics to it add a sprite node for every part of the character that you have in my case i get a body legs chest eyes and hair sprite notes i call them by the name of the body parts to have a guide and avoid confusion because some clothing that goes on the same part could be called different like how shorts and trousers both would be in the legs but they do not share the same name or looks drag and drop the png file of a part to its corresponding sprite node's texture property do this with all the files when finished we select all the sprite nodes and under the animation section of the inspector we set the h and v frames property to the amount of vertical and horizontal frames that we have on our sprite sheet to find it quicker you can go to a sprite and see the frame count to know this now we can change the color of any part that we want for this we'll use the self modulate property this one changed the sprite of a color but not its children to avoid painting notes that we do not want we have arrived to the end of this first part of the tutorial you can see how it looks there will be a second part where i will show you how to make the character move along with other parts and maybe even a third one with a random character generation so i would subscribe to avoid missing this upcoming videos and if you do comment it down below and i will reply or heart your comments goodbye world see you in the next one [Music] you

Channel: ByteSeb

Views: 13,039

Keywords: godot, godot 3, godot 3.3, godot 4, godot tutorial, how to make games, godot character customization, godot sprite, godot beginner, godot game engine, godot engine, byteseb, ByteSeb, game engine, gamedev, game development

Id: HkKdlJN57_k

Length: 7min 8sec (428 seconds)

Published: Thu Apr 29 2021