Java ME Guideline: How to resize images to screen size

Contents

• Problem Description
  • Use Cases
• Solution Description
  • Solution Requirements
  • Solution Approach
  • Solution Overview
  • Alternative Solutions
  • Examples, Illustrations
• List of Affected Devices
• Keywords

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. 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]
   1. Read image data into a graphics buffer
   2. Create a new image buffer with the right size
   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

1. Load multiple Image versions into the Jar (applicable for devices with large memory and networks with capability to download lare JAR files)
2. 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    

3. List of Affected Devices

All devices

4. Keywords

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