8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 1/19

Javalobby | EclipseZone | JavaForge | JRoller | JavaBlackBelt | JDocs | Javacrawl |JUGCentral | MyJavaServer | ADVERTISE

Top of Form

Username/Email: Password: SIGN IN | JOIN NOW!Bottom of Form

•Home•Features

○Submit an article

○Presentations and Articles

○JavaPolis 2004 Online

○JavaZone 2005

○Announcements

○Newsletters

•Forums

○Overview

○Help & FAQ

○Posting guidelines

○Recent postings

○Popular discussions

○Who's online

•Blogs

○Popular blogs

○Start your free blog

○Recent blog entries

•JL Network

○Javalobby.org

○Javacrawl.com

○JDocs.com

○JRoller.com

○JUGCentral.com

○MyJavaServer.com

○Friends & Partners

•Members Only

○Control Panel

○Subscriptions

○Downloads

○Benefits

○Special Offers

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 2/19

•About JL

○Our story

○Sites & Services

○In the News

○Privacy policy○Contact us

○Advertising info

○FAQ

About the Author

Josiah Hester is an active musician and JAVA developer from North

Carolina who curently resides in Honolulu Hawaii. He is currently

finishing out his senior year in high school, and has aspirations of

studying Computer Science and Music at Stanford University.

Discuss this article with Josiah

Spotlight Features

Ultimate Java Image Manipulation By Josiah Hester, September 11, 2007

Contents

- Basic Image Theory and Operations

- Images in Java

- Loading an Image

- Drawing an Image on the Screen using Graphics2D

- Creating and Using your own Image in Java

- Saving Images

- Useful Image Operations and Application

- Making an Image Translucent

- Making a Certain Color Transparent

- Flipping an Image

- Rotating an Image

- Resizing an Image

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 3/19

- Splitting Images

- Sprite Animation

Images are the staple of any graphical application, whether on the web or on the desk,

images are everywhere. Having the ability to control and manipulate these images is a

crucial skill that is absolutely necessary for any graphical artist, designer, or Game

Engineer. This article will get you, the aspiring artist, professional designer, or amateur

hobbyist, the foundations to be able to manipulate any image to your will. The end result

will be twofold, you will have a nice Image Utility class for use in any of your Projects (I

found it was most useful for 2d gaming), and you will have a small, but powerful

application that can perform most common, and many not so common operations on. jpg's, .png's, .gif's, and bmp image files. This article assumes only that you have basic

Java programming ability; of course a little prior Image experience would help. Know that

I wont bog you down with trigonometric details. So, enough talking lets get coding!

Images in Java

Images in Java are defined by the java.awt.image.Image interface, which provides a

basic model for controlling an image, but the real meat of the Java Image isthe java.awt.image.BufferedImage . A BufferedImage is an accessible buffer of image

data, essentially pixels, and their RGB colors. The BufferedImage provides a powerful way

to manipulate the Image data. A BufferedImage object is made up of two parts

a ColorModel object and a Raster object.

Figure 1. The BufferedImage Class

The ColorModel object provides methods that translate an image's pixel data into color

components that can be understood, such as RGB for a computer.

The Raster represents a rectangular array of pixels. A Raster encapsulates a DataBuffer

that stores the sample values and a SampleModel that describes how to locate a given

sample value in a DataBuffer. Basically, the Raster holds two things, a DataBuffer ,

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 4/19

which contains the raw image data and a SampleModel , which describes how the data is

organized in the buffer

Loading an Image

Probably the most common and most used image operation is loading an image. Loading

an image is fairly straight forward, and there are many ways to do it, so I will show you

one of the simplest and quickest ways, using the javax.imageio.ImageIO class.

Basically what we want to do is load all the bytes from some image file, into

a BufferedImage so that we can display it. This can be accomplished through the use

of ImageIO.

view plain copy to clipboard print?

