[SOLVED] [LibGDX] Combining Images

Newbie & Debugging Questions
#1

Hi all,

I’m working on creating scalable GUI components programmatically by drawing layers on top of each other. For example, I’m using Sprites for gradients and drawing on top of that with 9patch Images for borders and bevel effects (although I might be able to use Pixmaps to draw the images instead of using 9patch Images, but haven’t had a chance to try this out yet).

So essentially for each individual component like a button, I’m going to end up with several layers of drawing for each button…but I was wondering if there was a way to do all of the creation on startup and then merge the layers together and end up with just a single image that I can then load into all of the buttons in my program. It seems like it would be far more efficient for each button to only have to draw a single image instead of multiple images.

I think FrameBuffer might do what I need, as from what I understand it writes the output of SpriteBatch to a Texture, but I’m not totally clear on how it works and how to use it. The few examples I have been able to find used the FrameBuffer inside the render method in connection with the SpriteBatch. However, I don’t want to use it on every frame in the render method. I would like to be able to combine all of the image layers in the constructor of my GUI class after they have been created based on the device’s resolution, and then use a single image in the rest of the program.

It seems to be a difficult task getting Sprites, Images, and Pixmaps all to combine or be able to draw them to a format that I can use to create a Texture, or an Image, etc.

Is what I want to do possible? Thanks! :slight_smile:

#2

Well, never mind…I figured it out. I spent days on this problem and just within a few hours of posting on the forum I got it working. LOL

My problem was a size issue. Turns out the FrameBuffer was working but it wasn’t the right size so it didn’t seem like it was doing anything. But setting the size with Gdx.graphics.getWidth() and Gdx.graphics.getHeight() did the trick.

I didn’t post my code before because I just just screwing around and didn’t think I was even in the ballpark of getting it working. But I’ll post it now in case this is useful to anyone else. :slight_smile:

public class Background extends Table {
	public final float width;
	public final float height;
	
	TextureAtlas atlas;
	NinePatch ninePatch;
	Sprite color;
	Image bevel;
	Image border;
	Image combinedBackground;
	
	private final float rgbMax = 255;
	Color backgroundColor = new Color(86/rgbMax, 86/rgbMax, 86/rgbMax, 1);
	
	public Background(float width, float height){		
		this.width = width;
		this.height = height;
		
		initBackground();
	}
	
	private void initBackground(){
		// BACKGROUND COLOR
		Texture texture = new Texture("white.png");
		TextureRegion whitePixel = new TextureRegion(texture);
		color = new Sprite(whitePixel);
		color.setSize(width, height);
		color.setColor(backgroundColor);
		
		// BEVEL
		atlas = new TextureAtlas(Gdx.files.internal("background.atlas"));
		ninePatch = atlas.createPatch("background");
		bevel = new Image(ninePatch);
		bevel.setSize(width-2, height-2);
		bevel.setPosition(getX()+1, getY()+1);
		
		// BORDER
		atlas = new TextureAtlas(Gdx.files.internal("border.atlas"));
		ninePatch = atlas.createPatch("border");
		border = new Image(ninePatch);
		border.setSize(width, height);
		
		// MERGE
		mergeBackground();
	}
	
	public void mergeBackground(){
		FrameBuffer buffer = new FrameBuffer(Format.RGBA8888, Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), false);
		Batch batch = new SpriteBatch();
		
		buffer.begin();
		batch.enableBlending();
		Gdx.gl.glBlendFuncSeparate(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA, GL20.GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA);
		Gdx.gl.glClearColor(1, 0, 1, 0);
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
		
		batch.begin();
		
		color.draw(batch);
		bevel.draw(batch, 0.3f);
		border.draw(batch, 1f);
		
		batch.end();
		buffer.end();
		
		TextureRegion combinedTexture = new TextureRegion(buffer.getColorBufferTexture());
		combinedTexture.flip(false, true);
		
		combinedBackground = new Image(combinedTexture);
	}
	
	@Override
	public void draw (Batch batch, float parentAlpha) {
		applyTransform(batch, computeTransform());
		
		combinedBackground.draw(batch, parentAlpha);
		
		resetTransform(batch);
		
		super.draw(batch, parentAlpha);
	}