How to Create Animations in Godot Using a Sprite sheet | Godot Animation Series

Поділитися
Вставка
  • Опубліковано 26 жов 2024

КОМЕНТАРІ • 123

  • @GameDevelopmentCenter
    @GameDevelopmentCenter  4 роки тому +17

    Do you believe that Godot education should be free? Me too!
    You will never find me on Udemy, Mavenseed, or Gumroad.
    Support these tutorials in any way you believe is appropriate; like, comment, subscribe or become a member of the GDC Club, thank you!
    ua-cam.com/users/GameDevelopmentCenterjoin

    • @eden6708
      @eden6708 3 роки тому +1

      Yes thank you so much I'm a beginner and there is not much free tutorials out there thanks

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  3 роки тому

      @@eden6708 My pleasure!

  • @HoldenVontz
    @HoldenVontz 3 роки тому +1

    great step by step video, would recommend

  • @TheLxsd
    @TheLxsd 3 роки тому +3

    Great tutorial, perfect level of information for a beginner like me. Today, through your tutorials, I've created a tilemap and a fully animated player character controlled by mouse click. Never used Godot before and am a very rookie developer. Thanks!

  • @BrianRogers3D
    @BrianRogers3D 4 роки тому +6

    Wow! Very nice tutorial. Great explanations and instruction.
    Well done, much appreciated.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      Thx Brian, Hope you will find the next video on AnimationTree equally good :)

  • @alxklgn364
    @alxklgn364 4 роки тому +3

    This is the channel I was looking for! Great content, keep up the good work man. Thanks for sharing your knowledge.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому +1

      My pleasure! Hope many people can pick up something from my tutorials :)

  • @weslr1
    @weslr1 2 роки тому +1

    I greatly appreciate how you explain the little details, even when you aren’t using them. You get my “Teacher Of The Year” award.

  • @RikusLategan
    @RikusLategan 2 роки тому +1

    00:00 Intro
    00:10 Player node and sprite sheet setup
    05:04 Animation editor method
    11:40 Key frames method
    14:53 Duplication method
    17:29 Error-prevention tip
    19:33 Script
    24:34 Run
    28:35 Announcement
    29:48 Outro
    A very helpful video

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  2 роки тому +1

      Thx Rikus, copy pasted them into the chapters (video was from before this functionality came available)

  • @gecko499
    @gecko499 2 роки тому +3

    Why no repo? Typing to retype code from a video screen is very error prone...

  • @andreasaugusto9451
    @andreasaugusto9451 3 роки тому +1

    Pretty practical and straight forward. Thanks for the tutorials!

  • @theundercovernerd5325
    @theundercovernerd5325 3 роки тому +1

    This is very professional! Well done!

  • @rajeshi4
    @rajeshi4 3 роки тому +1

    Very neatly explained! Thanks! :D

  • @CASMANWHAT
    @CASMANWHAT 3 роки тому +1

    Love the way u explain things. thx so much. every other teacher just blazes through and it's so hard to follow.

  • @ethan209moscow
    @ethan209moscow 3 роки тому +3

    My sprite sheet when I use h and v frames, often gives me parts of multiple animations. Is there a way to fix the size of frames in the editor or crop each frame individually?

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  3 роки тому +1

      That means you haven't set the h and v frames correctly. Or the spritesheet doesn't have a fixed width/height per frame.

  • @iherbivore1
    @iherbivore1 4 роки тому +1

    There is some content in here that I haven't seen with other animation videos. Nice!

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      Glad to hear that :) Make sure you check out the animation tree tutorial too :)

  • @soviet3918
    @soviet3918 2 роки тому +1

    Great tutorial!!, also a little reminder: in 3.4.3 version, Godot does not include a "Click" input by default, i had to set up by my self

  • @yashwanthsrini
    @yashwanthsrini 3 роки тому +1

    Beautiful video. Thanks a lot!

  • @notarobot22
    @notarobot22 4 роки тому +2

    Awesome tutorial. Thanks a bunch!
    However since I'm a very lazy developer type of guy, I didn't feel like manually looping through all animations to change the frame value. As you pointed out, this is tedious and error prone. So here is a quick hack:
    1. Duplicate your initial Idle and Walk animations like you showed us, but don't worry about the name just yet. Godot will just keep adding a (copy) at the end of the name, so this goes pretty fast.
    2. Save the scene
    3. Open up your scene's .tscn file in your favorite text editor. I used VS Code.
    Now you'll see all your animations in here under headers like: [sub_resource type="Animation" id=1]. Under each animation block you'll see a string property called resource_name at the top and an array property called values at the bottom. These are the ones we will be changing.
    4. Open up Excel or some other spreadsheet application.
    5. Fill the first row with the values from your original animation. Just fill out the first two cells, select them and drag to the desired maximum.
    6. Fill out the next seven rows. First put the correct value in the first cell of the second row, select the first tow cells in the first column and drag down until you have 8 rows.
    7. Repeat step 5 for every row (note: you'll need to manually fill out the value for the second cell, but hey, it's a spreadsheet, it'll do the math for you ;-)).
    8. You should now have 8 rows with all the desired values. I'm sure there's a quicker way to do this in Excel, but again, I'm a lazy developer type...
    9. Select all the values and paste them in a new text document.
    10. Replace all ' ' (tabs) by ', ' (omitting the quotes of course).
    11. Switch in all the generated values in the values properties of the appropriate animation blocks in your .tscn file
    12. Go over each block and fix the resource_name property. This should work quite neatly because you just follow the same logical order you did with the values.
    13. Don't forget to change the names of your animations in the [node name="AnimationPlayer" type="AnimationPlayer" parent="Player"] block. Mine was located all the way at the bottom of the .tscn file.
    The animations are in the same order here as they were before, so again this goes pretty fast.
    14. Save the .tscn file
    15. Go back to Godot and click Scene > Reload saved scene
    There you go, all your animations are in place.
    It actually took me more time to type this up than to actually do it. :-)
    I should really write a little script to automate this. Why isn't there such a thing in Godot?

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому +2

      That could be the longest comment ever! Thanks a lot for sharing your experience!!
      You can make scripts to your heart's desire, just use the tool command at the top of the script to run them in the editor.
      But I would really advise you to do this using a tool script. Changing things like this easily breaks references that are crucial to have things act predictably. Godot even advises to not move filed once they are imported, but to use the move and rename tool in the file manager. There is a reason for that. There are more references in place than you may know. Changing things in the editor directly or by script is going to make sure all those references change with it. You don't have any guarantee for that using your backdoor method.

    • @notarobot22
      @notarobot22 4 роки тому +1

      @@GameDevelopmentCenter Thanks for the tip. This is actually my first day in Godot :-)

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому +1

      @@notarobot22 Welcome to Godot :)

    • @notarobot22
      @notarobot22 4 роки тому +1

      Thx 😁 Three days in, still happily hacking away! Thanks for the great content on your channel. Godot seems to have an awesome community.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому +1

      @@notarobot22 It does! One of the best communities out there :)

  • @BigAlNaAlba
    @BigAlNaAlba 4 роки тому

    Very clear. Well done!

  • @arturertel
    @arturertel Рік тому +1

    Thank you for this tutorial? It's a lot of work to create the animations in all directions. Why don't you just animate Sprite2D:frame_coords:x and control frame_coords:y in the code?

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  Рік тому +1

      Because this is a sprite sheet tutorial. It would be a little weird if the sprite sheet tutorial covers an animation technique that doesn't involve sprite sheets.

    • @arturertel
      @arturertel Рік тому

      ​@@GameDevelopmentCenter maybe i was unclear. what i mean is: you could animate only one animation, from left to right and then choose the row of the sprite sheet in the code. But I have no experience with this myself, maybe it leads to problems. Thanks for your answer :)

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  Рік тому +1

      @@arturertel That would be a hefty performance hit. Pre-defining the animation has it loaded in memory, ready to be played. Your solution would mean the spritesheet would constantly have to be sampled.

    • @arturertel
      @arturertel Рік тому

      ​@@GameDevelopmentCenter thank you very much , I have not thought about it :D

  • @bsavage5128
    @bsavage5128 4 роки тому +1

    FINALLY!!! A tutorial for top down 8 way isometric!!!

  • @jon2478
    @jon2478 2 роки тому +1

    Anyone know how to add multiple sprite sheets to the same character? My Walk sprite sheet is 288 boxes deep and I can't fit anymore into it. I need to add attack animations, dying animations as well. I added a second sprite node to the Kinematic2d node but that seemed to really make everything stop working. Totally a newb here. I've spent two years in blender and now making my way to Godot but I am completely lost lol.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  2 роки тому +1

      288 animations for just walk is just complete overkill. Just go for 3D game development at that point.

    • @jon2478
      @jon2478 2 роки тому +1

      @@GameDevelopmentCenter I appreciate the quick response! First, let me thank you for these solid tuts. I've found them very helpful. I realized after my comment that I'll have to re-render my 36 frame cycle walk down to about an 8 second one. (Yea, it was total overkill ha!) but I'll still have the problem of needing multiple sheets per object(character). I just won't be able to fit every crit hit animation, weapon pull ect into one sheet.
      I'm going for a Fallout-esq game and I ripped its character sprite sheet for some references and well.....its huge when slapped all together and unfeasible to use in that way.
      Any information on how to link multiple sheets to one character(object) would be greatly appreciated. Thanks for all the tuts!!!

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  2 роки тому +1

      @@jon2478 You could switch the sheets at runtime, but I will repeat myself. If you have a need for a switch, you are likely overkilling it.

  • @ДмитрийЛеухин-ф6ш
    @ДмитрийЛеухин-ф6ш 2 роки тому +1

    maybe be more useful to use AnimatedSprite node instead of Sprite node?

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  2 роки тому

      AnimatedSprite's performance has been improved recently. It used to be much less performant compared to SpriteSheets. If it have single PNGs, I still prefer to put them in a spritesheet (texturepacker is software you can use for this). As I find spritesheets much easier to work with and animate.

  • @Masda.X
    @Masda.X 3 роки тому +1

    Which one is better ? to make animation on Dragone bones then in port to Godot or directly in port sequence pngs and animate in Godot ?

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  3 роки тому +1

      I haven't heard of Dragone, but I think your question is to use a sprite sheet or individual png's. Spritesheets are faster, stutter less, and faster to set up

    • @Masda.X
      @Masda.X 3 роки тому +1

      @@GameDevelopmentCenter thanks for tip. Have a nice day !♥

  • @pranavkul525
    @pranavkul525 4 роки тому

    Awesome tutorial! Thanks a lot for sharing it.

  • @SirFency
    @SirFency 3 роки тому

    Damn, I wish you would have told me about the naming convention before we got to the script Lol. Now I have to go back and rename all my animations

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  3 роки тому +1

      Hehe, makes me curious about how you called them. Most people automatically apply some sort or form of structure.

    • @SirFency
      @SirFency 3 роки тому +1

      @@GameDevelopmentCenter well as a beginner coder I camel case all my stuff. I also don't follow tutorials 100% because I like to break things and find out why they broke.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  3 роки тому +1

      @@SirFency that's a good way to learn. You could have included the camelcase in the code. No need to change your animation names for that reason. As long ad they have a consistant structure.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  3 роки тому +1

      @@SirFency Appreciate the support Erick, huge thx! :)

    • @SirFency
      @SirFency 3 роки тому +1

      @@GameDevelopmentCenter I am SirFency on Discord.

  • @syedrizvi6408
    @syedrizvi6408 4 роки тому

    Super fantastic great tutorial

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому +1

      Thx Syed! Monday comes the next tutorial where we combine these animations into the animationtree node :)

    • @syedrizvi6408
      @syedrizvi6408 4 роки тому

      @@GameDevelopmentCenter
      Looks like, you will make me a WIZARD.
      I anxiously wait for next tutoial.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому +1

      @@syedrizvi6408 Hahah :) Wizard it is :)

  • @neilwalker4277
    @neilwalker4277 4 роки тому +2

    Great video. But instead of all that code to handle direction changes and changing animations, etc, why not use the new animation state machine and blend space 2d. Heartbeast has a good video on this.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому +1

      Because you didn't watch till the end where I say this is an introductory video to the second part which comes out next week. In which we will use the animationtree to replace the code.

  • @julienhigginson5544
    @julienhigginson5544 2 роки тому +1

    I'm working on a game with a point and click movement too, and I'm stuck on a little problem, I want to add a little animation where I click but I don't know how to create an animation on a certain position. Can you help me ?
    And obviously, thanks for the tutorial, that really help me for creating 8 directions movement and not 4.

  • @thomaseubank1503
    @thomaseubank1503 4 роки тому

    Does anyone know what is wrong with my code? The character does not stop the walking animation when he stops and idles when he is supposed to fight. If you could please help that would be great.
    extends KinematicBody2D
    var anim_direction = 'S'
    var anim_mode = "Idle"
    var animation
    var max_speed = 200 #max speed of player
    var speed = 0 #current speed of player which can change
    var acceleration = 600 #Acceleration of var speed towards var max_speed
    var move_direction #imput on movement direction
    var moving = false #Boolean that resets movement to 0
    var destination = Vector2() #Location of mouse clicking
    var movement = Vector2() #movement that will push to the engine
    var attacking = false
    var attack_direction
    func _unhandled_input(event): #Function that takes away unhandled input
    if event.is_action_pressed('Click'):
    moving = true
    destination = get_global_mouse_position()
    elif event.is_action_pressed('Attack'):
    moving = false
    attacking = true
    attack_direction = rad2deg(get_angle_to(get_global_mouse_position()))
    Attack()
    func _process(delta):
    AnimationLoop()
    func _physics_process(delta):
    MovementLoop(delta)
    func MovementLoop(delta):
    if moving == false:
    speed = 0
    else:
    speed += acceleration + delta
    if speed > max_speed:
    speed = max_speed
    movement = position.direction_to(destination) * speed
    move_direction = rad2deg(destination.angle_to_point(position))
    if position.distance_to(destination) > 10:
    movement = move_and_slide(movement)
    else:
    moving = false

    func Attack():
    yield(get_tree().create_timer(0.4), "timeout")
    attacking = false
    anim_mode = "Idle"
    func AnimationLoop():
    if moving:
    if move_direction = -15:
    anim_direction = 'E'
    elif move_direction =15:
    anim_direction = 'SE'
    elif move_direction =60:
    anim_direction = 'S'
    elif move_direction =120:
    anim_direction = 'SW'
    elif move_direction >= -60 and move_direction = -120 and move_direction = -165 and move_direction = -60 and move_direction = -120 and move_direction = -165 and move_direction

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      Really hard to see this from a copy paste of code. I got two options: 1) Join the discord and post your code with screenshots so I can see it. 2) Don't worry about this right now, jump into the next tutorial on animationtree. That will have you rework large portions of the code and implement a long term solution.

    • @thomaseubank1503
      @thomaseubank1503 4 роки тому

      @@GameDevelopmentCenter Thanks for the reply, I have much better results in the second tutorial.
      Yeah I might look into joining your discord.

  • @shawnshipton2190
    @shawnshipton2190 4 роки тому

    Well done as usual, cya in discord.

  • @nikhilsingh5871
    @nikhilsingh5871 4 роки тому

    how would I make a sprite sheet

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      This is probably better answered by Google than by me. Aseprite is an often used program I know

    • @nikhilsingh5871
      @nikhilsingh5871 4 роки тому

      @@GameDevelopmentCenter Thanks

  • @aureliusog
    @aureliusog 4 роки тому

    Great tut, idk if you noticed but you broke ur own idle code right at the end, your character doesnt go idle after walking but only goes idle after 'attacking' i feel like i tried everything at this point and i cant seem to get my character to Idle lmao :

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      No I have not noticed, I will look into this and get back to you :)

    • @aureliusog
      @aureliusog 4 роки тому

      @@GameDevelopmentCenter It's around 28:20 when youre testing attacking animations, they all work etc but it seems there's an error somewhere in the code that stops your character from going Idle, i've tested this and its either being able to Walk and Idle or Walk and Attack im not sure wheres the error in the code because it actually seems to make sense and should be running everything fine that's what confuses me x)

    • @aureliusog
      @aureliusog 4 роки тому

      @@GameDevelopmentCenter For the refence watch 28:33 to 28:38 you'll see exactly what i mean

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      @@aureliusog I think I did notice, but now I know where and when I did it. Hehe, after months.
      Check the next tutorial at this timestamp, that should fix it I think: ua-cam.com/video/KAZX4qfD06E/v-deo.html

  • @TakeLime
    @TakeLime 4 роки тому

    Aww now i can animate my cookies in Godot :) Bye bye powerpoint hehe

  • @chiragpadyal7411
    @chiragpadyal7411 4 роки тому

    Hii sir, i have followed your skill bar tutorial and in it there you loaded the skill icon through a folder...
    When i play the scene in Godot editor it worked fined, but when i played the game in mobile the skill icon were not loaded ? the remaining game worked fine

  • @fanartzone928
    @fanartzone928 3 роки тому +1

    how to make a sprite sheet? ive got single sprites but how to make a joint sprite sheet?

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  3 роки тому

      Google 'texturepacker', common used software to combine separate frames into a sheet. They got a free version too

    • @fanartzone928
      @fanartzone928 3 роки тому

      @@GameDevelopmentCenter awesome! i will try that. thanks

  • @KalponicGames
    @KalponicGames 4 роки тому

    hello, how you do the same with single individual frames? also, there is way to use atlas feature and animate using that in 3.2?

    • @KalponicGames
      @KalponicGames 4 роки тому

      never mind I figured out dragon bones and going to use that in my Godot games. Much faster and less pain to deal with once set up.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      @@KalponicGames Yeah if you don't have a sprite sheet or various sprites using the bones will be your best solution :)

    • @KalponicGames
      @KalponicGames 4 роки тому

      @@GameDevelopmentCenteryeah man the Godot sprite editor is a huge pain and way annoying to deal with. Unity sprite editor is 10x better than this. I got very annoyed at Godot due to this slice thingy taking so long to set up. I hope someone just copies unity sprite editor and port to Godot as Godot plugin or something. Thanks for the quick reply.

  • @lavafox8436
    @lavafox8436 4 роки тому

    nice tutorial, but do you know of a working c# version of this?

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      No sorry, I used Unity for 3,5 years before transitioning to Godot. I never touched C# since and am not keepings lists of C# tutorials :)

  • @robertonome2448
    @robertonome2448 3 роки тому +1

    Bruh
    U ever heard of Animation trees?
    Just use a blend space 2d & set the normalized coord values based on the input vector. I'm sorry, but this looks more like misinformation than anything helpful
    I know you said you're gonna show how to do it the right way next week.... but I highly doubt even half of the people who stumbled up here will catch it

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  3 роки тому

      Animationtree still requires the animations in the animationplayer. Which makes this video 90% relevant even when using an animationtree.

    • @robertonome2448
      @robertonome2448 3 роки тому +1

      @@GameDevelopmentCenter I'm talking about the script's use of convoluted if statements tho (overall bad pratice of code to even introduce people to).
      I get the next video thing. But honestly I'd show both ways in the same one (similar to most tutorials on the subject). the wrong & right way right after it, to imprint it on newbies brains right away

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  3 роки тому +2

      @@robertonome2448 Strongly sugest your own UA-cam channel so you can discover the concentration curve of the average viewer :)

  • @travistoastlord6593
    @travistoastlord6593 4 роки тому

    What I want to know is how do you set up a sprite sheet that can fit every sprite in the v and h frames without the sprites moving when you go to another frame.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      That is a matter of using some standardization in your drawing or modelling program. Fixed angles and output resolutions are your friend :)

    • @travistoastlord6593
      @travistoastlord6593 4 роки тому

      Game Development Center do you have a video describing this? Because I’m trying to make my own sprite sheets and I can’t seem to find answers anywhere I look.

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      @@travistoastlord6593 No I don't, my tutorials are on game dev theory and Godot. These days, unless you make pixel art, sprite sheets are made with blender. A 3d model is made and animated. Next a fixed camera angle position is saved as a reference and the animation is played. Blender is set-up to make a render every 0,xx seconds. Then a program like TexturePacker is used to bring all the renders into a sheet of sprites.

  • @naruto5183
    @naruto5183 4 роки тому

    Do you draw by yourself to make that sprite sheet?

  • @SkyLP
    @SkyLP 4 роки тому

    How can i make a game over screen with a respawn button?

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      I don't have that exactly but I do have a game menu screen. Changing the trigger and the content of the screen should be relatively easy. Have a look at the channel for the "how to make a functional game menu" tutorial

  • @arytonly
    @arytonly 4 роки тому

    I'm gonna make a game, is there a way to create my own character?

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      Of course, easiest for a 2d character in this day and age is to sculpt in a 3d program like blender (another open source program), set up the animations using a rig and render the animation in several sprites. There are various tutorials on this, but none that I make. I tend to focus on Godot.

    • @arytonly
      @arytonly 4 роки тому

      @@GameDevelopmentCenter thanks for the info😁

  • @knightgamer1533
    @knightgamer1533 4 роки тому

    Hi

  • @QuantyamCrypto
    @QuantyamCrypto 4 роки тому

    you talk too much...

    • @GameDevelopmentCenter
      @GameDevelopmentCenter  4 роки тому

      Thx for the feedback, you always play it at 1,5 speed if you think so, and I'm working on implementing UA-cam's chapter feature on all videos so you can more easily skip ahead of what you want to see :)