Godot - 2D Character Customization with Composite Sprites

[@Arkeve]

Hey y'all! Also check out this video about attaching and animating weapons: kzbin.info/www/bejne/fYG8c4GajtqGepo Let me know what you think!

[@galacticquasar9944]

Hey, how would I make certain sprites not play if they're invisible? I'm guessing I'd need a global script but I'm having trouble with it, so hard to understand.

[@betterteen]

Can you put the download link for the font you are using!?!?!!

[@MB_Arssin]

Guys if you're following tutorial and having in 2023 problem with “ invalid get index ‘body_spritesheet’ (on base: ‘GDScript’) “ at function _ready in Player script. You can try to create script in CompositeSprites (Player node) and past there preloads, then instead of using const const/var with composite_sprites just make bodySprite.texture = $CompositeSprites.body_spritesheet[0] and same for others -> worked for me.

[@brandonstone2754]

You can also make it a singleton

[@johnslack9623]

@@brandonstone2754 You are right, but I generally feel pretty gross not having scripts associated with nodes and referencing those scripts. I think @MB_Arssin has the right of it.

[@fyls3166]

Thank you very much for this

[@Jormungus]

Just wanted to point out to anyone using Godot 4.0 that the onready keyword is now @onready in 4.0. If your getting identifier errors this is probably why.

[@zephyrias]

You can also hold ctrl or command when grabbing a node in the tree into the script to drop the whole @onready line in a simple click. 👏

[@zerohero7457]

This is one of the best tutorial that provide of what i need for my project, i look hard in youtube for finding this kind of tutorial for godot but no luck, also the tutorial is easy to follow and very understandable, im sure giving more time on designing the thumbnail will increase the views greatly.

[@mesolagic]

This was very helpful man thank you! Was able to use this logic to script a clothing randomizer for procedural generated NPCs.

[@Arkeve]

Glad I was able to help!!

[@arthurocchiutto4686]

please advise if u will show the process, Im searching info to make a proc generated items

[@foreveraverage]

Amazing tutorial, really helped me a lot. A small tip for everyone watching, if you put the compositedsprites into a viewcontainer->viewport. You can apply a material to the rendered end result instead on each sprite separate, which is probably going to give you the effects you want to. A character outline is a very common example (you can also put the character itself in a viewport of course but I prefer keeping the viewport inside your character as it allows you to keep al the rendering complexity inside the player script)

[@violetevans5214]

this was exactly what i was looking for, theres literally no other video that was as clear and perfect for what i wanna do as this- even down to using aseprite omg i love you

[@PDD555]

You can't describe my relief, I've been looking for a tutorial/guide on how to implement these things and I swear I've been looking everywhere without luck. Thanks for the video

[@heneagedundas]

Nice. This helps in a current project. Now I just have to work out how best to change collision shapes and some other features when the sprite is changed.

[@arithmetic1938]

Looks really good.

[@MrNybbles]

@0:23 I think this was unintended, but the sudden switch from beautiful pixel art to 1990's 3D rendering made me laugh when the "Select skin colour and gender" graphic popped up. Was not expecting such a switch. I'm not sure what the game-play will be like, but hopefully I'll be able to see it in a future video.

[@Arkeve]

Haha you are right! It is pretty jarring. I plan to release some gameplay videos soon!

[@626070]

It seems you do not have the recognition you deserve, I'll watch this video a lot to try to help you out as much as you helpd me. Thank you!

[@ishechinyoka3858]

Holy 😳 u gained a new subscriber dude ur talented

[@Snafuey]

Thanks for making these vids! Keep up the good work.

[@MoogieSRO]

I know this probably isn't the place for it, but for your game, you might want to learn how to do sub-pixel sprite animations, as the one thing I immediately noticed when I started watching this video is how 'extreme' the breathing animation feels, and I think you could make that look a lot softer and more natural if you were to do some sub-pixel painting on it. Just a suggestion, your sprites already look good, but it would be a real boost to the general quality. Thanks for the video!

[@_Lexusttv]

Thanks for the tutorials, cant wat to check the devlogs. You earned the sub!

[@RichardCalder67]

