I am given about 30 textures in PNG 32bit format. All textures are of equal size (wider than iPad screen). Size is not square and neither width not height is a power of 2. The same textures are meant to be used for iPhone version of the game.
In the game these textures are assumed to be used for an animation (each texture is a frame of the animation). Of course, 30 textures using 4MB each are not very fast to animate and memory consumption is nowhere near an acceptable level.
So, being novice in the OpenGL ES and Cocos2d, I am seeking for recipes how I can optimize these particular textures and textures in general.
Additional info about textures I should deal with: all textures have the same gradient background (surface of a sea) and areas that different (waves). Each wave is somewhat unique and waves occupy almost all the texture. Textures are exported from Flash (they are vector images initially).
First advice: change the design. If it’s not yours, use blunt force if necessary. This is hardly going to work reasonably well.
You will have to frequently load and unload textures while animating to keep the memory consumption in check. This will limit the achievable framerate of the animation. I suspect it will be at best 30-40 fps on iPad and 4th generation devices, probably abhorrently slow on 1st to 3rd generation devices.
The best optimization you can do is to not use the Flash exported fullscreen textures. Basically what Flash does is animate everything for you, and then output a fullscreen image for each animation frame. This is the worst possible solution for animating anything for mobile devices.
Instead, recreate all of the animations within cocos2d using individual images and cocos2d actions to compose the same animation or one that’s close enough. It’s more coding work, but it’ll perform a lot better. There may be tools like LevelHelper which can assist you but I’m not sure if they can show you a realtime preview of the animations. There’s also a tool that can import Flash timeline animations but I can’t say how well it works, or whether it’s working at all.
Use Texture Packer to create texture atlases from individual images to conserve memory and speed up rendering even more, in particular in conjunction with CCSpriteBatchNode. Plus Texture Packer allows you to experiment with the various texture formats, and it will export SD resolution images should you want to support non-Retina devices.
Because another good optimization is to reduce the color bit depth as much as possible. If you go from 32-bit to 16-bit (RGBA4444 or RGBA5551 or RGB565 depending on what kind of transparency you need) you already cut down your memory consumption in half, and rendering speed increases a bit as well.
If possible use one of the PVR compressed formats, in particular for sprites which are always moving because the degraded image quality will be almost impossible to notice with moving sprites.
However, since you mention gradients those will be affected the most by a reduced color bit depth. If it’s a simple gradient you can replace the gradient background with CCLayerGradient to save the memory of the background image.
Finally you may be able to use smaller images and scale them up. Especially for transparent images the fact that scaling the image up will make it look blurred can actually be beneficial.
To summarize: