Moving Objects and Sprite Manager - Part 3

This is part 3 of the series. Previous articles can be found as follows :
Part 1
Part 2

Understanding the Image object

What is a image ? You may think a jpeg file is a holder for image. Such kind of image file can be read into a Image object. What is the internal representation of the Image object in Java ?

A Image is actually an array of pixels. A pixel is usually represented by 3 bytes, commonly known as the R,G,B components. In Java, a four bytes model is used, it is known as the ARGB model. RGB stands for the 3 component color, and "A" stands for alpha, which is a measure of the degree of transparency of the pixel. Since ARGB consists of 4 bytes, it is conveniently packed into a 32 bit integer in Java. Hence a pixel can be represented by a single Integer. So we may think that the Image object is actually an array of Integer, which represents the array of pixels.

For simple application we don't have to care about the array of pixels, we just need to manipulate the Image object as a whole. Java provides API to load a image file into a Image object. It also provides API for drawing the Image object without drawing it pixel by pixel.

// loading a image object
BufferedImage image = javax.imageio.ImageIO.read(new java.io.File("bunny_sprite.png"));

// drawing a image object at position(0,0)
gr.drawImage(image, 0, 0, this);
// Noted : gr has a data type of java.awt.Graphics2D
// The fourth parameter "this" is a image observer, 
// which is usually a image container such as a JPanel.
// at the moment you don't have to know what the ImageObserver actually does.
// you may even pass a null value as the ImageObserver.

Simple Image Panel

Let's create a simple image panel to show how to use the above methods. You will need bunny_sprite.png and background.jpg in the running folder.

bunny_sprite.png

background.jpg

Acknowledgement

1. bunny_sprite.png is provided by Moosader :
   
   http://moosader.deviantart.com/art/Public-domain-bunny-sprite-151156167
   
2. background.jpg is provided by Jesccia Crabtree
   
   http://www.jessicacrabtree.com/journal1/public-domain-nature-photos
   

/******************************************************************************
* File : SimpleImage.java
* Author : http://java.macteki.com/
* Description :
*   Simple panel to demonstrate loading and drawing image
* Tested with : JDK 1.6
******************************************************************************/


import java.awt.image.BufferedImage;

class SimpleImage extends javax.swing.JPanel
{
  BufferedImage backgroundImage;
  BufferedImage spriteImage;

  public SimpleImage() throws Exception
  {
    // load background image
    backgroundImage=javax.imageio.ImageIO.read(new java.io.File("background.jpg"));

    // load sprite image
    spriteImage=javax.imageio.ImageIO.read(new java.io.File("bunny_sprite.png"));

    // set panel size to the dimension of the background
    int panelWidth=backgroundImage.getWidth(null);
    int panelHeight=backgroundImage.getHeight(null);
    setPreferredSize(new java.awt.Dimension(panelWidth,panelHeight));
  }

  // override the paint() method
  public void paintComponent(java.awt.Graphics gr)
  {
    gr.drawImage(backgroundImage,0,0,this);

    gr.drawImage(spriteImage,50,200,this);
  }

  public static void main(String[] args) throws Exception
  {
    javax.swing.JFrame window = new javax.swing.JFrame();
    window.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
    window.setTitle("Macteki Image Panel");

    SimpleImage imagePanel=new SimpleImage();
    window.add(imagePanel);

    window.pack();
    window.setVisible(true);
  
  }
}

Output of Simple Image Panel

Going next

The source image for sprite animation has a pink background. The pink color covers the background photo and it is not a desirable effect. We will talk about transparency in the next article.

Part 3 completed. To be continued...