SDL game tutorial Lesson 5 Animation

Translation statement:
This series of tutorials comes from Dev hub and all the right to interpretation belongs to the original author. I translated this series of tutorials only from my hobbies. Because I am also a beginner and have a limited level of English, it is inevitable to make mistakes.

Address: http://www.sdltutorials.com/sdl-animation/

In the last lesson, we tried to complete a word game. I hope you can all run successfully. Otherwise, you will eventually enter the status.

In this lesson, we will start with SDL animation. As usual, we are still built on the basis of the last SDL course (but not the word game ). Let's get started.

We will create a new class to process the animation, and then we will create a class to process the object in the next lesson. Remember, these two things should be differentiated, even though I know they can be the same class, but I don't want to do that. All, please keep your objection.

Create two new files (I think you have found a pattern, hopefully): canimation. h and canimation. cpp. Finally, our centity class will inherit this class, but now we need to test it by creating an object later. Before you start, add the include command with the CAPP. H command (just before the # include "cevent. H" command ).

# Include "canimation. H"

Now open canimation. h and start writing code. Add the following base class structure to your file.

1. # Ifndef _ canimation_h _
2. # DEFINE _ canimation_h _
3. # Include <SDL. h>
4. Class canimation {
5. PRIVATE:
6. Int currentframe;
7. Int frameinc;
8. PRIVATE:
9. Int framerate; // milliseconds
10. Long oldtime;
11. Public:
12. Int maxframes;
13. Bool oscillate;
14. Public:
15. Canimation ();
16. Void onanimate ();
17. Public:
18. Void setframerate (INT rate );
19. Void setcurrentframe (INT frame );
20. Int getcurrentframe ();
21. };
22. # Endif

Now open canimation. cpp and add the following code:

1. # Include "canimation. H"
2. Canimation: canimation (){
3. Currentframe = 0;
4. Maxframes = 0;
5. Frameinc = 1;
6. Framerate = 100; // milliseconds
7. Oldtime = 0;
8. Oscillate = false;
9. }
10. Void canimation: onanimate (){
11. If (oldtime + framerate> sdl_getticks ()){
12. Return;
13. }
14. Oldtime = sdl_getticks ();
15. Currentframe + = frameinc;
16. If (oscillate ){
17. If (frameinc> 0 ){
18. If (currentframe> = maxframes-1 ){
19. Frameinc =-frameinc;
20. }
21. } Else {
22. If (currentframe <= 0 ){
23. Frameinc =-frameinc;
24. }
25. }
26. } Else {
27. If (currentframe> = maxframes-1 ){
28. Currentframe = 0;
29. }
30. }
31. }
32. Void canimation: setframerate (INT rate ){
33. Framerate = rate;
34. }
35. Void canimation: setcurrentframe (INT frame ){
36. If (frame <0 | frame> = maxframes) return;
37. Currentframe = frame;
38. }
39. Int canimation: getcurrentframe (){
40. Return currentframe;
41. }

Now we need to explain this class. The current frame of an animation is a basic element of the animation. Obtain the Yoshi image below the example (we will use it later in this lesson ). You will find eight Yoshi frames in an image. From top to bottom, beauty has a mark 0, 1, 2.

Do you still remember the function we created in section 2 to draw some images? So, if we combine that function with the frame in the animation, that's it!

So the first variable I want you to see is currentframe. This is how we want to draw the current frame of the animation on the screen. Whatever it is, it determines which part of the surface we want to draw to the screen. Therefore, when we call the plot function, we should do this:

Csurface: ondraw (surf_display, surf_image, 0, 0, 0, anim_yoshi.getcurrentframe () * 64, 64, 64 );

Because your Yoshi is indeed 64*64 pixels, we are interested in the width and height here, and we are also interested in frames. Take a look at the image shown below:

When currentframe increases by 1, we jump to 64 pixels (the height of the Yoshi frame) and draw that frame.

Maxframes in the class is the total number of frames of the animation we need to know. The last thing we need to know is how many frames are drawn per second, or how fast the animation will be displayed. Use the following code in the onanimate function to determine this problem.

If (oldtime + framerate> sdl_getticks ()){
Return;
}
 
By adding the expected frame rate to the old time in milliseconds, we can compare it with the running time of the SDL Library (from the beginning of the SDL library initialization. For example, we just started the game. Sdl_getticks is 0, and oldtime is also 0. The requested frame rate is 1 frame/second. So, framerate = 1000 (MS ). So 0 + 1000 is bigger than 0? That's right, so we skip this function and wait. Once 0 + 100 is smaller than sdl_getticks, it means that 1 second has passed. So we increase the frame, reset the oldtime to the current time, and start again.

The next interesting part is osillate and frameinc. Adding these is not something that I want to confuse, but something that I feel is necessary. If the oscillate flag is true, the animation adds frames and then decreases the number of frames. If we have a 10-Frame Animation, it will look like this:

0 1 2 3 4 5 6 7 8 8 7 6 5 4 3 2 2...

As you can see, it increases to 9 and then returns to 0. This has some interesting applications, but we will discuss it in other courses. So how does it run? Look at the onanimate function.

Void canimation: onanimate (){
If (oldtime + framerate> sdl_getticks ()){
Return;
}

Oldtime = sdl_getticks ();

Currentframe + = frameinc;

If (oscillate ){
If (frameinc> 0 ){
If (currentframe> = maxframes-1 ){
Frameinc =-frameinc;
}
} Else {
If (currentframe <= 0 ){
Frameinc =-frameinc;
}
}
} Else {
If (currentframe> = maxframes-1 ){
Currentframe = 0;
}
}
}

Error Correction: If you set "currentframe + = frameinc;
Put it behind the if statement, it will lead to an error, it should be placed before the if statement. If the animation encounters maxframes = 0, it will still increment currentframe
To 1. Thanks to Alexander mangel for discovering this bug!

We already know oldtime and other usage, but what then? Now, let's look at the else statement corresponding to the IF Statement of oscillate. You will find that we only checked whether currentframe exceeded the limit frame number. If yes, It is reset to 0. It is really easy. Next, we increment the number of frames outside the block to the next frame.

The most confusing part is the if statement of this oscillate. The fremeinc variable is added here. Basically, frameinc is set to 1 or-1 based on how we increase or decrease frames. Remember, swinging back and forth causes frames to go from 0 to 9 and then return to 0. When frameinc is greater than 0, we increase the number of frames. Otherwise, we decrease the number of frames. The IF statement at the bottom is to retrieve anti-frameinc when we reach 0 or the maximum frame.

Now, let's use this class. In Capp. H, create a new canimation object:

Canimation anim_yoshi;

Now, set maxframes and add it to capp_oninit:

Anim_yoshi.maxframes = 8;

If you want to see the swing animation, set it as follows:

Anim_yoshi.oscillate = true;

Okay: Now, create an animation loop and add the following to capp_onloop:

Anim_yoshi.onanimate ();

Now, add the following in capp_onrender to make the actual Animation:

Csurface: ondraw (surf_display, surf_test, 290,220, 0, anim_yoshi.getcurrentframe () * 64, 64, 64 );

Now let's compile it. Let's see if your little dinosaur is training! Replace myimage.bmp with the yoshiimage.

SDL animation-course file:

Win32: Zip, rar
Linux: Tar