How do I make a ProgressBar work in LibGDX?

Question

I'm trying to understand how to use a ProgressBar in LibGDX.

I have created the bar but I don't know how to make it works. I want to duplicate the knob in order to fill the bar(background line) in 60 seconds. I know how to manage about the time, but there is no method in ProgressBar's class to fill the bar with the knob. At least, I haven't seen it (or I don't understand how, possibly). Here is my code:

ProgressBar's code:

skin = new Skin();
Pixmap pixmap = new Pixmap(10, 10, Format.RGBA8888);
pixmap.setColor(Color.WHITE);
pixmap.fill();
skin.add("white", new Texture(pixmap));

textureBar = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("barGreen_horizontalMid.png"))));
barStyle = new ProgressBarStyle(skin.newDrawable("white", Color.DARK_GRAY), textureBar);
bar = new ProgressBar(0, 10, 0.5f, false, barStyle);
bar.setPosition(10, 10);
bar.setSize(290, bar.getPrefHeight());
bar.setAnimateDuration(2);
stage.addActor(bar);

I know that I can move the knob with the method setValue(float). But what I want is to fill bar with the knob's texture. Here is a bar's screenshot and the knob.

enter image description here

Can anyone help me to understand this? Thanks in advance.

score 19 · Answer 1 · answered Aug 08 '14 at 02:22

I was having the same problem, and finally found out.

You have to set a style for the knobBefore attribute to achieve what you want. Try this:

barStyle = new ProgressBarStyle(skin.newDrawable("white", Color.DARK_GRAY), textureBar);
barStyle.knobBefore = barStyle.knob;
bar = new ProgressBar(0, 10, 0.5f, false, barStyle);

Hope this helps!

score 1 · Answer 2 · answered Jun 26 '14 at 17:20

1

Try to use setValue( float value) function. Also set stepsize and min/max values before that.

answered Jun 26 '14 at 17:20

AcarX

289
2
10

1

Thank you for your answer. I know that I have to move the knob's position with `setValue(float)` in `render()`. What I want is to duplicate the knob in order to fill the `ProgressBar`. Can you help me, please? – adrianoubk Jun 27 '14 at 10:00
Okay, let's say that your minValue is 0 and maxValue is 100 and stepsize is 1. and you used this: setValue(10). and when you update the progress bar it should be %10. I personally don't think there is enough information about ProgressBar class. So if you would want to create your own progressbar class, check this example: https://github.com/Matsemann/libgdx-loading-screen – AcarX Jun 27 '14 at 10:33
1

Yes, I understand you but I want to use `ProgressBar` class which is in Scene2D package. I have updated my question with a screenshot and code. – adrianoubk Jun 27 '14 at 10:50
1

I don't think ProgressBar class has that feature. However, you might be able to do it by changing TextureRegion( Texture ) to TextureRegion( Texture texture, float width, float height) and change width value by time. Also you need to change the "barGreen_horizontalMid.png" to a fully loaded bar. – AcarX Jun 27 '14 at 11:35

score 0 · Answer 3 · answered Jan 06 '15 at 19:10

When your using Screens, you don't have the built in ProgressBar available so instead you can use a ShapeRenderer for drawing your ProgressBar like this:

import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;
import com.badlogic.gdx.math.Rectangle;
import com.badlogic.gdx.scenes.scene2d.ui.ProgressBar;
import com.badlogic.gdx.scenes.scene2d.ui.ProgressBar.ProgressBarStyle;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable;
import com.badlogic.gdx.utils.TimeUtils;

public class LoadingScreen implements Screen {
    private MyGame mGame;
    private BitmapFont bf_loadProgress;
    private long progress = 0;
    private long startTime = 0;
    private ShapeRenderer mShapeRenderer;
    private OrthographicCamera camera;
    private final int screenWidth = 800, screenHeight = 480;

    public LoadingScreen(Game game) {
        mGame = (MyGame) game;
        bf_loadProgress = new BitmapFont();
        bf_loadProgress.setScale(2, 1);
        mShapeRenderer = new ShapeRenderer();
        startTime = TimeUtils.nanoTime();
        initCamera();
    }

    private void initCamera() {
        camera = new OrthographicCamera();
        camera.setToOrtho(false, screenWidth, screenHeight);
        camera.update();

    }

    @Override
    public void show() {
        // TODO Auto-generated method stub

    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(0, 0, 0.2f, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        showLoadProgress();
    }

    /**
     * Show progress that updates after every half second "0.5 sec"
     */
    private void showLoadProgress() {

        long currentTimeStamp = TimeUtils.nanoTime();
        if (currentTimeStamp - startTime > TimeUtils.millisToNanos(500)) {
            startTime = currentTimeStamp;
            progress = progress + 10;
        }
        // Width of progress bar on screen relevant to Screen width
        float progressBarWidth = (screenWidth / 100) * progress;

        mGame.getBatch().setProjectionMatrix(camera.combined);
        mGame.getBatch().begin();
        bf_loadProgress.draw(mGame.getBatch(), "Loading " + progress + " / " + 100, 10, 40);
        mGame.getBatch().end();

        mShapeRenderer.setProjectionMatrix(camera.combined);
        mShapeRenderer.begin(ShapeType.Filled);
        mShapeRenderer.setColor(Color.YELLOW);
        mShapeRenderer.rect(0, 10, progressBarWidth, 10);
        mShapeRenderer.end();
        if (progress == 100)
            moveToMenuScreen();

    }

    /**
     * Move to menu screen after progress reaches 100%
     */
    private void moveToMenuScreen() {
        mGame.setScreen(new MenuScreen(mGame));
        dispose();
    }

    @Override
    public void resize(int width, int height) {
        // TODO Auto-generated method stub

    }

    @Override
    public void pause() {
        // TODO Auto-generated method stub

    }

    @Override
    public void resume() {
        // TODO Auto-generated method stub

    }

    @Override
    public void hide() {
        // TODO Auto-generated method stub

    }

    @Override
    public void dispose() {
        bf_loadProgress.dispose();
        mShapeRenderer.dispose();
    }

}

This draws a progressbar at the bottom of the screen and also show you the progress in form of text.

Hope this helps :)

How do I make a ProgressBar work in LibGDX?

3 Answers3

Linked