How to Make a Run Cycle Using Cutout Animations in Godot 3.0

[@GameEndeavor]

Quick note that I forgot to include in the video. Set the "Default Blend TIme" in the Animation Player to 0.1 to get smooth transitions between states.

[@gakkiwoo5452]

cutoff，how about clothes change system？

[@DungeonDiving]

Somehow you manage to pack in more useful information in 8 minutes than many of your contemporaries do in 30 minutes. Thank you.

[@GameEndeavor]

Jump cuts and not holding your hand really goes a long way.

[@DHofmann]

Just like you say in your channel description: Your videos are straight forward and to the point! Great for Godot Beginners like me. First time I did not need to speed up a video tutorial. And please keep your cool accent, it gives your Channel an individual touch.

[@GameEndeavor]

Thank you for the kind words! I am doing speech excercises to improve my voice quality in general, but I love my accent and agree about the unique touch it brings to the channel, so no worries. It's here to stay. :D

[@easyU2B]

Straight to the point + useful informations. Keep it up!

[@TheBuffED]

Congratulations on reaching 1,000 subscribers!! That's awesome, and I'm looking forward to your future content

[@GameEndeavor]

Thank you! I have some pretty neat topics planned. I'm glad people have taken to it so well, looking forward to making the future content. :)

[@NateyC214]

5:32 I love that "comically snappy", very smooth. Love the video! Fantastic examples of the power of Godot's animation player.

[@JackSather]

SUPER useful tutorial!! thank you, everyone elses are on pixel art sprite sheets

[@garyproffitt5941]

Simple and precise with animations. Point of fact with complication to the bone structure but simple feature's for Animation and thankyou Game Endeavor ✔

[@dichebach]

Wow! Some of the most information packed 6 minutes and 36 seconds on the Internet! :) Definitely subbed. New to Godot, and art. Bit of experience as a junior dev (intern) and about 4 years training in C/C++ (and 40 years as a prof before that). This method you show is fascinating and effective and I'm definitely going to take the time to slow play/pause through the whole video to get the full value. Even if I don't go with this particular technique for animating, this seems like an excellent exercise to learn more about how Godot's animation features function and make digging through the documentation more engaging. However, with all that said, a couple questions: (1) Would this method be effective for a top-down 2d pixel art game along the lines of Stardew Valley (in terms of game mechanics and look and feel, not content or themes); (2) Are there other methods I might want to consider? For example, with respect to (2): Aseprite has fairly rich animating functionalities, and I have not yet determined whether aseprite files can be imported in some way (although I have impored .png texture files for 2d sprites.

[@goldbaby6237]

Can you make a tutorial in Krita to show how you make the sprit atlas?

[@626070]

My friend, if you would be so kind, could you explain how to apply the exact same animation to another set of sprites automaticaly?

[@CarlFurrow]

Really enjoying these quick tutorials. The material is very useful, and the results are excellent. Thanks for taking the time to make these.

[@GameEndeavor]

I'm glad they're useful! Thank you for watching.

[@kimbaptempura4073]

Holy shit dude, this video is 3 years old but damn, your tutorials are fantastic!

[@Crisisdarkness]

Your channel is very useful, you explain very well apart, that you speak very fluently and clearly, thank you, I subscribed

[@GameEndeavor]

Thank you! You're the second person to say that I speak clearly. I figured my accent would be too thick for people to effectively understand me. Good to know that isn't the case. Thank you for subscribing.

[@Sandsawks]

I came across this channel a few days back while looking for some support for building a State Machine. Really love the videos and the detailed way you explain why you do what you do. Going back through and watching them all. Looking forward to more Godot tutorials in the future :)

[@GameEndeavor]

Thanks. :D Yeah, the state machine video did quite well. My goal with it was to help people understand state machines in as simple yet practical way as I possibly could. Given how well the community has taken to it, I'd say I succeeded. :) It's one of my favorite videos so far. I'm glad you like the channel and that you find them useful! More will be coming very soon. I have some very good ones I've been working on over the past few weeks. :)

[@SarahAndreaRoycesChannel]

