libgdx - combine a number of textures into one

Question

is there a way to combine a number of textures into one texture with libgdx API?

For example, consider having these 3 textures:

Texture texture1 = new Texture("texture1.png");
Texture texture2 = new Texture("texture2.png");
Texture texture3 = new Texture("texture3.png");

The goal is to combine them into one usable texture, is there a way to do it?

I think, the best solution would be to store a `position` for the "final `Texture`" and the offsets of the single `Texture`s and then draw them in the right order. — Robert P, Aug 12 '14 at 06:13

Ville Myrskyneva · Answer 1 · 2017-04-11T09:52:45.453

I wanted to get the same result, but I did not find the previous instructions given to be of any help. Neither I was able to find any other clear solution for this issue, so here's what I managed to get working after I read a bit of api-docs and did some testing of my own.

Texture splashTexture = new Texture("texture1.png"); // Remember to dispose
splashTexture.getTextureData().prepare(); // The api-doc says this is needed
Pixmap splashpixmap = splashTexture.getTextureData().consumePixmap(); // Strange name, but gives the pixmap of the texture. Remember to dispose this also
Pixmap pixmap = new Pixmap(splashTexture.getWidth(), splashTexture.getHeight(), Format.RGBA8888); // Remember to dispose
// We want the center point coordinates of the image region as the circle origo is at the center and drawn by the radius
int x = (int) (splashTexture.getWidth() / 2f);
int y = (int) (splashTexture.getHeight() / 2f);
int radius = (int) (splashTexture.getWidth() / 2f - 5); // -5 just to leave a small margin in my picture
pixmap.setColor(Color.ORANGE);
pixmap.fillCircle(x, y, radius);
// Draws the texture on the background shape (orange circle)
pixmap.drawPixmap(splashpixmap, 0, 0);
// TADA! New combined texture
this.splashImage = new Texture(pixmap); // Not sure if needed, but may be needed to get disposed as well when it's no longer needed
// These are not needed anymore
pixmap.dispose();
splashpixmap.dispose();
splashTexture.dispose();

Then use the splashImage (which is a class variable of type Texture in my case) to render the combined image where you want it. The resulting image has the given background and the foreground is a png image which has transparent parts to be filled by the background color.

score 2 · Answer 2 · answered Apr 05 '20 at 15:11

@Ville Myrskyneva's answer works, but it doesn't entirely show how to combine 2 or more textures. I made a Utility method that takes 2 textures as input and returns a combined texture. Note that the second texture will always be drawn on top of the first one.

public static Texture combineTextures(Texture texture1, Texture texture2) {
    texture1.getTextureData().prepare();
    Pixmap pixmap1 = texture1.getTextureData().consumePixmap();

    texture2.getTextureData().prepare();
    Pixmap pixmap2 = texture2.getTextureData().consumePixmap();

    pixmap1.drawPixmap(pixmap2, 0, 0);
    Texture textureResult = new Texture(pixmap1);

    pixmap1.dispose();
    pixmap2.dispose();

    return textureResult;
}

This looks like clean way of doing it. However, in the event that you use a texture atlas where the texture will be one large bitmap in memory rather than individual memory regions, isn't this very inefficient, since it will copy the entire texture (which might contain _all_ game textures in a single bitmap) instead of just a specific region? — mxk, Jul 17 '21 at 10:28

score 0 · Answer 3 · answered Aug 12 '14 at 09:00

You should use the TexturePacker for creating one big Texture from lots of small one. https://github.com/libgdx/libgdx/wiki/Texture-packer .

And here is GUI version (jar) whcih will help you to pack all your textures in one before putting them to your project: https://code.google.com/p/libgdx-texturepacker-gui/.

You should also remember that maximum size of one texture for most Android and IOS devices is: 2048x2048.

score 0 · Answer 4 · edited May 23 '17 at 12:02

In case you want to use combined texture as atlas for performance benefits, you better use @Alon Zilberman answer.

But I think that your question is about another problem. If you want to get some custom texture from these three textures (e.g. merge them by drawing one at one), then your best solution is to draw to FrameBuffer. Here you can find nice example of how to do it https://stackoverflow.com/a/7632680/3802890

libgdx - combine a number of textures into one

4 Answers4