Lesson 20: The Game Design Process

Overview

This lesson introduces students to the process they will use to design games for the remainder of the unit. This process is centered around a project guide which asks students to define their sprites, variables, and functions before they begin programming their game. In this lesson students begin by playing a game on Game Lab where the code is hidden. They discuss what they think the sprites, variables, and functions would need to be to make the game. They are then given a completed project guide which shows one way to implement the game. Students are then walked through this process through a series of levels. As part of this lesson students also briefly learn to use multi-frame animations in Game Lab. At the end of the lesson students have an opportunity to make improvements to the game to make it their own.

Purpose

This lesson introduces multi-frame animations, and is the first in a sequence centered around the process of building software.

While previous lessons focused on using abstractions to manage the complexity of the code, this lesson focuses on managing the complexity of the software development process. The lesson heavily scaffolds the software development process by providing students a completed project guide, providing starter code, and walking students through its implementation. In the subsequent lessons students will need to complete a greater portion of this guide independently, and for the final project they will follow this process largely independently.

Agenda

Warm Up (15 mins)

Activity (60 mins)

Wrap Up (20 mins)

View on Code Studio

Objectives

Students will be able to:

  • Identify core programming constructs necessary to build different components of a game
  • Create and use multiframe animations in a program
  • Implement different features of a program by following a structured project guide

Preparation

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Students

Teaching Guide

Warm Up (15 mins)

Play Cake Defender

Transition: This lesson begins immediately in Code Studio. On the first level they will be find a game but will not be able to see the code. They should play the game and follow the instructions which ask them to list the variables, sprites, and functions they think are necessary to create this game.

Teaching Tip

Keeping Focus: Students can easily get distracted by the fun of playing the game. Let them play for a while but eventually encourage them to follow the on-screen instructions and make a list of the variables, sprites, and functions that would be necessary to play the game.

Stop: Review Project Guide

Discussion Goal

Running the Conversation: You can write "Variables", "Sprites", and "Functions" on the board and record their ideas below each. Ask students to justify their decisions but don't feel the need to settle on one right answer.

Discuss: Students should have individually created a list of variables, sprites, and functions they would create to make the defender game they played. Ask students to share their lists with a neighbor before discussing as a class.

Teaching Tip

Project Guide: The project guide is intentially filled out for students so that they can experience using it as a reference when programming. This should give them more context when filling out their own project guide in the next two lessons.

You can give each student their own copy for reference, but you might also choose to print one copy per pair, share digital copies, or just display the guide on the projector. So long as it is available for reference, any approach will work fine.

Distribute: Give each student or pair of students a copy of the Defender Game - Project Guide (Filled Out)

Prompt: Compare the components of the game you thought would be included to the ones on this project guide. Do you notice any differences?

Discuss: As a class compare the list you had on the board to the list of variables, sprites, and functions on the project guide. Note the similarities. Where there are differences try to understand why. Don't approach one set as "right" vs. "wrong" but just confirm both would be able to make the game students played.

Remarks

There's usually lots of ways you can structure a program to get it to work the way you want. The important thing when writing complex or large programs is that you start with a plan. Today we're going to look at how we could implement this plan to build our own defender game. By the end of the lesson you'll not only have built your game, but you'll know how to change it and make it your own. Let's get going!

Activity (60 mins)

Multiframe Animations

Transition: Students should move back to Code Studio. Before actually implementing the plan students will need to quickly review one new skill, how to use multiframe animations. Students will quickly learn how to create, modify, and rename animations as well as pick them from the library.

Implement Project Guide

Students are given a large amount of starter code in this project. The sprites, variables, and functions have all already been given to them. The work of this project is writing the code for the individual functions. These levels guide students through how to implement those functions. As students move through the levels point out how the project guide is being used.

The most challenging skill students use in these levels is recognizing the need to create new functions to replace repeated code. Students need to build this skill on their own but these levels demonstrate an instance where this might happen.

Wrap Up (20 mins)

Make It Your Own

This last level encourages students to make the game their own. If students have made their way to this point they have all the skills they need to progress through the curriculum, so there is no pressure to complete any of the modifications suggested in this level. If you have time, however, getting practice planning and implementing new features will be a useful skill. Even just modifying the animations of the game is an easy way students can make the game their own.

Share: Once students have completed the project they can share their work with their classmates. Encourage students to showcase the additional code they wrote and explain how it has changed the way the game works.

View on Code Studio

Overview