Oh, so much to learn, I see that I need an AnimationPlayer Node, but how do U add an animation there... let's look at a tutorial. And.... you just jumped it. Somehow you managed to create a tutorial for people who don't need one.

[@Jaydenbb5]

this was so confusing

[@AlanTuringWannabe]

Can you link to where the artwork for the bear is found? Can you do a tutorial on how to create a character in the cut out animation style? I tried searching the net but didn't find how's to create that kind of art.

[@jackreev952]

Hey, how do you move your character in the animation and still walk in the game properly? My character gets stuck in the root node position...

[@calvin5872]

I like that you aren't British like every other tutorial channel on KZbin

[@ingmarkieferle2293]

How to I flip the animation so that my player can walk left?

[@Ayoushminald]

+1

[@GaffaStudios]

Same question here ... this would be helpful...

[@GameEndeavor]

You scale the body node that stores your art to -1 on the x axis. Don't scale the Kinematic Body, it doesn't like that.

[@GaffaStudios]

Helpful hint: If you scaled your player, you have to set the scaling this way: if(starting_point.x < path[0].x): $Torso.scale.x = abs($Torso.scale.x) if(starting_point.x > path[0].x): $Torso.scale.x = -abs($Torso.scale.x) $Torso is the parent-node of my character.

[@tvojemamamoreee]

Broo how can i flip it in movement script? Pleeeesse

[@CMmonsterful]

Thank you southern man from 5 years ago

[@parahmen1256]

Oy how to place animation in texture rekt ?

[@codeyourbot]

how do i flip the animation for the otherside

[@Masda.X]

So Godot we do not need spine and adobe animate ?

[@facundosargiotto7661]

What if I need to flip the character? Can I reuse the animation with some flip method or do I have to make a new left run animation?

[@GameEndeavor]

I just invert the scale on the x axis to -1.

[@jamesxxxyz8775]

What's the size of your character? This is important because of gravity, jump...

[@awhitney3063]

Yo man thanks for the snappy little tutorial, very well done and I appreciate how you shared all of the aspects of how you got to where you did [using the square to line things up, that's kind of background stuff that I think other people leave out of their tutorials/systems when explaining without really realizing it.]

[@ammonggames2421]

How to maje a perfect flip

[@insanecomicdude]

Very helpful video. Thanks.

[@acb_gamez]

Any ideas how you might add a squash and stretch to this? I can think of using the transform property, but I cant think of any "warp" like property in godot analogous to Photoshop or whatever.

[@GameEndeavor]

I don't, no. :) I don't use squash and stretch that often unless it's part of the animation or as placeholder for telegraphing. Personally not keen on the style.

[@GzheGzheGzhe]

Short and brief, just like Miziziziz wanted all tutorials to be

[@carelesscaretaker5154]

How do you flip the animation?

[@Eatfast]

How did u flip that 😭

[@powerp0w3r]

Is it possible to make a cut animation with interchangeable parts like say a hand that can open close and point if so how

[@ihtasham9237]

Hi, I can't seem to find the "key" button (which you tell us to click on at 3:01) in my version of Godot. Do you know where this button now is?

[@fractalchaos8245]

The key pops up when you click the animation player node

[@ihtasham9237]

@@fractalchaos8245 a littleeee late but thanks, I appreciate it 😂

[@syedrizvi6408]

Fantastic tutorial I never thought, this is possible in Godot. You have given new understanding for the game.

[@GameEndeavor]

Oh there are some fantastic things possible in Godot. Did you see the showcase reel they released recently? Mind blowing stuff.

[@syedrizvi6408]

@@GameEndeavor Yes I did. It is simply marvelous. I believe you are referring to Godot Engine Desktop/Console Games Showcase | April 2020

[@GameEndeavor]

@@syedrizvi6408 I am. :)

[@jonus5331]

How do you made it so the one leg and arm are behind torso? I cant do it

[@diablosatana9102]

How did you make your character flip vertically

[@GameEndeavor]

By setting scale.x to the sign() of the direction the player is moving. I plan to do a video on my player controller in the next couple of videos where I'll show exactly how.

[@diablosatana9102]

@@GameEndeavor Thanks for reply cant wait for the video

[@sslaxx]

