AndEngine Tutorial #1: Texture Size

Textures are clearly a very important part of building any game. One concept that often trips up developers is the idea that texture sizes must be in powers of two (an OpenGL ES limitation).

What this means is that the width and height values have to be 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, etc. It is a good idea not to go above 1024. Keep in mind that this does NOT mean that you have to have a square texture. Having sizes like 128×64 or 64×512 is perfectly acceptable.

Often a question that comes up is: “But what should I do if I have a 120×40 graphic? I shouldn’t have to scale the image up to 128×64, and even if I did, that would force me to crop part of the image since it’s a different aspect ratio”.

Luckily, you don’t have to resize the image to accommodate the power of 2 requirement.  An AndEngine ‘Texture’ is simply “one giant canvas where you can place smaller images”.  This means that you can instantiate a 128×64 ‘Texture’ and place your 120×40 graphic on its “canvas”.  Will you have some unused space?  Yes, but in the grand scheme of things this has a minimal impact on memory.

Better yet, why not increase the size of the Texture and put more than one image on it?  Let’s say you have 2 other images that are 120×40.  This would leave you with a total of three images and a combined height of 120.  Why not use a 128×128 Texture and really minimize wasted space? Combining these three images into one texture leaves you with 1,984 wasted units instead of the 3,392 wasted units produced by using 3 individual textures.  Just for perspective, we’re talking about a grand total of 16,384 units in a 128×128 Texture. With proper planning, you can make the most out of your Textures while minimizing your memory imprint.

The next step would be to create three TextureRegion instances.  Each of these regions will define the area of the three images you just added to your 128×128 Texture.  TextureRegion dimensions do NOT have to be in powers of two thus allowing you to maintain the original 120×40 images without compromise.  One last note, if you start to notice artifacts on the edges of your images within your app, consider adding some padding between images on the Texture canvas as it’s possible that there’s some bleeding.

To learn more about textures I recommend reading AndEngine’s official Understanding Textures/TextureSources/TextureRegions.

For more articles like this, news, tutorials, trends and more follow us on Twitter.

Check out the rest of our AndEngine tips and tutorials OR go directly to tutorial #2.