Java ME Guideline: How to resize images to screen size

 
 
Design Guidelines - General IntroductionDesign Guidelines - Technical Overview 

Contents
  1. Problem Description
  2. Solution Description
  3. List of Affected Devices
  4. 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.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

  1. It is recommended to use large images in the JAR file so that quality will not be lost in the resizing process

  2. Consider which images to resize on start up (backgrounds, heavily used images) and which images to resize only when necessary

  3. 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    
 
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

 
Copyright 2006 Sun Microsystems, Inc. and Orange SA All Rights Reserved.
Left Curve
Java SDKs and Tools
Right Curve
Left Curve
Java Resources
Right Curve
JavaOne Banner
Java 8 banner (182)