•Build Your Own Animation
Build Your Own Animation

imageBuild Your Own Animation
Unit Overview

Students create a game of their own design using what they have learned so far.

Product Outcomes:

  • Students make a game or animation of their own design

Standards and Evidence Statements:

Standards with prefix BS are specific to Bootstrap; others are from the Common Core. Mouse over each standard to see its corresponding evidence statements. Our Standards Document shows which units cover each standard.

  • BS-DR.4: The student can solve word problems that involve data structures

    • BS-IDE: The student is familiar with using a REPL, entering expressions properly, and interpreting error messages

      • BS-M: The student models a problem in context and determines the data needed to describe the problem

        • BS-PL.1: The student is familiar with declaring values and applying built-in functions using the programming language

          • BS-PL.4: The student is familiar with the syntax for conditionals

            • BS-R: The student is able to write interactive programs using the ’Reactor’ construct

              Length: 55 minutes
              Glossary:

              • instance: A specific, packaged value of a data structure that contains other values in its fields.

              Materials:
                Preparation:

                • Make sure students have completed units 1 through 5 before starting this lesson.

                Types

                Functions

                Number

                + - * / num-sqr num-sqrt num-expt

                String

                string-append string-length

                Image

                rectangle circle triangle ellipse star text scale rotate put-image



                Build Your Own Animation

                Overview

                Students practice what they have learned to make a new game from scratch

                Learning Objectives

                  Evidence Statements

                    Product Outcomes

                    • Students make a game or animation of their own design

                    Materials

                    Preparation

                    • Make sure students have completed units 1 through 5 before starting this lesson.

                    Build Your Own Animation (Time 55 minutes)

                    • You’ve now learned the core tasks that go into building an animation:

                      • Draw some sketches to illustrate your animation

                      • Analyze the game elements to identify the information that changes across frames

                      • Create a data structure to capture those elements

                      • Write draw-state and one or both of next-state-tick and next-state-key

                      • Create a reactor to pull it all together

                      In this lesson, we show you how to use our Animation Design Worksheet to keep track of these steps as you build your own animation.

                      This lesson is entirely optional. If your students do want to make their own game, this walks them through the worksheet on how to do it.

                    • Let’s get started!

                      Brainstorm an animation or game that you would like to build. Don’t make it too complicated. Start with no more than 4 pieces of changing information.

                      As we saw in the previous unit, we can always go back and add more elements or details to an existing animation. So keep it simple to get a basic game running, then you can add more later.

                    • Turn the Animation Design Worksheet on Page 43 in your workbook.

                      Fill in three sketches from your animation. Discuss with your partner whether the sketches you chose have highlighted interesting aspects of your game.

                    • The tables below the animation sketches ask you to identify the elements in your game.

                      Fill in the first table, noting the elements that are changing and how they are changing. If you have more things changing than there are rows, consider making a simpler animation first then extending (at the end of the lesson).

                      Have your partner or a classmate check your work – make sure you both agree that you’ve identified everything that is changing.

                      Fill in the second table, figuring out datatypes that capture each piece of information that is changing in your animation. Talk with someone to check your work (and help check the work of others).

                    • The table at the bottom of the worksheet asks you to make a to-do list of which functions and components you will need to write to build your animation.

                      Mark off which components and functions you expect to need. Think about whether your animation updates on ticks, key presses, or both.

                      Students should have ended up checking "sample instances", draw-state, and "reactor", plus one or both of next-state-tick and next-state-key. Sample instances get created anytime you have to create a data structure, and every animation or game has an underlying data structure.

                    • Go to the top of the second page of the worksheet.

                      Define a data structure for your game state, with one field for each piece of changing information that you identified in the table of the middle of page 1 of the worksheet. The name of your data structure is up to you, but should reflect the theme of your game (like "RocketState", "SoccerState", "OceanState", etc)

                    • Is your data structure defined?

                      Write down the sample instances of your data structure for each sketch that you drew at the top of the first page of the worksheet.

                      At this point, you could open a new Pyret file and type in your data structure and your sample instances. This would help you check whether your instances and data block are consistent with each other. If you don’t have access to the computer right now, you can come back and do this step later.

                      As a general rule, sanity checking each bit of code and example as you go helps students catch errors early. So typing their work so far in now makes sense, if your class set up allows it.

                    • Now you have to develop whichever functions you marked off on the todo-list on the bottom of page 1 of the worksheet.

                      Pick one of the functions you need to develop. Follow the design recipe, including working out examples, as you develop each function. Finish and test each function before moving onto the next one.

                      There are extra design-recipe worksheets in the back of the workbook if you need them to help you remember the steps (domain and range, examples, function, and typing and testing your function).

                      You need to decide how much scaffolding and help your students need at this point. You can feel free to let them work on their own, or you can encourage them to work through design-recipe worksheets if they still need the structure that those provide. The main goal is to have students tackle only one function at a time, and to make sure it is working before they go on to the other functions.

                    • Finally, we can build and run the animation by defining a reactor.

                      Add a reactor to your file, then interact with it to run your animation!

                      Remember that a reactor looks like:   where you replace the ??? with names and instances that correspond to your game.

                    • Congratulations! You have created your own animation from scratch. If there are features you want to add, use the extra Animation Extension Worksheets from the back of the workbook to help plan and manage your changes. If you build up an animation one piece at a time, you can get to a fairly complex game in a manageable way.