GreenfootWorkshop Session Plan

Inspiring | Creative | FunYsbrydoledig | Creadigol | Hwyl

Event Set Up 30 minutes

Introduction

Welcome/Pre-day Forms 5 minutes (Slide 1)Introduction 30 minutes (Slides 2-14)

Progranimate

Progranimate 45 minutes (Slides 15-17)

Greenfoot

Introduction 10 minutes (Slides 18-20)Wombat World 60 minutes (Slides 21-34)

Pong! 60 minutes (Slides 35 & 36)

Shooting Game 60 minutes (Slide 37)

Crab World 60 minutes (Slide 38)

Marble Drop 60 minutes (Slides 39 & 40)

Q&A/Post-day Forms 5 minutes (Slide 41)

Event Clean Up 30 minutes

Total: 6 hours 35 minutes for attendeesTotal: 7 hours 35 minutes for staff

Workshop Schedule“By failing to prepare, you are preparing to fail.”

1

1. Computer/Laptop per participant.

2. Internet Connection.

3. Progranimate software.

4. Greenfoot software.

2

Hardware and Software Requirements

Attendee Prerequisites

1. None required - some knowledge of programming is preferable

but not necessary.

1. Identify some common mistakes whilst coding.

2. Use Greenfoot to create a game.

3. Become familiar with the Java syntax.

4. Introduction to sequencing, iteration and selection.

Learning Outcomes

Event Set Up1. Prepare any pre and post-day questionnaire forms as

required. Remember spare pens / pencils.

2. Ensure tables and chairs are arranged to naturally encourage people to sit in groups; ensure no one is sitting with their back to the podium.

3. Test display equipment (e.g. projector) and ensure that presentation and internet connection are working and ready for use.

Event Clean Up1. Ensure all pre-day and post-day questionnaire forms

have been collected if required.

2. Clear up litter and refuse. Remember to recycle where facilities exist. Remember to switch off lights, computers, and projectors!

3

Event Set Up and Clean Up

(Slides 1-4: Introductions)

“Good XXX, I’m XXX and I work for a pan-Wales organisation called Technocamps.

Has anybody heard of Technocamps before or been to one of our workshops?

We are a £6 million government funded organisation getting young adults and children aged between 11 and 19 to become excited about Computer Science and what it has to offer, in both their education and future careers.”

(Slides 5 - 7: Computers)

What do the groups know about Computers and the subject of Computer Science? Discuss this with the groups, what are their likes/dislikes about computers? Do they think that computers are smart? Computers simply follow instructions given by its user, does this make it smart? See what the group thinks about instruction giving.

(Slides 8 & 9: Why Computer Science?)

Play the video on Slide 8 to the participants, it shows a clip describing why choose Computer Science and gives an insight as to why you are teaching it today. Follow this by a discussion on Slide 9 about what jobs they think they could do in the “Computer Science” industry after watching the youtube clip on this slide.

Introduction

4

Welcome andPre-day Forms

The first 5 minutes is very much about welcoming and encouraging people to complete any pre-day forms before the workshop begins. Also ensure you read through the pre-day forms with the participants to confirm they have been filled in correctly.

Ensure that you welcome the attendees as they enter the room; this helps to create a positive connection.

IntroductionThe introduction gives you time to introduce everyone involved with hosting the workshop.

The main aim is to have everyone settled, focused, and filling required forms, e.g. pre- and post-day questionnaires.

Greenfoot

5

(Slides 10 & 11: Computer Science careers)

The participants may not be aware of the career opportunities available within the Computer Science industry, in particular what jobs the students could do if they pursued a “developer” job. This is a skill they will be introduced to today using the programming language Java to build their very own games.

(Slide 12: Object Orientated Programming)

Object Orientated programming means the programming language is based on objects, explain how useful this is to the group so segments of code do not need to be re-written over and over again. What does the group think are the benefits of this type of programming?

(Slides 13 & 14: Java Code)

The syntax can look confusing at first, but breaking down an example of basic code with the group will assist them greatly when they come to implementing their very own code. Explain classes to the group, here diagrams on a presentation board may be useful to assist with your explanation.

(Slides 15 - 17: Progranimate)

“Progranimate” is a visual programming tool, targeting beginners to programming. Users do not need to worry about syntax as it uses algorithmic problem solving in sequencing and iteration. Go to the link on the slide and ask the groups (if not already downloaded) to install onto their machines. Encourage the groups to work through the variety of problems on the website, solving them using the “Progranimate” environment. Now that the group are comfortable with algorithmic problem solving, syntax and textual programming can now be introduced using the Greenfoot development environment.

(Slides 18 - 21: Greenfoot Introductions)

