Changing Player Appearance when Equipping | Godot Tutorial

in this tutorial i'll teach you how you can change the appearance of your character based on the equipment you equip it with let's get started before we dive into the code we have to talk assets and we're going to talk assets for the particular technique that i'll be using in this video do know that there are multiple ways to go about changing the appearance of your character the method that i'm going to be teaching you in this tutorial is a little bit more old school it's the same method that the guys of blizzard used when they created diablo 2. on the right of me here you'll see a couple of sprite sheets we have a sprite sheet for the head the armor the main hand and the off hand these price sheets are not hand drawn sorry to break it to you diablo 2 has 3d models however those 3d models were rendered into 2d sprite sheets and as you can see when we zoom in on for example the shield when we look at the specifics frame when the shield is facing away from the character or sorry from the player you'll see that there is a dark band horizontally going over that shield that is actually not black pixels that's a transparency channel and that gap will be filled up by the sprite of the arm holding the shields and that's very particular for these kinds of sprite sheets the reason that we need that is because when the player is moving around turning around we can't have constantly the order render order of those sprite sheets change and the only way to make sure that without changing the render order of the sprites the animation and the art stays correct is by making sure that whatever overlaps whatever body part or whatever item part overlaps with the rest is alpha clipped out of whatever is in the background so that thereby you get these special sprite sheets that exactly overlap and together form one entity so now that you know how the sprite sheets are set up and if you want to learn more about that you have to google it i googled it myself found a couple of good resources for blender 2.5 but not for something reason but i mean blender can do that just have to figure out how i guess i'm not that much of a blender guru if you just want to practice these sprite sheets are linked down in the description below on the asset category they're cc by 3.0 license so that means you can easily commercially use them in your project as long as you give the right attributions to the artist so definitely nothing stopping you from practicing today and i guess let's get into the video let's get coding and let's get some stuff done before we get ahead of ourselves let's first have a look at the player character in the player scene if you don't know how to create an animated 2d character out of a sprite sheet with some movement i'll put some links down to some of my tutorials where you can learn all of that the only difference that's gonna come in with this particular character is that we got four different sprite sheets for the four sprite sheets that i've just shown you and we have a look at the animation player you'll see that now we are animating all four of those sprites in the same animation so for each of these animations we have four of these tracks and that is for every single of these sprite sheets now if i for example were to go to the chest sprite sheet and i were to go to my assets my art my isometric hero i where for example to replace the metal with the leather sprite sheet you can see that now we can change that equipment of course we have to do that through code and i guess that's what's up next to get started with the code let's first do a quick recap of what we've done in the previous six tutorials regarding equipment data i'm right here on the player data singleton the singleton that tracks all the dynamic data the changeable data of the player which includes the equipment it currently wears that is stored in the equipment data dictionary which has a dictionary key for every single equipment slot and then stores the equipment id or the item id of the particular item that is currently equipped in the past in the previous tutorials we were changing this dictionary directly from the equipment slot and inventory slot drag and drop functionality that we programmed in we're going to change that in this episode we are going to make sure that this equipment data is only changed by a function here on the same singleton which is the function change equipment that function is going to be verifying if the equipment that is being changed is part of a set of visible equipment pieces we have in this tutorial only four sprite sheets and i don't even really want to mess around with the head so i'm just going to be taking three of these sprite sheets and only when one of those three equipment slots change we are going to be updating the appearance of our character now of course you can expand on this system in your own game it's not like there's a limitation here i'm currently just limited by the assets that i've got freely available to myself and i'm going to create an entire 3d character and blender for just this tutorial that's a little bit over the top so on our change equipment function which is new we're going to push the equipment slot and the item id that we are fitting in there remember item id in this case can be a number an integer representing an item or it can be null if we unequip something so we're going to check in the game data which has two new variables if that equipment slot that we are equipping in is part of the visible equipment now how we do that is in game data so that is the single turn with the static data that does not change these are just facts about the game we have two new variables visible equipment which is an array of every equipment slot that would need its appearance updated and we also have a new variable naked gear because in my case when you push or unequip an item and the item id becomes null well no it's not something we can easily load into a texture so you could but then you'll be invisible so we also need to tell the game which equipment it needs to load when it receives no so for the chest we're gonna go with the close asset and as you can see here in my asset list uh close is uh one of the singleton so i can't show you like that if i were to drag it here you can see that's just close as if you are just a fresh fresh at game start and for the main hand and off hand well we can of course simply make that null when the character is running around without a shield or a weapon that still makes perfect sense so if those two variables on our game data back to our player data we can check the visible equipment those chest main hand off hand if the equipment slot we are receiving is one of those if that is the case it means that we have to update the appearance in that case we're first going to define the player note and then on that player note we're going to run the function on equipment changed which is of course also a new function and we push the equipment slot and the item id then finally we of course have to update this data so then we're gonna take the equipment data that is the variable we're gonna search for the equipment slot uh dictionary key and then we're gonna push the item id that we received now of course in order for this to work and in order to make sure we're not changing this dictionary directly anymore we have to update both the equipment slot and inventory slot code so going or starting with our equipment slot here on the bottom where we update the texture and the data of the target slot that we have dropped something into we were first updating the player data equipment data directly we are now going to take out this line and i've already prepared a new line of code where we now call that change equipment function we're pushing the target equipment slot so that would be the particular slot chest arms gloves hands whatever and then we're gonna push the item id that's gonna go in there now there's one more place where we have to change this this will not be used often but here we have another one so also here i'll implement this new line of code remove the old one and on the inventory slot this one is important because when we drag something from the equipment panel to the inventory then the drop data function where we're making these changes on there are going to be on the inventory slot now if that is a swap of an item or we're simply only unequipping an item also from the inventory slot we would have to update that data so that's right here where we update the equipment data we of course are going to delete this and we're going to implement this new line of code which is now a function call with that data so that that function can run so now whenever we're changing equipment by changing those three lines we are running on our singleton the change equipment function and that is going to call the player nodes to actually visually make that equipment change so now switching over to the code of the player this is the code that sits on the kinematic body of the player scene itself here we have our unhandled input and the movement loop with various animations calls this is all from the tutorials i've linked in the description below you probably already have this or something similar and otherwise you can look those videos up on this code we also find our new function on equipment change that receives that equipment slot and item id we have to define two things we have to define the name of the texture we need to be using and the sprite sheet object that we are going to be loading into our sprite 2d notes we first check if the item id we receive is null if that's the case it means that we have unequipped something when we unequip something we have to look into that naked gear dictionary that i showed you earlier in the tutorial that sits on the game data singleton to determine what the name of that texture is going to be now that is going to be close in case of the chest equipment slot and no in case of main hand and offhand if however the item id is not null it is actually an integer and that is actually an item we are equipping then we are going to get the sprite texture the name out of the item data now that is new and let me show you that this is the item data table that we've been using over the last seven or so episodes that we export into json and then load into goda on here i have added an extra column column c here sprite texture and i've done so because you probably don't want to make a sprite sheet for every single unique item in your game for example in my case i have an old sword a common sword and an epic sword but i'm not going to create a different sprite sheet for every single one of those especially not if i add another 10 or so swords so in my case i'm going to use the short sword texture for the old and common sword i'm going to use the long sword texture for the epic sword i've also added a couple of others so for example steel armor leather armor shield and for the axe for those of you that are watching these tutorials on mobile i've added for the x the staff texture just to make sure that it stands out a little bit more from all the swords so you can see the actual change happen so with that data switching back to godot we can go into game data item data we can take that item id and retrieve the actual sprite texture column to then determine the name of the texture once we've got that we have to check if the texture is null which could happen in case we're only equipping a main hand or offhand in that case the sprite sheet is also going to be null otherwise though the sprite sheet we're gonna load that from our assets in our isometric hero folder which i got right here in the file manager and here you can see all the various sprite sheets that come out of that assets which again you can download link is in the description we push that texture name dot png now we got it loaded then finally we get the node equipment slot and as i have named my sprite sheets chest main and offhand head exactly the same as i've named the keys in our dictionary so when we go back to the code to our player data you see chest main hand off hand same capitalization by doing so i can very easily get the node equipment slot without having to change anything or look anything up and we're going to set that texture to the sprite sheet now when i hit play we should be able to change some things around now the first thing you'll notice and that's because we haven't done that yet it's going to be the second part of this tutorial is that when we load the game the data doesn't load properly right now you can see that we have a leather armor equipped but we don't see that leather armor right here however when we equip for example our metal armor we see that our metal armor equips just like with leather and then we unequip you can see that the clove asset is being used if we switch around some swords or we unequip a shield or we equip our epic sword and that is going to be long sword textures for those of you that are watching on desktop and have it zoomed on or zoomed in you can see that texture change as well and just like that we can change equipment all we got to do is now fix the starting equipment that's not necessarily the starting equipment at the start of the game but as soon as the player loads the game in we need to read the currently equipped items in the equipment data to make sure that whenever the game loads in the players represented with a fair representation of his or her equipment so for the last part that's actually super easy right here on that same player code we have here on the top another ready function i've already prepared this this is where we equip the character at the start up and for every slot in game data visible equipment so we are running over the chest main hand and off hand we are going to call the on equipment changed function that sits in this script itself we're going to push that slot that we went over and we're going to look up in our player data equipment data what is actually equipped in that slot and of course if you connect these tutorials up to a save and load system and you make sure that this equipment data is then loaded in whenever the player opens up the game again starts a new game session based on a previous save file then of course all that equipment is going to be there and you can load the appearance of the character correctly to give that a quick try uh we are currently having an x and a shield i believe but with no equipment and as you can see now when i load the game we probably have our clove sprite sheet and not the letter sprite sheet we had just a moment ago for that we would really have to equip a letter piece first that was it for today guys if this video was helped you let me know in the comment section down below smash that like button hit subscribe don't forget that little bell icon to make sure that you don't miss out on the next video i think i'm pretty much done with this equipment and inventory mini series in the end it wasn't so much a mini series after all i think we've done seven episodes in total if you would like to see anything more that i built on top of this please let me know i would love to do another episode on it but in the meantime i'm also going to be thinking about what the next series is going to be i got a couple of ids but i'm not going to spoil that yet so stay tuned for more and by next week you should know what's going to be going on for the next couple of weeks i hope to see you then and until then keep on gaming keep on coding see you later guys

Channel: Game Development Center

Views: 4,019

Keywords: Godot Equipping, Godot Equipment, Godot Change Appearance, Godot How to Change Equipment, Godot Equipment Animations, Godot Inventory, Godot Grid Inventory, Godot Inventory System, Godot Grid Based Inventory, Godot How to Make an Inventory, Godot Beginner Tutorial, Godot Tutorial, Godot

Id: ZS9IoPv2TfI

Length: 15min 21sec (921 seconds)

Published: Mon Apr 05 2021