imageUnit 5

Building your World

Unit Overview

Agenda

After thinking about their World, students practice building, drawing and animating it.

Product Outcomes:

    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.

      Length: 90 minutes

      Glossary:

      • contract: a statement of the name, domain, and range of a function

      Materials:

      • Pens/pencils for the students, fresh whiteboard markers for teachers

      • Class poster (List of rules, design recipe, course calendar)

      • Editing environment (WeScheme or DrRacket with the bootstrap-teachpack installed)

      • Student workbooks

      • Language Table

      Preparation:

      • Seating arrangements: ideally clusters of desks/tables

      • Clear plastic sheet protectors: put pages 20 & 21 at the front of the workbook for ease of reference

      • The Ninja World 3 file [NW3.rkt from source-files.zip | WeScheme] preloaded on students’ machines

      • BS:2 Blank Game Template [GameTemplate.rkt from source-files.zip | WeScheme] preloaded on students’ machines with student images included.

      Types

      Functions

      Number

      + - * / sq sqrt expt

      String

      string-append string-length

      Image

      rectangle circle triangle ellipse star text scale rotate put-image


      Introduction

      Overview

      Learning Objectives

        Evidence Statements

          Product Outcomes

            Materials

            • Pens/pencils for the students, fresh whiteboard markers for teachers

            • Class poster (List of rules, design recipe, course calendar)

            • Editing environment (WeScheme or DrRacket with the bootstrap-teachpack installed)

            • Student workbooks

            • Language Table

            Preparation

            • Seating arrangements: ideally clusters of desks/tables

            • Clear plastic sheet protectors: put pages 20 & 21 at the front of the workbook for ease of reference

            • The Ninja World 3 file [NW3.rkt from source-files.zip | WeScheme] preloaded on students’ machines

            • BS:2 Blank Game Template [GameTemplate.rkt from source-files.zip | WeScheme] preloaded on students’ machines with student images included.

            Introduction (Time 5 minutes)

            • Open the Ninja World file, and look at the world defined at the top.

              • How many things are in this world? What are they?

              • What does dogX represent? rubyX? image

              • What function makes a world?

              • Scroll down a bit in the code. What function updates the world?

              • What function draws the world?

              • How fast is the dog moving from left to right? How fast is the ruby moving right to left across the screen?

              • Now turn to Page 21 in your workbook. What are the things in your world? What datatypes are they?

              Make sure that all students can list the names and types of everything in the world struct. In addition, make sure they can answer some questions about accessor functions, such as "how do you get the alien’s speed out of the world?"

            • Now it’s time to start programming YOUR videogame.

              In Bootstrap 1, you started with the shell of a game, with some sample images and functions defined. In this class the game template is just a collection of comments, telling you how to organize your functions and variables. You’ll be writing every line of code yourself. Let’s begin:

              At the top of the file, where it says ;; The World is a:, define the world struct for your game. (Check Page 21 to jog your memory.) Once you have the world struct, scroll down to where it says ;; STARTING WORLD and define your first example world: name it START.

            • So now you have your world, and you know what’s in it: but what do those things look like? You’ll have to add some images. Do you remember the bitmap/url function from Bootstrap one? It takes in the URL of any image online (given as a string) and returns that image. ; bitmap/url : String -> Image

              • Look back at Page 20 in your workbook. How many things in your game will need their own image?

              • Using Google Image Search or a similar tool, find images for the background and for each of the characters in your game.

              • Define a new variables for your images, (i.e. PLAYER, DANGER, etc. and use the bitmap/url function to put them into your game file.

              Some hints for finding images: Your images should be in PNG or GIF format, and the url should contain the file type (i.e. .png or .gif) at the end. Background images should be 640x480, and character images should generally be no larger than 200px in either dimension. Make sure that the character images have transparent backgrounds! TIP: use animated GIFs for the characters - not only does the animation make the game look a lot better, but these images usually have transparent backgrounds to begin with.

              Find students’ images ahead of before class to save time, and use the bitmap/url function to put them into a blank game file for each pair of students.

            Drawing the World

            Overview

            Learning Objectives

            • Students will define draw-world, and hook it up to an event handler

            Evidence Statements

              Product Outcomes

                Materials

                  Preparation

                  Drawing the World (Time 40 minutes)

                  • Now that we have our world structure, we need to know how to draw it.

                    Turn to Page 23, and fill in your START world at the bottom.

                    • According to your world struct, where should everything be when the game starts?

                    • Draw a simple sketch of your START world in the space provided.

                    Next put your images in order. We know we have to stack images, so you’re going to have to use put-image.

                    Using the chart on Page 23, figure out which image goes on top, which goes second, and so on. Make a list from top to bottom in the column on the left. Then write each image’s coordinates in the right column.

                    Let’s set up one more example. This will help when you begin writing your function that draws the world, you’re ready to go. On Page 24 there’s a page nearly identical to page 23. You’ve already written a START world, which has everything where it will be when the game starts. Now do the same for a world called NEXT. This world represents the game in the NEXT FRAME after START.

                    • Fill in the world struct, and sketch the NEXT world.

                    • Now put the images in the same order as in the START world. (We don’t want them to be switching around in the middle of the game!) Then write the NEW coordinates beside them.

                    These workbook pages help students organize their thinking before writing their own draw-world function. The order of images determines which game images appear above the others. (Does it make more sense to have the ruby appear to be flying behind the cloud, or in front of it?)

                  • Which function is used to draw the world?

                    Just like draw-auto, and the draw-world function in Ninja World, draw-world takes in a struct and produces an Image.

                    • What is the Domain of this function? The Range?

                    • At the top of Page 25, write the contract for draw-world.

                    • Fill in the function header for draw-world.

                    Below the function header, there is a sort of ’staircase’ pattern using put-image, just like in Ninja World. Do you remember the contract for put-image? It takes in an image, the coordinates for where to put the image, and another image, on top of which the first image is placed.  

                    • Start out on the bottom of this ’staircase’ by putting one of your images onto the background.

                    • If you wanted the image to be centered on the scene, what are the x- and y-coordinates you’ll need?

                    • But you probably don’t want your image to be at the center of the background. Look back at your START world picture. You made a note of which coordinates where you wanted that image to be, laid on top of the background.

                    Start with something that looks like this, substituting YOUR image and coordinates:  

                    • Place another one of your images on top of the one that this staircase-shaped expression has created.

                    • Keep adding to it, until you have a stack of all of the images in your game.

                    Work with small groups to complete this section. When students finish writing draw-world, have them type their NEXT world and draw-world into their games, in the ;; GRAPHICS section. If they type (draw-world START) into the interactions window, they can see a screenshot of their games.

                  Updating the World

                  Overview

                  Learning Objectives

                  • Students will define a simple update-world function, and hook it up to on-tick

                  Evidence Statements

                    Product Outcomes

                      Materials

                        Preparation

                        Updating the World (Time 40 minutes)

                        • Scroll down until you see ;; UPDATING FUNCTIONS. This code is responsible for changing the World.

                          What function do you see here? What’s in its Domain? Its Range?

                          update-world takes a world, and then returns a new one that’s been updated. Think of this function as the one that generates the next page of a flipbook.

                          • Look back at the difference between your START and NEXT worlds. What has changed?

                          • On Page 26, make a list of what changed and how it changed as a problem statement for writing update-world, using the design recipe. Be sure to fill out the Contract and two EXAMPLEs before defining the function.

                          update-world is the function that will handle the logic of the student’ games. It determines what changes from one second to the next, and updates the world accordingly. Make sure students are making a new world with make-world, and using their accessor functions to change the values of each world fields according to their game’s behavior.

                          Work with small groups to complete this section as needed. When they are finished, have the students type update-world into their games.

                        Closing

                        Overview

                        Learning Objectives

                          Evidence Statements

                            Product Outcomes

                              Materials

                                Preparation

                                Closing (Time 5 minutes)

                                • Now you have the basic shell of your videogame, with your character-images placed onto the background and moving. However, we still haven’t written any functions to take input from the user. If you want the PLAYER to move, you’ll need to learn about how to make the game respond to keypresses, which is what you’ll learn in the next unit.

                                  Have students show each other their their animated games!

                                  At this point in the course students will have very different games and world structures. The Ninja World examples serve as templates and guides for what students should be adding to their games at each step, but most will require a lot of individual attention to make their unique games behave the way they want.