Images

(Assignment is below. See "task".)

Images are not that hard to work with. Whenever possible we try and use BufferedImage.

There is a more complete indepth discussion of images on the grade 12 notes .

If you use Eclipse, you have to put the images in the Java Project folder. Not in the package that you are in.

1. First make some variables. These will be global variables (unless they are inside an object):

BufferedImage bkgImg, alienImg; //background image, alien image

2. Next load the images:

 alienImg = loadImage("Alien.jpg");

Code to load an image (as a method)

COPY this code. Do not modify it

 
 static BufferedImage loadImage(String filename) {
	BufferedImage img = null;			
	try {
		img = ImageIO.read(new File(filename));
	} catch (IOException e) {
		System.out.println(e.toString());
		JOptionPane.showMessageDialog(null, "An image failed to load: " + filename , "ERROR", JOptionPane.ERROR_MESSAGE);
	}
	//DEBUG
	//if (img == null) System.out.println("null");
	//else System.out.printf("w=%d, h=%d%n",img.getWidth(),img.getHeight());
	
	return img;
 }

3. How to draw images

If you're using HSA2, then this code goes into drawGraphics()

If you're using Swing, then
  (i) this goes into paintComponent(),
  and (ii) change gc.drawImage(bkgImg,0,0); to g.drawImage(bkgImg,0,0, null);

gc.drawImage(bkgImg, 0,0);	//draw the image at location (0,0). This uses the image width and height.

gc.drawImage(shipImg, x, y, width, height);  //This will draw the image at (x,y) and be the specified width and height
gc.drawImage(shipImg, ship.x, ship.y, ship.width, ship.height);  //This will draw the image at (x,y) and be the specified width and height

▶ This is how you would find the size of the image (in pixels) img.getWidth() and img.getHeight()

You can resize the image to whatever size you want. BUT if the image is significantly larger than what you're drawing, it will slow down your program significantly.

Flip Image

If you make the width and/or height negative, you can flip the image vertically or horizontally

Code to resize an image

//Scale the image to be 100x80.
This does not output BufferedImage, only Image.
However, drawImage() will draw both BufferedImage as well as Image
Image scaledImage = img.getScaledInstance(100, 80, Image.SCALE_DEFAULT);

Do this in a setup() method or something. Obviously, rescaling an image in a gameloop will really make things slow down.

How to draw parts of images

Erratum: The parameters for images CHANGE when you go from 4 → 8.
It is not longer x, y, width, height , but rather x1, y1, x2, y2
ie. not a rectangle, but two points

g.drawImage() also has a form where there are EIGHT parameters instead of four.

NO!!  g.drawImage(image, dx, dy, dw, dh, 	sx, sy, sw, sh);
YES!  g.drawImage(image, dx1, dy1, dx2, dy2, 	sx1, sy1, sx2, sy2);

The first four parameters are the destination. This is where you are doing to draw the image on your screen. This part is the same as before.
The second four parameters are the source. This specifies the pixels (rectangle) of the image that you clipping, choosing to draw.

Official Oracle Java Graphics Class documentation.

Task

1. Load a background image (example "underwater.jpg") that fills the graphics console (window).
2. Load a smaller image (example "fish.png").
   This must have a transparent background (thus either png or gif file)
3. Resize this image to a NEW image that is somewhere around 120 pixels wide and an appropriate height for the aspect ratio.
   ( You have to make a new image, not just draw the original one resized.)
4. Draw this image on top of the background
5. Now draw the image (fish) flipped horizontally, vertically, and both.
   
6. For a challenge, draw the left half of the fish and the right half of the fish separated.
   This page might be useful. Or watch this video, but make sure to turn CC on.

Images to start with

fish.png (has a transparent background)
The size is 460x290

underwater.jpg

Your final drawing should look like this (but the fish can be in other locations):

I made a small fish image and drew it 4 times (flipped). I also drew the left half of the big fish, and then the right half.

...

The next thing that we'll do is make the fish move around with keystrokes.
Then draw a hitbox and check for collisions
and then learn how to use arraylists