LibGDX Image Outline Help

Question

As I was working on some art for my project, I decided that I should add an outline around some objects.

So I tried my method; which was to create a second image slightly larger than the first, make it all black, then draw it with a slight offset to the original image.

For a little bit, everything was fine and dandy, but then I went and tried it on some different shaped images, and everything went downhill.

Here are the images for the first outline, the good one:

And then when I tried something irregular, this happened:

So hopefully you can see my problem, but if the image is to small, then I can try describe it. Ok, when I draw an "outline" around my image, it turns out normal. Yet, when I try draw an outline around my more irregular image, the outline doesn't reach all the edges of the image. Only some are visible.

What I want is to be able to have the outline all the way around the edges of the image, like the first image.

Is there a better way to draw outlines? Or is this the best way, if so, what am I doing wrong to get this outcome?

Any help is appreciated,

Thanks!

Answer 1

If you're going to use two images anyways, why don't you simply just have one image without an outline and one with an outline and just swap between them?

As for other methods of drawing an outline, it can be done using multiple methods. If you're going to draw an outline on simple textures (let's say a square) use a ShapeRenderer (docs & tutorial) and do something like this (pseudo, kinda).

//Create a variable
ShapeRenderer shapeRenderer = new ShapeRenderer(); //New shape renderer.

//Then in your render method AFTER rendering your image.
shapeRenderer.setProjectionMatrix(camera.combined); //The combined matrix from your camera object.
shapeRenderer.begin(ShapeType.Line); //We wish to draw simple lines only.
shapeRenderer.setColor(Color.BLACK); //Any color you want.
shapeRenderer.rect(image.x, image.y, image.width, image.height); //Draw a rectangle around our image.
shapeRenderer.end(); //Stop the renderer.

This will draw a box outline on your image. If you want the box to not obscure any part of your image you just have to offset the co-ordinates and increase the size of the box by one pixel.

For drawing pixel perfect borders you should look into the Pixmap class (tutorial | docs) or OpenGL shaders (tutorial | use google and SO for help).

Using one of these methods you can decide what pixels are non-transparent, and then paint the neighboring pixels black.