Godot - 2D Character Customization with Composite Sprites

hello I hope you're all doing well this is a character creator for a game I've been working on and I plan to make a dead log for my game within the next few weeks as you can see I'm able to change the characters hair face shirt and the rest of the clothing there's also a button in which I can randomize the players look character customization is a huge part in many games and this allows players to feel like they're undergoing their own story rather than just following along an already built storyline the way I was able to do this is by using composite sprites which basically means to keep separate sprite sheets for different components and then layer them on to create a final image I'll go over how I made something like this I'll be using a pixel editing software called a sprite which I highly recommend and I'll also use the Godot game engine you can use any software of your choosing to follow along as it's the concept that's important not necessarily what you use so here in a sprite I have my character drawn in several different layers I always start with the base body first and then I add the arms on a separate layer it's useful to have the arms on a separate layer because it can allow for situations such as holding items which should be rendered behind the arms and in front of the body then I proceed to draw the rest of the components such as the hair and clothing on separate layers the benefit of doing this is that it allows you to easily create new hairstyles or clothing rather quickly than just redrawing the whole sprite once I have all the layers completed I export each layer into a sprite sheet of its own once you have all the sprite sheets saved in a PNG format added to your project directory within Godot let's create a new scene for our customizable character let's create a node 2d then rename it to player control us to save the scene now let's add a child note to hold all of the sprites we'll be working with we'll call it composites rights and then let's add several sprites as children of that node each sprite node will correspond to a layer we created previously now for each sprite we can add a sprite sheet but it's not necessary because we'll be using code to change the textures also make sure to set the H frames property to however many frames there are in the sprite sheet in my case I have 8 for the idle animation do this for all the sprite notes now let's add a script to the player node click create and now let's get rid of all this stuff so now let's create on ready VARs to access all of our sprite nodes and in this way we can change the texture for each sprite with code you now let's just add a ready function temporarily to our script I'll add a new script to the project called composite sprites so I can preload all the sprite sheets in this Val and reference it from our player node here I'll create a dictionary for each layer where the key value would be an index and the value would be this right sheet texture I'll do this for all the layers back in the player script I'll preload the script that we just made so we have access to the sprite sheets now in the ready function will set the sprites to an arbitrary sprite sheet from our composite sprites variable now within the 2d view let's move the players position towards the center so we can see a cool now let's just adjust the scale a bit higher so we see our character clearer just like that click play great now let's add a button so we are able to switch the sprite for our hair just a normal button will work just fine create it and rename this to change hair I'll go to the note tab and then I'll create a signal for the pressed action now within the player script let's create variables to keep track of the current hair and also for the other sprites these will be integers and they will correspond to the key of the spritesheet dictionary that we created previously now within the change hair signal let's update the current hair index I want the index to wrap around and not go out of bounds so I'll make sure to module it by the total amount of hair styles we have and we can do this simply by just calling the size function on the sprite sheets dictionary and let's make sure to update the hair sprites texture now let's click play and check it out great so each button press will swap through each of the hairstyles that we set so now I'll just quickly create buttons for the rest of the layers that are created and I'll just quickly fast-forward through this part so this is the completed signal functions and I've also rearranged the buttons in this manner well it's pretty arbitrary but now let's click play and now this button changes the face this changes this shirt this changes the hair the accessories shoes and the pants great now let's create a button to randomize everything so I create a button note again and I rename it to randomize button I'll give it the name randomize actually yeah it doesn't resize so let me just rename it to something shorter I'll just call it rent great okay so now I can fit it in to the screen and now in the note tab I'll also create a signal for the pressed action and I'll add it to the player script now here at the top of the player script I want to create a variable called orangey and I'll create a random number generator and with this I'm able to call a function called R and I range and what R and I range does is it takes in two parameters and I'll return a randomly chosen integer between those two integers given and what I want to do is select one from zero to the last index of the sprite sheets and I'll do this for all of my layers now let's make sure to also set the textures of the sprites now let's click Play and then try out the random button great so it works now looks pretty good so that's pretty much how I created my character creator leave a comment below and tell me what you think thanks for watching and have a wonderful day or night take care

Channel: Arkeve

Views: 58,430

Keywords:

Id: AkKywZDJNeE

Length: 11min 41sec (701 seconds)

Published: Tue Jul 07 2020