Chapter 8 – Mouse Input, Images and

Sound

Chapter 8 - Content

In contrast to previous chapters, we will not build a complete scenario in this chapter but work through various smaller exercises that illustrate separate techniques that can then be incorporated into a wide variety of different scenarios.

Creating an empty MyScenario

Click on Scenarios

and Click NewEnter MyScenario

as the Nameand Click Create

MyScenario

Creating a New MyWorld

Right Click on Worldand Click New

subclass...

Creating MyWorldName the subclass

MyWorldand select the

“sand.jpg” Background

MyWorld with Cells in a Grid

Press the Compile Button

Changing the Background

Right Click on MyWorld()

and Click Set Image…

and this timeChoose“sand2.jpg”

MyWorld without Cell Borders

MyWorld

600 x 400 x 1

Adding an Actor

Right Click on Actorand Click New

subclass…

Adding a Turtle Actor

Adding Turtle to the World

public class MyWorld extends World{

/* * Constructor for objects of class MyWorld. * */ public MyWorld() { // Create a new world 600 x 400 cell size 1 pixel. super(600, 400, 1); addObject (new Turtle(), 300, 200); }}

Create a Turtle Object and add it to the center

of the World

The Turtle in MyWorld

Actor Positioning Methods

Moving the Turtle

public class Turtle extends Actor{ /* * Act - do whatever the Turtle wants to do. * This method is called whenever the 'Act' or 'Run' * button gets pressed in the environment. */ public void act() { int x = getX(); int y = getY(); setLocation (x+10, y); } }

Get our current location and add 10 to

the x coordinate

The Greenfoot Class

The Greenfoot Methods

mousePressed and mouseClicked

mousePressed and mouseClicked

mousePressed The mouse button was pressed on an object. It is not necessary to release it.

mouseClicked The mouse was clicked on and object (pressed and released)

Move on Mouse Click

public void act() { if (Greenfoot.mouseClicked(null)) move(); }

private void move() { int x = getX(); int y = getY(); setLocation (x+10, y); }

Move on Mouse Click

Click anywhere in the World and the Turtle moves to the right

Add 3 Randomly Placed Turtlespublic class MyWorld extends World{ /* * Constructor for objects of class MyWorld. * */ public MyWorld() { // Create a new world 600 x 400 cell size 1 pixel. super(600, 400, 1);

addObject (new Turtle(), Greenfoot.getRandomNumber(600), Greenfoot.getRandomNumber(400)); addObject (new Turtle(), Greenfoot.getRandomNumber(600), Greenfoot.getRandomNumber(400)); addObject (new Turtle(), Greenfoot.getRandomNumber(600), Greenfoot.getRandomNumber(400)); }}

Move on Mouse Click

All Turtles move on Mouse Click

Move only the Turtle clicked

public void act() { if (Greenfoot.mouseClicked(this)) move(); }

private void move() { int x = getX(); int y = getY(); setLocation (x+10, y); }

Move only the Turtle clicked

Must Click on the Turtle to make the Turtle move to the right

Working with Sound

The Greenfoot class has a playSound method that we can use to play a sound file. To be playable, the sound file must be located in the sounds folder inside the scenario folder.

Move only the Turtle clicked

public void act() { if (Greenfoot.mouseClicked(this)) {

Greenfoot.playSound(“bark1.wav"); move();

} }

private void move() { int x = getX(); int y = getY(); setLocation (x+10, y); }

Working with Sound

Click on the Turtle to play a sound file

Using other programs (such as Audacity), you can record and edit whatever sounds you want to use. When using the Greenfoot.playSound() method, however, only AIFF, AU and WAV sounds are supported. It might be necessary to convert sound files, before using them in Greenfoot.

Sound Recording and Editing

Extra: Complex Mouse-Input

public void act() { if (Greenfoot.mouseClicked(this)) { int mouseButton = Greenfoot. getMouseInfo(). getButton(); if(mouseButton == 1) Greenfoot.playSound("bark1.wav"); if(mouseButton == 3) Greenfoot.playSound("bark2.wav"); } }

We can get more information about Mouse-Inputs by accessing a MouseInfo-Object. For example, the getButton()-method returns (as an integer value) which button has been pressed.

Images Creation and Editing

Managing images for actors and world backgrounds can be achieved in two different ways. We can use prepared images from files and other Graphics Editing program, or we can draw an image on the fly in our program.

Drawing Images

The color value is split into three components; the red, green, and blue component. Colors represented this way are usually referred to as RGB colors. This means that we can represent each pixel with color and transparency in four numbers:

(R, G, B, A)The first three define Red, Green, and Blue components in that order and the last is the Alpha value. The values are in the range 0 to 255, where 0 indicates no color and 255 indicates full strength. An Alpha value of 0 is fully transparent (invisible), while 255 is opaque (solid).

Creating Colors

(255, 0, 0, 255) Red and Solid( 0, 0, 255, 128) Blue and Half Transparent(255, 0, 255, 230) Magenta and Mostly Solid

For a comprehensive overview of color-codes in RGB notation, see the “color-table.html” on D2L, in the “Additional Material” folder.

Creating Color Images

Create a scenario called Color-Test with a 400x400 World called “ColorTest” and an Actor called “ColorPatch”.

Neither class should have a default image.

ColorPatch/* * Write a description of class ColorPatch here. * * @author (your name) * @version (a version number or a date) */public class ColorPatch extends Actor{ /* * Create a square color patch using rgb values. */ public ColorPatch (int r, int g, int b) { GreenfootImage img = new GreenfootImage (50, 50); img.setColor (new java.awt.Color(r, g, b, 255)); img.fill(); setImage (img); }}

The ColorTest Constructor

public ColorTest(){ super(400, 400, 1);

for (int x = 0; x < 8; x++) { for (int y = 0; y < 8; y++) {

ColorPatch square = new ColorPatch (0, 0, 0); addObject (square, x*50 + 25, y*50 + 25); } }}

Faded ColorPatch * * Write a description of class ColorPatch here. * * @author (your name) * @version (a version number or a date) */public class ColorPatch extends Actor{ /* * Create a Checkers or Chess Board pattern. */ public ColorPatch (int r, int g, int b) { GreenfootImage img = new GreenfootImage (50, 50); img.setColor (new java.awt.Color(r, g, b,128)); img.fill(); setImage (img); }}

Causes the boardto be faded

Randomizing the Patch Sizes

public class ColorPatch extends Actor{ /* * Create a Checkers or Chess Board pattern. */ public ColorPatch (int r, int g, int b, int a) { GreenfootImage img = new GreenfootImage ( Greenfoot.getRandomNumber (100)+1, Greenfoot.getRandomNumber (100)+1); img.setColor (new java.awt.Color(r, g, b, 128)); img.fill(); setImage (img); }}

Randomizing Colors/Alphapublic ColorTest(){ super(400, 400, 1);

for (int x = 0; x < 8; x++) { for (int y = 0; y < 8; y++) { int r = Greenfoot.getRandomNumber(256); int g = Greenfoot.getRandomNumber(256); int b = Greenfoot.getRandomNumber(256); int a = Greenfoot.getRandomNumber(256);

ColorPatch square = new ColorPatch (r, g, b, a); addObject (square, x*50 + 25, y*50 + 25); } }}

Random Sizes and Colors

Combining Images Files andDynamic Drawings

Some of the most interesting visual effects are achieved when we combine static images from files with dynamic changes made by our program. We can for example, start with a static image file, and then paint onto it with different colors, or scale it up or down, or let it fade by changing its transparency.

Creating Dynamic Drawings

Create a scenario called “SmokeBall” with a 420x360 World called “Box”, an Actor called “Ball”, and another Actor called “Smoke”.

This scenario will demonstrated how to use fixed images to create more advanced visual effects.

Creating Dynamic Drawings

We will use custom images for all classes of this scenario. You can find the these images on D2L in the Greenfoot Scenarios folder.

Actor “Smoke”: smoke.pngActor “Ball”: 3Dball.pngBackground image: faded.jpg

The Ball Class (Pt. 1)public class Ball extends Actor{ private int deltaX; // x movement speed private int deltaY; // y movement speed /* * Create a ball with random movement. */ public Ball() { deltaX = Greenfoot.getRandomNumber(11) - 5; deltaY = Greenfoot.getRandomNumber(11) - 5; } /* * Act. Move and produce smoke. */ public void act() { setLocation (getX() + deltaX, getY() + deltaY); checkWalls(); }

The Ball Class (Pt. 2)

/* * Check whether we've hit one of the walls. Reverse direction if necessary. */ private void checkWalls() { if (getX() == 0 || getX() == getWorld().getWidth()-1) { deltaX = -deltaX; } if (getY() == 0 || getY() == getWorld().getHeight()-1) { deltaY = -deltaY; } }}

If we are at a wall on the x-axis,

reverse x-direction

If we are at a wall on the y-axis,

reverse y-direction

The Box World

public class Box extends World{ /* * Construct the box with a ball in it. */ public Box() { super(460, 320, 1); addObject( new Ball(), getWidth() / 2, getHeight() / 2); }}

The SmokeBall Scenario

The Smoke Class (I)public class Smoke extends Actor{ private GreenfootImage image; // the original image private int fade; // the rate of fading

public Smoke() { image = getImage(); fade = Greenfoot.getRandomNumber(4) + 1; // 1 to 4 } /* * In every step, get smaller until we disappear. */ public void act() { shrink(); }

The Smoke Class (II) /* * Make the image of this actor a little smaller. If it gets very small, * delete the actor. */ private void shrink() { if (getImage().getWidth() < 10) { getWorld().removeObject(this); } else { GreenfootImage img = new GreenfootImage(image); img.scale ( getImage().getWidth()-fade, getImage().getHeight()-fade ); img.setTransparency ( getImage().getTransparency() - (fade*5) ); setImage (img); } }}

The Ball Class /* * Act. Move and produce smoke. */ public void act() { makeSmoke(); setLocation (getX() + deltaX, getY() + deltaY); checkWalls(); }

/* * Put out a puff of smoke. */private void makeSmoke(){ getWorld().addObject ( new Smoke(), getX(), getY());}

Too Much Smoke

Too much Smoke

Add Smoke Delay

private int count = 2;

/* * Put out a puff of smoke (only on every second call). */private void makeSmoke(){ count--; if (count == 0) { getWorld().addObject ( new Smoke(), getX(), getY()); count = 2; }}

Add some delay for the

Smoke

Add Smoke Delay

/* * Act. Move and produce smoke. */ public void act() { makeSmoke(); setLocation (getX() + deltaX, getY() + deltaY); checkWalls(); }

Adding Smoke BehindThe Ball

The Smoke Effect

Summary

Being able to produce and use sounds and images is a very valuable skill for producing good looking games, simulations, and other graphical applications. By combining images from a file with dynamic image operations, such as scaling and transparency changes, we can achieve attractive visual effects in our scenarios.

Summary