compactTangram© 0.7.4 - organizing textures, performance preserving/increasing plan

Share on Twitter Share on Facebook

There are many things to do with the texture sources before I can use them to create the final textures. The main thing is to have their dimensions cropped to some power of 2 (I'll try to limit everything to 128), and collect specular frames into atlases, to use as small amount of pixels as it is possible to preserve performance.

My tan images now created in a way where the center of the image is the center of the actual tan polygon (It's all down to preserve the piece's center when user rotates it - see my previous post the concept). If I crop these images, I will lost that center information, so I'll have to "remap" the image/texture on the OpenGL primitive. The polygon's center must match with the textured tan's center. Great.

So first I have to crop the current PNGs to the pixel dimensions of the renderable OpenGL primitives. Fortuneately almost every tan can be cropped (preserving centers) to a dimension of 128x128, except tan0 (and tan1), the big triangles. So the rest of the textures can be mapped with the "default" mapping (with atlas offsets of course). The big triangle's smallest possible centered (!) texture size is 168x168, so it needs correctional offset while mapping the 128x128 image to the bottomleft of the 168x168 OpenGL primitive (you can see the "wrong" center at the bottomright of the image below). There is a 40 pixel (23,8095238% of 168) wide padding to be applied, which means that the right and the top mapping coordinate must be 1-0.238095238, 1-(20/168) means fullWidth-(paddingInPixel/polygonSizeInPixel). Notbad.

Atlases. I have 12 specular frames now, needs a simple diffuse map, a selected diffuse map, and a shadow map, which is 15 different sprite (maybe a 16th sprite can be a development piece with signed center), they can be tiled 4x4 (512x512 in pixels), or 8x2 (1024x256 in pixels). I have 7 tan, so I need 7 piece of 512x512 image, and one for the background, and a small one for the info button. It means 8 piece of 512x512 sized PNGs. Somebody said at stackoverflow that iPhone can hold up a maximum of 3 piece 1024x1024 sized texture, these calculations need 2 of them (the puzzle selector backside needs memory as well, hope I won't run out of memory... ...scary).

The organized texture atlas (sprite sheet) with all the textures needed to render a tan layer composite (for a particular piece). Having all images in one PSD it is so simple to edit the textures (playin' around with edges, opacity, hue, etc). The final PNG will have transparent (R0,G0,B0,A0) background of course.

Another important thing is to draw my sprites in one single pass, so I have to learn using glDrawElements as I suppose (nothing special, just use of multi-dimensional array packs I hope with offset counting).

One more thing to keep in mind is to cache somehow the unchanged parts. Every tan has 4 different sublayer, but sublayer composition changes only while rotating. Because of this I have already set up separate framebuffers for prerender the currently manipulated tans (connected to texture "slots"). The final render needs only the background, the other 6 already prerendered tans, and the newly created composition.

Maybe I could "snapshot" the remaining/underlying 6 tan with the background, then use only 2 primitive for the final image (one is the screenshot without the current tan, and one is the current tan's fresh composition). I hope these passes won't be too resource expensive (with that many alpha blending).

Oh, god. Isn't it too difficult? Sometimes I feel this all really tiring. Hope performance will be perfect. Maybe tans with multi-texturing instead of use 4 primitives would be faster, but I just cannot deal with glTextEnvi.

Ahh, another small trick I read somewhere is to use always the 1.0f format to avoid runtime type-conversations, and to turn off "Compile for thumb" in the target properties (Target/Get Info/GCC 4.2 - Code Generation), which makes floating point calculations faster (3 times they say).

I forgot to mention that most of the practices mentioned here can be found in the example GLTextureAtlas provided by apple. Now let's head to Illustrator/Photoshop to have the first texture atlas of my life (Update: done, and uploaded above).