For 2D sprites, there's also the flip_h method, for flipping horizontally (x-axis). Also flip_v for vertical (y-axis) flipping.

[@esben181]

@@sslaxx That won't work. Just tried it.

[@esben181]

You can just do scale.x = -1 or scale.x = 0 on the CharacterRig node

[@johnthompson3614]

hi how did you get the back leg to be behind the torso

[@GameEndeavor]

Howdy. :) In the Visibility category, there's an option to show_behind_parent.

[@dungandhisstuffs]

Toooooo fastttttt

[@JoJo-cy4tb]

hi great video, how did you get your png to portion out all the different body parts? i didnt understand that part

[@GameEndeavor]

By enabling the region option for the sprite. It lets you use only one section of the png.

[@JoJo-cy4tb]

@@GameEndeavor thanks GE! i was able to do it but the game crashes when i try to move forward. after adding $animationplayer.play("run") its tells me node not found (relative to root/world/player) my previous movement actions were scripted in a previous scene. do they need to be all in the same scene to be found? thanks for your time!

[@cactus7027]

Krita gang!

[@GameEndeavor]

lol, indeed. Fantastic software.

[@Courage_the_Cowordly_Dog]

❤

[@daywalkertpify]

Great tutorial and animation tips. Thanks

[@BigDaddyWes]

Okay but how do I attach this rigged character to a separate 2D scene?

[@GameEndeavor]

I don't know what you're asking. Once you've made the rig you just add it to your character scene. Do you need to know how to do that?

[@BigDaddyWes]

@@GameEndeavor I guess I don't quite understand how to do that. I have a scene that is just a single 2D node with polygon and skeleton children I made watching this tutorial. I have a separate scene with physics and a level, but I need to replace my placeholder sprite of that scene with the rigged character and I don't know how to do that. I can't simply copy the nodes from one scene to another and I can't find a way to import the character rigging scene into another one. Edit: I just found the "merge from scene" button. Should be good now.

[@androidgameplays4every13]

This tutorial is awesome+++++++

[@GameEndeavor]

I'm glad you like it. :) It seems to be quite popular. I may have to do some more videos on animation in the future.

[@tomorrowduong4914]

How did you make the character run to the left? From what I see you only do animation for running to the right. Is there a best way to make mirrored animation?

[@GameEndeavor]

I just scale the rig on the x axis to -1, it inverts the sprites. :) You can see this done here if you need it: kzbin.info/www/bejne/bXumg6OPaMeckMk

[@michasengotta2295]

I can't find the transition panel of the AnimationPlayer in Godot 3.2. Did they remove it?

[@GameEndeavor]

It's been changed. If you click the keyframe to edit its values, you'll find an easing property in the inspector.

[@oliv-eagd884]

thank you good tutorial

[@caxco93]

great tutorial. keep it up! i subbed!

[@saulnores3477]

Hi Game Endeavor. Great video as usual. You ask for topics to cover: I suggest you this "How to make a highscores or leaderboard in godot"

[@GameEndeavor]

I haven't made tutorials in quite some time now, sorry. :) I make devlogs nowadays.

[@saulnores3477]

@@GameEndeavor thanks. Yeah I've seen your devlogs.

[@mohammadmad]

In 3D animations, do you prefer doing it on blender or godot?

[@GameEndeavor]

I've never worked in 3D animation. 2D only.

[@ליהיימליך]

wow, that's a great video!

[@boratsagdiyev1586]

Can i do this in anything other than photoshop for example Krita or other digital painting programs?

[@GameEndeavor]

Yup, in fact I made the bear in krita. It's just images, you could even use MSPaint.

[@boratsagdiyev1586]

@@GameEndeavor but mspaint cant setup rigging like that right?

[@GameEndeavor]

@@boratsagdiyev1586 The rigging is done via Godot. The images are imported into Godot, which doesn't care what program was used to make the images.

[@boratsagdiyev1586]

@@GameEndeavor Thanks man!

[@GameEndeavor]

Any time! :)

[@BrettKromkamp]

Is there any reason why you don't just use the 'is_on_floor' function (inherited from KinematicBody2D) instead of ray-casting to avoid the initiate-jump-in-air case?

