Chapter 8 - Creating Images and
Sound
Bruce Chittenden
8.1 Preparation
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.
Exercise 8.1
Click on Scenarios
and Click New
Enter a Name
and Click Create
Exercise 8.1
Exercise 8.2
Right Click on World
and Click New subclass
Exercise 8.2
Name the subclass MyWorld
and select a Background
Exercise 8.2
Exercise 8.3
400 x 300 x 1
Exercise 8.3
Exercise 8.4
Exercise 8.5
public class MyWorld extends World
{
Create a Turtle Object and add it
to the center of the World
/*
* Constructor for objects of class MyWorld.
*
*/
public MyWorld()
{
// Create a new world 400 x 300 cell size 1 pixel.
super(400, 300, 1);
addObject (new Turtle(), 200, 150);
}
}
Exercise 8.5
Exercise 8.6
Exercise 8.6
public class Turtle extends Actor
Get our current location and add
{
10 to the x coordinate
/*
* 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);
}
}
Exercise 8.6
Exercise 8.7
Exercise 8.7
Exercise 8.7
Exercise 8.8
mousePressed
The mouse button was pressed and held on an object
(pressed and not released)
mouseClicked
The mouse was clicked on and object
(pressed and released)
Exercise 8.9
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()
{
if (Greenfoot.mouseClicked(null))
move();
}
private void move()
{
int x = getX();
int y = getY();
setLocation (x+10, y);
}
}
Exercise 8.9
Click anywhere in the World and
the Turtle moves to the right
Exercise 8.10
public void act()
{
if (Greenfoot.mouseClicked(this))
move();
}
private void move()
{
int x = getX();
int y = getY();
setLocation (x+10, y);
}
Exercise 8.10
Must Click on the Turtle to make
the Turtle move to the right
Exercise 8.11
public class MyWorld extends World
{
/*
* Constructor for objects of class MyWorld.
*
*/
public MyWorld()
{
// Create a new world 400 x 300 cell size 1 pixel.
super(400, 300, 1);
addObject (new Turtle(), Greenfoot.getRandomNumber(401), Greenfoot.getRandomNumber(301));
addObject (new Turtle(), Greenfoot.getRandomNumber(401), Greenfoot.getRandomNumber(301));
addObject (new Turtle(), Greenfoot.getRandomNumber(401), Greenfoot.getRandomNumber(301));
}
}
Exercise 8.11
Must Click on the individual
Turtle to make the that Turtle
move to the right
8.2 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.
Exercise 8.12
/*
* 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()
{
if (Greenfoot.mouseClicked(this))
Greenfoot.playSound("Coyote.wav");
}
Exercise 8.12
Click on the Turtle to play a
sound file
8.3 Sound Recording and Editing
This section involves recording and editing
sounds using a sound editing program. If you
want to do the exercises in this section you can
use any sound editing program or you can
download an Open Source sound editor called
Audacity from
http://audacity.sourceforge.net/
8.4 Sound File Formats and File Sizes
This section involves recording and editing
sounds using a sound editing program. If you
want to do the exercises in this section you can
use any sound editing program or you can
download an Open Source sound editor called
Audacity from
http://audacity.sourceforge.net/
8.5 Working with Images
Managing images for actors and world
backgrounds can be achieved in two different
ways. We can use prepared images from files, or
we can draw an image on the fly in our program.
8.6 Image Files and File Formats
This section involves creating and editing images
using an image editing program. If you want to
do the exercises in this section then you can use
Photoshop or download an Open Source image
editor called gimp from
http://www.gimp.org/
8.7 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 that are:
(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).
Color Chart
Exercise 8.29
(255, 0, 0, 255)
( 0, 0, 255, 128)
(255, 0, 255, 230)
Red and Solid
Blue and Half Transparent
Magenta and Mostly Solid
Exercise 8.30
public ColorTest()
{
super(400, 400, 1);
boolean black = true;
Exercise 8.30 (continued)
for (int x = 0; x < 8; x++)
{
if (black) //alternate colors at the start of each column
black = false;
else
black = true;
for (int y = 0; y < 8; y++)
{
if (black) // alternate colors
{
ColorPatch blackSquare = new ColorPatch (0, 0, 0);
addObject (blackSquare, x*50 + 25, y*50 + 25);
black = false;
}
else
{
ColorPatch redSquare = new ColorPatch (255, 0, 0);
addObject (redSquare, x*50 + 25, y*50 + 25);
black = true;
}
}
}
Exercise 8.30 (continued)
*
* 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));
img.fill();
setImage (img);
}
}
Exercise 8.30
Exercise 8.31
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, a));
img.fill();
setImage (img);
}
}
Exercise 8.31 (continued)
public 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);
}
}
}
Exercise 8.31
Exercise 8.32
public ColorPatch (int r, int g, int b, int a)
{
int x = Greenfoot.getRandomNumber(100) + 1;
int y = Greenfoot.getRandomNumber(100) + 1;
GreenfootImage img = new GreenfootImage (x, y);
for (int i=0; i<100; i++)
{
img.setColor (new java.awt.Color(r, g, b, a));
int xi = Greenfoot.getRandomNumber(x + 1);
int yi = Greenfoot.getRandomNumber(y + 1);
img.fillOval(xi, yi, 4, 4);
setImage (img);
}
}
Exercise 8.32
8.8 Combining Images Files and Dynamic 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.
Exercise 8.33
// Number of Squares in each row and column
public static final int NUMBER = 12;
// Size of the Square in pixels
public static final int SIZE = 30;
// Color and Transparency for the Darker Square
private static final int BLACKR = 119;
private static final int BLACKG = 136;
private static final int BLACKB = 153;
private static final int BLACKA = 100;
// Color and Transparency for the Lighter square
private static final int WHITER = 255;
private static final int WHITEG = 255;
private static final int WHITEB = 255;
private static final int WHITEA = 255;
Exercise 8.33
public Board()
{
super(NUMBER*SIZE, NUMBER*SIZE, 1);
boolean black = true;
for (int x = 0; x < NUMBER; x++)
{
if (black) // alternate colors at the start of each column
black = false;
else
black = true;
This method is fully
parameterized to generate
any size board, with any
number of squares, with any
to color combinations
for (int y = 0; y < NUMBER; y++)
{
if (black) // alternate colors
{
CreateSquare blackSquare = new CreateSquare (BLACKR, BLACKG, BLACKB, BLACKA);
addObject (blackSquare, x*SIZE + SIZE/2, y*SIZE + SIZE/2);
black = false;
}
else
{
CreateSquare whiteSquare = new CreateSquare (WHITER, WHITEG, WHITEB, WHITEA);
addObject (whiteSquare, x*SIZE + SIZE/2, y*SIZE + SIZE/2);
black = true;
}
}
}
Exercise 8.33
Exercise 8.34
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);
}
}
Exercise 8.34
public class Ball extends Actor
{
private int deltaX;
// x movement speed
private int deltaY;
// y movement speed
private int count = 2;
/*
* 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()
{
move();
}
Exercise 8.34
/*
* Move the ball. Then check whether we've hit a wall.
*/
public void move()
{
setLocation (getX() + deltaX, getY() + deltaY);
checkWalls();
If we are at a wall on the
}
x-axis reverse direction
/*
* 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;
}
}
}
Exercise 8.34
Exercise 8.35
public class Smoke extends Actor
{
private GreenfootImage image; // the original image
public Smoke()
{
image = getImage();
}
Exercise 8.35
Exercise 8.36
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
if (fade > 3) {
fade = 2; // change 4 to 2, to have double probability for 2
}
}
/*
* In every step, get smaller until we disappear.
*/
public void act()
{
shrink();
}
Exercise 8.36
/*
* 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);
}
}
}
Exercise 8.36
Too much Smoke
Exercise 8.37
/*
* Put out a puff of smoke (only on every second call).
*/
private void makeSmoke()
Add some delay
{
for the Smoke
count--;
if (count == 0) {
getWorld().addObject ( new Smoke(), getX(), getY());
count = 2;
}
}
Exercise 8.37
Exercise 8.38
public Smoke()
{
image = getImage();
fade = Greenfoot.getRandomNumber(4) + 1; // 1 to 4
if (fade > 3) {
fade = 2; // change 4 to 2, to have double probability for 2
}
}
Fade is a Random
Number 0, 1, 2, 2, 3
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);
}
}
Exercise 8.38
8.9 Summary
Being able to product 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.
8.9 Concept Summary