Play the introductory video to the group, showing what can be achieved using the Greenfoot software. Introduce the interface, breaking down what each button does and why. Explain the class diagram and how classes and sub classes are formed and presented on Greenfoot.

(Slide 22: Act method)

Each Actor subclass has a built in “Act” method, which is run when the Act button is pressed on the main window. When the “run” button is pressed, the act method is called over and over. So instead of an actor just moving 1 step, it will move again and again, moving the Actor across the World. Ask the group to follow the instructions on the slides seeing how the “Act” method works.

Greenfoot

6

(Slide 23: Brackets)

The use of brackets are one of the more confusing parts of using textual programming rather than drag and drop, they can look very similar however they do have different uses. This slide explains the differences to bear in mind when the participants begin implementing their own code a little later on.

(Slides 24 & 25: Movement)

To begin, open up the Wombats example scenario in Greenfoot. Java has some handy built it methods that can be called, “move” is one of them. By entering the amount to move inside the round brackets and compiling, you can see the Actor will move forward. The larger the number, the larger the amount the actor moves by.

(Slide 26: Task)

Encourage the groups to experiment with the “Act” method, can they confidently edit the code to achieve the small tasks highlighted on this slide? This is an opportunity to reiterate the importance of using “;” to end lines of code and to differentiate between the different brackets.

(Slide 27: Conditional Statements)

Conditionals are an essential part of programming, in any language or environment. Understanding the concept behind implementing “IF” statements is important, offering a more event driven element of programming. To enhance the groups understanding of this you can conduct games with the participants such as “IF I put my hand up in the air, everyone with brown hair must clap, ELSE put your hands on your head”.

(Slides 28 & 29: Obstacles)

Obstacles can be used to add fun features to your game, these can be static objects or alternatively the group could have moving obstacles that deduct points off the overall score when a collision occurs. To implement an obstacle, ask the group to follow the instructions on the slides and discuss the content of the code with them and why these changes are being made to the code. This will involve implementing their own new methods, guiding them through this process and emphasising the importance of brackets and indentation is key.

Greenfoot

7

(Slide 30: Randomly moving Actors)

Encourage the group to add the following method to Wombats. In the Act method, change “turnLeft()” to “turnRandom()”:

public void turnRandom(){ int turns = Greenfoot.getRandomNumber(4); for(int i=0; i<turns; i++) { turnLeft(); }}

(Slide 31: Spinning Collectables)

Ask the group to add the following method to the Leaves:

public void turnAround(){ setRotation(getRotation()+90);}

The leaves don’t have an “Act” method, add the following:

public void act(){ turnaround();}

(Slide 32: Adding sound)

A condition could be set to tell the computer when to play a specific sound, usually this can be embedded in a method ready to be called or within an if statement such as “If Actor collides with collectable...”. Add the line on the slides into the code telling the game to play the sound file when something specific happens.

(Slide 33: Score)

Score is a fun part of developing, designing and testing a game but this requires quite a bit of implementation as below. Ask the participants to add a new actor called “Counter”. In the Wombat World under “public class WombatWorld” add the following line:

private Counter theCounter;

In the “public WombatWorld()” add the following:

theCounter = new Counter(“Leaves eaten”, 0);addObject(theCounter, 1, 1);

Greenfoot

8

In WombatWorld, add the new method as below:

public Counter getCounter(){ return theCounter;}

In Counter class, add the code below into the “Act” method:

String text=””; public Counter(String label, int value) { text = label; setValue(value); }

In same class, add a new method:

public void setValue(int newVal){ GreenfootImage img = new GreenfootImage(100, 50); img.drawString(text + “:” + newVal, 2, 20); setImage(img);}

In the Wombat class, underneath the line where the Wombat eats the leaves add the following code:

WombatWorld theWorld = (WombatWorld) getWorld(); //gets a reference to the worldCounter counter = theWorld.getCounter(); //gets a reference to the countercounter.setValue(leavesEaten);

(Slide 34: Let’s make our own game)

Here the groups have the freedom to create their own game, or make edits to the WombatWorld how they wish. Are they able to achieve some of the suggested tasks on this slide? For more information on some of java’s built in commands encourage the participants to visit the link on the bottom of this slide.

Greenfoot

9

(Slide 35: New game: PONG!)

Ask the participants to set up the new “Pong” scenario with the classes listed on Slide 35. Ask the group to insert an instance of the LeftPlayer on the left hand side of the world, an instance of the RightPlayer on the right hand side of the world, a ball in the middle and save the world! Insert the following methods into “Player”, this will allow the group to use the method in “LeftPlayer” and “RightPlayer” (note that the y axis for the game are upside down):

public void moveUp(){ setLocation(getX(), getY()-2);}

