CSE 219 Computer Science III

Images

HW1

• Has been posted on Blackboard

http://blackboard.stonybrook.edu/

• Making a Game of Life with limited options

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

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?

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?

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

Drawing with Java

• We’ll draw on JPanels 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

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

}

}

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

MyWeirdButtonpublic 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);

}}

}

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

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

Some Methods of Graphics Class

• Display– drawImage– drawString– drawLine– drawRect– fillRect– drawOval– fillOval

• Graphics context– setColor– setFont

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

Colors

• 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 Colors: 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

Images

• Toolkit class’ getImage loads images

• GIF, JPEG, PNG, & BMP files

• For Toolkit object, use the static getDefaultToolkit method

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)

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

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

}

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

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