Percent Bar
1. Percent Bar
2. Starting off
3. Updating the Bar
4. Showing the Bar
5. Setting the Location of the Bar
1) Percent Bar
The Percent bar, or more commonly called a loading bar or life bar, is a bar that graphically shows a percentage. Many times you'll see a loading bar when you first start a game, which shows you how long it will take for the art and sound assets to finish loading. These bars are also commonly used in games where you start off with "100%" life, and the bar is used to show how much life you have left.
So, for example, if green is used for what you "have" and red is the default of what is gone, different bars can look like these:
Bar at 100%
Bar at 50%
Bar at 30%
Although libgdx has a built in bar called the ProgressBar, I decided to build my own as I didn't need the built in skin functionality. In my bar, I simply use solid colors for the bar.
2) Starting off
First thing we do is create the class and create and initialize the vars we'll use. That code is below:
public class PercentBar {
ShapeRenderer bar; // the full length bar
float barWidth, barHeight;
float barX, barY;
float percent;
public PercentBar(float width, float height) {
bar = new ShapeRenderer();
barWidth = width;
barHeight = height;
}
This is all pretty straightforward except for the ShapeRenderer. The ShapeRenderer does what it says: Renders a shape. Once you have one created, you can control the height, width, location on the screen and the color among other things. We'll use this to create the different parts of the bar.
3) Updating the Bar
Whenever we need to update the bar, we'll call an update method. Here are the 2 versions we'll use:
public void update(float perc) {
percent = perc;
} // END update
public void update(float current, float total) {
percent = (total-current) / total;
} // END update
The first version simply sets the localvar "percent" to whatever percentage is passed in. The second version takes the current amount and the total amount and calculates the percentage and sets it in the class.
4) Showing the Bar
Finally, we display the bar based on the percent value that has been set in the class. So we'll first create a "show" method as follows:
public void showBar() {
// show "blank" part of bar
show(1, Color.RED, ShapeType.Filled);
// show "filled" part of bar
show(percent, Color.GREEN, ShapeType.Filled);
// show outline of bar
show(1, Color.BLACK, ShapeType.Line);
} // END show bar
What this does is determine the width of the bar based on the total bar width and the percentage passed in. It then sets the ShapeType, which is either "Filled", "Line", or "Point", sets the color, and then renders the bar based on the dimensions and location.
Now that we have this created, we'll call it 3 times: Once to show the "empty" part of the bar, once to show the "full" part of the bar based on the percentage, and once to show a border around the bar. Here's our method that we'll call when we want to show the current state of the bar:
private void show(float perc, Color color, ShapeType type) {
float percWidth = barWidth * perc;
bar.begin(type);
bar.setColor(color);
bar.rect(barX, barY, percWidth, barHeight);
bar.end();
} // END show
This is what we call in our Renderer class. Here's how we call it from the Renderer:
bar.showBar();
5) Setting the Location of the Bar
Finally, we create a method to set the location of the bar. Here's the code to set the location:
public void setLocation(float x, float y) {
barX = x;
barY = y;
} // END setLocation
And here's what we do to set the location:
bar.setLocation(480, 375);
And that's pretty much it! A simple bar that you can use in your games and a brief intro to using the ShapeRenderer.