This is fantastic, thanks. Just curious (I am new to Godot) how do you handle the animations with a custom character like that? The sprite set I am using has different sprites for all the pieces like you have, but it also has it for tons of actions, axe, pickaxe, hoe, sword, etc. I can figure out how to apply the right sprites easily enough, but how do you handle the actual animation player and animation tree? Since the animation player asks for specific sprite locations for each thing.

[@Chronofrost001]

Thank you, because of this video I was inspired to design something similar for a Godot Game Jam I will be doing soon.

[@hotboxbuddy]

Hot tutorial, Dad. Very straight forward and easy to understand! I subbed

[@rifamuhammadm30]

great work man !!! thanks for making tutorial for this, it's really help me learning godot

[@Player-kl3ci]

Thanks sir, is what I need this information. It really helps to me.

[@Arkeve]

Glad I could help!!

[@TenderEnders]

Looks phenominal! I'm very new to Godot and trying to figure out how to make one of these, and this helps my 0 code knowledge brain. Thanks man!

[@Arkeve]

Glad I could help!

[@Anonymousanimator234]

Thanks a lot , you have helped me complet my game.

[@chaokai3606]

Hi is this tutorial outdated? Because at around 5:50 once i run the player scene i get the error "Invalid get index 'body_spritesheet' (on base: 'GDScript')." Anyone able to help me out with this? I'm pretty new to godot and coding any explanation would also be apreciated ;)

[@earthsdefect1747]

This is awesome. Thank you!

[@asriel6485]

Hi, i don't know if is there anyone still here but i have some trouble about button if "curr_hair = (curr_hair + 1)% composite_sprites.hairM_spritesheet.size()" is next hair types so i use "curr_hair = (curr_hair - 1)% composite_sprites.hairM_spritesheet.size()" for previous hair but it crash when curr_hair = 0 and i keep press prev button , is there anyway to fix it ?

[@mattdavis3036]

Thank you. Inspiring, I'm going to try this.

[@Arkeve]

Let me know how it goes!

[@mattdavis3036]

​@@Arkeve I did it, works great! Now to figure out how to use generated sprites for npcs and save one for the main character (and make sure no npcs look exactly like the main character and stuff.) I'm really happy about this. Thanks!

[@kegypie9901]

great tutorial, thank you!

[@saulnores3477]

Great tutorial. Do you have one for writing the name like in 0:03 that you type John?

[@philipbooker8511]

Hey Arkeve! This Tutorial is great! It's been a godsend for my project. One thing I am curious about is how to animate all of these disparate sprites. Im finding that animationplayer can only play one sprite sheet at a time. I see that you have gotten this to work in your actual project. How did you do it?

[@philipbooker8511]

Never Mind! You show it in the next episode. Even Godot Documentation doesnt have this feature listed. Thank you a million!!!!!

[@Arkeve]

Glad I could help! Good luck on your project!! :D

[@adamwebster1652]

There's more episodes? Well, crap, this has made my weekend, thanks. Glad I saw these comments. I'm going to enjoy this

[@jmouro1963]

Hi Arkeve. I love your video, how do I use the character with the hair and clothes after I choose in the game? do you have any coding that explain that part?

[@Janosoft]

Awesome!!!

[@regoso8580]

hell ya, thank you for this!

[@Arkeve]

No problem!!

[@FillanEngram]

Can you do a video on how to animate a custom character?

[@nikondrat3875]

Thank you. You helped me!

[@syweb2]

8:50 How did you swap words only within the selected area?

[@junpoeco4851]

I’ve followed your video to 5:57 and got “ invalid get index ‘body_spritesheet’ (on base: ‘GDScript’) “ at function _ready in Player script. I don’t know what to do with it 🥺. Thank you for the good tutorial though, It’s easy to follow but I don’t know why I got an error.

[@MrAnimefrank]

Same

[@FirmFoundation]

Nice, Thanks

[@CosmicKingEvol]

I am struggling with this. How do I keep the sprites I selected in the next room? How do I make my created sprites global? When I use this and go to the next room, it is invisible.

[@astronuggie]

