2.3: Animate a sprite

Students will use loops to create an animated a sprite's costumes and to gradually change a special effect.

OBJECTIVES:



By the end of this lesson, students will:

    • distinguish between forever and repeat loop.

    • recognize that loops can are a good solution if you want to repeat the same code over and over.

TEACHER RESOURCES:

Standards

    • CSTA 2-AP-12: Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.

    • CSTA 2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution.

CSTA

DO NOW: ( 5 minutes )

Diversity in Technology (5 minutes)

  1. Watch "Made with Code: Fran Kalal, Pixar Animation Studios" (1:52)

  2. Discuss:

      • Where does Fran work? What is her job there?

      • What four subject areas does she get to combine in her work?

      • How did she get involved in computer science?

      • Do you think Fran is an artist or a computer scientist? Why?

TEACHER GUIDANCE:

  • Fran Kalal is a technical director at Pixar Animation Studios. Her job is to dress the animated characters in Pixar films.

  • The 4 subject areas she combines in her work are fashion, art, math, and science.

  • She became involved in computer science when she saw an animated clip that was created with computer science.

  • Fran says she identifies as an artist who uses a computer as her paintbrush.

Code Tracing (5 minutes)

Code tracing is a method in which the programmer uses paper and pencil to hand trace the execution of a code segment in order to track changes and to determine the output of the code. Code tracing leads to better code writing and is an effective tool in debugging, as the programmer can isolate a segment of code to determine if it is working correctly.

Using skills developed in lesson 3.2, students work in pairs tracing the following code segment. Code Tracing Loops

Mini-Lesson (5-10 minutes)

Students use videos, on student page to add special effects to an animation.

Animation is the "art of illusion": a series of still frames that looks like movement to our eyes. ( Persistence of vision).

Students read/ watch about animation techniques and tips:

  • a sprite will get bigger as it moves forward in a scene. Tip1

  • gradually increase a special effect, using a loop, to make it the effect grow. Tip2

  • add a sound effect for atmosphere. Tip3

  • add a backdrop for atmosphere. Tip4

  • flip costume to opposite direction and have the sprite walk out in the opposite direction Tip5

Project (20-30 minutes)

Students are expected to use at least two animation techniques in their animations.

Animation Goals:

  • decide on starting costume. ( strong start )

  • decide on ending costume. ( strong ending )

  • choose frame rate ( wait amount). ( how the animation will vary ( from choppy to smooth) depending on the frame rate)

  • add two animation techniques. ( explore two techniques that will assist storytelling goals)

Computer science Concept Goals:

  • decide on starting costume. ( reinforces RESET - initialization)

  • count number of times in the loop so that it will end on the correct costume - ( reinforces paper walkthrough of code)

  • realize that loops take less code and are more efficient than writing repetitive statements.

  • realize that loops are a good solution if you'd like to gradually change a special effect (eg. shrink or grow), using code.


Close-Out (5 minutes)

Discuss the following questions:

    1. When does a "forever loop" end?

    2. "I made a sprite, but can not find the motion commands?" Can you troubleshoot this problem?

    3. Why is it useful to trace through code, eg. counting what costume sprite is using, for each iteration of a loop?

    4. If you have more than one sprite animation, why should you offset the timing of each sprite?

Potential Responses

  1. It does not end. A forever loop will continue looping forever, (unless you press the red stop button or call the command "stop all scripts).

  2. Check whether user created a backdrop, rather than a sprite. Remind students this is called debugging, finding and fixing errors.

  3. Tracing through code is a good debugging strategy that can help find errors, and help students realize their misconceptions. Code tracing leads to better code writing.

  4. It looks more natural and less mechanically, if character sprites movement is offset slightly from other characters in the scene. It reinforces that they are independent of each other. eg. You do not want every character taking a step at exactly the same time.