This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revision | |||
manual:textures_and_images [2013/05/30 12:34] – [Texture Atlases] daniel | manual:textures_and_images [2013/05/30 12:39] (current) – daniel | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Textures and Images ====== | ||
+ | |||
+ | In the previous section, you might have noticed that we displayed an image using the SPImage object, but used an SPTexture object to set the button' | ||
+ | |||
+ | ===== Textures ===== | ||
+ | |||
+ | 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 iPad. | ||
+ | |||
+ | In Sparrow, that device is called " | ||
+ | |||
+ | < | ||
+ | **What exactly is an Image in Sparrow?** | ||
+ | |||
+ | In order to make full use of GPU acceleration, | ||
+ | |||
+ | {{ : | ||
+ | </ | ||
+ | |||
+ | To create a texture, you initialize an object of type " | ||
+ | |||
+ | <code objc> | ||
+ | // create the texture object | ||
+ | SPTexture *texture = [SPTexture textureWithContentsOfFile: | ||
+ | |||
+ | // display the texture through an image | ||
+ | SPImage *image = [SPImage imageWithTexture: | ||
+ | |||
+ | // or do the same in one line: | ||
+ | SPImage *image = [SPImage imageWithContentsOfFile: | ||
+ | </ | ||
+ | |||
+ | Every texture you create takes up precious memory. So, if you need to display something multiple times simultaneously, | ||
+ | |||
+ | |||
+ | ==== 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. | ||
+ | |||
+ | For now, you know enough about textures to use them in Sparrow. We will revisit the topic a little later, though. If you want to peek ahead, you'll find more information here: [[Texture Formats]]. | ||
+ | |||
+ | ===== Texture Atlases ===== | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | Even if all the previous samples created textures directly from PNG files, a real application should not do that. Here's why. | ||
+ | |||
+ | * Sparrow batches the rendered Quads/ | ||
+ | * Some texture types have certain limitations, | ||
+ | |||
+ | By using a texture atlas, you avoid both the texture switches and the power-of-two limitation. All textures are within one big " | ||
+ | |||
+ | The trick is to have OpenGL use this big texture instead of the small ones, and to map only a part of it to the quad you are drawing. If the images are arranged in a smart way (more on that later), this will lead to a very efficient memory usage, wasting as little space as possible. | ||
+ | |||
+ | <note tip> | ||
+ | Now lean back and enjoy a comical introduction to sprite sheets, brought to you by the " | ||
+ | </ | ||
+ | |||
+ | ==== Creating the Atlas ==== | ||
+ | |||
+ | The positions of each sub-texture are defined in an XML file like this one: | ||
+ | |||
+ | <code xml> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | ... | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | 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 '' | ||
+ | * Another great tool is [[http:// | ||
+ | |||
+ | <note tip> | ||
+ | //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: [[http:// | ||
+ | </ | ||
+ | |||
+ | ==== Using the Atlas ==== | ||
+ | |||
+ | So, now you have a texture atlas. But how do you use it? | ||
+ | |||
+ | Create a new " | ||
+ | |||
+ | <code objc> | ||
+ | // load the atlas | ||
+ | SPTextureAtlas *atlas = [SPTextureAtlas atlasWithContentsOfFile: | ||
+ | |||
+ | // display a sub-texture | ||
+ | SPTexture *jupiterTexture = [atlas textureByName: | ||
+ | SPImage *jupiterImage = [SPImage imageWithTexture: | ||
+ | </ | ||
+ | |||
+ | It's as simple as that! | ||
+ | |||
+ | ----- | ||
+ | |||
+ | //Next Section: [[Displaying Text]]// | ||