public void moveDown(){ setLocation(getX(), getY(+2);}

(Slide 36: Players)

To control the players using the keyboard keys (arrow keys for right, WASD keys for left), add the following code to the LeftPlayer and the edited “up” and “down” version for the RightPlayer:

if(Greenfoot.isKeyDown(“w”)){ moveUp();}if(Greenfoot.isKeyDown(“s”)){ moveDown();}

The following needs to be implemented to specify to the game how the users could win using LeftPlayer and RightPlayer. Implement the following in the “PongWorld” class:

public void leftWin(){ addObject(new LeftWin(), 200, 300); Greenfoot.stop;}public void rightWin(){ addObject(new RightWin(), 200, 300); Greenfoot.stop;}

Greenfoot

10

Open the LeftWin class they each created previously and enter the following code:

import greenfoot.*;import java.awt.Color;

public LeftWin(){ GreenfootImage image = new GreenfootImage(200, 200); image.setColor(new Color (255, 255, 255)); image.drawString(“Left Player Wins”, 100, 100); setImage(image);}

Open the RightWin class they each created previously and enter the following code:

import greenfoot.*;import java.awt.Color;

public RightWin(){ GreenfootImage image = new GreenfootImage(200, 200); image.setColor(new Color (255, 255, 255)); image.drawString(“Right Player Wins”, 50, 100); setImage(image);}

Open the Ball class they each created previously and enter the following code:

public void win(){ if(getX() == 0) { ((PongWorld) getWorld()).rightWin(); } if(getX() == 599) { ((PongWorld) getWorld()).leftWin(); }}

Greenfoot

11

Staying in the Ball class, add the following code to begin giving the Ball movement, this way it can knows how to respond to being touched by the left or right player:

public boolean hit(){ Player player = (Player) getOneIntersectingObject(Player.class); if(player != null) { ySpeed = (player.getY()-this.getY())/-10; xSpeed = xSpeed*-1; return true; } return false;}

public boolean ifOnEdge(){ int x = getX(); int y = getY(); if (y < 50) { ySpeed = ySpeed*-1; return true; } if (y > 350) { ySpeed = ySpeed*-1; return true; } if (y < 100 || y > 200) { if (x < 50 || x > 550) { xSpeed = xSpeed*-1; return true; } } return false;}

int xSpeed=4;int ySpeed=0;

public void act(){

Greenfoot

12

hit(); ifOnEdge(); setLocation(this.getX()+xSpeed,this.getY()+ySpeed); win();}

(Slide 37: New game: Shooting Game!)

Ask the participants to set up the new scenario with the classes listed on Slide 37. Also create 2 subclasses from “World” called deadWorld and spaceWorld. “deadWorld” is an end screen containing “You are Dead” that the group should draw themselves and upload the image to the scenario. To begin, in the laser class you need to resize the laser image and then tell the laser how to act using the code below:

public laser(){ this.getImage().scale(10,10);}

public void move(){ if (this.getX() == getWorld().getWidth()=1) { getWorld().removeObject(this); } else { super.setLocation(this.getX()+5, this.getY()); }}

Don’t forget to call the move method in the act method. Next, the group are to add an initialised rocket to the constructor for the SpaceWorld():

Rocket rocket = new Rocket();addObject(rocket, 50, 200);

Add keyboard control for the rocket, open up the rocket class and once more don’t forget to call the following method in the act method:

public void keyboard(){ if(Greenfoot.isKeyDown(“right”)) { setLocation(getX()+2, getY()); }

Greenfoot

13

if(Greenfoot.isKeyDown(“left”)) { setLocation(getX()-2, getY()); } if(Greenfoot.isKeyDown(“up”)) { setLocation(getX(), getY()-2); } if(Greenfoot.isKeyDown(“down”)) { setLocation(getX(), getY()+2); }}

Also in the rocket class, add the following instruction to shoot the laser:

public void shoot(){ if(Greenfoot.isKeyDown(“space”)) { getWorld().addObject (new Laser(), getX()+48, getY()-2); }}

Next, open the alien class. The participants will now need to tell the aliens how to act - don’t forget to add “move” in the act class:

public void move(){ if(this.getX() == 0) { getWorld().removeObject(this); } else { super.setLocation(this.getX()-5, this.getY()); }}

To populate the World with Aliens, add the following code in “SpaceWorld” under a new Act method:

if(Greenfoot.getRandomNumber(150) < 5){ addObject(newAlien(), this.getWidth()-1, Greenfoot.getRandomNumber(this.getHeight()));}

Greenfoot

14

Add a hit class in Laser, Aliens and Rocket so they all know how to respond when they have been hit:

public void hit(){ getWorld().removeObject(this);}

To get the laser to see if it has hit an Alien, the following code needs to be added. If it has, then the Laser and Alien need to be removed from the World. The Rocket also needs to know if it has hit an Alien. Add the following code to Laser and Rocket, in addition to adding “isHit()” to the Act methods:

public void isHit(){ Alien alien = (alien) getOneIntersectingObject(Alien.class); if(alien != null) { alien.hit(); hit(); } }

Edit the code for the Rocket class so that you can have a game over, change “alien.hit();” to “gameOver()”. Next, add the following code for the new gameOver method in the Rocket class:

public void gameOver(){ DeadWorld deadWorld = new DeadWorld(); Greenfoot.setWorld(deadWorld);}

(Slide 38: New game: Crab Game!)

This demonstration game is based on the example on the tutorial on the Greenfoot website. The aim is to use left and right arrows to control the crab as it collects and eats the worms that appear in the World. After downloading the zip file from the link below, the participants should be able to confidently follow this example:

http://www.greenfoot.org/doc/tut-2

Greenfoot

15

(Slide 39: New game: Marble Drop!)

The aim of this game is to guide a marble left and right with the mouse to try and fall through the gaps in the floors which are moving up the screen. Ask participants to set up the world according to the list of classes required on Slide 39. Initially, ask the group to set the size of the world to 700 x 500 and add a marble to the centre of the screen using the code below:

public MarbleWorld(){ super(700, 500, 1); Marble marble = new Marble(); addObject(marble, 350, 250);}

To get the marble to slowly fall down the screen and move left and right with the mouse pointer, add the following code to the Marble class:

public void fallDownScreenAndFollowMouse(){ setLocation(this.getX(), this.getY()+5); MouseInfo mouse = Greenfoot.getMouseInfo(); if (mouse != null) { setLocation(mouse.getX(), this.getY()); } }

To add new floors to the World at random intervals add the following code:

public long last = 0;public void addNewFloors(){ if(Greenfoot.getRandomNumber(100)<10) { if(System.currentTimeMillis()-last>1000) { last = System.currentTimeMills(); getWorld().addObject(new Floors(), 350, 500); } }}

Greenfoot

16

Add the following code for if the Marble collides with a floor moving up the screen rather than falling down through the gap:

import java.awt.Color;public void floorCollisions(){ Actor floor = getOneIntersectingObject(Floors.class); if (floor != null) { if(floor.getImage().getColorAt(this.getX(),10).equals(new Color(255,0,0))) { } }}

To actually create the floors (a red line across the screen with a random gap in the middle), add the following code to the “Floors” class:

import java.awt.Color;public int gapWidth = 100;public int gapPos = 0;public Floors(){ gapPos = Greenfoot.getRandomNumber(600); GreenfootImage image = new GreenfootImage(700, 20); image.setColor(new Color(255, 0, 0)); image.drawRect(0, 0, gapPos, 20); image.fillRect(0, 0, gapPos, 20); image.drawRect(gapPos + gapWidth, 0, 700-gapPos, 20); image.fillRect(gapPos + gapWidth, 0, 700-gapPos, 20); setImage(image);}

In the same class, add the following code to get the floors to move up the screen and disappear when they reach the top of the World:

public int floorSpeed = 3;public void moveUpScreenAndDisappearAtTop(){ setLocation(this.getX(), this.getY()-floorSpeed()); if(this.getY()<10) { getWorld().removeObject(this); }}

Greenfoot

17

(Slide 40: Let’s make our own game)

Similar to Slide 34, the groups have the freedom to create their own game, or make edits to the Worlds how they wish. Are they able to achieve some of the suggested tasks on this slide? For more information on some of java’s built in commands encourage the participants to visit the link on the bottom of this slide.

(Slide 41: Post-day Questionnaires)

Ensure these are correctly completed and submitted to the person running the Technocamps session.

(Take several questions from the attendees)(If no questions are asked by attendees, begin summarising topics covered)

Once an appropriate number of questions has been taken, you can then begin to close the workshop. Be sure to have any post-day questionnaire forms filled in by attendees as required. Some audiences may require more prompting to fill in such forms.

Q&A Session & Closure

18

Closure and Post-day Forms

The last 5 minutes of closure must be used to, if required, ensure that post-day questionnaires are filled in by the attendees and talk them through the information they have filled in. Ensure that you collect all of the post-day form in before attendees depart, and be sure to thank each person for taking the time to fill in the forms.

APPROPRIATE_IMAGEREPRESENTING_WORKSHOP

(REMOVE BORDER)

APPROPRIATE_IMAGEREPRESENTING_WORKSHOP

(REMOVE BORDER)

APPROPRIATE_IMAGEREPRESENTING_WORKSHOP

(REMOVE BORDER)

www.technocamps.com