Java ME Guideline: How to resize images to screen size

Design Guidelines - General Introduction Design Guidelines - Technical Overview

Contents

1. Problem Description

Matching application images to different screen sizes

Use Cases

Games, Players, Any application that uses images as background

2. Solution Description

Solution Requirements

All devices and platforms

Solution Approach

SUBJECTIVE - query the screen size of the device and resize images to the desired screen size.

Solutions Overview

Solution description:

1. Querying Screen size: [ example]

1.1 During application start-up use the Canvas class to determine Screen width and height (a dummy Canvas can be created for this purpose)

2. Resize images to the desired size according to the Screen size [ example]

2.1 Read image data into a graphics buffer

2.2 Create a new image buffer with the right size

2.3 Write image data while "streching" or "shrinking" to the new size

It is recommended to use large images in the JAR file so that quality will not be lost in the resizing process
Consider which images to resize on start up (backgrounds, heavily used images) and which images to resize only when necessary
Consider screen proportions (Height/Width) which may require trimming as well as resizing load more than one prototype image (e.g. for Portrait / Landscape type screen)

Alternative Solutions

Load multiple Image versions into the Jar (applicable for devices with large memory and networks with capability to download lare JAR files)
Use tiling to "Compose" background from samll images (applicable for MIDP 2.0 devices)

Examples, Illustrations

Example for querying screen size

...

    /* This code can be called anywhere in the application.
     * recommended to use during startApp

     int width and int height are class members*/

    Canvas dummyCanvas = new Canvas()

    // get the dimensions of the screen:

    width = dummyCanvas.getWidth ();
    height = dummyCanvas.getHeight();

  ...

Example for image resizing

/**
  * This methog resizes an image by resampling its pixels
  * @param src The image to be resized
  * @return The resized image
  */

  private Image resizeImage(Image src) {
      int srcWidth = src.getWidth();
      int srcHeight = src.getHeight();
      Image tmp = Image.createImage(screenWidth, srcHeight);
      Graphics g = tmp.getGraphics();
      int ratio = (srcWidth << 16) / screenWidth;
      int pos = ratio/2;

      //Horizontal Resize        

      for (int x = 0; x < screenWidth; x++) {
          g.setClip(x, 0, 1, srcHeight);
          g.drawImage(src, x - (pos >> 16), 0, Graphics.LEFT | Graphics.TOP);
          pos += ratio;
      }

      Image resizedImage = Image.createImage(screenWidth, screenHeight);
      g = resizedImage.getGraphics();
      ratio = (srcHeight << 16) / screenHeight;
      pos = ratio/2;        

      //Vertical resize

      for (int y = 0; y < screenHeight; y++) {
          g.setClip(0, y, screenWidth, 1);
          g.drawImage(tmp, 0, y - (pos >> 16), Graphics.LEFT | Graphics.TOP);
          pos += ratio;
      }
      return resizedImage;

  }//resize image

Additional Information

3. List of Affected Devices

All devices

4. Keywords

Screen, Size, Sprites, Games, Background, image, image objects, MIDP 1.0, MIDP 2.0