instagram
Lessons

    Aligns to:

    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

    Materials

    🔗Build Your Own Animation 55 minutes

    Overview

    Students apply the Animation Design worksheet to their own, creative animations.

    Launch

    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.

    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 to Animation Data Worksheet 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! You can always extend it later.

    Have students swap papers and check each other’s work — make sure they both agree that they’ve identified everything that is changing!

    • Fill in the second table, figuring out data types 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.

    Investigate

    • Open Define the Data Structure.

    • 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)

    Make sure students have their data structures defined before moving on!

    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.

    Now you have to define the 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 the function before moving onto the next one.

    There are extra design-recipe worksheets in the back of the workbook if students need them!

    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:

    ??? = reactor:
  init: ???,
  on-key: next-state-key,
  on-tick: next-state-tick,
  to-draw: draw-state
end

    (Replace the ??? with names and instances that correspond to your game!)

    🔗Synthesize

    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.

    These materials were developed partly through support of the National Science Foundation, (awards 1042210, 1535276, 1648684, 1738598, 2031479, and 1501927). CCbadge Bootstrap by the Bootstrap Community is licensed under a Creative Commons 4.0 Unported License. This license does not grant permission to run training or professional development. Offering training or professional development with materials substantially derived from Bootstrap must be approved in writing by a Bootstrap Director. Permissions beyond the scope of this license, such as to run training, may be available by contacting contact@BootstrapWorld.org.