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?
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.
Unit 5
