Power Play: How Does Animation Timing Affect Your Perception of Game Action?
Abstract"Pow!" Wow, what an awesome punch that character has! Ever wondered what goes into making a punch look good in a video game? Or any other character motion sequence, for that matter? Try this science fair project for a firsthand look at how art and timing can create memorable game action.
Ian Slutz, Video Game Designer
Sandra Slutz PhD, Science Buddies
The goal of this science fair project is to evaluate how changing the timing between three different animation poses affects how you perceive the quality of a video game character's punch.
When a character does something on screen, the game makers want you, the player, to register some kind of opinion about the action—even if it's a subconscious opinion. For example, a character who is running away from a monster should look like he or she is running fast, a dancer leaping in the air should look graceful, and a fighter delivering a knock-out blow should look like he or she has a strong, powerful punch. But using animation to convey the feel of an action might be more difficult than you think.
An animation is made up of several different poses. These poses are still pictures of a character at a given moment. When the poses are displayed on screen quickly, one after another, it appears as though the character is moving. You may already be familiar with this concept if you've ever made a flip book, or even thumbed through the pages in a comic book quickly. Changing the length of time for which each pose is displayed on the screen affects the viewer's perception of the action. For example, if you make a flip book of a girl walking and you thumb through it slowly, it'll appear as though she's strolling, but if you flip through the same book very quickly, the girl will appear to run. In this example, a shorter display time per pose makes the action appear to happen more rapidly.
In video games, the length of time for which a pose is displayed is measured in frames. Each game has a frame rate. The frame rate is the number of times per second that the image on the screen is refreshed, or updated. Frame rates vary from game to game, but two of the most common frame rates are 30 frames per second and 60 frames per second. For this project, you'll use a 60-frames-per-second rate, so each frame will be equivalent to one-sixtieth of 1 second.
In this project, you'll examine how the number of frames each pose in a punch animation is displayed for affects your perception of the punch. First, think about how many poses there are in a punch. Try getting up and moving around the room throwing pretend punches (and no, you can't practice on your sibling!). What is the minimum number of motions you think can be used to convey the action of a punch? To complete this project, you'll use a program that has a punch animation sequence composed of four poses. Figure 1, below, shows images of the individual poses. The first is an idle pose where the fighter is in a position suggesting that he is ready to fight, but his fists are still low down. The second is a windup pose, where the fighter draws his arm back to get ready to throw the punch. The third is a hit pose, where the fighter's arm is fully extended, as if his fist has made contact with the target. And the fourth pose is the finish pose, where the fighter's fists are back close to his body, but still high up, relative to his shoulders, as if he has just finished retracting his arm after the punch. You'll systematically change the frame count (number of frames for which a pose is displayed on the screen) for the windup, hit, and finish poses and evaluate how that affects how powerful the punch appears.
Figure 1. In this project you'll use sprites of the character Ryu from Street Fighter Alpha 3 to evaluate how frame count for individual poses in a punch animation sequence affects perceived power of the punch. You'll use four different poses: an idle, a windup, a hit, and a finish pose.
Terms and Concepts
- Flip book
- Frame rate
- ScratchTM program
- Standard deviation
- Why is frame rate important for video games?
- How do frame rates in video games, movies, and television compare?
- What is the difference between a game's frame rate, and the frame count for individual poses within an animation sequence in the game? How does the game's frame rate affect the minimum frame count for a pose?
- What are ways to turn a qualitative measurement into a quantitative measurement?
- How do you calculate standard deviation and what does it tell you about the amount of variability in a data set?
These resources will give you more background information about frame rate:
- Wikipedia Contributors. (2014, March 16). Frame rate. Wikipedia: The Free Encyclopedia. Retrieved March 26, 2014.
- deHaan, J. and Mayhew, J. (2011). Animation Learning Guide for Flash: Frame rates. Adobe. Retrieved March 26, 2014.
For more information about standard deviation, try these resources:
- Green, L. (2001, February, 26). Mean, Mode, Median, and Standard Deviation. Retrieved February 19, 2009.
- Stanbrough, JL. (2004, May 23). Standard Deviation. Retrieved February 19, 2009.
- Statistics Canada. (2008, December 11). Variance and Standard Deviation. Retrieved February 19, 2009.
These resources will introduce you to Scratch:
- Science Buddies Staff (n.d.). Scratch User Guide: Introduction. Science Buddies. Retrieved September 14, 2017.
- Scratch Team (n.d.). Getting Started with Scratch version 1.4. MIT. Retrieved September 14, 2017.
- Scratch Team (n.d.). Reference Guide Scratch version 1.4. MIT. Retrieved September 14, 2017.
Materials and Equipment
- Computer with Scratch installed. See the Procedure for details on installing Scratch.
- Spreadsheet program, like Microsoft® Excel®
- Lab notebook
- Optional: Scratch Programming for Teens by Jerry Lee Ford, Jr. available from www.amazon.com
Disclaimer: Science Buddies participates in affiliate programs with Home Science Tools, Amazon.com, Carolina Biological, and Jameco Electronics. Proceeds from the affiliate programs help support Science Buddies, a 501(c)(3) public charity, and keep our resources free for everyone. Our top priority is student learning. If you have any comments (positive or negative) related to purchases you've made for science projects from recommendations on our site, please let us know. Write to us at firstname.lastname@example.org.
Scratch Project Note
This project idea was written using Scratch version 1.4, which is available at the Scratch 1.4 download page. A Science Buddies tutorial for Scratch 1.4 is available on our Scratch User Guide and additional tutorials are available on the download page. The project can be modified to work with other versions of Scratch. Information about the most recent version of Scratch is available at the MIT Scratch website.
Installing and Getting Started with Scratch
- To start this science fair project, you should go to the Scratch download page at Scratch 1.4 and follow the instructions there to download and install Scratch for free.
Once Scratch is installed, click the Power Play file needed to complete this project.
- Save the file with the name Games_p024_PowerPlay.sb.
- When you are ready to start your project, use Scratch to open the file.
Once the Games_p024_PowerPlay.sb file is open, click the "Enter Presentation Mode" button in Scratch. In Presentation Mode, the character will be larger and the action will be easier to see and evaluate.
- The "Enter Presentation Mode" button is located in the left-hand corner, directly underneath the white screen where the sprite is displayed.
To get a general idea of how the fighter's punch looks, play around with the number of frames (in this case, each frame is one-sixtieth of a second) for which each pose is held.
- Press the spacebar to watch the fighter throw his punch.
- The length of time for which each pose is held is controlled by a slider on the screen. See Figure 2, below. Experiment with moving each slider to 0, 30, or 60 frames. This is the equivalent of not seeing the pose at all, seeing it for half a second, or seeing it for a full second.
- Evaluate whether the punches look good or bad. Are they jerky or smooth, real or fake, weak or powerful? Note all observations in your lab notebook.
Figure 2. In Presentation Mode in Scratch, you can adjust the frame count for each pose using the sliders, and then view the resulting punch by pressing the space bar.
Collecting the Data
Now that you have a general idea about the range of how good or bad a punch can look, depending on the timing of the animation poses, you're ready to collect your detailed data.
Put the frame counts for each pose at these starting settings:
- Windup Frame Count = 24
- Hit Frame Count = 12
- Finish Frame Count = 8
Hit the spacebar to view the punch. You'll need to decide how "good" the punch is. Since judging an animation's quality is subjective and qualitative, you'll break up the evaluation into three different 1–10 rating scales to make the assessment more precise and quantitative.
- First evaluate the smoothness of the animation on a scale of 1–10, where 1 is very jerky and 10 is very smooth.
Next, evaluate how real the animation looks. Is it the kind of punch you'd expect a professional boxer to throw during a boxing match? Use a 1–10 scale, where 1 is very fake and 10 is very real.
If you aren't familiar with boxing, and need some examples of what a fake punch might look like, try these settings for the windup, hit, and finish frames:
- No windup, goes straight into the punch: 0, 12, 8
- Punching arm hangs out in the air too long: 24, 40, 8
- If you aren't familiar with boxing, and need some examples of what a fake punch might look like, try these settings for the windup, hit, and finish frames:
- Lastly, evaluate how powerful the punch appears using a 1–10 scale, where 1 is a punch that looks very lightweight and weak, whereas 10 is a punch that looks very heavy, powerful, and damaging.
- Note: You may need to view the punch several times to make your evaluations.
Calculate the overall quality score for the punch by adding together the scores from each of the three rating scales.
- The worst punch possible would have a quality score of 3.
- The best punch possible would have a quality score of 30.
- In the spreadsheet program, make a data table to keep track of the frame counts for each pose, the score you give the punch on each of the three rating scales, and the overall punch quality score.
Examine how the number of frames for which the windup pose is played affects the quality of the punch.
- Increase the windup frame count by 2 and re-evaluate the quality of the punch using the method outlined in step 2. Remember to record your data in the spreadsheet.
- Continue to systematically increase the windup frame count by 2 and re-evaluate the punch quality until the frame count is at 60.
- Reset the windup frame count to 2 less than its starting value (in the case of the windup pose, the starting value is 24 so it should be reset to 22 frames). Repeat the same quality assessment procedure outlined in step 2.
- Continue to systematically decrease the windup frame count by 2 and re-evaluate the quality of the punch until the frame count is at 0.
- Note: Do not change the frame counts for either the hit pose or the finish pose during these evaluations.
- Reset all of the pose frame counts to their starting positions listed in step 1.
Using the same method outlined above for the windup pose, examine how the number of frames the hit and finish poses are played for affects the quality of the punch. In the end, you should have three sets of data:
- One where the windup frame count varies from 0 to 60, while the hit and finish frames remain at 12 and 8, respectively.
- A second data set where the hit frame count varies from 0 to 60, while the windup and finish frames remain at 24 and 8, respectively. Start with the hit frame count at 12 and evaluate for higher (up to 60) and then lower than 12 (down to 0) frame counts.
- A third data set where the finish frame count varies from 0 to 60, while the windup and hit frames remain at 24 and 12, respectively. Start with the finish frame count at 8 and evaluate for higher (up to 60), and then lower than 8 (down to 0) frame counts.
- On two additional days, repeat steps 1–5 so that you have three trials for each data set. By doing each trial on a separate day, you're more likely to have the data capture the range of your true impressions of each punch.
Analyzing the Data
- For each of the data sets, calculate the average punch quality score across the three trials, and the standard deviation. The standard deviation is a statistic describing how much variation there is among the different trials; the greater the standard deviation, the larger the differences between the trials. Most spreadsheets, like Microsoft Excel, have a function to calculate standard deviation. Consult the help menu of your spreadsheet program and the references in the Bibliography for more information about standard deviation and how to calculate it.
Make an XY graph for each of the data sets. The frame count for the pose being evaluated should be on the x-axis. The quality scores should be on the y-axis.
- On each graph, plot the average quality scores and the standard deviation for those scores.
Use your graphs to answer these questions:
- From one trial to the next, was there a lot of variability between your perception of what the punch quality score should be? Was the variability uniform across the three poses? Was the variability uniform across the range of frame counts or did it increase or decrease dramatically at different points?
- Are the shapes of the graphs similar or different? What does this tell you about the importance of each pose in the total quality score? Does one pose appear to be more important than the others or are they all equal?
- Looking at your graphs, can you pick out what the best frame count for each pose is? Is there a single value or a range for each pose?
- Using your data, what are the frame count settings for the best overall punch you can make using the poses you were given?
Ask an Expert
- Judging how good an animation looks is subjective, but just how much variability is there between individuals? Try the experiment above with several of your friends. Is there more variability within a single person's punch quality ratings or between the ratings of several people?
- How many poses are necessary to portray different actions? Try using Scratch to put together different animation sequences, like running, jumping, throwing a ball, performing a ballet twirl, etc. You can download sprites from the Internet, use your own drawings, or even use photographs of you and your friends in the various poses. What is the minimum number of poses needed to convey the action? Do more poses make the action look better?
If you like this project, you might enjoy exploring these related careers:
- Science Fair Project Guide
- Other Ideas Like This
- Video & Computer Games Project Ideas
- My Favorites
- Scratch User Guide
- Variance and Standard Deviation