I wish there was something like this for unity :( This is exactly what I need

[@BOT-yh1jl]

We are 2

[@haraldbackfisch1981]

there is, i can share if you are still looking. if not sry for necroing lol

[@bordercolliestudios984]

Hello! This video is amazing! Can you perhaps make a separate video on saving the customized skin and how to work this skin as a player? I'm quite new to both Godot and coding. Doesn't only kinematicbody work as a player? (heard something like that in one of the videos I watched about Godot) Thank you!

[@Arkeve]

Yeah all you would have to do is change the type of the Player node to be kinematic body. And keep the Sprites node as a child and should work the same way.

[@bordercolliestudios984]

Thank you so much!!!!!

[@doogl3661]

@@bordercolliestudios984 Hii Idk if the actual guy who made this will reply but what did you do to implement the character into another scene? I don't exactly understand his explanation. Thanks!

[@SKtheMage]

What Sprite maker do you use? also can you also do a tutorial for using the characters sprite in game or moving?

[@Arkeve]

I use a pixel editing program called aseprite to make sprites. Check out my other tutorial about equipping and animating weapons to see how to make sprites move.

[@SKtheMage]

Thanks!

[@EnormiE]

Well, it's great

[@done1338]

how much time did this take you to make?

[@IustinNitza]

Thx for this video

[@funkycowsx2]

Cool.

[@ropepores4688]

Thank you!!!!!!

[@Lucas-mp5dw]

so you keep all of the sprites in different animators and run then in the same frame or there is an way to compose them together in one animator?

[@Arkeve]

You can animate multiple sprites within one AnimationPlayer, you just change the frames for all the sprites within the player

[@ryancraven6720]

So I was trying to implement this but ran into an issue. Basically when I made a second button to go back a sprite, the size() wraparound didn't work. It works fine when adding, but once I hit zero and try to subtract 1 it quits out on me. On_button_pressed current_hair = (current_hair - 1) % composite_sprites.Hair_spritesheet.size() HairSprite.texture = composite_sprites.Hair_spritesheet[current_hair] Any idea what I'm doing wrong? I figure if it works with +1 it should work with -1?

[@ryancraven6720]

and of course, now that I posted it I figured out a work around. Simply replaced -1 with +24. Since there are 25 sprites in the dictionary, this an easy way to manually get around the issue of descending into negative numbers. Thought about deleting but maybe someone else will run into the same issue.

[@ugbucket]

What was the game you had right there in the Top Right?

[@dzhambulatnurmagomedov9001]

how did you animate all the different parts of the character? Did you hand draw animations for each item added to the game like...the running animation for the pants and shirts on the arms and such?

[@Arkeve]

Yeah, I had to draw each frame. I could reuse some frames for certain situations (e.g. idle animation is similar for most the frames). Also for equipment (such as a sword) I only had to draw it once and played with position & rotation within the game engine without having to draw it each frame.

[@ellakz8963]

How would one make it possible to switch the gender of the character which then switches which clothing or hair its able to use (if this question makes sense)

[@sinbadfr4850]

hey @Arkeve would you be willing to make a tutorial about a save system for this character customization?

[@dahyunkim4710]

I have a problem. When I change the hair, clothes, etc., the skin tone is also changing.

[@ItachiUchiha-ki2fr]

It looks cool, but do I have to make animations for each clothing? That means 3 different walking down animations for 3 different shirts???

[@Arkeve]

Yeah it would require you to do that, there are ways you can reduce the amount of work you do by reusing frames in certain instances. For example you can separate the shirt torso and sleeves and reuse the shirt torso for all the frames and just draw in the sleeves. With pixel art, the more customization you want to do the more work you generally have to do especially if you have a lot of animations. I usually try to be cautious adding more animations and try to reuse already drawn frames if i can to reduce work down the line.

[@ItachiUchiha-ki2fr]

@@Arkeve Alright, thx. Your game looks interesting btw

[@ami7mina]

I have a new problem.. Since I have many preloaded suff my game has lag. barely can't move my character.

[@ami7mina]

This tutorial makes my game lag. Is there a work around if I use AnimationPlayer?

[@mustardseedfaith6888]

Great tutorial! The one thing I can't figure out however is how to make the buttons work, when I press on them nothing happens

[@v.chandrashekar3830]

use on_button_pressed signel

[@hannibalyin8853]

okay so if I have say 200 hair styles, I have to make 200 sprite node?

[@saulnores3477]

Hi. This is great. But what if I have animated sprites instead of only sprites? Does it work?

[@tuguldurbayartsolmon1852]

how do i change particle texture like this

[@ami7mina]

My, my! it worked!! If anyone had trouble with the button, I suggest making or reconnecting a new signal to it deleting the same one, cause my item names were different. But this video really works!! LOVE IT! My question is, how did you stop the player movement? I made a different scene and attached the buttons to that scene cause the Player node of mine can't have buttons because it is the actual moving player on the levels.

[@ivanmectin9106]

good if you could do a viewo onl loading and saving the characters :)

