2
\$\begingroup\$

I am currently working on a dialog window for my android game using libgdx. This dialog window contains a collection of labels and buttons, but should also contain an image. The image represents the "remaining health indicator", i.e. an empty indicator with a symbol indicating the health of the player. This indicator has to be filled with a colored rectangle representing the remaining amount of health (see screenshot below). enter image description here

In order to render this on a dialog of libgdx, I have to draw an image and a colored rectangle (the red rectangle indicating the real amount of remaining health). I know that the dialog supports the rendering of images, but I don't know how to first draw the rectangle.

This is the code I have so far:

public FuelFacilityDialog(GameWorld world, GuiComponent gui) { super("Health check", gui.defaultSkin);

    this.world = world;
    this.gui = gui;

    setModal(true);
    setMovable(false);
    setResizable(false);

    Image healthIndicator = new Image();
    Button button1   = new TextButton("heal", gui.defaultSkin);
    Button button4   = new TextButton("Exit", gui.defaultSkin);

    healthIndicator.setDrawable(new TextureRegionDrawable(AssetLoader.healthIndicatorV));
    healthIndicator.setScaling(Scaling.fit);
    setObject(button1, true);
    setObject(button4, false);

    Table imageTable = new Table();
    Table buttonTable = new Table();

    imageTable.add(healthIndicator).width(100).height(200);
    buttonTable.add(button1).width(100).height(50).expandY();

    this.getContentTable().padTop(20);
    this.getContentTable().padBottom(20);
    this.getContentTable().add(imageTable);
    this.getContentTable().add(buttonTable).height(200);
    getButtonTable().add(button2);
}
\$\endgroup\$
1
\$\begingroup\$

I have found the answer for my problem. In order to draw an image and a shape, one can use a pixmap. It is possible to first create a pixmap on which you draw a rectangle. Then, you create another pixmap on which you draw the image. Both pixmap then can be combined by drawing one pixmap onto the other.

This is the code I use to build an image containing a rectangle indicating the actual health level and drawing the indicator image on top of it.

private Image getHealthIndicatorImage() {
        Image indicatorImage = new Image();
        Pixmap healthIndicator = new Pixmap(AssetLoader.healthIndicatorV);
        Pixmap healthLevel = new Pixmap(healthIndicator.getWidth(), healthIndicator.getHeight(), Format.RGBA8888);

        healthLevel.setColor(Config.InstrumentPanel.healthInstrumentColor1);
        healthLevel.fillRectangle(0, 0, 50, 50);
        healthLevel.drawPixmap(healthIndicator, 0, 0);

        indicatorImage.setDrawable(new TextureRegionDrawable(new TextureRegion(new Texture(healthLevel))));
        indicatorImage.setScaling(Scaling.fit);

        return indicatorImage;
    }
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.