This lesson introduces the process the class will use to design games for the remainder of the unit. The class walks through through this process in a series of levels. As part of this lesson the class also briefly learn to use multi-frame animations in Game Lab. At the end of the lesson they have an opportunity to make improvements to the game to make it their own.

Resources

View on Code Studio

Defend Your Cake!

This is an example of a defender game that you'll build by the end of this lesson. To defend your cake, move the alien with arrow keys to block the lady bugs and push them into the water.

Do This

Turn to a classmate and make a list of the following information.

  • How many sprites are there in this game. Which are they?
  • What variables are needed to make this game? What do they store?
  • If you were to split the code of this game into functions what do you think they would be? What are the major pieces of behavior you'd need to create in your code?
View on Code Studio

Stop

Before you move on you'll need to look at the Project Guide for this project. Wait for instructions from your teacher as well.

  • Multiframe Animations
  • 4
  • 5
  • 6
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Using Multiframe Animations

In the sample defender game the sprites themselves were animated. Before getting started on programming this game, take a minute to get familiar with this new way of animating sprites.

Do This

This program already includes several sprites but they don't yet have any animations.

  • Go to the Animation Tab and check out the multi-frame animations already added to your project. Choose one for each of your characters.
  • Remember you can use setAnimation to give your sprites animations you've created in the Animation Tab.
View on Code Studio

Student Instructions

Slow Down

Nice work! Time to start learning how to control these multiframe animations.

Do This

Your sprites should be animated but they're moving really quickly.

  • Head back to the Animation Tab. Underneath each animation you should see a slider.
  • Use these sliders to slow down your animations so they look more realistic.
View on Code Studio

Student Instructions

Editing Multiframe Animations

Your sprites will look a lot more realistic if they turn around when they're moving. You can switch back and forth between multiframe animations when the user presses different keys.

Do This

Read this code and run the program. Make sure you know how the sprite responds to the arrow keys.

  • In the Animation Tab, create a copy of the alien animation by clicking the following button:
  • Use the tool to flip your animation. Make sure you flip both frames using this button:
  • Rename your new animation.
  • Use your new animation and old animation so that the alien faces the correct direction when moving. Where do you think you'll need to set the sprite's animation in your code?
View on Code Studio

Student Instructions

Getting Started: Set Animations

You should have already reviewed the planning guide for this project. A lot of the work to turn this project guide into a working game has already been started. Based on the project guide you're going to do the rest of this work.

Do This

Before we get started you'll want some better animations for each of your sprites.

  • In the Animation Tab are animations for each of your sprites. Go look at what they are.
  • In your code give each sprite its appropriate animation. Use the ones provided for now but later you'll be able to go change them.
  • Head to Level 4 if you need help remembering how to do this.
View on Code Studio

Student Instructions

Moving The Enemies

It's time to start writing the code that will move your sprites. To begin you'll need to get your enemy sprites to a random position and moving across the screen.

Do This

At the top of your program, after you create each enemy sprite, write code that will move it to the correct position and give it the correct velocity.

  • Use sprite.x to set the x position to 0.
  • Use sprite.y to set the y position should be a random number between 150 and 250.
  • Use sprite.velocityX to set the x velocity to 2.

Test your program. Your enemy sprites should now be moving across the bridge.

View on Code Studio

Student Instructions

Touching the Cake

If the enemies get all the way across to the cake you should place them back at the left side of the screen and decrease the score. To start you'll write code for only one of your enemies.

Do This

Inside the enemiesTouchCake function you'll need to write code that checks when a ladybug is touching the cake, resets its position, and changes the score.

  • Use an if and isTouching to detect whether enemy1 has touched the cake.
  • Inside your if block place code that:
  • sets enemy1's x position back to 0.
  • sets enemy1's y position to a random number between 150 and 250.
  • uses the counter pattern to decrease the score by 2.

(Hint: You can reuse some code you already wrote)

Test your code. One of your ladybugs should now reset when it gets across to the cake, and the score should go down by 2.

View on Code Studio

Student Instructions

Touching the Cake: Second Ladybug

Your first enemy sprite should now be resetting when it gets to the cake. Now you'll want the other ladybug to reset as well.

Do This

Inside the enemiesTouchCake function you should have written code that resets enemy1.

  • Copy the entire if-statement you wrote in the last level (Ctrl-C).
  • Paste the code inside of the enemiesTouchCake function, just below the last one (Ctrl-V).
  • Change the name of the sprite in that code from enemy1 to enemy2.

