Images

From Slick2D Wiki
Jump to: navigation, search

Images are the most primitive drawing tool within Slick. They are the root of most of utilities for rendering. Each image will draw a rectangular area on the screen filled with some pixels based on either a generated source (see ImageBuffer) or a image loaded from disk.

Slick currently uses java's ImageIO to load images so supports, PNG, GIF and JPG. It also supports TGA through a pure java loader which is generally much faster than using ImageIO. However, the TGA must be non-compressed and 32 bit to be loaded correctly. Note that of course resources are generally placed in JAR files and as such TGA compresses down in this context in a similar magnitude to PNG.

As with most things in Slick images are currently rendered in the simplest manner possible, using OpenGL immediate mode. This is not the most efficient manner and hence this is subject to change at a later date (should a need arise).

Note that fonts, sprite sheets and particles all rely on the basic image class. It's also worth remember that any given texture (or external image) is loaded only once and hence no caching is required on the developers side. This also means that sub-images and references to the original data so memory is not duplicated. As a side effects images are considered non-mutable - i.e. they can not be changed - which may have invalidated another references rendering.

Loading Images[edit]

To load an image, you only need to make a simple object initialization call, where the Slick Engine will do most of the preparation for you.

Example:

Image img = new Image("res/myimage.png");

The image can either be in the classpath (for webstart) or on the file system (for local testing).

Rendering[edit]

Rendering images that have been loaded can be just as simple as loading them into your program. Simply call the 'draw' method in your 'render' method as so:

img.draw(x, y);

This will render your image at the specified X and Y coordinates of the GameContainer's graphics.

Image Filtering[edit]

Though rendering your image may seem simple enough, sometimes there can be strange outcomes to what is shown on screen, in comparison to the actual picture you are trying to load. One point of interest is the image's filter setting. If you wish to scale your image without a blurring effect (read: Linear Filtering; causes textures to blend colors in the magnification process), you will need to use the 'Nearest' filter setting. This can come in handy when working with pixel-style art games, as it retains the color of the actual image being used by using the nearest pixel to the expanded sector.

Enabling 'Linear' Filtering: (Example of 16x16 scaled at 4f with Linear Filtering: http://i.imgur.com/Iw6gPQr.png)

Image img = new Image("res/myimage.png");
img.setFilter(Image.FILTER_LINEAR);

Enabling 'Nearest' Filtering: (Example of 16x16 scaled at 4f with Nearest Filtering: http://i.imgur.com/0yHRMWy.png)

Image img = new Image("res/myimage.png");
img.setFilter(Image.FILTER_NEAREST);

See Also[edit]