[@doogl3661]

Hi! So at around 5:48 I am getting this error "Invalid get index 'body_spritesheet' (on base: 'GDScript')." I tried to search forums but everyone said it was an error with hierarchy of the nodes. I doubled checked it and have re did this tutorial a couple of times, but It still tends to not work. Any suggestions?

[@doogl3661]

OH GOSH IM DUMB I MADE A VAR INSTEAD OF A CONST

[@spexyfer1024]

@@doogl3661 I get the same error and i used cost could you help?

[@chaokai3606]

I have the same error, though i am using Const anyone able to help me out with this?

[@danobra]

I appreciate the tutorial, but I got super lost. No idea what that $ sign should mean. I'm trying to make a character that is divided in 3 parts and the arms move when he is attacking, then is supposed to return to where it would be if the character didn't attack. I though I could use this, but I just couldn't keep up =\ Anywhere I can learn more about it?

[@HoldFamily]

The $ means get_node("What/You/Put/Here"), which just traverses and returns the node at that position in the hierarchy. You can learn more at: docs.godotengine.org/en/stable/getting_started/scripting/gdscript/gdscript_basics.html. You should look into asking for help at: www.reddit.com/r/godot/ or discord.gg/4JBkykG as well for more specific questions.

[@yapayzeka]

thank you very much the result is awesome. I just... want to say something feels awkward inside my feelings. too many same code dyping. this code is WET.

[@agriasoaks6721]

Arkeve-sensei, Does the 3d one work the same way?

[@Arkeve]

The concept should be the same, I figure you would have multiple meshes and stitch the meshes together. If you want to change something e.g. the face you would swap the face mesh with another one.

[@agriasoaks6721]

@@Arkeve Thank you, Arkeve-sensei I've looked for godot character customization for a while and I'm glad I got here. I look forward to attending your next lesson

[@ajinrenfire]

how to customize character and play with the same character

[@Arkeve]

You would just set the sprites within your player scene to the ones you selected during customization. But you would have to make sprites for the clothing and rest for animations such as walking, attacking, etc.

[@RandomGuy-kd3xs]

Buddy which software you use for character

[@Arkeve]

I use aseprite for pixel editing

[@tonmate7175]

skin color?

[@Anonymousanimator234]

How do you make your costumes save system

[@Arkeve]

How you save it can be flexible, for instance you can save the spritesheet paths for each clothing into a JSON file and load your textures using the paths saved.

[@KyleSzklenski]

There's something weird about this video. You're preloading a script with your composite sprites, which shouldn't do anything. Scripts don't really function outside of nodes in Godot, unless you make them singletons, in which case you wouldn't preload them, you'd just reference them directly. I think there must be something else going on in this video, and the preloading of a script is not what you want to be showing people, as it's not good practice, unless for some reason you need to attach the script to a node dynamically (in which case I'd just load a whole scene instead of just the script).

[@ParkerDeVenney]

If any of y'all know how to do this in unity, hmu

[@firstlast896]

Insomnia cured

[@radthadd]

Your sprites look like rpg maker's

[@bubblemage]

What I don't get is why do people keep making the gender thing in customization menus. Why not simplify it and make a single body and you can customize it as much as you want? Isn't that a simpler way to do it? Separating it by gender is so pointless

[@acinome9880]

Put me straight to sleep

[@brysonmercury]

Awesome!