Greenfoot

From CompSciWiki
Revision as of 16:56, 4 April 2012 by AndrewS (Talk | contribs)

Jump to: navigation, search

COMP 1010 Home > Back to Extra Labs

Introduction

This lab is an introduction to Greenfoot. Greenfoot is an interactive tool for building Java programs using a mixture of programming and interactivity. With Greenfoot, you are able to get a 2D graphic program up and running much faster than you would using regular Java.

To familiarize you with Greenfoot, we will show you how to build a simple Breakout game.

Step 0: Starting a New Scenario

Once you have Greenfoot open, the first thing you have to do is open a new scenario. To do this, follow these steps:

  1. Click on the "Scenario" menu tab at the top left of the window.
  2. Select "New..." from the list of options.
  3. Choose "Breakout" for your project name.
  4. Save project to either your own folder or the desktop so it is easy to find.
  5. Click "Create" to finish making your project.

Step 1: Making a New World

Now that you have a blank scenario open the next thing you have to do is add a new world for your game to exist in.

  1. Right click on the "World" button on the right side of the window.
  2. Select "New subclass..." from the list.
  3. Name this class "MyWorld"
  4. Select the image "bathroom-tile.jpg" from the "background" catagory. This will be the main background of your game.
  5. Click "Ok" to finish creating this class.
  6. Press the "Compile" button on the bottom right hand side.

Notice how nothing changed before you pressed the compile button? The compile button is like a save button, none of the changes you make will take effect until you compile your program.

Step 2: Adding a Paddle

Setting Up the Paddle Class

First, right-click the following image and select Save As... and save it in the folder where you created your Greenfoot program.

PaddleV2.jpg

On the right-hand side of your Greenfoot window, there are two boxes: One under "World classes" called "World" and another under "Actor classes" called "Actor".

Right-Click "Actor" and select "New subclass..."

Name your subclass Paddle by entering it into the New class name textbox. Now, for the image, click the "Import from file..." box in the bottom-left of this window. Find and select the PaddleV2.jpg file you just saved.

Press OK on that window to close it and create the new subclass.

Moving the Paddle

Select the "Paddle" box, which is now located under the "Actor" box on the right-hand side, and select "new Paddle()". When you do this, you'll now see the image of the paddle following your mouse cursor. You can now place the paddle in the game screen by clicking anywhere within it. You can also do this by selecting the Paddle box, holding the shift key, and pressing anywhere in the game window,

Right now, if you click "Act" or "Run" on the game screen window after adding a paddle to it and press the left and right arrow keys, nothing happens. This isn't very game-like. We want our paddle to move around!

To do this, we need to add code to the Paddle class so it can control its own actions.

Right-click the "Paddle" box in the Actor classes box of the main window and select "Open editor", just like you did to change the code in MyWorld.

This opens up an editor with the following:

 ...

public class Paddle extends Actor
{
    /**
    * Act - do whatever the Paddle wants to do. This method is called whenever
    * the 'Act' or 'Run' button gets pressed in the environment.
    */
    public void act()
    {
        // Add your action code here
    }
} 

The comments in this code tell it all -- if you want your paddle to do anything, you have to add your code within the act() method. Change it so it looks like:

 public void act()
{
    if (Greenfoot.isKeyDown("left"))
    {
        setLocation(getX() - 3, getY());
    }
    else if (Greenfoot.isKeyDown("right"))
    {
        setLocation(getX() + 3, getY());
    }
} 

Let's break this code down:

 if (Greenfoot.isKeyDown("left"))
{
    ...
} 

This says that, when the user is pressing the "left" key, which is the left arrow on your keyboard, then do the code that is in it's block. The block:

 else if (Greenfoot.isKeyDown("right"))
{
    ...
} 

Does the exact same thing, except when the "right" key is pressed.

These two blocks contain:

 setLocation(getX() - 3, getY());
...
setLocation(getX() + 3, getY()); 

These both change the location of the Paddle object, except one has "getX() - 3" while the other has "getX() + 3". This means that one moves the Paddle to the left of it's current X position by 3 and the other to the right by 3. Try changing these values and even flipping them around to see how it changes your Paddle!

To test the changes, compile the code, press "Run" on the main window, and press your right and left keys. The paddle now moves!

Step 3: Creating a Bouncing Ball

To add a ball to your game you will need to create a new actor. Follow these steps:

  1. Right click on the "Actor" button
  2. Select "New subclass..." from the list of options.
  3. Name this class "Ball"
  4. Find and select the image "ball.png" from the "objects" catagory
  5. Press "Ok" to create the class.

Add a ball to your game

Before you can add the ball to your game you must first write the constructor. Add the following code above the act() method in the "Ball" file.

 private boolean left;
private boolean right;
private boolean up;
private boolean down;
private boolean gameOver;
public Ball()
{
     left = true;
     up = true;
     down = false;
     right = false;
     gameOver = false;
} 

The variables left, up, down, and right keep track of which direction the ball is in. A true value indicates that the ball is moving in that direction. After you compile your project you will be able to add a ball to your game.To do this, right click on the "Ball" button on the main screen and select "new Ball()" and drag the new ball onto your game screen.

Make the ball move

To move the ball we are going to use a method called setLocation(aNumber,aNumber). This method will move the object to the specified coordinates. To get the current coordinates of the ball we use getX() and getY(). So you can get the x and y coordinates of the object then add or subtract from these values to move them. Add the following code to the act() method within the "Ball" source file:

 //if the ball is moving up and to the right
if(up == true && right == true){
     setLocation(getX() + 1, getY() - 1);
}
//if the ball is moving up and the left
else if(up == true && left == true){
     setLocation(getX() - 1, getY() - 1);
}
//if the ball is moving down and to the right
else if(down == true && right == true){
     setLocation(getX() + 1, getY() + 1);
}
//if the ball is moving down and to left
else if(down == true && left == true){
     setLocation(getX() - 1, getY() + 1);
} 

The above code checks which direction the ball is currently moving in and keeps the ball moving in that direction. This will make the ball move but as soon as it hits a wall it will stop. You will have to add methods to check if the ball is at a wall and if it is, change the direction of the ball.

Check if the ball is at a wall

We need to check if the ball is at a wall so we can switch it's direction. We use getX() and getY() to determine the ball's location. If getX() is less then 10, the ball is at the left side of the screen and if it is greater than 590, it is at the right side of the screen. Remember the width of the screen is 600 pixels where the left most coordinate is 0 and the right most coordinate is 600. The top of the screen has a coordinate of 0 so if getY() is less than 5 we know the ball is at the top of the screen. Add the following code to the act() method in the "Ball" source file:

 if(getX() <= 10){
     right = true;
     left = false;
}
if(getX() >= 590){
     left = true;
     right = false;
}
if(getY() < 5){
     up = false;
     down = true;
} 

Step 4: Breaking Bricks

Step 5: Adding Actors to Your Game

To add bricks to the game we first need to create a brick class. To do this, follow these steps:

  1. Right click on the "Actor" button on the right side.
  2. Select "New subclass.." from the list.
  3. Name this class Bricks.
  4. Select the image "brick.png" from the "objects" catagory.
  5. Click "Ok" to finish creating this class.
  6. Compile your program.

Now if you want to add a brick to your game you can either add the bricks one at a time by dragging and dropping them or use code to add many.

Add bricks using drag and drop

  1. Right click on the "Ball" icon on the main project screen.
  2. Select "new Ball()" from the list of options.
  3. Drag the item onto your background and click again to place the item.


Full Example

If you were unable to get your game working the full example is available for download here.