Power Play: How Does Animation Timing Affect Your Perception of Game Action?
|Time Required||Average (6-10 days)|
|Material Availability||Computer with internet access|
|Cost||Very Low (under $20)|
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.
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.
Ian Slutz, Video Game Designer
Sandra Slutz PhD, Science Buddies
Cite This Page
Last edit date: 2017-09-27
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, from http://en.wikipedia.org/w/index.php?title=Frame_rate&oldid=599911973
- deHaan, J. and Mayhew, J. (2011). Animation Learning Guide for Flash: Frame rates. Adobe. Retrieved March 26, 2014, from http://www.adobe.com/devnet/flash/learning_guide/animation/part02.edu.html
For more information about standard deviation, try these resources:
- Green, L. (2001, February, 26). Mean, Mode, Median, and Standard Deviation. Retrieved February 19, 2009, from http://www.ltcconline.net/greenl/courses/201/descstat/mean.htm
- Stanbrough, JL. (2004, May 23). Standard Deviation. Retrieved February 19, 2009, from http://www.batesville.k12.in.us/Physics/APPhyNet/Measurement/standard_deviation.htm
- Statistics Canada. (2008, December 11). Variance and Standard Deviation. Retrieved February 19, 2009, from http://www.statcan.gc.ca/edu/power-pouvoir/ch12/5214891-eng.htm
These resources will introduce you to Scratch:
- Science Buddies Staff (n.d.). Scratch User Guide: Introduction. Science Buddies. Retrieved September 14, 2017 from https://www.sciencebuddies.org/science-fair-projects/references/scratch-user-guide-introduction
- Scratch Team (n.d.). Getting Started with Scratch version 1.4. MIT. Retrieved September 14, 2017 from https://download.scratch.mit.edu/ScratchGettingStartedv14.pdf
- Scratch Team (n.d.). Reference Guide Scratch version 1.4. MIT. Retrieved September 14, 2017 from https://download.scratch.mit.edu/ScratchReferenceGuide14.pdf
News Feed on This Topic
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 occasionally provides information (such as part numbers, supplier names, and supplier weblinks) to assist our users in locating specialty items for individual projects. The information is provided solely as a convenience to our users. We do our best to make sure that part numbers and descriptions are accurate when first listed. However, since part numbers do change as items are obsoleted or improved, please send us an email if you run across any parts that are no longer available. We also do our best to make sure that any listed supplier provides prompt, courteous service. Science Buddies does participate 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. If you have any comments (positive or negative) related to purchases you've made for science fair projects from recommendations on our site, please let us know. Write to us at email@example.com.
Remember Your Display Board Supplies
Poster Making Kit
ArtSkills Trifold with Header
Scratch Project Note
This project idea was written using Scratch version 1.4, which is available for download here. A Science Buddies tutorial for Scratch 1.4 is available here and additional tutorials are available on the download page.
The newest version of Scratch (2.0) is based on Adobe Flash Player, which will be retired in 2020 due to security flaws. Due to these security risks, Science Buddies has chosen not to update these instructions to Scratch 2.0. However, this project will work in Scratch 2.0. If you want to use Scratch 2.0, you can download an offline version here. If you must use the browser-based version (for example, you are using a school computer where you cannot install software), you can access it here. You may need to enable Adobe Flash Player in your browser to get Scratch to work.
Installing and Getting Started with Scratch
- To start this science fair project, you should go to the Scratch download page at http://scratch.mit.edu/scratch_1.4/ and follow the instructions there to download and install Scratch for free.
Once Scratch is installed, click here to download the file you'll need 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?
Communicating Your Results: Start Planning Your Display BoardCreate an award-winning display board with tips and design ideas from the experts at ArtSkills.
Keep the fun going! Find local opportunities related to this project.Register on ActivityHero
If you like this project, you might enjoy exploring these related careers:
Multimedia Artist or AnimatorIf you've ever watched a cartoon, played a video game, or seen an animated movie, you've seen the work of multimedia artists and animators. People in these careers use computers to create the series of pictures that form the animated images or special effects seen in movies, television programs, and computer games. Read more
Software Quality Assurance Engineer & TesterSoftware quality assurance engineers and testers oversee the quality of a piece of software's development over its entire life cycle. Their goal is to see to it that the final product meets the customer's requirements and expectations in both performance and value. During the software life cycle, they verify (officially state) that it is possible for the software to accomplish certain tasks. They detect problems that exist in the process of developing the software, or in the product itself. They try and make things not work (try to "break" the software) by creating errors or combinations of errors that a user might make. For example, if a user enters a period or a pound sign for a password, will that break the software? They seek to anticipate potential issues with the software before they become visible. At the end of the life cycle, they reflect upon how problems or bugs arose, and figure out ways to make the software development process better in the future. Read more
PsychologistWhy people take certain actions can often feel like a mystery. Psychologists help solve these mysteries by investigating the physical, cognitive, emotional, or social aspects of human behavior and the human mind. Some psychologists also apply these findings in order to design better products or to help people change their behaviors. Read more
- 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?
Ask an ExpertThe Ask an Expert Forum is intended to be a place where students can go to find answers to science questions that they have been unable to find using other resources. If you have specific questions about your science fair project or science fair, our team of volunteer scientists can help. Our Experts won't do the work for you, but they will make suggestions, offer guidance, and help you troubleshoot.
Ask an Expert
News Feed on This Topic
Looking for more science fun?
Try one of our science activities for quick, anytime science explorations. The perfect thing to liven up a rainy day, school vacation, or moment of boredom.Find an Activity