Hello and welcome to another episode in the Godot Basics tutorial series. In This episode we will be taking a look at frame by frame animation and motion tween animation. Let's start with the definition of animation. Animation is the technique of photographing successive drawings or positions of puppets and or models to create an illusion of movement. There are two types of animation. The first is frame by frame animation and the second is motion tween animation. Motion tween animation can also be referred to as tween angle or in-between. Let's start with frame by frame animation frame by frame. Animation is a technique that changes the contents of this stage in every frame and frame by frame animation is best suited for complex animations. The reason for that is because frame by frame is creating a standalone image that's unique for each individual frame. You will have. And again frame by frame animation is the more traditional animation. Let's go ahead and take a look at a few examples of frame by frame animation. So we have movies and cartoons especially cartoons in the nineteen eighties and typically in movies and cartoons you are shown twenty four images per second. And because you were shown 24 in a sense photographs per second this created the illusion of movement. Next on THE LIST IS gifts. When you see gifts online they are usually shown to you in 15 frames per second. And when gifts are shown to you in 15 frames per second they still show movement but your brain sort of figures that something isn't right with what you're being shown.

Now the last example I want to show you is Pixar Animation and Pixar animation is by far the most common example when you want to show frame by frame animation. And that's because Pixar Animation purposely tries to make the animation choppy by showing you the least amount of frames per second. And so you have two frames three frames four frames six frames eight frames. Really any amount of frames that gives the illusion of movement but choppy movement. So let me show you an example of frame by frame animation and I'm going to draw six circles to give the illusion of moving from left to right So I went ahead and drew my six circles. And as you can see here this would be an example of frame by frame animation now basically frame by frame animation means you draw. Each frame yourself. You don't use software to make each frame for you. And so even though this is a basic example of frame by frame animation. It still drives home the point that when you do frame by frame animation you. Are Creating your own Image for each frame. And when run really fast together it creates the illusion of movement. So in this case we have a circle moving left and right. And as you can see here we're changing the content. Of. Our. Image on. Each frame. And if we were to show all six circles at the same time you'll see that. We drew six circles each circle at a different position. And so when shown to you or to anybody in consecutive order it gives the illusion that our circle is actually moving from left to right or right to left.

And so this is one example of frame by frame animation through PowerPoint. However there is software that helps you make animation frame by frame and it requires you again to draw and customize each frame to give the illusion of movement. Now there are pros and cons to frame by frame animation. The pro or the positive of frame by frame animation is that it allows for complex animations. And that's because you are creating each frame yourself you're customizing the way each frame looks. Now the negatives of frame by frame animation is that they are more expensive to produce and that's because it takes time unlike the second example. I'll show you shortly where you let software do the animation for you frame by frame. Animation requires you to create the smoothest possible illusion of movement. So in this case I had to take time to draw six circles at six positions and I did it fairly quickly. But if I really wanted to give the illusion that my circles were moving smoothly from left to right I'd most likely have to draw more circles and I'd have to carefully place my circles in positions that give the illusion of smooth movement from left direct. Now when it comes to game animation or game art animation you're not going to draw your movement. Instead you'll draw some type of animation that when combined with code will give that illusion of movement. But regardless the fact still remains that it does take time to draw a frame by frame and so that is something you have to keep in mind. Obviously the more images you want shown per second the more time it takes to draw that and to create that animation. The second type of animation is tween motion also referred to as twinning and in between Eng and tween motion is an animation process where you generate intermediate frames between two images and these are called key frames and the basics of twin motion is fairly simple. First you must place the image at a starting point. After that you tell the computer where you want the ending position to be. And then after you tell the computer where the ending position is that the computer will calculate the positions of images in between the start position and the end position based on one or multiple parameters. And the most common parameters will be time and frames that you would like to show the user. And of course there are other parameters and that just depends on the application you're using. Now there are two things to keep in mind when doing tween motion and that is that the computer will do the calculations to create the animation and that every program is different on how it calculates that motion.

So let me go ahead and show you tween motion through PowerPoint. So in this case I tell powerpoint that I have my game object and they start position is here and I would like the end position of this circle to be here. And so I'm going to give a few arguments in PowerPoint and that the arguments are the following. First I tell it that it should calculate for this image to transition from start position to and position in two seconds and that it should show it in 24 frames per second. And so let's go ahead and see what happens as you can see here I hope it's smooth on your side it's smooth on minds. But regardless it did all the calculations for us PowerPoint calculated how much time or excuse me the speed at which the object would move. Given that I would like it to end at the end position in two seconds and that it should show to you twenty four frames per second. Let's go ahead and see what the computer does behind the scene when it comes to twin motion animation. Now it takes in what we tell it. In this case the start position and position along with the parameters set and it creates the key frame. So let's go ahead and take a look at that. So in this case we tell the computer that we would like our starting position here in the green. We would like the end position here in the green and that the parameters is that it should take our object from here to here. Two seconds total no more no less. And on top of that we would like twenty four frames per second. And so what the computer does is and in this case I do not have enough space for forty eight dots.

So we're just going to use our imagination. But regardless our computer creates these key frames and basically it says that from our starting position Move that game object just a little over here in Key frame 1 and then from key frame 1 move it just a little over here and key frame 2 and then it just keeps on going until it reaches the end position. Now you can get a little more complex than this however this is the basic simple summary of twin motion animation or in this case the computers way of how it calculates. And so in reality or computer is actually creating forty eight key frames in between our starting position and our ending position and moving it along basically two seconds divided by forty eight. And so in that amount of time it should change to a new position determined by where the key frames are that the computer has already pre calculated before the animation movement. Now there are pros to tween motion animation and that is it is cheaper to produce and that's because it takes less time to make because you just give it to positions and the computer will calculate that animation for you. It's also easier because you don't need to draw it yourself every time. Now one thing to note is that there are a lot of software out there that deals with animation and what that means is through technology and we no longer have to hand draw our animation frame by frame. We can create one thing and if you create that thing properly. For example if you create a character sprite in just the right way. Basically separating body parts like head neck body legs arms through software animation we can actually get our character to move in complex ways.

And so even though there's two types of animation twin motion animation and frame by frame animation software animation has the capabilities of exporting both exporting an asset where it uses code to run the animation or in this case sprite sheets that have your animation frame by frame and you can go ahead and use that to create your animation as well. And so that's something to keep in mind over there is a negative when using software and that is you aren't limited by what the software allows you to do. But again as I mentioned there are software out there that allow for not only complex animations but it allows you to export your animation in the way you want. Frame by frame or between motion. Well that's all I have for you in this episode. Thank you so much for joining me. Thank you for clicking the like button and thank you for clicking the Subscribe button. If you have any questions or comments please feel free to leave them in the comments section down below. And I look forward to seeing you in the next episode. Have an amazing day!