1.public static BufferedImage loadImage(String ref (}2.BufferedImage bimg = null;3.try}4.5.bimg = ImageIO.read( new File(ref ;((6.{catch (Exception e(}7.e.printStackTrace;()8.{9.return bimg;10.{

We would call the method like

this ImageUtility.loadImage("C:/Folder/foo.bmp"); ImageIO reads in the bytes

of an image to a BufferedImage . Once you have the BufferedImage , you can do many

things with it. Of course loading an image is nearly completely useless unless you can

display it on screen, so next ill explain how to render , or draw an image.

Drawing an Image on the Screen using Graphics2D

This is where the fun starts. To draw an Image, we need a surface to draw on; the

Abstract Windowing Toolkit and Swing supply this. For a more detailed tutorial on those

subjects, look up the java documentation at java.net. Every top-level container in Swing

and AWT such as a JPanel, JFrame, or Canvas , has its own Graphics object.

This Graphics object allows us to draw on its parent surface (a JPanel, JFrame,

Canvas, or Image ) with such calls as Graphics.drawLine(int x1, int y1, int

x2, int y2); or Graphics.drawImage(Image img, int x, int y,

ImageObserver ob); The Graphics2D object, is a more powerful child of

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 5/19

the Graphics object, it adds more methods which allow for drawing BufferedImages. Here

is an example of how to load and draw a BufferedImage onto the screen.

view plain copy to clipboard print?

1.public class ImageApp}

2. 3.public void loadAndDisplayImage(JFrame frame(}4.//Load the img5.BufferedImage loadImg = ImageUtil.loadImage( "C:/Images/duke.gif ";(6.frame.setBounds( 0 , 0 , loadImg.getWidth(), loadImg.getHeight;(()7.//Set the panel visible and add it to the frame8.frame.setVisible( true;(9.//Get the surfaces Graphics object10.Graphics2D g = (Graphics2D)frame.getRootPane().getGraphics;()11.//Now draw the image12.g.drawImage(loadImg, null , 0 , 0;(13.14.{15.16.public static void main(String[] args(}17.ImageApp ia = new ImageApp;()18.JFrame frame = new JFrame( "Tutorials";(19.ia.loadAndDisplayImage(frame;(20.{21.22.{

In the first few lines we load the image using ImageUtil , then we change

the JFrame that is passed in to our liking, and get the frames Graphics object. Note that

we have to set the frame visible before we ask for the Graphics object. Then we use the

graphics to draw the image at position (0, 0). Very simple, and very incomplete, you will

notice that if you resize the screen, the image will disappear. To remedy this problem, we

need to create a sub-class of JPanel that will facilitate showing images that will display no

matter what the user circumstances. To do this we need to override

the JPanel.paintComponent(Graphics g); method. I will call the sub-

class JImagePanel , heres the class:

view plain copy to clipboard print? 1.public class JImagePanel extends JPanel}2.private BufferedImage image;3.int x, y;4.public JImagePanel(BufferedImage image, int x, int y(}5.super;()6.this .image = image;7.this .x = x;8.this .y = y;9.{10.@Override11.protected void paintComponent(Graphics g(}12.super .paintComponent(g;(13.g.drawImage(image, x, y, null;(14.{15.{

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 6/19

This allows us to pass an image into the newly created JImagePanel , which will then

handle all painting for the life cycle of the

application. JImagePanel overrides paintComponent and makes it paint the Image at

the supplied coordinates. Wrapping our images in this Panel will allow Swing and AWT to

handle all rendering. Here is the previous example, except now using the JImagePanel:

view plain copy to clipboard print? 1.public class ImageApp}2.3.public void loadAndDisplayImage(JFrame frame(}4.BufferedImage loadImg = ImageUtil.loadImage( "C:/Images/duke.gif ";(5.frame.setBounds( 0 , 0 , loadImg.getWidth(), loadImg.getHeight;(()6.JImagePanel panel = new JImagePanel(loadImg, 0 , 0;(7.frame.add(panel;(8.frame.setVisible( true;(9.{

10.public static void main(String[] args(}11.ImageApp ia = new ImageApp;()12.JFrame frame = new JFrame( "Tutorials";(13.ia.loadAndDisplayImage(frame;(14.{15.{

This change makes a world of difference, as now the resizing, buffering, and other

complicated stuff is handled internally, now all we have to worry about is manipulating

images.

Creating and Using your own Image in Java

There are a few ways to create your own Image, all fairly simple. The most obvious way

would be to simply create a new BufferedImage object. Like this:

view plain copy to clipboard print?

1.BufferedImage img = new BufferedImage( 100 , 100 , BufferedImage.TYPE_3BYTE_BGR;(

But to be able to draw into this image, you first need to createthe Graphics:

view plain copy to clipboard print?

1.BufferedImage img = new BufferedImage( 100 , 100 , BufferedImage.TYPE_3BYTE_BGR;(

2.img.createGraphics;()

Now we have a surface to draw on, so, as an example, Ill draw a road on a yellow

background;

view plain copy to clipboard print?

1.public class ImageMaker}2.3.public static BufferedImage createImage()}4.BufferedImage img = new BufferedImage( 100 , 100 , BufferedImage.TYPE_I

NT_RGB;(5.img.createGraphics;()

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 7/19

6.Graphics2D g = (Graphics2D)img.getGraphics;()7.g.setColor(Color.YELLOW;(8.g.fillRect( 0 , 0 , 100 , 100;(9.10.for ( int i = 1 ; i < 49 ; i(++}11.g.setColor( new Color( 5 *i, 5 *i, 4 + 1 * 2 +i* 3;((

12.g.fillRect( 2 *i, 2 *i, 3 *i, 3 * 1;(13.{14.return img;15.{16.17.public static void main(String[] args(}18.JFrame frame = new JFrame( "Image Maker";(19.frame.addWindowListener( new WindowAdapter()}20.public void windowClosing(WindowEvent event(}21.System.exit( 0;(22.{23.;({24.frame.setBounds( 0 , 0 , 200 , 200;(25.JImagePanel panel = new JImagePanel(createImage(), 50 , 45;(26.frame.add(panel;(27.frame.setVisible( true;(28.{29.30.{

This creates a BufferedImage , creates its graphics, then sets the background to yellow,

lastly, using clever manipulation of a for loop, the program makes a rough drawing of a

road. This method returns an image that is promptly displayed our custom JImagePanel .

Note that I added WindowAdapter to the JFrame so that it will actually destroy the JVM

when you stop the program. Below is a picture of the output:

Figure 2. The Lonesome Road

This is a small example of how you can make your own images. You can also use

the Graphics2D methods to display a string in a particular font, draw ovals, predefined

Shapes, and many other things.

Saving Images

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 8/19

Saving an image to a file is a fairly simple operation, basically, all that needs to happen is

for bytes in memory to be written to a file. Below is the old way of saving a JPEG.

view plain copy to clipboard print?

1.public static void saveOldWay(String ref, BufferedImage img(}

2.BufferedOutputStream out; 3.try}4.out = new BufferedOutputStream( new FileOutputStream(ref ;((5.JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out;(6.JPEGEncodeParam param = encoder.getDefaultJPEGEncodeParam(img;(7.int quality = 5;8.quality = Math.max( 0 , Math.min(quality, 100;((9.param.setQuality(( float ) quality / 100 .0f, false;(10.encoder.setJPEGEncodeParam(param;(11.encoder.encode(img;(12.out.close;()13.{catch (Exception e(}14.e.printStackTrace;()

15.{16.{

This saves your BufferedImage img to a JPEG file with a path specified by the String

ref Basically, it encodes your image data into the JPEG format, sets the image quality,

then saves it to a file. This archaic way of saving an image has many faults though,

besides not being very straightforward. Thankfully Sun has given

us ImageIO . ImageIO gives a centralized way to save and load images, for saving it has

three forms of the write method, which writes your image data to a file in JPEG or PNG,

format, the three forms of the write method are:

write(RenderedImage im, String formatName, File output(

write(RenderedImage im, String formatName,

ImageOutputStream output(

write(RenderedImage im, String formatName, OutputStream

output(

We can wrap our ImageUtil around one of these write methods, like this:

view plain copy to clipboard print?

1.**/ 2.*Saves a BufferedImage to the given file, pathname must not have any3.*periods "." in it except for the one before the format, i.e. C:/images/fooimage.

png4.*@param img5.*@param saveFile6./*7.public static void saveImage(BufferedImage img, String ref (}8.try}9.String format = (ref.endsWith( ".png" )) ? "png" : "jpg";10.ImageIO.write(img, format, new File(ref ;((11.{catch (IOException e(}

12.e.printStackTrace;()13.{14.{

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 9/19

Making an Image Translucent

Sometimes it is necessary to make an image, or part of an image somewhat translucent,

or see through. If you have any experience with Photoshop, Gimp or other Imaging

programs, this means modifying an Images alpha, or applying an Alpha layer on top of the

Image. I will show you how to do the latter.

The Graphics2D object, which is a part of every image, and top level container (such as

a JFrame ), lets you manipulate how it draws through multiple methods.

Mainly, setComposite(Composite comp), setStroke(Stroke stroke) and

setPaint(Paint paint) , all of these affect how the Graphics2D draws the image. Forthis part of the tutorial, we will mainly be concerned with setComposite(Composite

comp) . Composites let us modify things like the transparency of an image, which is what

we are interested in. Most of the time we only want the AlphaComposite on the Image, not

on the entire Container. So we'll add another method to our ImageUtil class that will load

an Image and set a certain amount of alpha on the image only, leaving the container

alone. Here is the code:

view plain copy to clipboard print?

1.public static BufferedImage loadTranslucentImage(String url, float transperancy(}

2.//Load the image3.BufferedImage loaded = loadImage(url;(4.//Create the image using the5.BufferedImage aimg = new BufferedImage(loaded.getWidth(), loaded.getH

eight(), BufferedImage.TRANSLUCENT;(6.//Get the images graphics7.Graphics2D g = aimg.createGraphics;()8.//Set the Graphics composite to Alpha9.g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, tr

ansperancy;((10.//Draw the LOADED img into the prepared reciver image11.

g.drawImage(loaded, null , 0 , 0;( 12.//let go of all system resources in this Graphics13.g.dispose;()14.//Return the image15.return aimg;16.{

This block of code first loads your our image, and then creates

another BufferedImage to draw into that allows translucency. Then, right after it gets

the Graphics2D object of the image, it sets the composite to an AlphaComposite, with

the alpha level set to whatever the user specifies. The amount of alpha can be any float

value from 0.0 to 1.0. Next it draws the loaded image, into the translucency capable

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 10/19

image, and disposes of unsued resources. Using our JImagePanel we draw the image

and display it, giving us this:

Fig. 3. Regular Duke Fig. 4. Alpha Composited Duke

Making a Certain Color Transparent

A useful function of many imaging programs such as GIMP is its ability to make only one

color of an Image transparent; this is called applying a mask. To do this, GIMP evaluates

each pixel of an image, and tests if it is the user specified masking color, if it is it sets that

pixel's RGB value to nothing, and it's alpha to 0.0. Here is the Java implementation:

view plain copy to clipboard print? 1.public static BufferedImage makeColorTransparent(String ref, Color color(}2.BufferedImage image = loadImage(ref ;(3.BufferedImage dimg = new BufferedImage(image.getWidth(), image.getHei

ght(), BufferedImage.TYPE_INT_ARGB;(

This will load the image, and also sets up a destination image for drawing into. The next

part is what does all the work:

view plain copy to clipboard print?

1.Graphics2D g = dimg.createGraphics;()2.g.setComposite(AlphaComposite.Src;(3.g.drawImage(image, null , 0 , 0;(

4.g.dispose;() 5.for ( int i = 0 ; i < dimg.getHeight(); i(++}6.for ( int j = 0 ; j < dimg.getWidth(); j(++}7.if (dimg.getRGB(j, i) == color.getRGB(()}8.dimg.setRGB(j, i, 0x8F1C1C;(9.{10.{11.{12.return dimg;13.{

This grabs the Graphics2D instance of the destination image, and sets it's composite to

Alpha. It then draws the Image onto the screen, and disposes of the Graphics2D to clear

up system resources. Next, it cycles through all the pixels in the image, using the for

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 11/19

loops, and compares the color of the pixel to the mask color. If the pixels color matches

the mask color, that pixels color is replaced by an alpha RGB value. Lastly, the destination

image, with mask applied, is returned.

Here is what the output will be, when we wrap the manipulated image insideour JImagePanel:

Fig. 5. Regular Duke Fig. 6. Masked Duke

As you can see, all the white pixels on the image on the left were replaced with pixels of

alpha value, shown in the window on the left.

Flipping an Image

Flipping an image means mirroring it on a certain axis. Flipping vertically could be

compared to the reflection of yourself in a lake, flipping horizontally is kind of like looking

into a mirror. To do a flip, we use drawImage(Image img, int dx1, int dy1, int

dx2, int dy2, int sx1, int sy1, int sx2, int sy2, ImageObserver

observer); of Graphics2D object. This method lets us draw part of an image into an

image, or scale an image etc. The method takes an image, and a set of coordinates of the

destination rectangle, it also takes a set of coordinates for the source rectangle of the

image you supply. These source coordinates can be manipulated for varying results, as Iwill show in this next code segment.

For flipping an image horizontally, we give the source rectangle coordinates starting from

the top right, and ending at the bottom left like this.

view plain copy to clipboard print?

1.drawImage(Image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, ImageObserver observer;(

2.3.g.drawImage(<i>The Source Image</i>, 0 , 0 , <i>image width</i>, <i>imag

e height</i>, <i>image width</i>, 0 , 0 , <i>image height</i>, null;(4.>b><i>as opposed to the unflipped way</i></b<5.

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 12/19

6.g.drawImage(<i>The Source Image</i>, 0 , 0 , <i>image width</i>, <i>image height</i>, 0 , 0 , <i>image width</i>, <i>image height</i>, null;(

7.

Putting it all together, you would flip an image horizontally like this:

view plain copy to clipboard print?

1.public static BufferedImage horizontalflip(BufferedImage img(}2.int w = img.getWidth;()3.int h = img.getHeight;()4.BufferedImage dimg = new BufferedImage(w, h, img.getType;(()5.Graphics2D g = dimg.createGraphics;()6.g.drawImage(img, 0 , 0 , w, h, w, 0 , 0 , h, null;(7.g.dispose;()8.return dimg;9.{

Here is what the output would be with the manipulated image inside our JImagePanel:

Fig. 7. Regular Duke Fig. 8. Flipped Duke

To flip an image vertically, you just change the source rectangle coordinates around some

more:

view plain copy to clipboard print? 1.public static BufferedImage verticalflip(BufferedImage img(}2.int w = img.getWidth;()3.int h = img.getHeight;()4.BufferedImage dimg = dimg = new BufferedImage(w, h, img.getColorModel

().getTransparency;(()

5.Graphics2D g = dimg.createGraphics;() 6.g.drawImage(img, 0 , 0 , w, h, 0 , h, w, 0 , null;(7.g.dispose;()8.return dimg;9.{

Here is what the output would be if this was wrapped inside an application:

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 13/19

Fig. 9. Regular Duke Fig. 10. Flipped Duke

Rotating an Image

Rotating an image is a complicated procedure, requiring vast knowledge of trigononetry

and image processing, thankfully we dont need to know any of that, as Sun provides us a

method inside of the Graphics2D object that does all that complicated stuff for us, aptly

named rotate(double theta, double x, double y(.

Here is an example of how to wrap it inside a method in our ImageUtil class:

view plain copy to clipboard print? 1.public static BufferedImage rotate(BufferedImage img, int angle(}2.int w = img.getWidth;()3.int h = img.getHeight;()4.BufferedImage dimg = dimg = new BufferedImage(w, h, img.getType;(()5.Graphics2D g = dimg.createGraphics;()6.g.rotate(Math.toRadians(angle), w/ 2 , h/ 2;(7.g.drawImage(img, null , 0 , 0;(8.return dimg;9.{

This method, besides doing usual initialization, turns the supplied angle (in degrees) to

radians. It also ensures that the image stays in the middle of the destination image.

Here is a sample of the output if wrapped in an application and rotation set at 45 degrees.

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 14/19

Fig. 11. Regular Duke Fig. 12. Rotated Duke

As you can see, the image is rotated 45 degrees clockwise.

Resizing an Image

For resizing an image, we again refer to the Graphics2D object, resizing an image is a

very simple operation, just like in rotating an image, all math is taken care of by

the Graphics2D object.

Note that we set rendering hints to balance speed and quality, unfortunately an

explanation of RenderingHints is beyond the scope of this article:

view plain copy to clipboard print? 1.public static BufferedImage resize(BufferedImage img, int newW, int newH(}2.int w = img.getWidth;()3.int h = img.getHeight;()4.BufferedImage dimg = dimg = new BufferedImage(newW, newH, img.getTy

pe;(()5.Graphics2D g = dimg.createGraphics;()6.g.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.V

ALUE_INTERPOLATION_BILINEAR;(7.g.drawImage(img, 0 , 0 , newW, newH, 0 , 0 , w, h, null;(8.g.dispose;()9.return dimg;10.{

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 15/19

Fig. 13. Regular Duke Fig. 14. Resized Duke

Another way to resize is to use the Image.getScaledInstance(int newWidth, int

newHeight, int renderHints) . Do NOT use this to resize, it is slow and unwieldy, for

detailed reasons check out this article by Chris Campbell.

Splitting Images

Now to have some fun, and whats more fun than Mario! Our goal for this part of the

tutorial is to make an animated Mario out of this Sprite Sheet:

Fig. 14 Mario Sprite Sheet

Splitting an image is fairly simple, and very useful. What we want to do is split the image

into rows and columns, and draw each mini image into it's own BufferedImage , all of

these smaller images will be kept inside a BufferedImage array. Keeping the images in an

array will allow for easy access when we want to animate the sprites. Here is how you

would split an image into columns and rows:

view plain copy to clipboard print? 1.public static BufferedImage[] splitImage(BufferedImage img, int cols, int rows

(}2.int w = img.getWidth()/cols;3.int h = img.getHeight()/rows;4.int num = 0;5.BufferedImage imgs[] = new BufferedImage[w*h;[6.for ( int y = 0 ; y < rows; y(++}7.for ( int x = 0 ; x < cols; x(++}8.imgs[num] = new BufferedImage(w, h, img.getType;(()9.//Tell the graphics to draw only one block of the image10.Graphics2D g = imgs[num].createGraphics;()11.g.drawImage(img, 0 , 0 , w, h, w*x, h*y, w*x+w, h*y+h, null;(12.g.dispose;()

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 16/19

13.num;++14.{15.{16.return imgs;17.{

This block of code first figures out the width and height of the mini images, using the

columns and rows variables. Next it initializes the BufferedImage array, then starts two

loops, one for columns, one for rows. Next it initializes each image in the array, and draws

into them their respective mini image using the w and h variables as a helper to figure out

the exact coordinates of each rectangle. Lastly, it returns the BufferedImage array.

Now that we can get all the images, we need to figure out how to animate them, so keep

reading:

Sprite Animation

Now lets make use of our new found skill. Being able to split up Images is only half of the

challenge, now we need to be able to make mario seem like he's moving, we can achieve

this by alternating different images that correspond to one part of his movement. This is

called animation, to make it easier we will make a new class called AnimatedSprite . This

class will serve many purposes, it will hold hold onto the split up image, the frame

numbers, the location, and anything else that comes to our whimsy.

Here is an outline of the AnimatedSprite class:

view plain copy to clipboard print?

1.**/2.*Lets you add a new animation set to the Sprite3.*4.*@param name The name of the Sprite, this name will be used in setting the a

nimation5.*@param set The frame numbers of the animation6./*7.public void addNewAnimation(String name, int [] set;(8.**/9.*Draws the current frame of the sprite10.*@param g11./*12.public void draw(Graphics2D g;(13.**/14.*Sets the current animation of the Sprite15.*@param name16./*17.public void setAnimation(String name;(18.**/19.*Sets how the Sprite cycles through the animations.

20.*@param method One of the constants LOOP_REVERSE or LOOP_BEGINNING 21.*LOOP_BEGINNING: Will start over when loop reaches the end

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 17/19

22.*LOOP_REVERSE: Will start backwards when loop is over23./*24.public void setLoopMethod( int method;(25.**/26.*Sets the location of the sprite, it's upper left corner will be at the27.*specified position28.*@param x29.*@param y30./*31.public void setLocation( double x, double y;(32.**/33.*Get the X coordinate34.*@return35./*36.public double getX;()37.**/38.*Set the X coordinate

39.*@param x40./*41.public void setX( double x;(42.**/43.*Get the Y coordinate44.*@return45./*46.public double getY;()47.**/48.*Set the Y coordinate49.*@param y50./*51.public void setY( double y;(52.**/53.*Gets the name of the current animation54.*@return55./*56.public String getCurrentAnim;()57.**/58.*Gets the width of one frame59.*@return60./*61.public int getWidth;()

62.**/ 63.*Gets the height of one frame64.*@return65./*66.public int getHeight;()

For animation to work correctly we need to make sure some things happen right. First we

need a way to remember the animation frames, this can be solved by putting the index of

each frame for a particular animation inside an int array. Then, we can put that int array

inside of a HashMap. The HashMap will allow us to get the int array by giving it a "key", or

a name, this name in our case will be the animation name, for example "walk". Heres how

this would happen:

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 18/19

view plain copy to clipboard print?

1.**/2.*This holds all the frames, named by a string key;3.*for instance, you could enter the key 'walk' which would return4.*an int array5./*6.private HashMap<string, int []= ""> frames;7.8.>i>Here is how you would add frames to the Sprite</i<9.10.**/11.*Lets you add a new animation set to the Sprite12.*13.*@param name The name of the Sprite, this name will be used in setting the a

nimation14.*@param set The frames of the animation15./*16.public void addNewAnimation(String name, int [] set(}17.frames.put(name, set;(18.setAnimation(name;(19.{20.21.>i>Then you would get the frames like this </i<22.23.int [] walkframes = frames.get( "walk";(24./string<,

Along with a way to store the frames, we will also need coordinates for rendering help, as

well as multiple variables for keeping track of the current animation state, here are the

variables needed:

view plain copy to clipboard print?

1.**/2.*The current 'state' or animation that the sprite is in, ie. "walk", "run", or "stan

d"3./*4.private String currentAnim;5.**/6.*The current frame being rendered, it's not the number of the frame, its the ind

ex for the Image[]7.*as in it's this number "frameset[currentframe] = 1;" not this number "framese

t[0] = currentframe";8./*9.private int currentFrame;10.**/11.*The current set of frames being used12./*13.private int [] currentFrameSet;

The most important method of the class is the draw(Graphics2D g) method, this

method will eraser the previous image, and draw the current frame, as well as preparing

the next frame.

Another thing about animation is that there are multiple ways of cycleing through the

frames, one way, is to loop through the frames and then go back to the first. The second

8/8/2019 Java Easy Programming Guide

http://slidepdf.com/reader/full/java-easy-programming-guide 19/19

way is to loop through the frames and then go backwards through them again, for

example, if the frame indexes were {15,16,17,18} they would be cycled through like this

"15,16,17,18,17,16,15.... etc.". Using one or the other depends on your animation, for our

purposes we will refer to these looping methods as LOOP_REVERSE, and

LOOP_BEGINNING respectively.

Here is the full code for the AnimatedSprite class:

View AnimatedSprite classThis class will allow for animation of any collection of sprites. Here is a small example of

how to use the class.

View Animation classThese classes provide a powerful way to animate a set of images.

Summary

The previous tips have hopefully given you a strong foothold in the quagmire that is java

Images, and possibly a handhold on games and Animation. Hopefully you have found

these tricks useful. In the next installment we will look at more advanced image operations

such as compositing and paint strokes. Until next time, happy coding!

Refferences

Learning Java 2D, Part 2 by Robert

Eckstein http://java.sun.com/developer/technicalArticles/GUI/java2d/java2dpart2.html

Java 2D API Specification http://java.sun.com/j2se/1.4.2/docs/api/index.html

Image Processing by Bill Day http://www.javaworld.com/javaworld/jw-09-1998/jw-09-

media.html

Powered by Jive Software