[@GameEndeavor]

When this video was made, using `is_on_floor()` didn't work with slopes. This was my attempt at addressing that. Now that we have `move_and_slide_with_snap()` I no longer use the raycast method. In fact I advise against it as there's a bug where you get extra jump height if you jump then jump again, due to being grounded before hitting the ground.

[@BrettKromkamp]

Game Endeavor Thanks for the explanation.

[@GameEndeavor]

@@BrettKromkamp Any time. :)

[@JoseGonzalez-ud6pc]

Nice Video Thanks!, How you make that when he is running left then the "idle" animation is going to be flipped too?

[@GameEndeavor]

By flipping the scale.x of the rig node. You can find an example of this in my player controller video: kzbin.info/www/bejne/bXumg6OPaMeckMk

[@thedevine3756]

Great tutorial man!

[@kailenhoward4764]

*Bear minimum* I see what you did there

[@Tuntira]

Great video! I have a question, how did you get the left arm to stay behind the torso, since the arm is a child of the torso. thanks !

[@GameEndeavor]

In the CanvasItem sections under the Visibility drop down, there's a "show behind parent" option. Enable that.

[@taxihamster]

Is it possible to combine cutout animation with frame-by-frame animation, for more detailed types of things?

[@taxihamster]

Nevermind, you answered that at around 2:20

[@GameEndeavor]

Yes, but I've found it to be a little tricky. For example it doesn't work so well with blending in my experience. The frame lags a little. I really like blending though because it makes the cutout animation look so much smoother. Also you have to deal with making sure your frames are consistent from animation to animation. ie if you use a frame in the idle animation, but change it in the run animation, then when you change back to the idle animation you need to make sure that the frame changes back, otherwise it'll have the frame used in the running animation. This may be easy to achieve with the AnimationTree's StateMachine, but I'm not well versed enough in it yet to say for sure. Still studying that node.

[@elgatodelamuerte]

Nice tutorial! Can you please help me? I've ran into a problem when trying to animate my character like you did - when I open the AnimatePlayer menu and then click on the sprite I want to move/rotate etc, the AnimatePlayer window disappears and any changes I do to the sprite while the window is not present revert as soon as I select the AnimatePlayer object again.

[@GameEndeavor]

That sounds familiar. There used to be an issue where the animation window would hide while you were animating, but I never had issues with it reverting unless you click the time in the animation window. However I haven't noticed this issue in a long time, or I've gotten used to it. Try clicking the `Animation` tab at the bottom of the editor when it happens? It should bring the window back up. Beyond that I wouldn't know. I suggest you join Godot's Discord server and ask there, perhaps there will be someone there more knowledgable as to what's going on.

[@elgatodelamuerte]

@@GameEndeavor Thank you for a quick answer. The window indeed stopped disappearing after I clicked on the animation button, but even with it active if i do not change the parameters manually in the inspector, any changes I make while dragging or rotating sprites with my mouse reset as soon as I try to play the animation. (Yes, those parameters are in the animation track and yes, the keyframes are there as well) I will try and talk to someone on their discord server, thank you.

[@GameEndeavor]

@@elgatodelamuerte Any time. :) Hope you get it sorted out. Just to be sure, when you modify the rotation or position of the sprite, you have to rekey the property. Unless you're using the auto-insert feature (car icon at the top in the toolbar).

[@kev635]

How do you handle collision when uses cut out sprites? Do you create a individual collision shape for each limb? Thanks

[@GameEndeavor]

No, just create a single shape as you would if it were a single sprite. It doesn't need to be precise, a simple square will do perfectly.

[@kev635]

@@GameEndeavor Thank you! I'll use that instead

[@timetorelaxfocus9642]

always great, thanks for the video. I think it would be cool if Godot had a character hub tool like RPG Maker. You basically choose parts to make up the character.

[@GameEndeavor]

Thank you for watching. :) That kind of thing works with RPG Maker because most games made with RPG Maker have a similar style. Such a thing would be impossible with Godot seeing as how there's not one targeted genre or style. The possibilities are far too expansive for such a thing to be practical with Godot. That said, doesn't mean such a thing couldn't be a non-engine related tool. In fact I'd almost guarantee that such things already exists, and I seem to recall GameFromScratch doing a video on a community driven one. I don't recall the name though.

