|
Java by Example - animation with GIF pictures, sprite animation
This applet presents nothing new, but combines the techniques of flicker free animation and the use of GIF and JPEG graphics. The background picture, which contains lots of colors, but doesn't have to be very sharp or detailled is a highly compressed JPEG, the snake a GIF with transparency index color.
|
//Sourcecode
import java.awt.*;
import java.applet.*;
//a flicker free animation with images!
//the GIF snail with transparent color moves over the JPEG grass
public class Project11 extends Applet implements Runnable
{
Thread runner;
Image Buffer;
Graphics gBuffer;
Image background, snail;
int x;
//Init is called first, do any initialisation here
public void init()
{
//create graphics buffer, the size of the applet
Buffer=createImage(size().width,size().height);
gBuffer=Buffer.getGraphics();
background=getImage(getCodeBase(),"grass.jpg");
snail=getImage(getCodeBase(),"snail.gif");
}
public void start()
{
if (runner == null)
{
runner = new Thread (this);
runner.start();
}
}
public void stop()
{
if (runner != null)
{
runner.stop();
runner = null;
}
}
public void run()
{
while(true)
{
//Thread sleeps for 15 milliseconds here
try {runner.sleep(15);}
catch (Exception e) { }
gBuffer.drawImage(background,0,0,this);
//move the snail from left to right...
x++;
//if it moves past the right border,
//let it reappear on the left border
if(x>size().width)
x=-125;
gBuffer.drawImage(snail,x,150,this);
repaint();
}
}
//is needed to avoid erasing the background by Java
public void update(Graphics g)
{
paint(g);
}
public void paint(Graphics g)
{
g.drawImage (Buffer,0,0, this);
}
}
|
To show animated sprites, you have to display several different pictures in rapid succession, to
produce the animation effect. With the helper functions in this applet, you can easily load the frames of the sprite animation from a single image strip, that combines all pictures of the animation in one single picture. Look at the image file "running_dog.gif" to see what I mean. All the single pictures in the strip have to be the same size and position one below the other. To change the frames we use a ticker variable which is incremented. When a certain value is reached, the frame changes. The pictures for the animation are from the the free image collection SpriteLib by Ari Feldman. The background is a tiled 80x80 pixels image.
|
//Sourcecode
import java.awt.*;
import java.applet.*;
//we have to import the image package!
import java.awt.image.*;
//a flicker free aprite animation!
public class Project12 extends Applet implements Runnable
{
Thread runner;
private Image Buffer;
private Graphics gBuffer;
int x, ticker=0, frame=0;
Image background, dogStrip, dog[];
//Init is called first, do any initialisation here
public void init()
{
//create graphics buffer, the size of the applet
Buffer=createImage(size().width,size().height);
gBuffer=Buffer.getGraphics();
background=loadImage("background.jpg");
dogStrip=loadImage("running_dog.gif");
dog = new Image[6];
extractImages(dogStrip,dog,6,100,60);
}
public void extractImages(Image imagestrip, Image images[],int num,int width, int height)
{
ImageProducer source = imagestrip.getSource();
for(int i=0; i<num; i++)
{
ImageFilter extractFilter=new CropImageFilter(0,i*height,width,height);
ImageProducer producer = new FilteredImageSource(source,extractFilter);
images[i] = createImage(producer);
}
}
public Image loadImage(String imagename)
{
Image image=getImage(getDocumentBase(),imagename);
MediaTracker tracker=new MediaTracker(this);
tracker.addImage(image,0);
try
{
tracker.waitForID(0);
}
catch(InterruptedException e){}
return image;
}
public void start()
{
if (runner == null)
{
runner = new Thread (this);
runner.start();
}
}
public void stop()
{
if (runner != null)
{
runner.stop();
runner = null;
}
}
public void run()
{
Thread.currentThread().setPriority(Thread.MAX_PRIORITY);
while(true)
{
//Thread sleeps for 15 milliseconds here
try {runner.sleep(15);}
catch (Exception e) { }
//here we draw the tiled background
for(int i=0;i<size().width;i+=80)
for(int j=0;j<size().width;j+=80)
gBuffer.drawImage(background,i,j,this);
x+=3;
if(x>300)
x=-100;
ticker++;
//this sets the animation phases
//you can determine the speed of the phases change here
if(ticker>3)
{
if(frame<5)
frame++;
else
frame=0;
ticker=0;
}
//draws the star animation
gBuffer.drawImage(dog[frame],x,45,this);
repaint();
}
}
//is needed to avoid erasing the background by Java
public void update(Graphics g)
{
paint(g);
}
public void paint(Graphics g)
{
g.drawImage (Buffer,0,0, this);
}
}
|
|
