java easy programming guide
TRANSCRIPT
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.{[email 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