Coordinate Planes

Computers use numbers to represent a character’s position on screen, using number lines as rulers to measure the distance from the bottom-left corner of the screen. For our video game, we will place the number line so that the screen runs from 0 (on the left) to 400 (on the right). We can take the image of the Dragon, stick it anywhere on the line, and measure the distance back to the left hand edge. Anyone else who knows about our number line will be able to duplicate the exact position of the Dragon, knowing only the number. What is the coordinate of the Dragon on the right hand side of the screen? The center? What coordinate would place the Dragon beyond the left hand edge of the screen?

By adding a second number line, we can locate a character anywhere on the screen in either dimension. The first line is called the x-axis, which runs from left to right. The second line, which runs up and down, is called the y-axis. A 2-dimensional coordinate consists of both the x- and y-locations on the axes. Suppose we wanted to locate the Ninja’s position on the screen. We can find the x-coordinate by dropping a line down from the Ninja and read the position on the number line. The y-coordinate is found by running a line to the y-axis.

A coordinate represents a single point, and an image is (by definition) many points. Some students will ask whether a character’s coordinate refers to the center of the image, or one of the corners. In this particular program, the center serves as the coordinate - but other programs may use another location. The important point in discussion with students is that there is flexibility here, as long as the convention is used consistently.

When we write down these coordinates, we always put the x before the y (just like in the alphabet!). Most of the time, you’ll see coordinates written like this: (200, 50) meaning that the x-coordinate is 200 and the y-coordinate is 50.

Depending on how a character moves, their position might change only along the x-axis, only along the y-axis, or both. Look back to the table you made. Can the Ninja move up and down in the game? Can he move left and right? So what’s changing: his x-coordinate, his y-coordinate, or both? What about the clouds? Do they move up and down? Left and right? Both?

OPTIONAL ACTIVITY: Depending on timing and the background of your students, having one student place a character on a large graph and another student stating the coordinates is excellent practice. Students often need extra practice remembering which coordinate comes first. Coordinates do not have to be exact but they should be in the correct order. Extending this to all four quadrants to include negative numbers is also excellent practice.

Fill in the rest of the reverse-engineering table, identifying what is changing for each of your characters.

Video Game Analysis

Reverse Engineering a Demo

Let’s begin by exploring a simple video game, and then figuring out how it works. Open this link to play the game, and spend a minute or two exploring it. You can use the arrow keys to move the up and down - try to catch the unicorn and avoid the dragon!

This game is made up of characters, each of which has its own behavior. The unicorn moves from the left to the right, while the dragon moves in the opposite direction. The ninja only moves when you hit the arrow keys, and can move up and down. We can figure out how the game works by first understanding how each character works.

Directions:

1) Divide students into groups of 2-4.

2) Provide each student with a copy of the reverse-engineering table.

3) As students demo the game, ask them to fill in the "Thing in the game..." column with every object they see in the game.

4) Discuss with the whole group which things they came up with. Characters? Background? Score?

5) Next, for each of the things in the game, fill in the column describing what changes. Size? Movement? Value?

6) Ask students to share back with the whole group. Note how students described changes - how detailed were they? What words did they use to describe movement?

Wrap-up

Brainstorming for a Game

Use the Video Game Design Template - Worksheet to make your own game. Just like we made a list of everything in the Ninja game, we’re going to start with a list of everything in your game. To start, your game will have four things in it:

• A Background, such as a forest, a city, space, etc.
• A Player, who can move when the user hits a key.
• A Target, which flies from the right to the left, and gives the player points for hitting it.
• A Danger, which flies from the right to the left, which the player must avoid.