[@timetorelaxfocus9642]

@@GameEndeavor Thanks for the extended feedback, I would think it's possible to create a plugin that does such a thing, even if much effort. I will check on GamesFromScratch, there probably is a tool out there. I think I remember seeing one at one point.

[@shanliumoshi7904]

thanks

[@LawZist]

Great video!!

[@Demogooo]

Noice :)

[@flaviokonti5522]

Well this was really helpful! Thank you

[@GameEndeavor]

Thank you for watching. :D

[@eivindm.otcharan9823]

Did you use krita to create the cutout?

[@GameEndeavor]

Yes. I use it for most of my art / assets.

[@groven4165]

flip_h ?

[@GameEndeavor]

flip_h only works for a sprite and doesn't work on it's children, at least at the time of writing this video.

[@groven4165]

I used 2 sprites while animating, I added flip in both of them, but the animation does not flip.

[@GameEndeavor]

I don't use flip_h, I scale the x axis. Thought you were asking why I don't use flip_h.

[@JVJF7]

What fileformat do you export the spritesheet with the limbs on it?

[@GameEndeavor]

.png

[@JVJF7]

@@GameEndeavor Okay thanks, when I have the limbs as a child of the torso, the torso is on top of everything. How can I still keep the torso as a parent while changing the depth of the limbs?

[@GameEndeavor]

@@JVJF7 On the limb in the `Visibility` section under `CanvasItem` will be a `Show Behind Parent` option.

[@JVJF7]

@@GameEndeavor thankyou

[@GameEndeavor]

@@JVJF7 Any time. :)

[@LoveIsTiming010]

Is the easing editor gone in Godot 3.2.1? When I select a keyframe in the inspector I just see Time, Value, In Handle, and Out Handle.

[@pascalz9992]

I can't find it either. So what I did was work with bezier curves... but boy did that make my life hell! Whenever I added a key in between or had to move keys (e.g. when trying to make the arms swing before the legs) everything got messed up and it would take me tweaking the curve over and over again. EDIT just realised it's still there. you have to select a key (when not using bezier curves) and check the inspector on the right. there is an easing window with a curve

[@kumi2686]

Good video

[@Lea-im3wr]

I don´t get how I kan make body parts like the right arm or leg be behind the body. The link in the deskription says with "RemoteTransform2D" but when I use it that way I understand it, it make nothing rotade in a circle or make othe strange things but it don´t go behid the body. Can someone help me with my problem?

[@GameEndeavor]

With the sprite selected, under CanvasItem Visibility, there's a checkbox for "Show Behind Parent". Select that. The link in the description is for how to set up inverse kinematics, so that joints move with each other when you reposition them. So it's not related to that.

[@esben181]

I simple set the Z-index to -1 on the ones behind

[@GameEndeavor]

@@esben181 That won't work if you have two of these rigs overlap. Say Rig1 is in front of Rig2. Rig1's arm and leg would go behind the body of Rig2, because their bodies are on the same z-index but both of their arms and legs are on the layer behind.

[@esben181]

@@GameEndeavor ah, ok. thanks!

[@GameEndeavor]

@@esben181 Any time. :)

[@rafaelgpontes]

Hey, what about the collision shapes?

[@GameEndeavor]

Just use a single square shape that covers the entire body. No need to be precise with each part.

[@rafaelgpontes]

@@GameEndeavor, yeah. That's what I figured. But, the rectangle should follow the body movement, right? This means we're kind of manually moving a KinematicBody2D object without using native physics functions like move_and_slide. I wonder how that would break collisions with other physics bodies you happen to collide with along your way as this "hard-coded" movement implies infinite inertia.

[@GameEndeavor]

@@rafaelgpontes if you're referring to the up and down movement then no, the collision doesn't move with that. The collision stays on the ground and just the sprites move up and down. Even if you were to move the shape, it'd just fall back to the ground.

[@GameEndeavor]

In fact the rig won't even know about the shape. I save it as a PackedScene and just call the AnimationPlayer from outside.