Do I need to use shaders for this loading bar?

Newbie & Debugging Questions
#1

So I am in the progress of adding a loading bar to a game and the problem is that the loading bar has rounded edges. So using this formula here:

bar.setWidth(originalWidth / 100 * progressLoaded);

Results in the curved edges being all squashed, instead I want to progressively show more of the bar as the progress increases, not increase it’s width.

So basically I want to set all the pixels to be transparent and then alter them to their original colors as the progress is increased.

So, is there a way to do this or do I need to make a shader, which I have never done before.

#2

Have 3 images.

(| ====== |)

Render first and third one with normal size, and stretch the middle one.

#3

So you mean have the curved edges separate from the bit that sizes up? Would that not look a bit shit?

#4

What would look shit?

#5

I think I am confused lol.

#6

If you are using libgdx, you can use a NinePatch to keep the edges the same scale while scaling the inside.

#7

This is how I do a loading bar :):

  • Render the border
  • Render the inside as one piece but glScissor the image by [icode](percent * totalWidth)[/icode]

Result:

CopyableCougar4

#8

That is pretty good, however I am using LibGDX and I tried Ninepatch with no success, still looks weird.

I am not sure where I should enable/disable the scissor test, it says I can not do it within glBegin and glEnd, which is the same as spritebatch.begin() and spritebatch.end(), should I maybe disable drawing for this actor (scene2d) and draw it manually?

#9

This is how I use glScissor.

public void glScissor(Renderable renderable) {
		GL11.glEnable(GL11.GL_SCISSOR_TEST);
		GL11.glScissor(Math.round(x), (Settings.HEIGHT - Math.round(y)) - Math.round(height), Math.round(width), Math.round(height));
		renderable.render();
		GL11.glDisable(GL11.GL_SCISSOR_TEST);
	}

Once in the renderable.render() call I do all the rendering :slight_smile:

Renderable is an interface:

public interface Renderable {
	
	public void render();

}

Settings.HEIGHT stores the height and then x, y, width, and height are the region to crop to.

CopyableCougar4

#10

Perhaps you should look at Dermetfan’s video on this. He will show you how to create and use a nine-patch in libgdx.