Categories: Java | Java ME | Games | How To | Code Examples

This page was last modified 18:07, 29 November 2007.

From Forum Nokia Wiki

In our last lesson, we completed our GameCanvas class with all the main interaction between elements. Now that we have all gameplay elements build it's time to improve the look of our game. The idea is to use some images files to represent our game entities instead of using Graphics draw/fill methods. With this in mind i created the some images, based on the free SpriteLib resource pack, to use in our game.

Image

To access and display these images in our Midlet we need to use another of the Low-Level user interface elements the Image class. This class stores graphical image data independently of the display device, in a off-screen memory buffer. Images are either mutable or immutable depending upon how they are created. Immutable images are generally created by loading image data from resource bundles, from files, or from the network. To create immutable Images you can use one the static createImage() methods available in the Image class, remember they may not be modified once created. Mutable images are created as blank images containing only white pixels. To create them use the Image constructors. The application may render on a mutable image by calling getGraphics() on the Image to obtain a Graphics object expressly for this purpose.

For our game we are going to use immutable images to represent the game entities. Let's start by changing our Pad class, first we need to create a Image object in our constructor.

Image image;
public Pad() {        
    try {
      image = Image.createImage("/pad.png");
      width = image.getWidth();
      height = image.getHeight();
    } catch (IOException e) {
      e.printStackTrace();
    }
  }

Then we rewrite the paint method of our Pad class to draw the image we created

public void paint(Graphics g) {    
    g.drawImage(image, x,y, Graphics.TOP | Graphics.LEFT);
  }

As you may have noticed we are using the PNG format, this is the only format that is mandatory in all MIDP implementations, some devices can support other formats like jpeg or bmp but PNG it's the only safe option for all devices.

If you run your Midlet you will see your new good looking pad! Let's do the same for our ball, she's feeling jealous :)

Image image;
 public Ball() {        
    try {
      image = Image.createImage("/ball.png");
      width = image.getWidth();
      height = image.getHeight();
    } catch (IOException e) {
      e.printStackTrace();
    }
  }
 
  public void paint(Graphics g) {    
    g.drawImage(image, x,y, Graphics.TOP | Graphics.LEFT);
  }

If you run your Midlet now you will have a nice looking ball, now you say, let's do the same for our bricks, hold on, take a look to our bricks images. It contains several bricks elements inside it, so we need a way to crop one brick image from the big Image. We could do this by using the setClip methods on the Graphics class, but in Midp 2.0 there is a easier way, the Sprite class.

Sprite

An sprite is common term in games, it refers to a visual element made of an image, normally animated, that can be moved around the game independently of other elements. The Sprite class is the MIDP 2.0 representation of this concept it allows the creation of sprites based on Images with multiple frames. It can change the frames, control animations and check collisionns with other elements.

We could use all these capabilities in our game entities but for know let's start with our Brick class.

public static int BRICK_FRAMES = 20;
Image image = null;
Sprite sprite = null; 
public Brick(){
    // load image
    image = Image.createImage("/bricks.png");
    // create the sprite with 20 frames one for each brick
    sprite = new Sprite(image,image.getWidth()/BRICK_FRAMES, image.getHeight());
    width = sprite.getWidth();
    height = sprite.getHeight();
  }

This code creates a sprite with 20 frames, one for each brick available on the image, now before we paint our brick we need to change the the frame we are going to use.

public void paint(Graphics g) {
    if (active){
      sprite.nextFrame();
      sprite.setPosition(x, y);
      sprite.paint(g);
    }
  }

Now if you run your Midlet you will have some nice disco bricks, changing colors all the time. Another problem we have is that we are loading the "bricks.png" image for each Brick we create, not very optimized. Let's refactor our code to address these problems:

public Brick(Image image, int numFrames, int frameSelected){    
    sprite = new Sprite(image,image.getWidth()/numFrames,image.getHeight());
    // set frame
    sprite.setFrame(frameSelected);
    // get size for collision detection
    width = sprite.getWidth();
    height = sprite.getHeight();
  }
  
  public void paint(Graphics g) {
    if (active){  
      sprite.setPosition(x, y);
      sprite.paint(g);
    }
  }

Now you just load the Image one time in our init() method and select one frame to be used during the lifetime of a brick.

// create bricks
    Image bricksFrames = null;
    try {
      bricksFrames = Image.createImage("/bricks.png");
    } catch (IOException e) {
      e.printStackTrace();
    }
    Brick brick = new Brick(bricksFrames, 20, 0);
    bricks = new Vector();
    for (int i=0; (i*(brick.width+2)) < getWidth(); i++){
      brick = new Brick(bricksFrames, 20, i);
      brick.sprite.setFrame(i);
      brick.x = (i*(brick.width+2));
      brick.y = 20;
      bricks.addElement(brick);
    }

Now you will have a nice row of bricks each it is own color. Hey our game is pretty slick now! In our next lesson we are going to see how we can save our high scores. See you soon.

Downloads:

• Full Source Code
• Jad File
• Jar File