Loading and Using Images
The ImageHelper class has been made to help you load and create images. It serves to load images from files and to perform basic transformations, like rotating and scaling and image. It also has the ability to take a Sprite Sheet (one of the ways to layout animations) and transfer the corresponding animations into an array for you.
Loading a Simple Image into a Variable
To start loading an image, we first need to import the BufferedImage class. To do this, we can import java.awt.image.*; This will include all the image classes we could ever need.
To begin loading in an image, we need a place to store it. Create a new BufferedImage and use the ImageHelper.loadImage(“nameOfFile”) command. This will take the string of the name of file and actually load in the image for you.
e.g.
BufferedImage myImg = ImageHelper.loadImage(“dog.jpg”);
This would create an image named myImg that uses the picture called dog.jpg.
Translucent Images (see through images)
We can also make an image Translucent (see through) by loading the image using the ImageHelper. loadTranslucentImage(“nameOfFile”, alpha) instead of the ImageHelper.loadImage(“nameOfFile”) method. The difference here is the alpha value controls how see through an image is. It can be a number between 0 and 1: 1 means completely solid (not see through at all) and 0 means completely invisible (all see-through). A value somewhere between 0 and 1 makes the image show up but you can see through it to the other side.
Transforming the Original Picture
Once we have created an image, we can use it to create other images that are based on the original. For instance, if we would like the background colour to be transparent, we create another BufferedImage and use the ImageHelper.makeColorTransparent(image, color) command. We pass in our image variable, image, and specify a specific color to be transparent. This could be a default color from the Color class, or it could be a custom color defined by RGB values.
e.g.
BufferedImage transparentImg = ImageHelper.makeColorTransparent(myImg, Color.white);
This would take in the dog picture from above and change every white area to transparent.
The other transformation commands are ImageHelper.verticalflip(image), ImageHelper.horizontalflip(image), ImageHelper.rotate(image, angle), and ImageHelper.resize(image, newWidth, newHeight)
Splitting an Image into Pieces (using Sprite Sheets or just Cutting Up an Image)
To do animation, we think of our program like a flipbook. We use multiple pictures and swap them out to create frames. These frames are the keep to making things animate. One way we can do this is to use something called a sprite sheet. This is a picture that has all of our animation frames laid out on one picture. All frames are the exact same size. This could be a simple line of images, or as complicated as multiple rows.
This shows a simple sprite sheet for a running animation. It contains 1 row and 6 columns. This becomes 6 frames for your animation.
To load this type of image into Java we use a BufferedImage array. We take in a BufferedImage of the sprite sheet and split it up using BufferedImage.splitImage(image, columns, rows).
e.g.
BufferedImage spriteSheet = ImageHelper.loadImage(“spriteSheet.png”);
BufferedImage[] animation = ImageHelper.splitImage(spriteSheet, 6, 1);
This would create an array that holds the 6 animation frames from above.
Drawing the Image
To draw the image, we draw it in the paint or paintComponent method. The drawImage(image, xPosition, yPosition, null) command is made just for this purpose.
e.g.
BufferedImage img = ImageHelper.loadImage(“myPic.png”);
public void paintComponent(Graphics g)
{
g.drawImage(img, 300,200, null);
}
This will draw the image at (300,300) on the screen.
We can employ the same technique with our array to perform an animation. We just keep track of the frame we want to animate and adjust it accordingly.
We could use the following code to create a simple animation.
e.g.
BufferedImage spriteSheet = ImageHelper.loadImage(“spriteSheet.png”);
BufferedImage[] animation = ImageHelper.splitImage(spriteSheet, 6, 1);
int frame = 0;
public void paintComponent(Graphics g)
{
g.clearRect(0,0, getWidth(), getHeight());
g.drawImage(animation[frame], 300,200, null);
}
public void start()
{
while(true)
{
try
{
Thread.sleep(20);
frame = (frame + 1) % 6; // this is to make sure our frame never goes to 6 or higher
repaint();
}catch (Exception e)
{
}
}
}
A java file names ImageTest and the spriteSheet has been posted to the website so you can see the code and how it works.