4

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?

1
  • 1
    I think, the best solution would be to store a position for the "final Texture" and the offsets of the single Textures and then draw them in the right order. Commented Aug 12, 2014 at 6:13

5 Answers 5

2

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.

Sign up to request clarification or add additional context in comments.

Comments

2

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

1 Comment

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

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.

Comments

0

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

Comments

-1

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.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.