CODEWITHSUNDEEP
javaandroidlibgdxnine-patchscene2d
user3765704
user3765704

Reputation: 31

How to create a healthbar in Libgdx?

I have been wondering how I would go by making a health bar in libgdx/java. I am looking into a Shape Renderer thinking I can use a filled shape to create a health bar, though I am not sure on how to make an approach in that direction. On the other hand I have been looking into using scene2D and NinePatches to create a healthbar for the game. I have tried to use a NinePatch/Scene2D by looking up websites on google, though it seems when I add the code I always get an issue when I try to render it to my screen. So if anybody can help me create a functional health bar in libgdx using whatever method, I would be extremely thankful. Thank you.

I cannot post pictures yet, because I have not posted 10 posts. So here is the link http://gyazo.com/6650f3d820f31c99c3f8061ebed0bdec. Sorry

Upvotes: 2

Views: 6946

Answers (2)

Shersha Fn
Shersha Fn

Reputation: 1571

This is how you can do it ,implement logic your self

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Pixmap;
import com.badlogic.gdx.graphics.Pixmap.Format;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;


public class MyGdxGame extends ApplicationAdapter {
    SpriteBatch batch;
     int i=0;
    Texture texture,texture2;
    @Override
    public void create () {
        batch = new SpriteBatch();

        initTestObjects() ;
    }

    @Override
    public void render () {
        Gdx.gl.glClearColor(0, 0, 0, 0);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        batch.begin();


        batch.draw(texture2,100,100,300,20);
    batch.draw(texture,100,100,i,20);
    if(i>300)
    {
        i=0;
    }
    i++;

        batch.end();
    }
    private void initTestObjects() {

        int width =1 ;
        int height = 1;
        Pixmap pixmap = createProceduralPixmap(width, height,0,1,0);
        Pixmap pixmap2 = createProceduralPixmap(width, height,1,0,0);

    texture = new Texture(pixmap);
    texture2 = new Texture(pixmap2);



        }



    private Pixmap createProceduralPixmap (int width, int height,int r,int g,int b) {
        Pixmap pixmap = new Pixmap(width, height, Format.RGBA8888);

        pixmap.setColor(r, g, b, 1);
        pixmap.fill();

        return pixmap;
        }
}

Upvotes: 1

Madmenyo
Madmenyo

Reputation: 8584

I don't have any experience with Scene2D and stages but here is how i would do a simple healthbar:

  • Create a rectangle and fill this with a color or texture.
  • When a player loses HP shorten that rectangle by the same percentage as the HP lost.
  • Create a basic Orthographic camera with the height/width of the screen. I usually call this viewportCam.
  • Below all the other draw logic you change the SpriteBatch too spriteBatch(viewportCam.Combined)
  • Within this spritebatch you draw the healthbar.
public void Draw()
{
    spriteBatch(normalCam.combined);
    spriteBatch.begin();
    //Normal draw logic.
    spriteBatch.end();

    spriteBatch(viewportCam.combined);
    spriteBatch.begin();
    //Draw UI elements last so the will be drawn on top of the rest.
    spriteBatch.end();
}
  • If you draw a slightly larger rectangle behind the healthbar you have yourself a border.
  • You can change color depending on how much percentage health is left.

Edit

Just came across this again and currently using another method. I a ninepatch from a 1 pixel wide red gradient. health = new NinePatch(gradient, 0, 0, 0, 0) this makes sure no artifacts occur while stretching it. From here I just calculate how long it needs to be and draw it.

width = currentHealth / totalHealth * totalBarWidth;

Now you can draw it anywhere you want.

health.draw(batch, 10, 10, width, gradient.getHeight);

If you want somekind of container for it you setup a ninepatch for it and draw it before the dynamic health in the background. So let's say the container is 2 bigger at top/bottom and 5 at left/right.

container = new NinePatch(containerRegion, 5, 5, 2, 2);
//Offset it by the dynamic bar, let's say the gradient is 4 high.
container.draw(batch, 5, 8, totalBarWidth + 10, 8);
health.draw(batch, 10, 10, width, 4);

I "hardcoded" the container 5 to the left and made it 10 longer so it fits horizontally. Vertically I lowered it by 2 and made it 8 high to fit the bar perfectly.

Upvotes: 1

Related Questions