I would propose that you try TexturePacker
- you can simply drag and drop all your images and get them packed
- you can apply different compression - e.g. use indexed PNGs which consume way less memory - up to 70% less compared to a standard PNG file
- you can create a file data files that contain the name + position of each of your buildings
- the free version might already suffice to create the sprite sheets for you
Do you use a game development framework like AndEngine, Cocos2d-x or LibGdx? => None
Do you need all your images loaded at the same time? It sounds like you'll run into massive RAM problems on the target devices.
Update: Snake sent me some images. As promised won't make them public here so I've created some art myself to demonstrate how to reduce the memory usage.
In the original image, only one part of the image was moving. I've placed a bird on a house to demonstrate this:
Basically packing the complete animation into a sheet is a big waste of memory. You should split static and moving parts:
Static:
Anim01:
Anim02:
Keep the original position of the bird in the images. This is why there is so mich empty space above. You need this for aligning the animation.
Now drag the images on TexturePacker and select the following parameters
- Data format: JSON hash (or XML if you prefer that)
- TrimMode: Trim (this creates rectangles)
- Pixel format: INDEXED 8bit - to create 8bit PNGs (about 70% less memory)
- Allow Rotation: false
- Enter a filename for the data
The result is that you now get 2 files: The sprite sheet and a JSON description file.
"house_anim_01.png":
{
"frame": {"x":351,"y":246,"w":110,"h":79},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":67,"y":8,"w":110,"h":79},
"sourceSize": {"w":400,"h":400},
"pivot": {"x":0.5,"y":0.5}
},
The important parts are frame and spriteSourceSize.
The frame gives you the location of the original sprite in the sprite sheet.
spriteSourceSize gives you the offset for drawing the image - the parts of the image that are left out because of the trimming:
A simple pseudo-code drawing routine looks like this:
drawImage(spritename, posX, posX)
{
data = sheetData[spritename]
offsetX = data.spriteSourceSize.x
offsetY = data.spriteSourceSize.y
frameX = data.frame.x
frameY = data.frame.y
width = data.frame.w
height = data.frame.h
screen.draw(sheetImage, posX+offsetX, posY+offsetY, width, height)
}
You might have to adjust the offset calculation depending on the pivot point / origin in your graphics system. The routine above assumes a coordinate system who's origin is top left.
Then simply draw the house in 2 passes:
draw("background", 100, 100);
draw("anim_01", 100, 100);
You don't have to care about the offsets - since the images are already aligned.
