1. CSE 219 Computer Science III Images

2. HW1 Has been posted on Blackboard http://blackboard.stonybrook.edu/ Making a Game of Life with limited options

3. Data Files for Risk Game In order to make the game we’ll need 2 things: –a color-coded map image all pixels unique color for each territory –a text file describing the map. Like what? unique color for each territory borders of all territories territory-continent mappings value of each continent card info x, y location on map of where to draw army text

5. What do we need to do with images? Draw images Detect where on image mouse click occurs Determine precise color of pixel on image –Why? Change all pixels in a territory from one color to another –Why?

6. Risk Game Question How can we use an image such that: –each territory has its own unique color (to determine which territory is being clicked) –AND –change color of territory to denote player ownership?

7. Solution Use 2 images –one to be changed and redrawn as game changes denoting which player owns which territories –one that never changes These 2 images must be the same dimensions of course Easiest approach? –load the map image into an object –copy the object –one for changing, one for not changing

8. Drawing with Java We’ll draw on JPanel s because they’re blank Steps involved: –define a class that extends JPanel –your instance variables will store drawing data images, shape coordinates, text locations, etc… –override the paintComponent method (inherited from JComponent) specify all drawing here

9. public class MyDrawingPanel extends JPanel { // INSTANCE VARIABLES NEEDED // FOR DRAWING … // MUTATOR METHODS NEEDED // FOR CHANGING DRAWING CONDITIONS … public void paintComponent(Graphics g) { // code for drawing will go here }

10. The paintComponent method Every Swing object has a Graphics context Can be used to draw new things on a component Each time a frame is re-drawn –its paintComponent is called –the paintComponent methods of all components contained inside are called –and so on What do you think JButton ’s paintComponent method does? –draws a rectangle and text and/or image on itself –we could make our own weird JButton

11. MyWeirdButton public class MyWeirdButton extends JButton { public MyWeirdButton(String command) { super(command); } public void paintComponent(Graphics g) { super.paintComponent(g); g.setColor(new Color(255,0,0)); for (int i = 0; i < this.getWidth(); i++) for (int j = 0; j < this.getHeight(); j++) { if (((i%10)==0) && ((j%10)== 0)) g.fillOval(i, j, 3, 3); }

12. So when do you think paintComponent is called? When window is: –first displayed –resized –moved Or when components are added and/or removed from GUI Or, when we want to –something changes and we want to update screen –call repaint to force redrawing (after events) NOTE: never call the paintComponent method yourself –repaint does so for you

13. Graphics A Graphics object remembers a collection of settings for drawing images and text, such as the font you set or the current color All drawing in Java must go through a Graphics object. Measurement on a Graphics object for screen display is done in pixels The (0, 0) coordinate denotes the top-left corner of the component on whose surface you are drawing

14. Some Methods of Graphics Class Display –drawImage –drawString –drawLine –drawRect –fillRect –drawOval –fillOval Graphics context –setColor –setFont

15. Drawing shapes with Graphics drawRect(int x, int y, int width, int height) fillRect(int x, int y, int width, int height) drawOval(int x, int y, int width, int height) fillOval(int x, int y, int width, int height) drawPolyline(int[] xPts, int[] yPts, int nPts) fillPolygon(int[] xPts, int[] yPts, int nPts) Note: x and y refer to the top-left hand corner of each shape Note: when you paint shapes on top of one another, Java displays the last drawn shape on top

16. Color s setColor of the Graphics class lets you select a color that’s used for all subsequent drawing on a graphics component –g.setColor(Color.red); –g.setColor(new Color(255, 0, 0)); 13 Standard Color s: black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, yellow Color(int red, int blue, int green) Red, blue, and green are values from 0-255

17. Images Toolkit class’ getImage loads images GIF, JPEG, PNG, & BMP files For Toolkit object, use the static getDefaultToolkit method

18. The first catch with images Images have lots of data They take time to load By default, Java loads images asynchronously Consequences: –missing image in GUI –when loading an image for immediate rendering, the image won’t be loaded before the GUI is drawn 2 ways to handle this –simple but inefficient (today) –using threads (next week)

19. Making sure an image is loaded before drawing Use the MediaTracker class We can register a loading image with it –each image is given a unique id number It can tell us when the image is done loading –checkID method It can also make our program wait until it is done –waitForID method throws exception when done

20. public class SimpleImagePanel extends JPanel { private Image image; private int id = 0; public SimpleImagePanel(String file) { Toolkit tk = Toolkit.getDefaultToolkit(); image = tk.getImage(file); MediaTracker tracker = new MediaTracker(this); tracker.addImage(image,id); try { tracker.waitForID(id); } catch (InterruptedException ie) { // BOO! LOADING ERROR } public void paintComponent(Graphics g) { super.paintComponent(g); g.drawImage(image, 0, 0, getWidth(), getHeight(), null); }

22. The second catch with images In the last example, the Image was scaled automatically to fit panel So what? –this is done only to the rendering of the image –not to the Image object data itself So what? –so we need to map mouse clicks precisely to pixels on the image What should we do? –multiple solutions

23. Potential Solutions 1.Determine size of panel, and before drawing, scale Image object to perfectly fit panel 2.Determine size of panel, and scale all mouse clicks from panel dimensions back to original loaded image before using. Huh? We’ll look at both solutions next time