Test your code. Now both bugs should reset when they touch the cake.

View on Code Studio

Student Instructions

Creating Functions

Your program now includes code in two places to set the enemies on the left side of the screen at a random y location. You can create functions to reset each of your two enemies to remove repetitions from your program. This will make your program easier to read, allow you to change it more easily, and allow you to quickly reset your sprites at other points in your program if you need to.

Do This

  • At the bottom of your program create two new functions, setEnemy1 and setEnemy2.
  • Inside each of these functions place the code that sets the enemies on the left side of the screen and gives them a random y position.
  • Wherever the code for setEnemy1 and setEnemy2 appears in your program replace them with a call to the functions you just created.
View on Code Studio

Student Instructions

Moving Left and Right

Now that your enemy sprites are moving correctly, it's time to write the code to move your player. For now you'll just need to get your character moving left and right and changing its animations.

Do This

For this level you'll be writing code inside the movePlayer function.

  • Use an if block along with keyDown to detect when the "right" arrow is pressed.
  • Use sprite.x and the counter pattern increase the player's x position by 3.
  • Use another if block to move the player to the left when the "left" arrow is pressed. This time you'll need to decrease the player's x position.

Test your game. Your character sprite should now move left and right when you press the left and right arrows.

View on Code Studio

Student Instructions

Moving Up and Down

You'll want your player sprite to move up and down as well.

Do This

For this level you'll still be writing code inside the movePlayer function.

  • Use an if block along with keyDown to detect when the "up" arrow is pressed.
  • Use sprite.y to increase the player's y position by 3 using the counter pattern.
  • Use another if block to move the player down when the "down" arrow is pressed.

Test your code. Your character should now move in all 4 directions.

View on Code Studio

Student Instructions

Change Player Animations

Right now your player is always facing the same direction. You can make things look a lot more realistic by switching between animations. Your player should switch between a left-facing and right-facing animation depending on which key was last pressed. Remember, you can quickly copy and edit animations inside the Animation Tab.

Do This

  • Inside the Animation Tab copy the animation of your player sprite.
  • Flip each frame of the new animation so that the sprite is facing in the opposite direction.
  • Rename your new animation.
  • Use the setAnimation command inside the movePlayer function so that the player changes the direction it is facing when the "left" and "right" arrows are pressed.
View on Code Studio

Student Instructions

Displace Enemies

It's time to write code for some more sprite interactions. Your player sprite should displace the enemy sprites.

Do This

For this level you'll be writing code inside the displaceEnemies function.

  • Write code that makes player displace both enemy sprites.
  • Test your program to make sure your player is displacing enemies but they keep moving right after the player moves away.

Hint: You can use sprite.debug to see your sprites' colliders if you need to debug your program.

View on Code Studio

Student Instructions

Touching the Water

The last part of the game that you'll need to write is the code to reset the sprites when they touch the water. Luckily you should have already written functions that reset each sprite, so you'll just need a good way to know when either sprite leaves the bridge. Start by writing the code for a single enemy and then copy-paste and make small changes to create code for your second enemy.

Do This

For this level you'll be writing code inside the enemiesTouchWater function.

  • Use an if statement to check whether enemy1 is off the top of the bridge by checking whether its y value is below 140. Within your if statement:
    • use your setEnemy1 function to reset the sprite.
    • add 1 to the score.
  • Use an if statement to check whether enemy1 is off the bottom of the bridge by checking whether its y value is above 260. Within your if statement:
    • use your setEnemy1 function to reset the sprite.
    • add 1 to the score.
  • Test your program for the first enemy sprite. Make sure the sprite is resetting and the score goes up.
  • Once it is working copy and paste the code you wrote to create the same behavior for enemy2. You'll need to change the name of the sprite and the name of the functions you use.
View on Code Studio

Student Instructions

Make It Your Own

You just walked through someone else's plan for creating a game, so now it's time to make it your own. What additional features or challenges do you want to create?

Do This

Select one of the challenges below to add to the game or come up with a challenge of your own.

  • Change the visuals of the game so that your player, enemies, or cake look different.
  • End the game when the enemies get to the cake and print the score. For an extra challenge end the game only after 3 enemies get through.
  • Randomize the speed of the enemies.
  • Create a new background that shows up when players reach a higher score.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
  • 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
  • 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
  • 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
  • 2-AP-17 - Systematically test and refine programs using a range of test cases.
  • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.