1. Chapter 8 – Mouse Input, Images and Sound

2. 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.

3. Creating an empty MyScenario Click on Scenarios and Click New Enter MyScenario as the Name and Click Create

4. MyScenario

5. Creating a New MyWorld Right Click on World and Click New subclass...

6. Creating MyWorld Name the subclass MyWorld and select the “sand.jpg” Background

7. MyWorld with Cells in a Grid Press the Compile Button

8. Changing the Background Right Click on MyWorld() and Click Set Image… and this time Choose“sand2.jpg”

9. MyWorld without Cell Borders

10. MyWorld 600 x 400 x 1

11. Adding an Actor Right Click on Actor and Click New subclass…

12. Adding a Turtle Actor

13. 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

14. The Turtle in MyWorld

15. Actor Positioning Methods

16. 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

17. The Greenfoot Class

18. The Greenfoot Methods

19. mousePressed and mouseClicked

20. 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)

21. 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); }

22. Move on Mouse Click Click anywhere in the World and the Turtle moves to the right

23. Add 3 Randomly Placed Turtles 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(), Greenfoot.getRandomNumber(600), Greenfoot.getRandomNumber(400)); addObject (new Turtle(), Greenfoot.getRandomNumber(600), Greenfoot.getRandomNumber(400)); addObject (new Turtle(), Greenfoot.getRandomNumber(600), Greenfoot.getRandomNumber(400)); }

24. Move on Mouse Click All Turtles move on Mouse Click

25. 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); }

26. Move only the Turtle clicked Must Click on the Turtle to make the Turtle move to the right

27. 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.

28. 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); }

29. Working with Sound Click on the Turtle to play a sound file

30. 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

31. 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.

32. 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.

33. 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).

34. 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.

35. 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.

36. 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); }

37. 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); }

38. 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 board to be faded

39. 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); }

40. Randomizing Colors/Alpha 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); }

41. Random Sizes and Colors

42. 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.

43. 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.

44. 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.png Actor “Ball”: 3Dball.png Background image: faded.jpg

45. 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(); }

46. 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

47. 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); }

48. The SmokeBall Scenario

49. 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(); }

50. 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); }

51. 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()); }

52. Too Much Smoke Too much Smoke

53. 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

54. Add Smoke Delay /* * Act. Move and produce smoke. */ public void act() { makeSmoke(); setLocation (getX() + deltaX, getY() + deltaY); checkWalls(); } Adding Smoke Behind The Ball

55. The Smoke Effect

56. 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.

57. Summary