•Unit 8:   Building Your World
Unit 8:   Building Your World

imageUnit 8Building Your World
Unit Overview

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

Product Outcomes:

  • Students write the draw-world function for their games

  • Students write the next-world function for their games

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:

    • dot-accessors: A way to extract values from a data structure

    Materials:

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

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

    • Editing environment (Pyret Editor)

    • Student workbooks

    • Language Table

    Preparation:

    Types

    Functions

    Number

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

    String

    string-append string-length

    Image

    rectangle circle triangle ellipse radial-star scale rotate put-image

    Boolean

    = > < string-equal and or


    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 (Pyret Editor)

          • Student workbooks

          • Language Table

          Preparation

          Introduction (Time 15 minutes)

          • It’s time to look at the World for your game!
            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 structure for your game. (Check Page 32 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 worldA. On the next line, add worldB.

          • 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. We’ll use the image-url function. It takes in the URL of any image online (given as a string), and returns that image.  

            • Look back at Page 31 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 new variables for your images, (i.e. PLAYER-IMG, DANGER-IMG, etc.) and use the image-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.

            You can find students’ images ahead of before class to save time, and use the image-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

            • Students write the draw-world function for their games

            Materials

              Preparation

              Drawing the World (Time 35 minutes)

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

                Which function is used to draw the world?

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

                • Turn to Page 34 in your workbooks.

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

                • At the top of Page 34, write the contract, and fill in the function header for draw-world.

              • Below the function header, we’ve gotten you started by 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 the page 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? (Hint: how big is your background image?)

                • But you probably don’t want your image to be at the center of the background. Look back at the sketches you made on Page 31. You made a note of which coordinates you wanted that image to be, placed on top of the background.

                Start with something that looks like this, substituting YOUR image and coordinates (or dot-accessors):   Remember, if the position of these images will be changing (like the dog and coin moving across the screen in Ninja World), they won’t always be placed at the same coordinates. Instead of using specific numbers in put-image, you can (and should!) use dot-accessors to access the coordinates of the characters in the world. Your own world struct will determine which dot-accessors you have available.

                Here is an example of using draw-world in our Ninja World game, using worldA:  

                • Place another one of your images on top of the one that your first put-image expression has created. (Remember: the range of put-image is an image, so you can use this expression as the image onto which you place your next character image.

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

                • When you finish, test out your function by typing draw-world(worldA) into the interactions area to see a screenshot of your game at the very beginning!

                Work with small groups to complete this section. Remind students that the order of images determines which game images appear above the others. (e.g. - "Does it make more sense to have the coin appear to be flying behind the cloud, or in front of it?") When students finish writing draw-world, have them type it into their games, in the # GRAPHICS section.

              Updating the World

              Overview

              Learning Objectives

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

              Evidence Statements

                Product Outcomes

                • Students write the next-world function for their games

                Materials

                  Preparation

                  Updating the World (Time 35 minutes)

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

                    What function should go here? What’s in its Domain? Its Range?

                    As you know, next-world takes a world, and then returns a new one that’s been updated:  

                    • Look back at your world structure. What changes? Which of those fields change on their own, and not in response to any user actions (like keypresses)?

                    • On Page 35, make a list of what changed and how it changed as a purpose statement for writing next-world.

                    • Write an example for next-world using the worldA you defined. Since the Range of next-world is a World, we know that we’ll need to create a world using the world function. Use dot-accessors to show how the world changes.

                    • Next, write one more example for next-world where you create a new world structure. What will your updated world look like?

                    Here are some examples for next-world, from the simple version of Ninja World:   In the first example, we create a new World (using the world constructor function) by adding 10 to the dogX of worldA, and subtracting 5 from its coinX. In the second example, we do the same thing, only with worldB.

                    What changes between the two examples that you wrote? Circle and label, then write the definition for your next-world function. Look back at its contract: what does the range tell you this function must return? A World!

                    next-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 world, and using their dot- accessors to change the value of each world field according to their game’s behavior. This function will likely change drastically in the next few units (just like in Ninja World), and students start adding new functionality to their games. Work with small groups to complete this section as needed. When they are finished, have the students type next-world into their game files.

                  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 write a keypress function, and if you want something to happen when the players collide, you’ll need to write distance and is-collision functions. The next few units are all about working on your own games, using everything you learned from writing Ninja Cat!

                            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 games serve as templates and guides for what students should be adding to their games at each step, but most will require more individual attention to make their unique games behave the way they want.