Search code examples
user-interfacelibgdxtransparenttouchpad

Libgdx drawing semi-transparent circle on pixmap


I am currently working on an android game using libgdx and would like to add a joystick to its interface. For this I use the built-in touchpad class. Untill now I have used external images for rendering the background and joystick. Now, I would like to dynamically draw the background of the joystick. This would make it possible to make the background of the joystick semi-transparent and to change the color of the background dynamically.

To do this, I implemented the following:

public class Joystick{
    private Touchpad touchpad;
    private static TouchpadStyle touchpadStyle;
    private Skin touchpadSkin;

    public Joystick(GameWorld world, GuiComponent gui) {
        touchpadSkin = new Skin();
        touchpadSkin.add("touchKnob", new Texture("data/touchKnob.png"));

        touchpadStyle = new TouchpadStyle();
        touchpadStyle.knob = touchpadSkin.getDrawable("touchKnob");;


        Pixmap background = new Pixmap(200, 200, Format.RGBA8888);
        background.setColor(1, 1, 1, .6f);
        background.fillCircle(100, 100, 100);
        touchpadStyle.background = new TextureRegionDrawable(new TextureRegion(new Texture(background)));

        touchpad = new Touchpad(10, touchpadStyle);
        touchpad.setBounds(15, 15, 200, 200);

        gui.inputStage.addActor(touchpad);
    }
}

As you can see, this code provides a joystick with a semi-transparent background: Joystick with semi-transparent background

However, this background has some inexplicable lines that are not transparent. Does anybody know what causes this? I thought it could have something to do with the format of the pixmap, but after trying with some other formats, there was not much improvement.


Solution

  • I finally solved this problem by disabling the blending of the pixmap.

    Pixmap.setBlending(Blending.None);