Fly to the Moon

Your Hotshot Objectives

This mission is split into four tasks. We will write a moon-lander simulation game in the first two tasks, and make it run in the browser and on Android devices in the remaining two tasks. The following is the list of objectives for our current task:

Mission Checklist

The first two tasks of this mission are implemented using only Processing. In the third task, you will need a browser that supports the canvas element, like Firefox, Chrome, Safari, or Internet Explorer starting with Version 8.

For the last task, we will need to download and install the Android SDK, which is described in detail later.

Drawing a sprite

The first task for our current mission is to create a sprite showing a spaceship and make it move and rotate on the screen. We will make use of the translate() and rotate() methods that Processing provides. We will also generate the level design for our game and generate a landing platform for our spaceship.

To make the game more interesting, these levels will be recreated every time the game is restarted.

Engage Thrusters

Let's start creating the level design:

1.Create a new Processing sketch and add the setup() and draw() methods, as shown in the following code snippet:

void setup() {

}

void draw() {

}

138

Project 6

2.Now we set the size of the window to 300 by 300 and define an array of integers, which we will use to draw our moon.

int[] moon;

void setup() { size( 300, 300 );

moon = new int[width/10+1];

for ( int i=0; i < moon.length; i++) { moon[i] = int( random( 10 ));

}

}

3.In our draw() method, we add a light blue grid that fills a white page to make it look like we made our level on a page from our mathematics notebook.

void draw() { background(255); stroke(200, 200, 255);

for ( int i=0; i<height/10; i++) { line( 0, i*10, width, i*10);

}

for ( int i=0; i<width/10; i++) { line( i*10, 0, i*10, height );

}

}

4.To draw our moon, we iterate over the array we initialized in the setup() method and fill it with a transparent yellow color. We will add a drawMoon() method to our draw() method and create our yellow polygon using beginShape() and endShape().

void draw() { background(255); stroke(200, 200, 255);

for ( int i=0; i<height/10; i++) { line( 0, i*10, width, i*10);

}

for ( int i=0; i<width/10; i++) { line( i*10, 0, i*10, height );

}

drawMoon();

}

void drawMoon() {

139

Fly to the Moon

stroke(0);

fill(255, 200, 0, 60); beginShape(); vertex(0, height);

for ( int i=0; i < moon.length; i++) { vertex( i * 10, height - 20 - moon[i] );

}

vertex(width, height); endShape(CLOSE);

}

5. Run your sketch; it should look like the following screenshot:

6.In this game, the player should land a rocket on a landing platform. We are going to align the platform to the grid we created in step 3 to make it look like we colored some of the boxes of our grid. Add a variable to store the landing platform's x coordinate and initialize it in the setup() method.

int[] moon;

int landingX = 0;

void setup() { size( 300, 300 );

moon = new int[width/10+1];

for ( int i=0; i < moon.length; i++) { moon[i] = int( random( 10 ));

}

landingX = int( random(3, moon.length-4))*10;

}

140

Project 6

7.Now, we add a drawLandingZone() method to our draw() method and implement it by drawing a rectangle and two lines for the feet. We will use the moon array to calculate where our feet will touch the ground.

void draw() { background(255); stroke(200, 200, 255);

for ( int i=0; i<height/10; i++) { line( 0, i*10, width, i*10);

}

for ( int i=0; i<width/10; i++) { line( i*10, 0, i*10, height );

}

drawMoon();

drawLandingZone();

}

void drawLandingZone() { fill(128, 200);

rect( landingX - 30, height - 50, 60, 10);

line( landingX - 30, height - 20 - moon[landingX/10-3], landingX - 20, height - 40 );

line( landingX + 30, height - 20 - moon[landingX/10 +3], landingX + 20, height - 40 );

}

8.We have our moon and a landing zone, but we still don't have a ship to land. So, draw an image of a rocket or download the image from the book's support material and add it to your sketch by dropping it on the sketch window or by using the Sketch

| Add File ... menu.

9.Now we will add a PImage variable and load the image in our setup() method.

int[] moon;

int landingX = 0;

PImage ship;

void setup() { size( 300, 300 );

moon = new int[width/10+1];

for ( int i=0; i < moon.length; i++) { moon[i] = int(random(10));

}

landingX = int( random(3, moon.length-4))*10; ship = loadImage( "ship.png" );

}

141

Fly to the Moon

10.In our draw() method, add a call to a method named drawShip() and implement this method.

void draw() { background(255); stroke(200, 200, 255);

for ( int i=0; i<height/10; i++) { line( 0, i*10, width, i*10);

}

for ( int i=0; i<width/10; i++) { line( i*10, 0, i*10, height );

}

drawMoon();

drawLandingZone();

drawShip();

}

void drawShip() { image(ship, 150, 100);

}

11.Currently, we are able to position the ship where we want it by changing the x and y coordinates, but we also need to be able to rotate the ship, since in our game the player has to turn the ship and fire the thruster to steer it to the platform and land as smoothly as possible. To fix this, we will use the rotate() and translate() commands. We will also use pushMatrix() and popMatrix() to make sure our rotate() method only affects the image and not the whole window.

void drawShip() { pushMatrix(); translate(150, 100); rotate(PI/6);

image( ship, -ship.width/2, -ship.height/2, ship.width, ship. height );

popMatrix();

}

12.If you run your sketch now, the rocket is hovering above the moon at an angle of 30 degrees, but the moon, the landing platform, and our grid are unchanged.

142

Project 6

Objective Complete - Mini Debriefing

For the first task of our current mission, we created all the graphical elements we needed for our game. In steps 1 to 3, we created a grid that looks like a math notebook to make the game look like it has been drawn in class (during a break of course!).

In step 4, we added a randomly generated lunar landscape. We randomly generated the moon's ground level offsets in our setup() method and stored it in an array. This way, we can make sure that the moon stays the same during one game, but can be recreated without a hassle when the player has finished a level and restarts it. To draw the moon, we created a complex polygon using the beginShape() and endShape() methods and defined the vertices of the polygon using the vertex() command.

The landing platform consists of a rectangle that is aligned to the grid to make it look like we have colored some of the squares. We also added feet to the platform and made them touch the ground level of the moon by using the array from the previous section.

Finally, we used an image of the ship and created a transformation context to be able to rotate it. We need the new context to make sure that our calls to translate() and rotate() only affect the drawing operations we use for the ship, and not all the other sections of our screen. A new context is started with pushMatrix() and ends with

popMatrix(). Every scale, translate, or rotate operation we use in this context only affects the drawing operations of it. Our grid, moon, and landing platform are unaffected by them.

143