1
votes

I'm programming my first project with libGDX and I'm currently trying to draw a transparent circle with an opaque border on top of the background. It's working as desired in the android an the desktop project. The html project, however, doesn't render the border of the circle.

no border on the html project

The circle is a texture which is created with a pixmap. As there is no possibility to set the strokewidth for the drawCircle method (why isn't there any?; see http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Pixmap.html#drawCircle-int-int-int-), I'm drawing the border as a filledCircle with another circle on top of it:

  1. creating the texture

    Pixmap pixmap = new Pixmap(radius * 2 + 1, radius * 2 + 1, Format.RGBA8888); Pixmap.setBlending(Blending.None); pixmap.setColor(new Color(1,1,1,1)); pixmap.fillCircle(radius, radius, radius); pixmap.setColor(new Color(0, 0, 0, 0.6f); pixmap.fillCircle(radius, radius, radius - borderWidth); texture = new Texture(pixmap); texture.setFilter(TextureFilter.Linear, TextureFilter.Linear); pixmap.dispose();

  2. drawing

    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT  (Gdx.graphics.getBufferFormat().coverageSampling ? GL20.GL_COVERAGE_BUFFER_BIT_NV : 0));
    
    // tell the camera to update its matrices.
    camera.update();
    game.spriteBatch.setProjectionMatrix(camera.combined);
    
    // begin the drawing process
    game.spriteBatch.begin();
    drawBackground();
    
    //circle gets drawn here
    game.spriteBatch.draw(texture, 50, 50);
    
    //end drawing process
    game.spriteBatch.end();
    

Any ideas?

Edit: Tested on Chrome (35.0.1916.153) and Firefox (30.0) on Ubuntu 14.04. Can anybody reproduce this problem?

1
If you generate the pixmap without the black circle, does a solid white disk show up at all? (I'm suspecting not.) - P.T.
The solid white disk shows up when I leave out the black circle. - Kevin
This might be a bug in the GWT backend that implements Pixmap drawing. You might get a better answer/resolution on the badlogic forums. (Do come back and put your answer here if you get a good one, though!) - P.T.
I already posted my problem there but I haven't got any reply so far. - Kevin

1 Answers

0
votes

You need to disable blending before drawing a circle:

pixmap.setBlending(Pixmap.Blending.None);
pixmap.fillCircle(radius, radius, radius);