Thursday, July 12, 2007

Timed Animation

Switching Images


Ok so one of the things that you might want to do after figuring out how to draw images on the screen that were loaded from a file is to animate a bunch of images. One of the main concepts to making animation is switching between images. To do this we simply use an indexed array of images to represent our animation.
// A collection of frames used for animation.
private ArrayList frames = new ArrayList();
This means that each frame or image has an integer position in the array. We can use this to position to move to the next frame or even to wrap around to rewind to the first frame. So we'll need to keep track of our current frame.
// An integer representing the current frame to display.
private int animation_frame = 0;
Likewise we will need the first frame of our animation and also the last. The first frame in this case will be zero or the beginning index in the Array you could actually create another variable for the beginning position so that you can randomize it for explosions or other effects. The last frame is of course the last index in the ArrayList and that will be frames.size()-1. We will be checking to make sure that our animation_frame variable value stays within zero and frames.size()-1 other wise an ArrayIndexOutOfBounds exception will be thrown.

Drawing The Current Frame


So now that we have a list of images (frames) that will become our animation we want to be able to draw the current image in the list that corresponds to the index animation_frame. This is how we would draw it using a Graphics object.
g.drawImage((Image)frames.get(animation_frame), 10, 150, null);
As you can see its pretty simple. We can substitute the second and third parameters for the x and y position respectively. In another post I will show how to vary these two parameters over time in order to obtain certain movement and physics effects. There are also additional methods for drawImage within the graphics object one in particular allows you to set the width and height of the image you are drawing which allows for a lot more effects in game.

Changing The Frame


Ok so we are displaying the current image in the list of frames for our animation now we want to cycle or loop through the entire list but we only want to change a frame at a fixed interval of time. For this we will use a timer. And so we create a java.util.TimerTask which will increment the animation_frame variable thus moving to the next image in the list.

We need to check after we change the variable to make sure that we have not reached the last frame if we have then we want to loop back to the first image in the list.
TimerTask animationTask = new TimerTask() {
   public void run() {
      //move the animation to the next frame.
      animation_frame++;

      //check to see if we have finished all frames.
      if( animation_frame >= frames.size() ) {
     
         //rewind to the beginning of the animation.
         animation_frame = 0;
      }
    }
};
Now we can schedule the TimerTask with the java.util.Timer and give it an interval on which to change frames.
// set the animation to run at 2 frames per second.
timer.schedule(animationTask,0,500);
So that is pretty much all you need to create animations.

Seeing Is Believing

Wednesday, July 11, 2007

Drawing An Image

Back To Basics

On of the first things that you need to be able to do when creating a game is to simply draw an image to a particular location within a window. Its relatively simple to draw the image to the screen, for that you would just use the following call:
//this call draws the image on the JFrame.
g.drawImage(imgToRender, 0, 50, null);
Well now that is if you already have created a valid image and assigned it to 'imgToRender'. Well unfortunately in Java there is no one accepted way to load an image. And of course you are probably thinking about loading an image from a file so that anyone who has Paint or Photoshop skills can go in an create or update art for your game. Well here is one way:
// This is one method to load images
imgToRender = (new ImageIcon("pictures/redX.png")).getImage();
You can replace the "pictures/redX.png" with the path to your own image. In the path string if you do not specify a drive or protocol type meaning file:///, C:/ or http://) then you can put in the relative path from the execution directory.

I will discuss loading resources such as image and sound files from different location in another post but essentially the basics of drawing an image are really all you need to do tons of cool things in your game.

Seeing Is Believing