CODEWITHSUNDEEP
javalibgdx
user3705007
user3705007

Reputation: 295

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

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 this?

Upvotes: 4

Views: 4017

Answers (5)

Владислав Шестернин
Владислав Шестернин

Reputation: 1377

Use Pixmap

The expansion function combines 2 textures in the center.

fun Texture.combineByCenter(texture: Texture): Texture {
    if (textureData.isPrepared.not()) textureData.prepare()
    val pixmap1 = textureData.consumePixmap()

    if (texture.textureData.isPrepared.not()) texture.textureData.prepare()
    val pixmap2 = texture.textureData.consumePixmap()

    pixmap1.drawPixmap(pixmap2,
        (width / 2) - (texture.width / 2),
        (height / 2) - (texture.height / 2),
    )
    val textureResult = Texture(pixmap1)

    if (pixmap1.isDisposed.not()) pixmap1.dispose()
    if (pixmap2.isDisposed.not()) pixmap2.dispose()

    return textureResult
}

Don't forget to dispose the texture later.

If before merging at least one of the textures had pixmap.dispose [pixmap.isDisposed=true], then you will have problems. The solution is simply to use pure textures and their pixmaps since they are created and disposed 1 time.

Upvotes: -1

TJRC
TJRC

Reputation: 434

@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;
}

Upvotes: 2

Ville Myrskyneva
Ville Myrskyneva

Reputation: 1640

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.

Upvotes: 2

Metaphore
Metaphore

Reputation: 759

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

Upvotes: 0

Alon Zilberman
Alon Zilberman

Reputation: 2155

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.

Upvotes: 0

Related Questions