Textures and Images


In the last section, you might have noticed that we displayed an image using the SPImage object, but used an SPTexture object to set the button's image. What is the difference between an image and a texture?

A texture is just the data that describes an image — like the file that is saved on your digital camera. You can't show anybody that file alone. It's all zeros and ones, after all. You need some device that can display the image, like your iPod.

In Sparrow, that device is SPImage. SPImage has another constructor that makes it more clear what happens.

// create an image from a texture:
SPTexture *texture = [SPTexture textureWithContentsOfFile: @"face.png"];
SPImage *image = [SPImage imageWithTexture:texture];
// or do the same in one line:
SPImage *image = [SPImage imageWithContentsOfFile:@"face.png"];

Every texture you create takes up precious memory. So, if you need to display something multiple times simultaneously, load the texture only once, and use different SPImage objects to display them.

Texture Atlases

A texture atlas image from Penguflip

Even if all the previous samples created textures directly from PNG files, a real application should not do that. Here's why.

  • In OpenGL, there's always one texture active at a given moment. Whenever you change the active texture, a “texture-switch” has to be executed, and that switch takes time.
  • To use a texture in OpenGL, its height and width must each be a power of 2. Sparrow hides this limitation from you, but you will nevertheless use more memory if you do not follow that rule.

By using a texture atlas, you avoid both texture switches and the power-of-two limitation. All textures are within one big “super-texture”, and Sparrow takes care that the correct part of this texture is displayed. (Some other frameworks call this feature “Sprite Sheets”.)

To find out more about the advantages of texture atlases, I recommend you have look at this great (and funny!) video created by Andreas Löw, the author of TexturePacker.

How to use them

In Sparrow, a texture atlas is very easy to use, so you should definitely take advantage of that.

The positions of each sub-texture are defined in an XML file like this one:

<TextureAtlas imagePath="atlas.png">
 <SubTexture name="moon" x="0" y="0" width="30" height="30"/>;
 <SubTexture name="jupiter" x="30" y="0" width="65" height="78"/>;

You don't have to create a texture atlas manually. You can use the following tools to create a texture atlas:

  • Sparrow has its own atlas generator. Find it in the folder sparrow/util/atlas_generator. The README file in the same folder shows you how to install and use it.
  • Another great tool is TexturePacker. It has a GUI that is very simple to use (available in a free and commercial version).
  • The online tool Packer can be used, too. Sparrow contains a small Ruby-script that will convert its output into Sparrow's native format.
Andreas Löw supports us by sharing some of his revenue with us when Sparrow users purchase one of his tools. If you choose to buy Texture Packer, it would be great if you could use the following link: Purchase TexturePacker – thanks in advance!

So, now you have a texture atlas. But how do you use it?

// load the atlas
SPTextureAtlas *atlas = [SPTextureAtlas atlasWithContentsOfFile:@"atlas.xml"];
// display a sub-texture
SPTexture *jupiterTexture = [atlas textureByName:@"jupiter"];
SPImage *jupiterImage = [SPImage imageWithTexture:jupiterTexture];

Create the atlas only once when the game is initialized, and reference it throughout your game.
It's as simple as that!

File Formats

In the samples above, we've always used PNG files for our textures. Sparrow supports more file formats, though, and each has specific advantages and disadvantages. Describing all of that would go beyond the scope of this manual, though.

Once you've mastered the basics of Sparrow, however, you should definitely have a look at this tutorial: Texture Formats, Best Practices. It teaches you all you need to know about the file formats of textures.

Next Section: Event Handling

  manual_v1/textures_and_images.txt · Last modified: 2013/03/05 10:19 (external edit)
Powered by DokuWiki